The Complex shortcodes were named this way because they could stand both as independent design elements (as Basic Items are) and could also be involved in page layouts (as Layout Tools do).
As Layout Tools, this type of shortcodes have the specific feature for allowing any kind of content to be added, edited and embellished inside them, by using any tools the WordPress Editor comes with and any Shortcodes Ombra Theme offer.
There are three complex shortcodes: Accordion, Custom Font and Tabs.
Summary
Accordions are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container. The Accordion has the following options:
- Title — title label for accordion heading section
- Content — text for accordion content section
- Multi expand — allows to open more than one accordion at a time. If disabled, just one accordion could be opened at a time
- Allow all closed — allows to close all the accordions. If disabled, there will be at least one accordion opened
- CSS class — in case there is a need to add more style rules
Complex typography actions could be taken due to Custom Content shortcode, especially when you need to use text styling that no one of predefined headings or paragraph styles offer. Custom Content shortcode has the following options:
- Font size — font size in pixels. When font-size is set to Inherit, then Custom Content Shortcode inherits the font-size of parent containers, like Body Text is (which is set up in Theme Options → Typography)
- Font weight — how light or bold the font looks
- Letter spacing — the space between letters, measured in pixels
- Line height — define the amount of space between lines of text
- Text decoration — decorate text with different positioned lines relative to text: underline, overline and line-through
- Text color — color of text
- Paddings — are used to generate space around Custom Font.
- Margins — are used to generate space around Custom Font outside Paddings. You could also use negative values in order to get the Row out of default layout.
- Borders — are used to generate boundaries, with different widths, around Custom Font, between Paddings and Margins.
- Borders color — choose a specific color for borders
- Background color — choose a specific color for borders
- Position — useful when you want to position Row element above other elements. If Enabled, the following options are available:
- Z-index
- Top
- Right
- Bottom
- Left
- CSS class — if it’s necessary to add more style rules
Paddings, Margins and Borders are used to generate custom spacing on all the sides of Row shortcode: top, right, bottom or left. They are measured in pixels.
Z-index helps you to decide which element stands above another. An element with higher Z-index will stay above another one with lower Z-index. It includes values from -90 to 90.
Tabs are elements that help you organize and navigate multiple elements in a single container. They can be used for switching between items in the container. The Tabs has the following options:
- Title — title label for tab heading section
- Content — text for tab content section
- CSS class — in case there is a need to add more style rules