Styles

In this section, you can change the style and appearance of several features in the theme.

Enable appearance effect

Activate the option to add a bottom-up effect of content revealing in sections on every page. The floating content loading works on scrolling down the page only once when landing on the page:

Images desktop hover animation

To add the hover animation to images in the Mega Menu of the Header on the desktop, use the provided drop-down. Here one can decide if to apply the "Zoom in" or "Zoom out" animation. Or disable the hover effect by selecting the "None" option.

Card image desktop hover animation

In the drop-down, decide whether to display the hover animation for the product cards on collections pages and collections displayed in the sections. The theme allows activating one of the options: "Zoom in" or "Zoom out". This functionality works only on the desktop.

The "None" option disables using the zooming effect on the image card.

Banner image desktop hover animation

If you applied the "Inherit global settings" option in the sections that provide the "Desktop hover animation" drop-down, you can apply the hover animation effect to the banner images in bulk for all the required sections.

If you need to add an animation inside the image container, choose the suggested option from the list. The options "Zoom in" and "Zoom out" place the zooming effect to enlarge or decrease an image on the mouse hover. You can activate the opacity over the image by choosing "Add overlay opacity" and selecting a color for the "Image overlay background" or "Image overlay gradient" (in each section). To use this option, make sure that the "Image overlay opacity" is set up to be transparent (in each section). The overlay opacity and zooming effect on an image can be achieved with an active "Zoom in, add overlay opacity" or "Zoom out, add overlay opacity". The option "None" deactivates the animation.

You can read more about the described options on the following help page.

Images border radius

The image border radius can be set on a scale from 0 pixels to 20 pixels.

Check the following examples to view the difference in settings:

Square corners

Round corners

Input and button border radius

Change the border radius of buttons and input fields from 0 pixels to 40 pixels.

In the following examples, you can view how the described settings might display on a desktop and mobile:

Desktop

Mobile

Enable fixed effect for the footer

Note! To trigger the feature few requirements should be completed:

• This option works with the disabled Fullwidth logo. To hide the logo in the Footer, go to the corresponding static section and disable the "Show logo" option.

• The effect requires enough space on a page. If the content in the Header is too high or the browser window height is too small, the effect will be disabled automatically.

• The feature can be applied to the desktop only.

If you tick the checkbox, the content in the Footer points to be fixed on the desktop and can be covered by another section placed before the Footer when scrolling up from the very bottom of a page.