elements 归档 - 第 10 页共 15 页

Flickr Element

The Flickr Element allows you to add a Flickr feed anywhere in your content. Read the document to see the full range of options.,View Element Demo Page!,OverviewHow To Use The Element Element OptionsGlobal Options,How To Use The Flickr ElementStep 1 – Select where you』d like to place your Flickr feed. Add the Flickr Element from the Element Dialog.
Step 2 – Configure the Element as required. On the General tab, set your Flickr ID to pull your own Flickr feed into the Element, determine the number of images to display and your preferred aspect ratio.
Step 3 – On the Design tab, set your preferred columns, spacing and margins.
Step 4 – You can choose to animate the Element on the Extras tab if you wish.
767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 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: Please note that 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
API Key – Use default or get your own from Flickr APP Garden.

Flickr ID – Get your Flickr ID

Count – Number of photos to show.

Images Aspect Ratio – Set images aspect ratio. Choose from 1:1, 2:1, 2:3, 3:1, 3:2, 4:1, 4:3, 5:4, 16:9, 9:16, 21:9, 9:21, or Custom.

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

Count – Number of photos to show.

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

CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
View the Options ScreenDesign Tab
Number Of Columns – Select the number of columns to display.

Column Spacing – Controls the spacing between columns.

Margin – Enter values including any valid CSS unit, ex: 4%.
View The Options Screen,Extras 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.

How To Use the Dynamic Options In The Countdown Element

