elements 归档 - 第 9 页共 15 页

Highlight Element

The Highlight Element is a simple element, that allows you to highlight a section of content on your page. The Highlight Element is an Inline Element, which means it』s meant to be used in conjunction with existing text, and can only be accessed through the Avada Builder Element Generator, or through the Inline Editing function in Avada Live. See below to read more about this useful element.
IMPORTANT NOTE: As of Avada 7.4, the Highlight Element now also comes with a Gradient Font Color option.Vivamus at metus ut nunc condimentum gravida. Morbi imperdiet nisl et pellentesque molestie. Integer eu ligula at accumsan et a augue. You can also use any highlight color you want! Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Vivamus at metus ut nunc condimentum gravida. Morbi imperdiet nisl et pellentesque molestie. Integer eu ligula at accumsan et a augue. You can now apply a gradient font color as your highlight, or apply a Marker Style Background Style. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.,View Element Demo Page!,OverviewHow To Use The Element
How To Use The Element In Fusion Builder Live
Element OptionsGlobal OptionsUseful Links & Resources,How To Use The Highlight ElementNote. As stated above, the Highlight Element is an Inline Element, which means that you can access it through the Avada Builder Element Generator in the back-end builder, or via Inline Editing in Avada Live. This Element can be used in all Elements that allow text editing in the Visual Editor and that therefore have access to the Avada Builder Element Generator, or Inline Editing.
Background Highlight Method in Avada BuilderStep 1. Add a text based element via the Avada Builder, for example, the Text Block Element.
Step 2. Add your content as normal.
Step 3. Select the part of your text content that you want highlighted, and then select the Avada Builder Element Generator icon on the Visual Editor toolbar, as seen in the screenshot below.
Step 4. Select the Highlight Element. Choose your Background Style – Full, or Marker Style.
Step 5. Select your background color, whether you want rounded corners, and your highlight font color if you wish (leave empty to use an auto-calculated value).
Step 6. You will see the selected text to be highlighted in the Content box. When you are finished, click Insert.
Step 7. You are now back in the Text Block Element. When you are finished, click Save, and you are returned to your page. Preview to see your highlighted text.
Gradient Font Color Highlight Method In Avada BuilderStep 1. Add a text based element via the Avada Builder, for example, the Text Block Element.
Step 2. Add your content as normal.
Step 3. Select the part of your text content that you want highlighted, and then select the Avada Builder Element Generator icon on the Visual Editor toolbar, as seen in the screenshot below.
Step 4. Select the Highlight Element.
Step 5. Turn the Background option to No, and the Gradient Font Color option to Yes,.
Step 6. Set the Gradient Start and End Colors, as well as the Gradient Start and End Position, and the Gradient Type and Angle.
Step 7. You will see the selected text to be highlighted in the Content box. When you are finished, click Insert.
Step 7. You are now back in the Text Block Element. When you are finished, click Save, and you are returned to your page. Preview to see your highlighted text.
767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada,How To Use The Highlight Element In Avada Live
The Highlight Element Works in virtually the same way in Avada Live, only you can see the result as it happens. For color work, and adjusting gradients, this is a vastly better experience. Please see the Inline Elements document for more details on how Inline Elements work in Avada Live.,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Background – Select if you would like a highlight background or not.

Background Style – Select the background highlight style. Choose from either Full, or Marker Style.

Background Color – Pick a highlight background color.

Rounded Corners – Choose to have rounded corners.

Font Color – Pick a text-color for your highlight. Leave empty to use an auto-calculated value.
Gradient Font Color – Set to 「Yes」 to enable gradient font color.Gradient Start Color – Select start color for gradient.Gradient End Color – Select end color for gradient.Gradient Start Position – Select start position for gradient.Gradient End Position – Select end position for gradient.Gradient Type – Controls gradient type. Choose from Linear or Radial.Radial Direction – Select direction for radial gradient. Choose from Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center, or Center Bottom.Gradient Angle – Controls the gradient angle. In degrees.
Content – Add your content to be highlighted in this box (if it』s selected when you add the element, it will be added here automatically).

CSS Class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

CSS ID – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
View The Options ScreenGlobal OptionsThe Highlight Element does not have any global options.,Useful Links & Resources
Read more about Inline Elements Here
Read about how to use the Element Generator Here!

