Avada 文档

Person Element

With the Person Element, you can include a small biography for staff members or people of importance on your website. With several customization options to utilize, you have the power to display your staff, team or favorite people with style and ease. Read below for an overview of the specific features of the Element, and watch the video for a visual overview.,Helen ParkinsDeveloperIn sit amet imperdiet erat. Nulla luctus orci sit amet diam varius tristique. Neque in, facilisis nulla. Brian McArthurDeveloperIn sit amet imperdiet erat. Nulla luctus orci sit amet diam varius tristique. Neque in, facilisis nulla. Julia AtkinsonDeveloperIn sit amet imperdiet erat. Nulla luctus orci sit amet diam varius tristique. Neque in, facilisis nulla.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Person ElementThe Person Element allows you to add a personal profile, replete with image, name, title, description, and a whole bunch of styling options.
Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Select the container and column you would like to place the flip boxes into.
Step 3 – Click on the + Element button at the bottom of the column. Select Person.
Step 4 – Start with the basics of Name, Title, and Description, and then upload an image. The image can also link to another page.
Step 5 – The styling options come next with a collection of Picture styling options, from the style type and color, as well as border size, color, and radius. There is also a Hover Type, Background Color and Content alignment, before there are a bunch of Social Media options. These style the social media links, which are entered further down. You can choose the radius and color type of icons, including custom colors. These are entered in hexadecimal values – one for each social media profile you enter.
Step 6 – Once you have set all your styling options, there is a long list of possible social media links for you to choose from. Simply enter the relevant URLs in the correct fields. There is also an option for an email link at the bottom. Finally, there is a choice to show the custom social icons specified in Avada Options, if you have set any of these up.
Step 7 – Once you have completed styling your Person, click Save. You will be returned to the edit page. You can preview the page to view your Person, and you can always edit the element again to make changes or duplicate it to style another.
Read below for a detailed description of all element options.
767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 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.
Note: The Default setting will use the global settings assigned for this element in the Avada > Options > Avada Builder Elements > Person Element section. Also, 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.

Name – Insert the name of the person.

Title – Insert the title of the person. If you wish to leave it blank, just click in the field to remove the placeholder text.

Profile Description – Enter the content to be displayed for the Profile Description. If you wish to leave it blank, just click in the field to remove the placeholder text.

Picture – Upload an image to display. The image will display at whatever size and aspect ratio you insert.

Picture Link URL – If you wish, you can add a URL the picture will link to, ex: http://example.com.

Link Target – Select whether you want the link to open in the same browser tab (_self) or a new tab (_blank).

Picture Style Type – Select a style type for the picture. Options are Default, None, Glow, Drop Shadow, and Bottom Shadow.

Picture Glow / Drop Shadow Blur – Choose the amount of blur added to glow or drop shadow effect. In pixels.

Picture Style Color – Controls the style color for all style types except border.

Picture Border Size – Set a border on the Element Picture. In pixels.

Picture Border Color – Controls the picture border color.

Picture Border Radius – Choose the border radius of the person image. In pixels (px), ex: 1px, or 「round」.

Hover Type – Select the hover effect type. Opinions are None, Zoom In, Zoom Out, and Lift Up.

Background Color – Controls the background color for the Element. If not selected, the default theme options value will be used.

Content Alignment – Choose the preferred alignment of the Element content. Options are Default, Left, Center, or Right.

Social Icons Position – Choose the social icon position. Options are Default, Top, or Bottom.

Boxed Social Icons – Choose to get boxed Social icons. Options are Default, Yes, and No.

Social Icon Box Radius – Choose the border radius of the boxed icons. In pixels (px), ex: 1px, or 「round」.

Social Icon Color Type – Controls the color type of the social icons. Choose from Default, Custom Colors, or Brand Colors.

Social Icon Custom Colors – Specify the color of social icons. Use one for all icons, or separate by | symbol. e.g: #AA0000|#00AA00|#0000AA.

Social Icon Custom Box Colors – Specify the box color of social icons. Use one for all icons, or separate by | symbol. ex: #AA0000|#00AA00|#0000AA.

Social Icon Tooltip Position – Choose the display position for tooltips. Options are Default, Top, Bottom, Left, Right, and None.
Social Media Links Section
Blogger Link – Insert your custom Blogger link.