With Avada 7.3, Dynamic Content options were added to the Countdown Element. These Dynamic Content options are particularly useful for users of WooCommerce and The Events Calendar, as you can use them to link the Countdown Element to specific WooCommerce sales or Event Calendar events. Read on to find out how you can use these Dynamic Content options.,Dynamic Content OptionsWith the Countdown Timer End option of the Countdown Element, it is now possible to use Dynamic Content, instead of simply adding a date and time. To do this, simply click on the Dynamic Content Icon to the right of the Option Title, and a dropdown selector will appear. Here, you can choose one of four Dynamic Content types, a Custom Field, a Shortcode, a WooCommerce Sales Date, or an Event Calendar Event Date.
The first one is a Custom Field, which is pretty much for advanced users. If, for example, a user had a Custom Post Type and a custom field into which they added a date, they could use that here. Likewise, with the Shortcode option. If a user created their own shortcode which returned a date, then they could use that here. But using the last two options are going to be much more likely for the majority of users, so let』s focus on those.,Linking To WooCommerce SalesWhen you choose a WooCommerce Sale Date as the Dynamic Content type, a further dialog appears. As you can see in the screenshot below, this allows you to choose a Sale Start Date, or a Sale End Date to count down to, as well as having a field for a Product ID, and one for a Fallback value.
Product IDYou can enter a Product ID to display a specific product』s sale date, or if you leave it empty, it will auto-pull the product ID of the currently viewed product to check for sales dates. How this works depends on where you place the Countdown Element, and whether you use the Hide When Inactive option.
To find a Product ID is relatively easy. With WooCommerce Products, it』s right there when you mouse over the product, as can be seen in the first screenshot below. For The Event Calendar Events, as you can see in the second screenshot, the Event ID can be seen at the bottom of your browser when you mouse over the Edit button. If your browser does not display this, simply edit the Event, and the Event ID is the number in the Event URL.
It』s also important to remember that sales dates are set on individual products in WooCommerce, not for the shop as a whole. So where the Dynamic Content option is most useful would perhaps be in a Single Product Layout, where the Element would pull the sales dates of the various products as they were viewed. To clarify how the Dynamic Options can work, let』s look at a couple of different scenarios.,Countdown To Sale Start In A LayoutLet』s say we add the Countdown Element to a Single Product Layout, and use the Dynamic Content options to set it to display the Sale Start Date. Because it』s being used in a product template, we don』t want to set an ID for a specific product, so here, we leave that empty. In the screenshot below, you can see the Element added to the top of the Layout Section, with the Date set to Sale Start Date.
But also, let』s say only selected products in our shop will be going on sale. Because the Element is being used in a template, it would normally be displayed on all products, including those with no sale dates. But in the Countdown Element, there is a very useful Display When Inactive option. If we set that to Hide, then the Element will only display on products with upcoming sales! And because we didn』t add a Product ID, the Element will auto-pull the dates from the individual products viewed, so even if the sales started on different dates, this would be reflected in the actual products. In the screenshots below, we can see what a product with a sale coming up would look like, and below that, what a product with no sale coming up would look like.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Countdown To Sale End In A LayoutOK, but what about when the sale starts? Our Sale Start Date now becomes Inactive, as it has passed, and so the Element no longer displays on the product. And now we might want another Countdown, this time to the end of the Sale. With the Dynamic Option in the Countdown Element, we can set both of these up at the same time.
In the same Product Layout Section, we can now add another Countdown Element, but this time we set the Dynamic Content of the Countdown Timer End option to Sale End Date. We also set the Display When Inactive Option To Hide, and change the Title and Subtitle Text. That』s it!
So now, before the sale has started we see the initial Countdown Element on any products that have a Sale Date, just like before. But after the sale has stared, this instance of the Element does not display any more and our second Countdown Element becomes active and displays on the page, as can be seen in the second screenshot. And on products that don』t have any sale, neither instance of the Element displays. How cool is that!,Countdown To Sale On Static PageIf you want to use the Countdown Element to count down to the start or end of a sale on a Home, or other static page, then the Dynamic Content options are not as useful as when used in a dynamic item like a Layout, as it』s very easy to just enter a date manually. But if you wanted to highlight the sale of a specific product, you could easily add the Element, and add the Product ID so that the Sales date of that specific product is used.
In the screnshot below, you can see an example of a specific product being promoted on the home pgae on the online Tutor website. It』s also set to Hide on the Display When Inactive option, so it will not display once the sale is live. This could of course be a count down to the end of a sale, or there could be both as done in the Layout above.,Linking To Event Calendar EventsThe process is basically the same with linking the Dynamic options of the Countdown Element to an Event Calendar Event. Again, when selecting the Event Date Dynamic Content Type, you are met with exactly the same options.
That said, Event Calendar Events are inherently different from WooCommerce Products. The Events page itself is automatically generated, and so is not a page that can be edited directly. And unlike WooCommerce Products, Layouts are not in use for Events, so the most likely places to use the Countdown Element with Dynamic Content is on a static page, like the Home page, or on the actual Event pages.,Countdown To Event On Static PageHere is an example of a Countdown to an Event on the Home page of the Online Tutor site. The Event Start Date option was selected in the Dynamic Content options, and a specific Event ID was added to pull the start date from the event in question. See the Product ID section above to see how to find IDs for Events.,Countdown To Event On Event PageTo be able to edit your individual Events in Avada Builder, make sure that 『Event』 is selected under Post Types in the Builder Options (Avada Dashboard > Options > Builder Options > Post Types).
Then it』s the same as any page. Simply add the Countdown Element, select the Start or End Date in the Dynamic options, and set the Event ID for that specific Event. Using the Dynamic Content options here doesn』t really have any advantage over manually enterting the date, but it』s another option you have.

Layer Slider Element