Image Select Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Image Select Field Element allows you to add a range of images to your form, that a user can then select from. You can add multiple images, control their size, allow users to select multiple or just a single image, have certain image pre-selected etc. There are many possible uses for this Element.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Image Select Field ElementThe Image Select Field Element allows you to add a range of images to your form, that a user can then select from.
Step 1. Create a new, or edit and existing Form in the Avada Form Builder.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose Image Select Field from the Form Elements tab.
Step 4. Go through the options to populate and configure your Image Select Field Element. There is a Child tab, where you add the images, and a Parent tab to set options. You can bulk upload images, set a label and a name, allow multiple selection of images, make the field required, add a tooltip, specify the size of the images, their padding and border size, as well as the inactive and active border color and radius, and whether your options are to be displayed stacked or floated.
Step 5. Once you have configured the Element, save your page.
Read below for a description of all element options.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element. You access the Form Builder Elements when adding an Element while editing a Form in the Avada Form Builder (Forms > Form Builder, from the Avada Dashboard).
You can deploy as many individual Elements in your forms as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each instance of the Element independently, greatly enhancing your flexibility and creative options.
General Options
Bulk Image Upload – This option allows you to select multiple images at once and they will populate into individual items. It saves time instead of adding one image at a time.

Field Label – Enter the label for the input field. This is how users will identify individual fields.

Field Name – Enter the field name. Should be single word without spaces. Underscores and dashes are allowed.

Multiple Select – Allow multiple options to be selected. Select from Yes, or No.

Required Field – Choose from Yes, or No. Make a selection to ensure that this field is completed before allowing the user to submit the form.

Tooltip Text – The text to display as tooltip hint for the input.

Image Width – In pixels (px), ex: 10px.

Image Height – In pixels (px), ex: 10px.

Padding – Enter values including any valid CSS unit, ex: 10px or 10%.

Border Size – Controls the border size of the image options. If left empty will inherit from the form options
Inactive Image Border Color – Set border color for inactive image. Leave empty for default value.
Active Image Border Color – Set border color for selected image. Leave empty for default value.

Border Radius – Controls the border radius of the image options. In pixels.

Field Layout – Choose from Stacked, or Floated. Choose if fields should be stacked and full width, or if they should be floated.

Tab Index – Tab index for this input field.

CSS Class – Allows you to add a class to the wrapping HTML.

CSS ID – Allows you to add an ID to the wrapping HTML.
View The Options ScreenChild OptionsImage – Upload an image to display.Label – Enter the label for the input field. This is how users will identify individual fields.Value – Enter the field value.

Initial State – Make a selection to ensure that this field is completed before allowing the user to submit the form. Choose from Checked, or Unchecked.

View The Options ScreenConditionals TabConditional Logic – Add conditional logic for the input field. Please see the Conditional Logic In Avada Forms document for more information on how to use this feature.View The Options ScreenGlobal OptionsThere are no Global Options for Form Builder Elements.,Useful Links & Resources
The Avada Form Builder

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms

Meta Element

As part of Avada Layouts, we created a series of Dynamic Elements that help generate content in the Content Layout Section of a Layout. These are called Layout Elements. In this document, we are looking at the Meta Element.,IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.,View The Element DEMO Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Meta ElementThe Meta Element is a specific single post / product layout element, designed to add customized meta information anywhere in a Content Layout Section, in any Single Post, Page, Portfolio or WooCommerce product Layout. Of course, you can also use the full range of Design Elements when building your Layout, and combine them with the Layout Section Elements.
When you go to add an Element in a Content Layout Section, the Element dialog opens in a new tab called Layout Elements. This is where you will find the Meta Element.
The Meta Element can be placed anywhere in you Layout Section, and displays a selection of Meta content, based on the options selected in the element, on pages based on the conditions set in the Layout. There are three tabs of options in the element, controlling functionality and design. See the options panels below for specific details on that.
But basically, you select which meta information to enable or disable, add your preferred Separator, and then choose your design options to customize how the meta information displays on the page. You can control Height, Font Size, and Text Colors. Where you place the Meta Element is up to you, but the convention is at the bottom of the Content itself.
See below, for an example of the Meta Element added to the Single Post Layout on the Avada Author Demo.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy most of the Layout Elements only once within each Layout. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General TabMeta Elements – Choose the order of meta elements. You can choose from Author, Published Date, Categories, Comments, Tags, Modified Date, Portfolio Skills, Product SKU, Word Count and Reading Time. Drag the ones you want to dispaly to the Enabled Column. Ones in the Disabled Column will not display.
Layout – Choose if meta items should be stacked and full width, or if they should be floated.

