The Vertical Element module, available from Uncode 2.4.0, allows you to insert in your designs vertical texts (or social icons) to create creative layouts that go out of the ordinary. 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 a modern Call to Action 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.
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.
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).
How to remove Vertical Elements from Demo Contents
If you are new to Uncode, have installed Demo Contents, and use one of the pages that use Vertical Elements, please note that Vertical Elements are located inside the external Footer Content Block.
If you want to remove or modify the Vertical Elements, you have to go to Page Options → Footer and open the Content Block that generates the Footer Area.
Note that as explained in this documentation, Vertical Elements are placed in the Footer because they will be present on all pages of the site (since the Footer is repeated on all pages).