If you have the bundled Premium Slider Plugin, Layer Slider, activated on your site, you will have the Layer Slider Element available through the Avada Builder. This very simple Element has only one purpose, and that is to enable you to add a Layer Slider slider anywhere in your content, and not be limited to above or below the header, as is the case when adding them through the Avada Page Options.
Read on to see the options for this simple helper Element, and watch the video below for a visual overview.,View Element Demo Page!,Layer Slider Element OptionsSelect Slider – As you can see, this Element has only one option, and that is to choose the Slider you wish to show. The Slider will interact with the column and container it is placed in, so if you place it in a 1/2 Column, it will only fill that area.
IMPORTANT NOTE: Many themes sold on ThemeForest come bundled with premium plugins from CodeCanyon. A plugin offers additional functionality and features beyond a typical WordPress installation, and you do not need additional licensing in order to use the plugin with your theme. The terms and conditions for bundled plugins is set out by Envato.As of Avada 5.4.1, Avada bundled plugins can be updated independently and outside of an Avada update. The update notification will be visible and can be accessed via the Avada > Plugins section.
Global OptionsThere are no Global Options for this Element.
767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,Useful Links & ResourcesThere are extensive options when creating sliders with Layer Slider. Avail yourself of the plugin documentation below.

Layer Slider – Extensive Documentation can be found at the Kreaturamedia website.
Layer Slider templates FREE and PremiumAvada Bundled Plugins Info

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

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

Flip Boxes Element

The Flip Boxes Element is great for grabbing the user』s attention and adding some interaction with your content. Flip Boxes have fully customizable content on the front and back side. They are fully integrated with the Font Awesome icon set and icon options like spin, rotate, flip. You can put a title on the front and backside, add buttons to your content, and the box height will extend based on the amount of content you use.
In Avada 5.9, we added a number of new effects and controls, including new flip effects, flip direction and duration, equal heights control, and the ability for background images. Read below for more details on this very graphic element.
ResponsiveAvada's responsive framework ensures your content looks great on all screen sizes.On All Screens
No matter the size of your screen or device, your site will look fantastic.
Buy Avada Now
SlidersAvada includes four premium sliders that will make your content stand out!Dynamic Content
Avada includes the Layer Slider, Revolution Slider, Avada Slider and Elastic Slider.
Buy Avada Now
ElementsAvada offers incredible elements that allow you to create a beautiful site.Create Beauty
Scores of well designed shortcodes loaded with options gives you perfect freedom.
Buy Avada Now,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Flip Boxes ElementThe Flip Boxes Element allows you to add cool, double sided boxes that 「flip」 when you mouse over them, anywhere in your content.
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 Flip Boxes.
Step 4 – The options on the right hand side are Parent Options, and affect the whole series of flip boxes. This element has a number of parent options, and this is the place to start. Make sure to view the Flip Boxes Element Demo page here, to fully appreciate the different layouts and options on offer.
Step 5 – Move down the Parent Options, deciding how to style the Flip Boxes. Note that the first option is Number of Columns. This element can be inserted into any size column, and by choosing how many columns to display will determine how many Flip Boxes are displayed across the column width. If there are more items than the number of columns chosen, the remaining items will display on a new row below the first. If there are fewer item than the number of columns chosen, the full width of the column will not be used. You can choose a global icon here, or you can choose them individually, in the child item options. Configure the remaining parent options, keeping in mind, these are global options that will affect all flip boxes.
Step 6 – Once you have set all your Parent Options, you add Child Items on the left. Click the pen icon to edit the existing item. The Child Item Options Panel appears. Note that you can override a large number of global options here, customizing the individual flip boxes. You will see content and styling options for both the front side and back side of the boxes. Go through and configure one flip box at a time.
Step 7 – You can then duplicate existing, or create new, flip boxes by clicking on the Clone Item icon, or the + Flip Box button respectively.
Step 8 Once you have completed adding your flip boxes, click Save. You will be returned to the edit page. You can preview the page to view your flip boxes, and you can always edit the element again to make changes.
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 Default setting will use the global settings assigned for this element in the Options > Avada Builder Elements > Flip Boxes 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.
Children Tab
Add / Edit Items – This is where all your child element』s items are found. Each will be numbered to better keep track of how many you currently have. You can reorder elements by dragging them and dropping them into place.

Edit Item Icon – Allows you to edit an item.

Clone Item Icon – Allows you to clone an item. Cloned items will automatically be added to the bottom of the items list.