Separator – Controls the choice of separator between each meta item. Add any symbol you like.

Reading Time – Set the Average Words Read / Min.

Element Visibility – Allows you to control the Element』s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

CSS Class – Allows you to add a class for the Element.

CSS ID – Allows you to add an ID for the Element.
View The Options ScreenDesign Tab
Alignment – Select the alignment of the Meta information. Choose from Start, Center, End, Between, Space Around, and Space Evenly. This is now a responsive option.

Vertical Alignment – Defines how the meta content should align vertically.

Horizontal Alignment – Defines how the meta content should align horizontally. Overrides what is set on the container.

Height – Controls the Meta section height. In pixels.

Text Font Size – Controls the font size for the meta text. Enter value including CSS unit (px, em, rem), ex: 10px Leave empty for default value.

Text Color – Controls the text color of the meta section text. Leave empty for default value.

Link Color – Controls the link color of the meta section text.

Link Hover Color – Controls the link color of the meta section text.

Background Color – Controls the background color of element wrapper.

Border Size – Controls the border size of the element wrapper. In pixels or percentage, ex: 10px or 10%.

Border Color – Controls the border color of the element wrapper. Leave empty for default value

Padding – In pixels or percentage, ex: 10px or 10%.

Margin – In pixels or percentage, ex: 10px or 10%.

Meta Item Background Color – Controls the background color of the meta item.

Meta Item Border Size – Controls the border size of the meta item. In pixels or percentage, ex: 10px or 10%

Meta Item Border Color – Controls the border color of the meta item.

Meta Item Padding – In pixels or percentage, ex: 10px or 10%.

Meta Item Margin – In pixels or percentage, ex: 10px or 10%.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

Direction of Animation – Controls the direction of animation on the Element. Choose between Top, Right, Bottom, Left, or Static.

Speed of Animation – Controls the speed of animation on the Element. Choose between 0.1 to 1.

Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options ScreenGlobal OptionsLayout Elements do not have any Global Options.

One Page Text Link Element

Post Card Cart Element

The Post Card Cart Element is a special Layout Element, that you will only see when editing a Post Card Library Element. It is one of the available Elements, with which to design and build Post Cards, and specifically WooCommerce Post Cards. Read on to find out more about this useful Element.,View Element Demo Page!OverviewHow To Use The Post Card Cart ElementElement OptionsGlobal Options,How To Use The Post Card Cart ElementThe Post Card Cart Element allows you to add an Add to Cart section in your WooComerce based Post Cards. You could use a WooCommerce Post Card instead of the WooCommerce Product Grid Element for example.
To use the Element, simply add it to your WooCommefce based Post Card and configure it to your needs. There are many choices with this Element, both with functionality and design. Read on to see the full list of options available with this useful Element.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element. This Element is found in the Layout Elements tab only when adding or editing an Avada Library > Post Card Element.
Note: The displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Cart Layout – Select the layout for the quantity and add to cart button. Choose between Floated, or Stacked. Floated will display components side by side. Stacked will have one component per row.

Cart Alignment – Select the content alignment. Choose from Flex Start, Center, Flex End, Space Between, Space Around, or Space Evenly. For Floated option only.

Cart Alignment – Select the content alignment. Choose from Flex Start, Center, or Flex End. For Stacked Option only.

Show Quantity – Display the quantity input.

Show Add To Cart – Display the Add To Cart button.

Show Product Link – Display the Product Link.

Product Quick View – Enable product quick view for products.

Buttons Span – Controls if buttons spans the full width/remaining width of row.

Buttons Layout – Select the layout for buttons. Floated will have them side by side. Stacked will have one per row.

Buttons Alignment – Select the content alignment. Choose from Flex Start, Center, or Flex End. For Stacked option only.

