How to use the widget and add content below the cover image?

01

If you would like to have some content over the cover image, as in the example above, it is advised to use our Browser Centering Widget with the Responsive Cover Image Widget.

If you would like to have some content below the image, the distance of the content from the image is determined by the distance of the content from the top of the website.

For example, if you want your page content to be at a distance of 125px from the image, as in this example, you should put it at a distance of 125px from the top, that is, Y = 125px

Drag the 'Responsive Cover Image' widget from the Library Panel (Window > Library) and place onto your Adobe Muse website. It can be placed off-canvas.

Open widget options. In 'Image' section, click on 'Add File' to browse and add a cover image. In this section, you can also set the responsive height percentage of the cover image.

In 'Overlay' section, you can give your image a color or mesh overlay. In the example above, the image does not have any color overlay (opacity = 0), but it has a very subtle mesh overlay. Just copy and paste the Base64 code of the pattern from patternify.com and paste it in the widget options. Be sure to enable the 'Enable Mesh Overlay' checkbox if you are adding a mesh overlay.

In the last section within widget options - 'Breakpoint', you can choose to disable the cover image at and below a specific breakpoint. In this example, we have not disabled it at any breakpoint.

Welcome to the Responsive Cover Image Widget 1.0

Add a responsive cover image to your Adobe Muse website with the Responsive Cover Image Widget from Muse For You. Scroll Down to see how to use the widget.

Make Better Websites, Starting Today.

All access pass for only $49/year.

Have questions about our products?

We are here to help.

Tutorials