These can be used in the natural flow of the layout (with different positioning options) or the "fixed" position (i.e., absolutely on the viewport).
With these options, it is possible to enrich the design of your sections with new typographical elements, but it is also possible to create modern Call to Actions that will be presented on the side of your page.
Please note that the Vertical Element is an element inserted in a Column, so it inherits the Skin, possible Font Family, and optionally the visibility on mobile devices.
Here are the options available to decide the positioning of the elements and other properties, screenshot :
- Fixed: Applies the fixed and absolute positioning to the viewport;
- Vertical: Specify the vertical alignment;
- Position: Specifies the position;
- Flip: Specifies the orientation;
- Horizontal position: Specifies the horizontal position of the elements;
- Vertical position: Specifies the vertical position of the elements if this is different from Middle;
- Custom Z-Index: Sets a custom z-index to ensure the element's visibility (only if not fixed);
- Typography: In this tab, you can define all typography controls.
For the 'Fixed' option, there are several effects and animations that allow the vertical elements to be used in different situations:
- Show After Scroll: Activate to show the element after scrolling the viewport;
- Difference: Applies the Blend mode "Difference", useful to make an element always visible, especially recommended on white and black layouts.
Same Elements on all pages
To create a fixed vertical Call to Action present on all the pages of your site, we suggest inserting your Vertical Element module inside the Footer Widget Content Block, or any other Content Block element repeated on all the pages of the site. you can place these elements in an existing column of your footer or for more control in a dedicated Row:
In your Footer Widget Area please:
- Create a new Row;
- Insert a Vertical Element;
- Collapse the Row height (setting 0 on the Custom Padding value) so that the Row does not affect the layout;
- Set the 'Fixed' option;
- Set, if necessary, the Column options (Skin, Font, Responsive Visibility).
Please note that when using the Frontend Editor and selecting the 'Safe Mode,' possible 'Fixed' elements will be placed according to their normal layout to ensure usability in every situation.