Delete Item Icon – Allows you to delete an item.

Re-order Feature – Allows you to drag and drop the item to your desired order to rearrange them.

Add New Flip Box Button – Allows you to add a new Flip Box.
View The Options ScreenGeneral Tab
Number of Columns – Set the number of columns per row. Choose from 1 – 6 columns.

Flip Effect – Set the effect for the flip boxes. Choose from Default, Classic, or 3d.

Flip Direction – Set the direction in which the boxes should flip. Choose from Default, Flip Left, Flip Right, Flip Up, or Flip Down.

Flip Duration – Set the speed at which the boxes flip.

Equal Heights – Set to yes to display flip boxes to equal heights, regardless of content.

Icon – Global setting for all counter boxes, this can be overridden individually. Click an icon to select, click again to deselect.

Icon Color – Controls the color and opacity of the icon.

Icon Circle – Choose to use a circled background on the icon. Choose from Yes, or No.

Icon Circle Background Color – Controls the color of the circle.

Icon Circle Border Color – Controls the color of the circle border.

Flip Icon – Choose to flip the icon. Choose from None, Horizontal, or Vertical.

Rotate Icon – Choose to rotate the icon. Choose from 90, 180, 270 (degrees), or None.

Spinning Icon – Choose to let the icon spin.

Icon Image – To upload your own icon image, deselect the icon above and then upload your icon image.

Icon Image Max Width –Set the icon image max width. Leave empty to use image』s native width. In pixels, ex: 35.

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

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.

CSS ID – Add a custom id to the wrapping HTML element for further css customization.
View The Options ScreenItem OptionsGeneral Tab
Flip Direction – Set the direction in which the boxes should flip. Leave empty for the value set in parent options. If that is also empty, the Theme Options default value will be used.

Flip Box Frontside Heading – Add a heading for the frontside of the flip box.

Flip Box Backside Heading – Add a heading for the backside of the flip box.

Flip Box Frontside Content – Add content for the frontside of the flip box.

Flip Box Backside Content – Add content for the backside of the flip box.

Icon – Click an icon to select, click again to deselect.

Icon Color – Controls the color of the icon. Leave empty for value set in parent options. If that is also empty, the Theme Options value will be used.

Icon Circle – Choose to use a circled background on the icon.

Icon Circle Background Color – Controls the color of the circle. Leave empty for value set in parent options. If that is also empty, the Theme Options value will be used.

Icon Circle Border Color – Controls the color of the circle border. Leave empty for value set in parent options. If that is also empty, the Theme Options value will be used.

Flip Icon – Choose to flip the icon. Choose from Default, None, Horizontal, or Vertical.

Rotate Icon – Choose to rotate the icon. Choose from 90, 180, 270 (degrees), or None.

Spinning Icon – Choose to let the icon spin.

Icon Image – To upload your own icon image, deselect the icon above and then upload your icon image.

Icon Image Width – If using an icon image, specify the image width in pixels but do not add px, ex: 35.
View The Options ScreenDesign Tab
Background Color Frontside – Controls the background color of the front side. IMPORTANT: Flip boxes must have background colors to work correctly in all browsers.

Background Image Frontside – Upload an image to display in the background of the front side.

Heading Color Frontside – Controls the heading color of the frontside.

Text Color Frontside – Controls the text color of the frontside.

Background Color Backside – Controls the background color of the backside. IMPORTANT: Flip boxes must have background colors to work correctly in all browsers.

Background Image Backside – Upload an image to display in the background of the back side.

Heading Color Backside – Controls the heading color of the backside.

Text Color Backside – Controls the text color of the backside.

Border Size – In pixels. From 0 to 50px.

Border Color – Controls the border color.

Border Radius – Controls the flip box border radius. In pixels (px), ex: 1px, or 「round」.
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.

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 OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Flip Boxes.

