Resources

Tools > Space Savers

On Screen

On-screen space savers are similar to off-screen ones, except that the viewer has an idea that the content is already on the page, just hidden, and they need to interact to reveal it. 

content toggle

This is a great space-saving feature that keeps things neat and simple. There is the UAE Content Toggle widget and the PAE Content Toggle widget, which is known as the Content Switcher in its documentation.

flip box

The main flipping widget is the 3D Hover Box. A slightly different effect (like a half flip) comes from the iHover Box. Serving a similar purpose but with no flipping (just overlay) is the Banner widget.

unfold (reveal)

There are two widgets for this: Unfold and Read More. Of these, the first one is by far the most powerful as you can use it with different widgets. The second one just unfolds standard content as per the Text Editor. The information you are reading now was made with the second widget, and as you can see, it is only revealing more text – nothing fancy.

tabs

This is a really neat way to present information. Your tabs can load templates, which means your design can be far more sophisticated than what tabs used to present (just text). Despite its awesome usefulness, we have found that there are some nuances to keep in mind. Firstly, the style of the Tabs widget on the page (e.g. default font colour) can override the style of the content from the template (that sits within the tab sections), so make sure you set styles (not defaults) within the template and set defaults (no styles) in the main widget on the page. Secondly, you might find that links don’t work within the content (description) of the Tabs widget. That’s because the template (with links) is called within the Tabs widget and therefore it is kind of ‘under’ it, as if there was a glass layer on top so your mouse/finger can’t make contact with the link. To make your links a priority (sit at the top of the stack), go to the template, select the linked widget, go to its Advanced tab and type a high number for its Z-index (like 15). The higher the number, the higher it will sit in the stack (not under other things on the same page). Thirdly, if you make changes to your template, you would expect those to be reflected on the main page where the template is called by the Tabs widget. This is true of some widgets but not the Tabs widget (regardless of cache clearance). You need to go into the Tabs widget, choose a different template for it, then re-choose the original template, and save the page. It should now show the updated version of the template. Lastly, if your Tabs widget is sitting inside a flexbox container, then your template should also have containers (as opposed to sections). A quick way to see if you have containers or sections is to look in the page structure window (also known as the navigator). Here is the tutorial for the Tabs widget.

accordion / FAQ

There are two options for this: Elementor Accordion and UAE FAQ Schema.

News ticker

The news ticker is not just for news headlines and stock prices. You can use this widget as you would any other space-saving widget, to tidy your page while adding something small but eye catching. See here for the tutorial.

alert box

An Alert Box is similar to a Modal Popup Box (see the Off-Canvas page) except that it is much more limited in its design features and it is not appearing off the page but clearly on it. The best part of an alert box is that it is dismissible, meaning visitors can get rid of it once they have read the message. It is often used for things like promotion notices. The tutorial is here.