Buttons Alignment – Select the content alignment. Choose from Flex Start, Center, Flex End, Space Between, Space Around, or Space Evenly. For Floated option only.

Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Avada Builder Elements tab in the Global Options.

CSS Class – Allows you to add a class for the Separator.

CSS ID – Allows you to add an ID for the Separator.
View The Options ScreenDesign Tab
Margin – In pixels or percentage, ex: 10px or 10%.
Quantity Style – Select whether you want to custom style the quantity field. Choose from Default, or Custom. This option will only display if Show Quantity is set to Yes on the General Tab. The following dozen or so 『Quantity』 options will also only display if 『Custom』 is then chosen in this option.
Quantity Margin – In pixels or percentage, ex: 10px or 10%.
Quantity Input Dimensions – Enter values including any valid CSS unit, ex: 10px.Quantity Border Radius – Enter values including any valid CSS unit, ex: 10px.Quantity Input Font Size – Controls the font size of the select field. Enter value including any valid CSS unit, ex: 20px.Quantity Input Text Color – Controls the text color of the select fields.Quantity Input Background Color – Controls the background color of the select fields.Quantity Input Border Size – Controls the border size of the select fields.Quantity Input Border Color – Controls the border color of the select fields.Quantity Button Border Size – Controls the border size of the select fields.Quantity Button Styling – Use filters to see specific type of content.Regular OptionsQuantity Button Text Color – Controls the text color of the select fields.Quantity Button Background Color – Controls the background color of the select fields.Quantity Button Border Color – Controls the border color of the select fields.Hover/Active OptionsQuantity Button Text Color – Controls the text color of the select fields.Quantity Button Background Color – Controls the background color of the select fields.Quantity Button Border Color – Controls the border color of the select fields.Add To Cart Margin – In pixels or percentage, ex: 10px or 10%.Add To Cart Link Style – Select whether you want to custom style the add to cart button. Choose from Text Link, or Button.
Add To Cart Link Font Size – Controls the font size of the text link. Enter value including any valid CSS unit, ex: 20px.
Add To Cart Link Styling – Use filters to see specific type of content.Regular OptionsLink Text Color – Controls the text hover color of the link. Leave empty for default value.Hover/Active OptionsLinkText Color – Controls the text color of the link. Leave empty for default value.Button Size – Controls the button size. This, and the following three options will only display if 『Button』 is selected in the previous option, the Add To Cart Link Style.Button Border Size – Controls the border size. In pixels.Icon – Click an icon to select, click again to deselect.Icon Position – Choose the position of the icon on the button.Button Styling – Use filters to see specific type of content.Regular OptionsButton Text Color – Controls the text color of the button.
Button Gradient Top Color – Controls the text color of the button.
Button Gradient Bottom Color – Controls the text color of the button.Button Border Color – Controls the border color of the button.Hover/Active OptionsButton Text Hover Color – Controls the text color of the button.
Button Gradient Top Hover Color – Controls the text color of the button.
Button Gradient Bottom Hover Color – Controls the text color of the button.Button Border Hover Color – Controls the border color of the button.
Product Link Style – Select whether you want to custom style the product link.

Product Link Margin – In pixels or percentage, ex: 10px or 10%.

Product Link Font Size – Controls the font size of the text link. Enter value including any valid CSS unit, ex: 20px.
Product Link Styling – Use filters to see specific type of content.Regular Options
Product Link Text Color – Controls the text color of the link. Leave empty for default value.
Hover/Active Options
Product Link Text Hover Color – Controls the text hover color of the link. Leave empty for default value.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 5.

Featured Images Slider Element

As part of Avada Layouts, we created a series of Dynamic Elements that help generate content in the Content Layout Section of a Layout. These are called Layout Elements. In this document, we are looking at the Featured Images Slider Element.,IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.,View The Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Featured Images Slider ElementThe Featured Images Slider Element allows you to place featured images (either single, or if multiple, in a slider) anywhere in a Content Layout Section, in any Layout.
When you go to add an Element in a Content Layout Section, the Element dialog opens in a new tab called Layout Elements. This is where you will find the Featured Images Slider Element. These dynamic Elements can only be placed once into a Layout, with the exception of the Pagination Element, which can be placed twice. You can also use the full range of Design Elements when building your Layout.
The Featured Images Slider Element can be placed anywhere in you Layout Section, and will dynamically pull any connected Featured Image, or images, into the page, based on the settings in the Element, and the Conditions set in the Layout. For example, you might choose a certain size and hover effect in the Featured Images Slider Element, and set the condition for the Layout only to display on Single Posts.
See below for an example of the Featured Images Slider Element added to the Single Post Layout, on the Taxi Demo.
767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy the Layout Elements only once within each Layout. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Show First Featured Image – Turn on if you don』t want to display first featured image.