The Avada Advanced Options Network gives you amazing flexibility with additional Global Element Options that allows you to control individual Element default settings.

Flip Effect – Set the effect for the flip boxes. Choose from Classic, or 3d.

Flip Direction – Set the direction in which the boxes should flip. Choose from Flip Left, Flip Right, Flip Up, or Flip Down.

Flip Duration – Set the speed at which the boxes flip. In seconds.

Equal Heights – Set to yes to display flip boxes to equal heights. Choose from Yes, or No.

Flip Box Background Color Frontside – Controls the color of the frontside background.

Flip Box Heading Color Frontside – Controls the color of the frontside heading.

Flip Box Text Color Frontside – Controls the color of the frontside text.

Flip Box Background Color Backside – Controls the color of the backside background.

Flip Box Heading Color Backside – Controls the color of the backside heading.

Flip Box Text Color Backside – Controls the color of the backside text.

Flip Box Border Size – Controls the border size of the flip box background. In pixels.

Flip Box Border Color – Controls the border color of flip box background.

Flip Box Border Radius – Controls the border radius of the flip box background. Enter value including any valid CSS unit, ex: 4px.
View The Options Screen

Icon Element

The Icon Element, (formerly the Font Awesome Icon Element) was renamed back in Avada 6.2. This was because of the added ability to add custom icon sets to Avada, which this element can then access. For more details on that, please see How To Upload And Use Custom Icons in Avada.
But regardless of the name change, this element is still a great way to add any of the 1,609 Free Font Awesome Icons to your content, as well as any custom fonts you want to upload. And if that』s not enough for you, you can now import custom Icon sets directly from Avada Studio. And if you』re a total icon freak, there is also Font Awesome Pro Integration in Avada, giving you access to 7,800+ Font Awesome Icons through the Avada Builder.
A full set of styling options in this Element allow you to select icon size, weight, color, background, rotation, spinning and more. And every one is 100% full vector, so they look incredibly sharp and are retina-ready! Read below for an overview of the specific features of this awesome Element.,IMPORTANT NOTE: Font Awesome Pro requires an annual subscription, please check their site for detailed information & pricing.,View Element Demo Page!,OverviewHow To Use The Icon ElementElement OptionsGlobal Options,How To Use The Icon ElementThe Icon Element allows you to place icons anywhere on your site.
Step 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 Icon from the Elements List.
Step 4. There are three tabs in the Icon Element. The first one, General, is where you choose your font, and make some basic settings to do with size, functionality and alignment. The Icon picker was also updated with Avada 6.2 to show any installed icon sets, both Font Awesome Icon sets and Custom Icon sets. The Design tab is where you configure your selected icon』s appearance with margin, circle, color, background and border options. The Extras tab offers animation options that allow you to determine how the icon interacts with the loading of the page.
Step 5. Once you have completed styling your Icon, click Save.
Read below for a detailed description of all element options.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 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 at Options > Avada Builder Elements > Icon. 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.
General Tab
Select Icon – Click an icon to select, click again to deselect. Use the Plus symbol to add a custom icon set.

Icon Size – Set the size of the icon. In pixels (px), ex: 13px.

Flip Icon – Choose to flip the icon.

Rotate Icon – Choose to rotate the icon.

Spinning Icon – Choose to let the icon spin.

Link – Add the url the icon should link to.

Link Target –_self = open in same window, _blank = open in new window.

Alignment – Select the icon』s alignment. Choose from Text Flow, Center, Left, or Right. This setting now has Responsive Options. See the Responsive Option Sets document for more info.

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

Element Sticky Visibility – (Only visible if parent Container is set to Sticky). 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
Margin – Spacing around the font awesome icon. In px, em or %, e.g. 10px. Note: Leave empty for automatic margin calculation, based on alignment and icon size.

Icon Color – Controls the color of the icon.

Icon Hover Color – Controls the hover color of the icon.

Icon Background – Turn on to display a background behind the icon.