Deviantart Link – Insert your custom Deviantart link.

Discord Link – Insert your custom Discord link.

Digg Link – Insert your custom Digg link.

Dribbble Link – Insert your custom Dribbble link.

Dropbox Link – Insert your custom Dropbox link.

Facebook Link – Insert your custom Facebook link.

Flickr Link – Insert your custom Flickr link.

Forrst Link – Insert your custom Forrst link.

Instagram Link – Insert your custom Instagram link.

LinkedIn Link – Insert your custom LinkedIn link.

Myspace Link – Insert your custom Myspace link.

PayPal Link – Insert your custom PayPal link.

Pinterest Link – Insert your custom Pinterest link.

Reddit Link – Insert your custom Reddit link.

RSS Link – Insert your custom RSS link.

Skype Link – Insert your custom Skype link.

Teamsd Link – Insert your custom Microsoft Teams link.

SoundCloud Link – Insert your custom SoundCloud link.

Spotify Link – Insert your custom Spotify link.

Telegram Link – Insert your custom Telegram link.

Tiktok Link – Insert your custom Tiktok link.

Tumblr Link – Insert your custom Tumblr link.

Twitch Link – Insert your custom Twitch link.

Twitter Link – Insert your custom Twitter link.

Vimeo Link – Insert your custom Vimeo link.

VK Link – Insert your custom VK link.

WhatsApp Link – Insert your custom WhatsApp link.

Xing Link – Insert your custom Xing link.

Yahoo Link – Insert your custom Yahoo link.

Yelp Link – Insert your custom Yelp link.

Youtube Link – Insert your custom Youtube link.

Email Address – Insert an email address to display the email icon.

Show Custom Social Icons – Show the custom social icons as specified in Theme Options. Options are Yes, or No.

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

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 OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Person.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Person Background Color – Controls the background color of the person area.

Person Picture Style Type – Select a style type for the person image. Options are None, Glow, Drop Shadow, and Bottom Shadow.

Person Picture Glow / Drop Shadow Blur – Choose the amount of blur added to glow or drop shadow effect. In pixels.

Person Style Color – Controls the style color for all style types except border.

Person Border Color – Controls the border color of the person image.

Person Border Size -Controls the border size of the person image. In pixels.

Picture Border Radius -Controls the border radius of the person image. Enter value including any valid CSS unit, ex: 0px.

Person Content Alignment – Controls the alignment of the Person content. Options are Left, Center, or Right.

Person Social Icon Position – Choose the social icon position. Options are Top or Bottom.
View The Options Screen

Password Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Password Field Element is a special text field on a form that doesn』t display what the user types. This value is then passed on in the submission entry. See the Sign Up Prebuilt Form for an example of this Element.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Password Field ElementThe Password Field Element allows you to place checkboxes into your forms.
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 Password Field from the Form Elements tab.
Step 4. Go through the options to populate and configure the element. The Password Field Element is a simple Element and basically doesn』t require any configuration other than design considerations.
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 Tab
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.

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.

Placeholder Text – The placeholder text to display as hint for the input type.

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

Input Field Icon – Select an icon for the input field, click again to deselect.

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 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

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.

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

Number Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Number Element is a field used to allow the user to enter any numeric value. See the Reservation Prebuilt Form for an example of this Element in use.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Number ElementThe Number Element allows you to place checkboxes into your forms.
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 Number from the Form Elements tab.
Step 4. Go through the options to populate and configure the Element. The main options for this Element are the Min and Max Values.
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 Tab
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.

Min Value – Minimum allowed value.

Max Value – Maximum allowed value.

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.

Placeholder Text – The placeholder text to display as hint for the input type.

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

Input Field Icon – Select an icon for the input field, click again to deselect.

Tab Index – Tab index for this input field.

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

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms

Notice Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Notice Element is used to display messages after form submission. There is a field for both a success message, and a failure message. They come pre-populated with default messages, or you can totally customize them with your own messages. You will find this Element on almost all the prebuilt forms.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Notice ElementThe Notice Element allows you to place checkboxes into your forms.
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 Notice from the Form Elements tab.
Step 4. The Notice Element controls the notices shows when the Form Confirmation Options in the Confirmation Tab of the Form Options panel is set to Display Message. The Element comes pre-populated with default messages, but you can of course customize these messages as you wish. When using Display Message as the Confirmation Type, this is a required Element for your form.
Step 5. Once you have configured the Element, save your page.
Read below for a description of all element options.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 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.

