In Semplice, a Cover is a header section at the top of your project or page.
It always occupies 100% of the screen height, and allows for additional customizations such as a parallax effect or background zoom. You can add your covers to a Cover Slider, which pulls in all cover images and slides through them on your page.
By default, the Cover section also features a scroll-down arrow the user can use to quickly view the content below the Cover section.
To create a cover, follow these steps.
Making the Cover visible
At the top of the content editor, click 'Cover' and choose 'Visible'.
Select preset or start from scratch
Our presets that's available in Semplice 5 offer you the most popular cover layout, and you can add them in seconds. Simply select one, add your own content and done!
Upload media or add content
If you like to start from scratch, start from uploading an image or a self-hosted video for your cover background. You can also add any content to a Cover just like you would add content to standard section.
Customizing the Cover
Under Options in the editor pop-up, you can adjust your Cover effects and styling. You can also add custom styling for your 'View Project' buttons that will display in the CoverSlider.
Custom Effects and Displacement Maps
You can add a CoverZoom effect to your background image to have it slowly zoom on screen. You can also add a parallax effect to the background image in the Cover options.
In Semplice 5, we've introduced an all-new displacement map effect you can add to your Cover section. More on displacement maps here.
With the introduction of Semplice 5, we've also added a tilt effect. If enabled, all of your Cover section content will move with your mouse movements and give a three-dimensional effect to your Cover section.
Adding content
You can add content to your Cover section like any other section in Semplice. Keep in mind, though, that Cover sections are set to 100% of the viewport height and excessive content will get cut off for mobile devices if the content extends outside the viewport bounds.
Adding your covers to a CoverSlider
After you've built your covers, you can add a CoverSlider to any page as a way to showcase your projects. To create a cover slider, follow this guide.
Artwork credit: Pawel Nolbert