Icon Background Size – Controls the background size of the icon. In pixels.

Icon Background Color – Controls the color of the icon background.

Icon Hover Background Color – Controls the hover color of the icon background.

Icon Background Border Size – Controls the size of the background border.

Icon Background Border Color – Controls the color of the background border.

Icon Hover Background Border Color – Controls the hover color of the background border.

Border Radius – Enter values including any valid CSS unit, ex: 10px. Leave empty for default values.

Icon Hover Animation Type – Select the animation type for icon on hover. Choose from Fade, Slide or Pulsate.
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.

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

Icon Font Size – Controls the size of the icon. In pixels.

Icon Color – Controls the color of the icon.

Icon Hover Color – Controls the hover color of the icon.

Icon Background – Turn on to display a background behind the icon.

Icon Background Color – Controls the color of the icon background.

Icon Hover Background Color – Controls the color of the icon background on hover.

Icon Border Size – Controls the border size of the icon.

Icon Background Border Color – Controls the border color of the icon background.

Icon Hover Background Border Color – Controls the border color of the icon background border on hover.

Border Radius – Set the border radius.

Icon Hover Animation Type – Controls the hover effect of the icon. Choose from Fade, Slide, or Pulsate.
View The Options Screen

Lightbox Element

The Lightbox Element is one of several media elements offered by Avada – check out the Image, Gallery, Soundcloud, Youtube and Vimeo Elements as well. Lightbox is also integrated into Avada for galleries and in various other areas, but the Lightbox Element is for single image or video use on any page or post. If you want to show more images, use the Gallery Element instead. Read on for an overview of this simple but very useful visual Element.,Busy City at Night,View Element Demo Page!Read more about Videos in Lightbox!,OverviewHow To Use The ElementElement OptionsGlobal OptionsLinks & Resources,How To Use The Lightbox Element
The Lightbox Element is a very simple Element to use.

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 shortcodes.
Step 3 – Click on the + Element button at the bottom of the column. Select or search for Lightbox.
Step 4 – Now you have the options window open. The first step is to choose which what sort of media you wish to display. You can show images or videos in Lightbox.
Step 5 – The next step is to upload the full size image. This is the image that will be displayed when you open the Lightbox. Alternatively, place the url for the video in the field below. Then you choose the Thumbnail image. This is what will display on the page before you open the Lightbox. Finally, there is an Alt Text and a Description Field if you wish to use these, as well as a CSS Class and a CSS ID field.
Step 6 – Once you have finished configuring your options, click Save.
Step 7 – If you preview your page, you will see the Lightbox thumbnail, and if you click that, the Lightbox will open with the full size image or video. You can always return to the element to edit your 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.
These are the element options for the Lightbox Element added through the Avada Builder. You can also add a Lightbox Element to a content area (eg. a Text Block Element), via the Element Generator found in the WordPress Content Editor toolbar. Learn more about Inline Elements here.
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.

Content Type – Select what you want to display in the lightbox. You can choose between Image, or Video.

Full Image – Choose the full-size image that will show up in the Lightbox.

Video URL – Enter the full video URL that will show up in the lightbox.

Thumbnail Image – Add a thumbnail image for the page. Clicking this image will show the Lightbox. You can choose any size image, but it makes sense for it to be smaller than the full-size image.

Alt Text – The alt attribute provides alternative information if an image cannot be viewed.

Lightbox Title – This will show up in the lightbox as a title above the image.

Lightbox Description – This will show up in the lightbox as a description below the image.

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 OptionsThere are no Global Options for the Lightbox Element, but the styling options found in the Global Options for Lightbox (Avada > Options > Lightbox) will affect the visual appearance of the Lightbox used by the Element. Follow the link below to read more about the Lightbox Global Options.
Read all about Lightbox Global Options Here!,Useful Links & ResourcesVideos in LightboxLightbox Global Options

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

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.

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