Success Message – Enter a message to be shown when the form has been successfully submitted.

Error Message – Enter a message to be shown when a problem has been encountered while submitting the form.

Margin – Enter values including any valid CSS unit, ex: 4%.

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 specific Global Options for the Notice Element, but note that the colors for the Notice Element come from the Success and Error Global Colors in the Alert Element (Options > Avada Builder Elements > Alert).,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

Next Page Element

The Next Page Element is a pagination element that allows you to add a page break after any Container element in your content. You can use this element to create a series of linked segments out of one main page. Continue reading below for more details on how to add this element. You can also drag and drop the Next Page element to a new position, between containers only.
Please note: The Next Page Element will not split content inside a Container. Content will be segmented as one whole Container at a time as seen here.View Element Demo Page!How to Add the Next Page ElementStep 1 – Create a page or edit an existing one.
Step 2 – Add the content to your page that will be your first page or segment of the series.
Step 3 – At the bottom your first segment』s Container element, hover over the right-hand corner and click +Container.
Step 4 – This will launch a window with three main tabs: Builder Containers, Library Containers and the Special Tab. Select the special tab and click to add the Next Page element.
Step 5 – At this point, you』ll see the Next Page element between your Container elements. On the frontend, you』ll see pagination links after this section of content. All the content below this element will be displayed on the following page.
Step 6 – Repeat those steps until you have completed your page and have the desired amount of segments.

News Ticker Element

The News Ticker Element allows you to add a news ticker to any page (or in a layout section) that pulls posts, events or a range of other content. Read below for an overview of the specific features of the Element.,Latest Docs:How To Use The Tag Cloud Element Video|How To Make A Flyout Menu With The Off Canvas Builder Video|How To use The Facebook Page Element Video|How To Use The Twitter Timeline Element Video|How To Use The Off Canvas Builder video|How To Use The Color Picker In Avada|How To Use The Global Color Palette In Avada|Tag Cloud Element|Flickr Element|Twitter Timeline Element,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The News Ticker ElementStep 1. Ensure Avada Builder, or Avada Live is active.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose News Ticker from the Elements List.
Step 4. Simply configure the Element as you wish. Initially, choose the source of the ticker feed by choosing a Post Type to display, and then configure the feed. There are options to display the ticker as a running ticker, or one at a time, as well as being able to control the speed and distance between posts etc. There are also some design options for styling the Element.
Step 5. Click Save when you are finished customizing the Element.
Read below for a detailed description of all element options.
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.
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
Ticker Title – Set the ticker title.

Posts Type – Select the type of post displayed in the ticker. This option will display the full range of custom post types installed on your site. What Post Type you choose here will affect what options there are for the next option Pull Posts By..

Pull Posts By – Choose the taxonomy to pull posts by. If you select anything other than All. you will also get Include and Exlude options below this for the specific taxonomy chosen.

Include 『Taxonomy』 – Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy.

Exclude 『Taxonomy』 – Select the taxonomies to exclude, or leave blank for all. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy.

Order By – Defines how posts should be ordered. Note that custom post types like 「Events」, can have additionally ordering choices.

Order – Define the sorting order of posts. Choose from Descending or Ascending.

Number Of Posts – Select the maximum number of posts to be displayed in the ticker. The range is from 3-15.

Show Date – Select whether or not to show the date before the post.

Date Format – Select the date format, including the separator. By default 「M j: 「. You can find a list of date format placeholders here.

Ticker Type – Select the ticker type to display posts. Choose from Running Ticker, or One At A Time.

Ticker Speed – Select the ticker speed, in pixels per second.

Distance Between Posts – Select the distance between posts. In pixels, from 25 – 200.

Separator – Enter the separator text or symbol between the posts.

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

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

CSS ID – Allows you to add an ID for the column.
View The Options ScreenDesign Tab
Font Size – Enter value including any valid CSS unit.

Line Height – Select the line height of the text inside the ticker.

Title Font Color – Set the font color of the title.

Title Background Color – Select the background color of the title.