Hover Type – Select the hover effect type. Choose from Zoom in, Zoom Out, or Lift Up.

Image Size Dimensions – Dimensions in percentage (%) or pixels (px).

Lightbox – Show image in lightbox. Lightbox must be enabled in Global Options.

Element Visibility – Allows you to control the Element』s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

CSS Class – Allows you to add a class for the Element.

CSS ID – Allows you to add an ID for the Element.
View The Options ScreenDesign Tab
Margin – Enter values including any valid CSS unit, ex: 4%.
View The Options ScreenGlobal OptionsLayout Elements do not have any Global Options.

Honeypot Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Honeypot Field Element is a security Element you can add to your Avada Form. A honeypot is a field added to the form that the users can』t see (due to CSS or JavaScript which hides the field). Basically, if a spambot fills in a field that valid users can』t see, this alerts us to their activity. So if the honeypot field is filled in, we can confidently reject the form as spam.,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Honeypot Field ElementThis Element is about as easy to use as it gets. Simply add the Element to your form, and if the field is filled in (by a bot), then the submit button won』t be displayed on the front end. You only need to add one Honeypot Element in a Form, and this Element can also work in conjunction with the reCAPTCHA Field Element.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element. You access the Form Builder Elements when adding an Element while editing a Form in the Avada Form Builder (Forms > Form Builder, from the Avada Dashboard).
You can deploy as many individual Elements in your forms as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each instance of the Element independently, greatly enhancing your flexibility and creative options.

Field Name – Enter the field name. Should be single word without spaces. Underscores and dashes are allowed.

CSS Class – Allows you to add a class to the wrapping HTML.

CSS ID – Allows you to add an ID to the wrapping HTML.
View The Options ScreenGlobal OptionsThere are no Global Options for Form Builder Elements.,Useful Links & Resources
The Avada Form Builder

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms

Inline Elements

You might notice that some Elements are greyed out when you view them in the Elements window that appears when you add an Element. They are grey to show that they are Inline Elements. These elements are not meant to be used directly on their own, but rather in conjunction with text or other content. Please read below for links to our various Inline Elements, as well as information on how to insert them in both the Avada Builder and Avada Live.,Overview
How Inline Elements Work

Inline Elements

Using Inline Elements In Avada Live

Using Inline Elements In Avada Builder,How Inline Elements WorkInline Elements are not meant to be used directly, but rather in conjunction with other content. Let』s take a Dropcap as an example. Whenever you use a Dropcap, it has to go along with text or paragraph to fulfill its function. If not, it wouldn』t really make sense on the page. With that in mind, you have to insert text content first, then use the Element Generator to add a Dropcap element.
Alternatively, using Avada Live, you can now edit text inline, and as part of the Inline Editing menu that appears when you select some text, there is an Add Element Icon (a plus symbol) where you can access and add the Inline Elements, as well as being able to access the Avada Builder Element Generator when you edit the Element.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Inline ElementsThere are currently 5 Inline Elements. Please follow the links below to go directly to the individual Inline Element pages to find out more about the specific elements, or read further for a general overview of how to use Inline Elements on the page, through both the Avada Builder and Avada Live.
NOTE: Two of these Elements, Popover and One Page Text Link, are a bit special in that they are both normal Elements, and Inline Elements (which is why they are not greyed out). They can be used in page content by themselves, but they still work in conjunction with other content, no matter which way you add them. See the respective Element pages for more details.

Dropcap Element

Highlight Element

One Page Text Link Element*

Popover Element*

