Elements Overview
With Rows & Columns serving as the structure for any layout in Fusion, Elements serve as the drag-and-droppable and customizable building blocks that exist inside of them for all of the content that exists on any given page.
The Fusion core plugin has been design to be fast, light, and easily expandable. The Row, Tabs, Text, Code, and Component Elements are available in the core, but a wide variety of Elements are available as extension plugins so that you may choose which functionality you would like to add based on the needs of your website.
Activating an Element Extension Plugin
Like Columns, Elements can be identified by their horizontal bars. They are labeled in the middle with the Element name; these labels can also be customized using the “Admin Label” field in the “Advanced” options for any Element. The only exception being Rows, which can be identified by their unique vertical bars.
Renaming the Admin Label of any Element
In total, 19 Elements are currently available as part of the Fusion core and our own extension plugins. View the articles for each one for more specific details on their functionality:
Core Elements
Extension Elements
- Divider
- Button
- Card
- Gallery
- Image
- Video
- Menu
- Contact Form
- Map
- Blog
- Post Details
- Sidebar
- Comments
- Copyright
Adding an Element to a Page
At the bottom of every Column in Fusion is a lightly colored bar with a centred circular plus button contained within it. Click anywhere on this bar to open a modal window containing a grid of available Elements.
Click on the Element you wish to add and it will be added to the page above the plus button bar in the Column you clicked on previously.
Editing an Element on a Page
To edit an existing Element on a page, click the pencil icon aligned along the right-hand side of the Element. Alternatively, click the three dots along the left-hand side of the Element (the Element Options button) and choose “Edit” from the menu that appears. A modal window will appear containing all of the options for that particular Element. Element options are generally split into three tabs: General, Advanced, and Style.
The “General” tab will contain the most essential options to making the Element work or output anything on the front-end. In the Text Element for example, the text field itself is included in the General tab for this reason.
The “Advanced” tab can contain more specific, perhaps less frequently used options for any given Element. Some Elements–like the Gallery Element–have more Advanced options than others, and the visibility of some Advanced options may be dependent on selections made within the General tab. For example, the Gallery Element has a different set of Advanced options for each “Type” that is set in the General tab.
The “Style” tab contains a wide variety of customization options for styling each Element, including Margin, Padding, Mobile Margin/Padding, Text Align, Font Size, Text Color, Background Color, Background Color Opacity, mobile visibility settings, and CSS Classes.
Learn More About Element Style Options
Deleting an Element
Within the “Element Options” menu that is accessible by clicking on the three dots icon along the left-hand side of each Element, click the “Delete” option to remove the Element from the page.
Duplicating an Element
Within the “Element Options” menu that is accessible by clicking on the three dots icon along the left-hand side of each Element, click the “Duplicate” option to create a copy of the Element. The duplicated will appear beneath the original one and will contain the same content and options as were set in the original.
Moving an Element on a Page
Elements can be dragged-and-dropped to any Column on a page. To move an Element, simply hover your cursor over any area of the Element that isn’t the Element Options button on the left-side, the Edit Element button along the right-hand side, the text preview in the case of the Text Element, or the tabs in the case of the Tabs Element. Your cursor should change to a four-way arrow. Then, click and drag the Element to wherever you want on the page.
Each Element is labeled within the Fusion interface with its own name by default. This label can be renamed to assist in identifying the content of specific Elements; this is especially useful if more than one person will be editing any given page. The page creator might have an understanding of what is contained in each Element because they built it, but a new editor may have to compare the front- and back-end of the page to figure out the contents of each Element.
Admin Label
To rename an Element, open the options for it and navigate to the “Advanced” tab. Here, you will find the “Admin Label” field. Input the new label here.
Activating an Element Extension Plugin
Not all available Fusion Elements are actively installed by default on a website. As shown earlier in this article, there is a wide array of Elements to choose from, but only a few are part of the Fusion core (Row, Tabs, Text, Code, and Component). To activate an Element Extension Plugin, follow this step-by-step guide:
Activating New Plugins
1. To activate one of the Elements that is not part of the Fusion core (like “Button”, “Gallery”, or “Contact Form”), navigate to the Plugins > Add New page in the WordPress Dashboard.
2. Use the “Search Plugins” bar in the top right to search for any of the available Fusion Element extension plugins.
3. Once you’ve found the one you’d like to install, click “Install Now” in the top right of the block it belongs to.
Managing Installed Plugins
On the Plugins > Installed Plugins page in the WordPress Dashboard, you can review any of your installed plugins and activate or deactivate them as is necessary.
Creating New Elements (Developers)
The Fusion core plugin has been design to be fast, light, and easily expandable. If you are a developer, it is easy to add brand new custom Elements to fit your needs.