Create styled frame borders and custom page dividers to highlight content on your Adobe Muse pages with the Enhanced Stroke Builder widget. These are great for drawing attention to headlines or dividing content on the page.
The strokes are generated by the browser, so they are more versatile than using images. You can apply the stroke to all sides of an graphic or text frame or choose to apply them selectively. You can also mix different styles, colours and sizes on the same object.
Browse to the location where you downloaded the widget file. Extract the contents of the file. Double-click the .mulib file to import it into the Library. This will launch Muse if it's not already open.
Alternatively, once you’ve unarchived the file, you can import the widget into the library by clicking the Import Muse Library icon at the base of the Library Panel.
Once it's imported the new widget will appear in the Library panel as a folder containing one or more items..
Drag and drop the widget onto the workspace - it's best to place it outside of the canvas as the widget's frame can affect the other page elements.
The widget's option panel will open. The first setting is the Style Name. This can be set to either an existing style preset or a brand new style.
In this example we're creating a new style that will have a white dotted stroke at the top and bottom with no stroke at the sides, so we've named this style dots-top-and-bottom.
Note: spaces in the style name must be replaced by hyphens,
The next setting is the stroke style. We have 8 presets to choose from. Select Dotted from the drop-down menu.
The next setting is the Stroke Width, we'll leave this at its default setting of 1 for this example - its range is between 1 and 200 pixels.
Move on to the Stroke Colour. Click its colour chip to open the Color Picker. We're using an off-white preset here to match the text of the site.
As we only want a stroke on the top and the bottom of the rectangle, we need to turn the side strokes off. Click the Right Stroke Style dropdown and select None. There's no need to change the Stroke Width or Colour options, as the stroke will now be invisible.
Complete the style setup by changing the two remaining options; setting the Bottom Stroke the same as the top and the Left Stroke to None.
The stoke style isn't rendered live in the Design View, so we've added a checkbox to render a preview on the widget frame itself. Click the Show Preview checkbox to enable it.
Stretch out the widget's frame large enough to see the style preview. Click on the workspace to hide the widget's frame borders. We can now see our style as it will appear on the site.
Once we're happy that the style is as we expected, we can go back into the widget options and turn the preview off so it won't be visible on the live site.
Note: if we only need one or two instances of an item with the enhanced stroke, we can place the widget directly onto the page in preview mode, without the need to create a new style preset.
Now we have our widget configured, we can create the page element to apply it to.
Use the Rectangle tool to create a frame on the page. We're adding it around the block of text and images to act as a separator.
Unlike Muse's native stroke, the strokes generated by the widget won't be displayed if the rectangle has no fill – this is due to how Muse codes its frame elements, To get around this, we can fill the rectangle with the same colour as the page background. We could also use a text frame instead, since the strokes will be displayed without content.
The final stage is to create a new Graphic Style that corresponds to widget.
Make sure the rectangle we just created is still the active object. Create a new preset in the Graphic Styles panel. Double-click the new style to open its options dialog. Change the name to match the one we gave in the widget's options, dots-top-and-bottom.
With everything in place, we can preview the page in the browser, or in Preview within Muse.
Hover over the image to see a detailed inset.
We have tested the widget as thoroughly as possible. if you find that it doesn't work as expected, please let us know using the comments box below or contact us using the form on the home page.