Tooltip Element,Using Inline Elements in Avada LiveIn Avada Live, there are two ways to use the Inline Elements. Firstly, with the Inline Editor, that appears whenever you make a text selection. And secondly, with the Avada Builder Generator, when you edit a relevant Element in the Sidebar. Let』s look at both methods.
Using The Inline EditorStep 1 – Make a text selection directly on the page. The inline editor will appear.
Step 2 – On the far right, there is a Blue Add Element Icon. This opens a list of the inline Elements. Select the one you wish to apply. It will be based on your text selection, so if you want a Dropcap, just select the first letter of the word, whereas if you want a Tooltip, you might select a word or entire sentence.
Step 3 – Set your preferred options in the Element Settings that opens in the Sidebar. The changes are applied as you make them.
Step 4 – That』s it. If you want to save the changes, click the large blue Save button on the Toolbar.
Using The Avada Builder Element GeneratorStep 1 – Add any Element that allows for plain text or HTML to be inserted via the WordPress Content Editor. For example, the Text Block Element.
Step 2 – Click the 『Settings』 icon on the Element to bring up the Element』s options panel in the Sidebar.
Step 3 – Select the text you want the Inline Element to apply to in the WordPress Editor (not on the page).
Step 4 – On the WordPress Editor toolbar, you』ll find the Element Generator icon which looks like the Avada logo. Click the 『Avada Builder Element Generator』 icon to bring up the Elements window.
Step 5 – On the 『Builder Elements』 tab, find the Inline element you』d like to add. Once located, click on it to bring up the options dialog.
Step 6 – Make your changes in the options dialog, and once done, click 『Insert』. You can save the changes by clicking on the blue Save button on the main Toolbar.,Using Inline Elements in the Avada BuilderIn the back-end builder, the Inline Elements are designed to be added via the Element Generator within the WordPress Content Editor. Follow this short example to see how.
Step 1 – Add any element that allows for plain text or HTML to be inserted via the WordPress Content Editor. For example, the Text Block element.
Step 2 – Click the 『Settings』 icon on the Text Block element to bring up the element』s options window.
Step 3 – Locate the WordPress content editor field. On the toolbar, you』ll find the Element Generator icon which looks like the Avada logo. Click the 『Avada Builder Element Generator』 icon to bring up the Elements window.
Step 4 – On the 『Builder Elements』 tab, find the Inline element you』d like to add. Once located, click on it to bring up the options window.
Step 5 – Once done, click 『Insert』. You can then add content into the Text Block Element as needed. Once you』re done, click 『Save』 to save your changes.

Modal Element