Title Shape – Select the title shape. Choose from None, Rounded, or Triangle.

Title Padding – Controls the padding of the title.

Ticker Styling – Use filters to see specific type of content.

Regular Options

Ticker Font Color – Select the font color of the ticker.

Ticker Background Color – Select the background color of the ticker.

Hover/Active Options

Ticker Link Hover Color – Select the font color of the ticker when the mouse is over the link.

Ticker Background Hover Color – Select the background hover color of the ticker.

Element Margin – Enter values including any valid CSS unit, ex: 4%.

Element Border Radius – Enter values including any valid CSS unit, ex: 10px.

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

Box Shadow Blur Radius – Set the blur radius of the box shadow. In pixels. Only shows if Box Shadow is set to Yes.

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. Only shows if Box Shadow is set to Yes.

Box Shadow Color – Controls the color of the box shadow. Only shows if Box Shadow is set to Yes.

Box Shadow Style – Set the style of the box shadow to either be an outer or inner shadow. Only shows if Box Shadow is set to Yes.
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.

Nested Columns Element

Nested Columns are simply columns within columns. For example, you could add two 1/4 column inside a 1/2 column, which would mean the nested columns will be 1/4 of the 1/2 column they are in, and 1/8 of the entire page width. And with the release of Avada 7, Nested Columns also have Flex features. Read on to find out about this useful design tool in the Avada Builder, and watch the video for a visual overview.,View Element Demo Page!,OverviewHow To Use The Element
Element Options

Global Options
Raw Element ParametersUseful Links & Resources,How To Add Nested ColumnsStep 1 – Create a new page, or edit an existing one.
Step 2 – Activate the Fusion Builder by clicking the 『Use Fusion Builder』 button on top of the page editor.
Step 3 – Insert a Container, then add columns into it. In each column, there』ll be a 『+ Element』 button.
Step 4 – Click the 『+ Element』 button, then switch to the 『Nested Columns』 tab.
Step 5 – Simply click the column layout you』d like to add to the page. Once you added, it』ll be displayed as a 『Nested Columns』 element.
Step 6 – To add content into nested columns, click the 『Edit』 icon on the 『Nested Columns』 element. Once you do that, a window with your columns will appear.
Step 7 – On this window, you can edit the nested columns and add elements into them. Once you』re finished editing the columns, click 『Done』.
767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element. At first glance, the Nested Columns Element does not have any Element Options. This is because they are in the individual columns of the Nested Columns Element, rather than the parent element itself.
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.
General Tab
Alignment – Defines how the column should align itself within the container. Overrides what is set on the container.

Content Layout – Defines how the column content should be positioned. Choose from Column, Row, or Block. If block is selected it will not use flex positioning and will instead allow floated elements.

Content Alignment – Defines how the column content should align. Works only with full height columns.

Content Vertical Alignment – Defines how the column content should vertically align.

Content Wrap – Defines whether elements are forced onto one line or can wrap onto multiple lines.

Column Spacing – Controls the column spacing between one column to the next. Enter value including any valid CSS unit, ex: 4%.

Center Content – Allows you to center content vertically. This option only works if the 『Equal Heights』 option is enabled in the Parent Container. Choose between Yes or No.

Link URL – Allows you to add the URL the column will link to when clicked. Note: This will disable links on elements inside the column.

Link Target – Allows you to choose to open the link in same browser tab, in new browser tab or in a lightbox. Choose between _self, _blank or Lightbox. _self = open in same browser tab, _blank = open in new browser tab.

Link Description – Add descriptive text to the link to make it easier accessible.

Ignore Equal Heights – Choose to ignore equal heights on this column if you are using equal heights on the surrounding container.

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

Element Sticky Visibility – Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.

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
Width – Column width on respective display size. Choose from Large, Medium or Small and then set width. Width can be Preset, Auto, or Custom. For more info, please see the How To Set The Display Order And Size Of Columns In Responsive Layouts document.

Order – This option only applies for medium or small layouts, so you won』t see this when using the Desktop Layout. This controls the column order on respective display size. You can set the specific order of a column with this option, also for different size screens.

Column Spacing – Enter values including any valid CSS unit, ex: 4%. Leave empty to inherit from container or theme option. You can set overall Column Spacing on the parent Container, but you can override it here, on an individual column basis.

Margin – Enter values including any valid CSS unit, ex: 4%. Leave empty for default value.

Padding – Enter padding values for the Column. Enter values including any valid CSS unit, ex: 4%.

Hover Type – Controls the hover effect type. Choose between None, Zoom In, Zoom Out, or Lift Up. IMPORTANT: For the effect to be noticeable, you』ll need a background color/image, and/or a border enabled. This will disable links and hover effects on elements inside the column.

Column Border Size – Accepts a pixel value that sets the size of each of the column』s four borders.

Column Border Color – Allows you to set the color of the column』s border.

Border Style – Allows you to set the style of the column』s border. Choose between Solid, Dashed, or Dotted.

Border Radius – Enter values including any valid CSS unit, ex: 10px. IMPORTANT: In order to make border radius work in browsers, the overflow CSS rule of the column needs to be set to hidden. Thus, depending on the setup, some contents might get clipped.

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

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

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, from 0- 100.

Box Shadow Color – Controls the color of the box shadow.

Box Shadow Style – Set the style of the box shadow to either be an Outer or Inner shadow.

Overflow – Value for column』s overflow CSS property.
View The Options ScreenBG (Background) TabColor Tab
Background Color – Controls the background color of the nested column.
Gradient Tab
Gradient Start Color – Select the start color for the gradient.

Gradient End Color – Select the end color for the gradient.

Gradient Start Position – Select the start position for the gradient.

Gradient End Position – Select the end position for the gradient.

Gradient Type – Select the type of gradient. Choose from Linear or Radial.

Radial Direction – Select direction for radial gradient.

Gradient Angle – Controls the gradient angle. In degrees.
Image Tab
Background Image –Upload an image to display in the background.

Background Position – Choose the postion of the background image.

Background Repeat – Choose how the background image repeats.

Background Blend Mode – Choose how blending should work when using multiple background layers; for example, a background image and a background color or gradient with opacity acting as a color overlay.
Color Options ScreenGradient Options ScreenImage Options ScreenExtras Tab
Rendering Logic – Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. Note: Server cache can interfere with results.

Filter Type (both regular & hover state options)

Hue – This filter controls the hue (color) of the contents of the nested column.

Saturation – This filter controls the color saturation of the contents of the nested column.

Brightness – This filter controls the brightness of the contents of the nested column.

Contrast – This filter controls the contrast of the contents of the nested column.

Invert – This filter inverts the colors of the contents of the nested column.

Sepia – This filter adds a sepia filter on the contents of the nested column.

Opacity – This filter controls the opacity of the contents of the nested column.

Blur – This filter adds a blur filter to the contents of the nested column.

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.

Modal Text / HTML Link Element

The Modal Text / HTML Link Element is another simple element, that allows you to add a text or html link to trigger a modal dialog, in conjunction with the Modal Element. The two work hand in hand. With this simple element, you can add some text to trigger a modal, or you can add html or shortcodes (like an image) to trigger a modal that way as well.
As of Avada 6.2, you can now also add a Modal Text/HTML Link using the Inline Editor in Fusion Builder Live. See below to read more about this handy element.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsLinks & Resources,How to use the Modal Text / HTML Link Element
Let』s add some simple text to trigger a Modal, using the Modal Text / HTML Link Element.

Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Add a Modal Text / HTML Link Element via the Fusion Builder.
Step 3 – The first thing to add is the Name of the Modal (which you will also add to the Modal element you add beneath this element). This tells the Element which Modal to trigger.
Step 4 – The next step is to add our triggering text / HTML to the text or HTML code field. For example, we could write Open this popup window for more details. Alternatively, to use an image to trigger the modal, insert the image code. Example below.
Step 5 – Click Save.
Step 6 – The next step is to create the Modal Element you wish to trigger. To read more about the Modal Element, view this documentation.

Copy to Clipboard 1767,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.

Name of Modal – Unique identifier of the modal to open on click.

Text or HTML code – Insert text or HTML code here (e.g: HTML for image). This content will be used to trigger the modal popup. This will also work with Shortcodes.

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 OptionsThe Modal Text / HTML Link Element does not have any global options.,Useful Links & ResourcesAnchor ScrollingModal ElementMenu Anchor ElementOne Page Text Link Element
One Page Menu with Multi-Page Links