The Modal Element can be used to display additional content via a popup window on a page. Modal boxes are hidden by default and can only be triggered by a Menu item, a button element or a modal text / HTML link element, which can be either text or an image. Any of our other elements can be used inside it, so you can organize your content however you prefer.
This Button Opens A Modal Window!,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsLinks & Resources,How To Create A ModalStep 1 – Add a Container to the page and choose a column layout.
Step 2 – Click the 『+ Element』 button on the column to open the Elements window. Locate the Modal Element and click it to open the Options window. You can insert the Modal element anywhere on your page.
Step 3 – In the 『Name of Modal』 field, enter a unique identifier for your modal. For example, popup. Keep in mind that this same unique identifier will be used in your modal trigger which will be explained below.
IMPORTANT NOTE: Remember to keep your identifier unique. Do not use generic identifiers like video, image, footer, header etc. Generic names may be used as class names within the theme, thereby conflicting and causing the modal popup to not work.Step 4 – Once done, click the Save button to insert it into the page.
Step 5 – After setting up the Modal element, you then have to then setup a Modal Trigger (button, text link or image) with the same matching unique identifier you added to the 『Name of Modal』 field. See the section below for more instructions.
How To Create A Modal Button TriggerStep 1 – Add a Container to the page and choose a column layout.
Step 2 – Click the 『+ Element』 button on the column to open the Elements window. Locate the Button Element and click it to open the Options window.
Step 3 – Locate the 『Modal Window Anchor』 field. Enter the exact unique identifier you entered into the 『Name of Modal』 field in your Modal element. For example, popup.
Step 4 – Once done, click the 『Save』 button. You can now view the modal on the front end of your site by clicking this button.
How To Create A Modal Text / HTML Link TriggerStep 1 – Add a Container to the page and select your desired column layout.
Step 2 – Click the 『+ Element』 button on the column to bring up the Elements window. Choose the Modal Text / HTML Link Element to open the Options window.
Step 3 – In the 『Name Of Modal』 field, enter the exact unique identifier you entered into the 『Name of Modal』 field in your Modal element. For example, popup.
Step 4 – In the 『Text or HTML Code』 field, enter the text or content that will trigger the modal when clicked. For example, 「Open this popup window for more details」. If you』d like to use an image, then enter the image tag. See below for an example.
Step 5 – Once done, click 『Save』 to add the Modal Text Link Element into the page content.
Step 6 – You can now view the modal on the front end of your site by clicking the text or image you inserted.
Step 7 – Once done, click 『Insert』 to add the Modal Text Link Element into the WordPress Content Editor.
Step 8 – Add the rest of your content as normal, then click 『Save』. You can now view the modal on the front end of your site by clicking this text or image.
Copy to Clipboard 1IMPORTANT NOTE – Aside from the Text Block element, you can add a Modal Text Link element to any element that has a WordPress Content Editor such as Titles, Toggles, Alert, Tabs etc.How to Launch a Modal From a Menu ItemYou can use a main menu item to launch your Modal as well. This is beneficial because it allows you to have a sitewide Modal with the same content on every page of your site. This could be used in a variety of ways, but one common method is to use it as a contact form Modal in conjunction with a Contact Form 7 shortcode.
Note: Since the Modal element needs to be on the same page as its trigger for it to work, you』ll need to be sure that your Modal Element shortcode is also added to a sitewide element. This most easily can be done by adding your Modal shortcode to a text widget in your footer. For information on generating raw shortcodes in Avada, please see our post here.
Step 1 – Navigate to the Appearance > Menus page in your WordPress admin. Edit the menu that you want to add your Modal menu item link to.
Step 2 – Add a 「Custom Link」 menu item to the menu and give it a name (the URL can just be 「#」).
Step 3 – Now, on your newly added menu item, click the 「Avada Options」 button to open the menu』s Avada settings.
Step 4 – Locate the 「Modal Window Anchor」 text field and add your Modal』s ID/Name which was added to the Modal element』s 「Name of Modal」 field. (If you』re using a Modal Shortcode, it will be the value added to the 「name」 attribute.)
Step 5 – Save the menu settings and check the frontend. If you』ve already created your Modal Element and added it to the page, it should now launch when your menu item is clicked.
NOTE: This will need to be added to a header menu item and won』t work from menu widgets.767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
IMPORTANT NOTE – You can have more than one modal on any given page, however each modal on the page must have a unique identifier. Modals added to different pages, in contrast can have the same identifier.
Name Of Modal – Allows you to set your Modal』s unique identifier. This is used for linking the Modal to a Modal Trigger.

Modal Heading – Allows you to set your Modal』s heading text.

Size of Modal – Allows you to set the size of your Modal.

Background Color – Allows you to set the background color of your Modal.

Border Color – Allows you to set the Modal border color.

Show Footer – Allows you to set if your Modal will show the footer with the close button or not.

Contents of Modal – Allows you to set your Modal』s content.

CSS Class – Allows you to add a class to the wrapping HTML element.

CSS ID – Allows you to add an ID to the wrapping HTML element.
View The Options ScreenGlobal OptionsThere are no Global Options for the Modal Element.,Useful Links & ResourcesAnchor ScrollingMenu Anchor ElementModal Text / HTML Link ElementOne Page Text Link ElementOne Page Menu with Multi-Page Links

Pagination Element

As part of Avada Layouts, available in Avada 7.0 and up, we created a series of Dynamic Elements that help generate content in the Content Layout Section of a Layout. These are called Layout Elements. In this document, we are looking at the Pagination Element.
In Avada 7.2, new options were added to the Pagination Element to further enhance the Element for use with the Avada WooCommerce Builder.,IMPORTANT NOTE: The full range of Layout Elements is only available when editing Content Layout Sections in Avada Layouts. Some are also available when editing Page Title Bar Layout Sections.,View The Pagination Element Page!,OverviewHow To Use The ElementLayout Styles
Element OptionsGlobal Options,How To Use The Pagination ElementThe Pagination Element allows you to place pagination anywhere in a Content or Page Title Bar Layout Section, in any Single Post, Portfolio, WooCommerce Product, or Custom Post Type Layout. The Pagination Element is unique, in that if needed, it can be placed twice in a Layout Section, whereas many of the other Layout Elements can only be placed once. This facilitatesthe common layout of having pagination both above and below the content.
When you go to add an Element in a Content Layout Section, the Element dialog opens in a new tab called Layout Elements. This is where you will find the Pagination Element.
The Pagination Element can be placed anywhere in you Layout Section, but in most cases you will want to place the Element at the very top, and/or the very bottom of the Content Element. There is a range of options with the element about how it displays. See the options panels below for specific details on that. This element does not include the Load More or Infinite Scroll options, as these are found in the Blog and Portfolio Elements. This Element is designed for Single Post, Portfolio and Product Layouts.
See below, for an example of the Pagination Element in a Single Post Layout, displaying just below the Content Element on the Taxi Demo. Follow this link for a live example.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Layout StylesWith Avada 7.2, new Layouts styles were introduced to the Pagination Element. These allow for more suitable product pagination in the Avada WooCommerc Builder, but can also be useful in posts and portfolios and anbywhere else pagination is required.
TextThis is the traditional style of pagination, typically placed at the top and/or bottom of the post. You can place the Previous / Next links to the left, or the right, or distribute them on either aside of the column. Here, in the screenshots below, you can see the Pagination Element added below the product in a WooCommerce Product Layout.
Text With PreviewThis is the same as the Text style of Pagination, but a preview of the next post/portfolio item/product etc. is shown upon rollover of the Previous or Next link. Both of these styles are displayed where you position them in the layout.
Sticky PreviewThe Sticky Preview style of pagination displays a small sticky thumbnail at either edge of the screen in the middle of the viewport. You can determine the preview height and control how much of the sticky preview is displayed before hover, and when you hover, it displays fully. With this style, it doesn』t matter where the Element is placed in the Layout, as it always displays in the middle of the viewport.,Element OptionsLocation: The edit screen within each Element.
You can deploy the Layout Elements only once within each Layout. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Layout – Choose the layout of the pagination element. Select from Text, Text With Preview, or Sticky Preview.

Preview Position – Only available with Text With Preview selection in Layout Option. Make a selection for preview position. Choose from Bottom, or Top.
Same Taxonomy Term – Whether next/previous link should be in a same taxonomy term or not. Choose from Yes, or No.
Taxonomy – Only available when Same Taxonomy Term is set to Yes. Select taxonomy to get next/previous link from. Choose from Post Categories, Post Tags, Post Formats, Product Categories, Product Tags, Portfolio Categories, Portfolio Skills, Portfolio Tags, and FAQ Categories.

Swap Post Order – Select from Yes, or No. This determines whether or not next/previous buttons should invert the logic of the post order.

Margin – In pixels or percentage, ex: 10px or 10%.

Element Visibility – Allows you to control the Element』s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

CSS Class – Allows you to add a class for the Element.

CSS ID – Allows you to add an ID for the Element.
View The Options ScreenDesign Tab
Height – Controls the pagination section height. In pixels.

Text Alignment – Make a selection for pagination text alignment. Choose from Distributed, Left, or Right.

Text Font Size – Controls the font size for the pagination text. Enter value including CSS unit (px, em, rem), ex: 10px. Leave empty for default value.

Text Color – Controls the text color of the pagination section text. Leave empty for default value.

Text Hover Color – Controls the text hover color of the pagination section text. Leave empty for default value.

Separator Border Size – Controls the border size of the separators. In pixels.

Separator Border Color – Controls the border color of the separators. Leave empty for default value.
Z Index – Value for preview section』s z-index CSS property, can be both positive or negative.
Preview Height – Controls the preview section height. In pixels.

Preview Width – Controls the preview section width. In pixels.

Preview Visible Area Width – Controls the preview section width that is displayed before hover. In percentage.

Preview Background Color – Controls the background color of the pagination section.

Preview Text Color – Controls the text color of the preview section text.

Preview Text Font Size – Controls the font size for the preview text. Enter value including CSS unit (px, em, rem), ex: 10px

Box Shadow – Set to 「Yes」 to enable box shadows.

Box Shadow Position – Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px.

Box Shadow Blur Radius – Set the blur radius of the box shadow. In pixels.

Box Shadow Spread Radius – Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels.

Box Shadow Color – Controls the color of the box shadow.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 1.