詩語，作者 Avada 文檔 - 第 65 頁共 79 頁

Select Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Select Field Element allows users to choose from a set of predefined choices, that display in a dropdown list. You can see an example of this Element in the Sign Up Prebuilt Form.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Select Field ElementThe Select Field Element allows you to place select fields 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.
Step 3. Click on Add New Element and choose Select Field from the Form Elements tab.
Step 4. Go through the options to populate and configure the Element. You can add a label, decide if it is to be a required field, add an optional tooltip etc. You can add your own options, either individually or in bulk, or you can choose from a range of pre-populated choices, such as Countries, Days of the Week, Months of the Year, U.S. States, Years, and Days of the Month.
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 – 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 the initial selection.
Tooltip Text – The text to display as tooltip hint for the input.

Options – Add options for the input field. You can add your own options one at a time, or choose from Bulk / Predefined Choices, such as Countries, Days of the Week, Months of the Year, U.S. States, Years, Days of the Month.
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

reCAPTCHA Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The reCAPTCHA Field Element helps protect your website forms from spam and abuse. You must first configure the Global Options found at Options > Forms > Google reCAPTCHA for this to work.,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The reCAPTCHA Field ElementThe reCAPTCHA Field Element allows you to add the reCAPTCHA spam control 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 reCAPTCHA Field from the Form Elements tab.
Step 4. Go through the options to populate and configure the Element. As mentioned above, you need to first configure reCAPTCHA at a Global Level, and in that choose V2 or V3 reCAPTCHA. This affects the options seen when using the Element.
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.
V2 OptionsreCAPTCHA Color Scheme – Choose the reCAPTCHA color scheme.
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 ScreenV3 Options
reCAPTCHA Badge Position – Choose where the reCAPTCHA badge should be displayed.

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 OptionsThe Global options that control reCAPTCHA are found at Options > Forms > Google reCAPTCHA. For full details, please see our How To Set Up Google reCAPTCHA document.,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

Privacy Element

New with Avada 5.5.2 is the Fusion Builder Privacy Element. You can easily add this element to your privacy policy page, or wherever it fits best for your site. It will display checkboxes for all services you chose, and will show, to each of your users, which of the services they have consented to, and which they have not. They can also easily update their consents within the element. Please continue below to read more about this important privacy element.
IMPORTANT NOTE: The Privacy Element is disabled in Fusion Theme Options by default and needs to be enabled in the Theme Options > Privacy > Privacy Consent option for it to be accessible in the Fusion Builder. Embedded Content On This SiteThis is a working example, that lets you control the privacy settings for third-party embeds (in our case YouTube, Facebook, Twitter) on this site. More information and details can be found in our Privacy Policy.
Consent ChoiceWe provide you with the choice to accept this or not, as we prompt consent boxes for all embedded content, and no data is transferred before you have consented to it.
The checkboxes below show you all embeds you have consented to so far. You can opt-out any time by un-checking them and clicking the update button.
Google Maps,View Element Demo Page!View our full range of Privacy Tools!,OverviewHow To Use The ElementElement OptionsGlobal OptionsLinks & Resources,How To Use The Privacy ElementStep 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 Privacy notice into.
Step 3 – Click on the + Element button at the bottom of the column. Select Privacy.
Step 4 – Add your Privacy text to the dialogue and choose whether you want the form checkboxes to be stacked, or if they should be floated. Click Save to add the element to your page. You will be returned to the edit page. You can preview the page to view your content, and you can always edit the element again to make changes..
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.
General Tab
Privacy Text – Allows you to add the text to display.

Form Field Layout – Allows you to set the form fields to be stacked/full width or floated.

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 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 OptionsThere are no Global Options for the actual Privacy Element, but there are options in the Theme Options, found at Avada > Theme Options > Privacy. These affect all aspects of the Privacy Tools added to Avada, but not the Element directly.,Useful Links & ResourcesGDPR and Avada Privacy ToolsAvada Privacy BarPrivacy Tools Options

Separator Element

The Separator Element offers highly flexible separators for your site, including seven line types, plus a No Style Separator for convenient spacing. You can also control Separator Border Size, Color, Width, Margins above and below, Alignment, and you even add icons to them. Read on for an overview of this very useful Element, or watch the video for a visual overview.,View Element Demo Page!,OverviewHow To Use The Element
Element Options
Global Options,How To Use The Separator ElementThe Separator Element allows you to add styled or invisible separators anywhere in your content.
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 Separator from the Elements List.
Step 4. The first thing to choose is the Separator Style. The element comes with 7 preset styles plus a No Style option for invisible separators. Be sure to check out the Separator Element Demo page to see all the options.
Step 5. The Design tab is your next stop. Depending on the style chosen, you will have more or less to do here. If you have chosen the No Style option, all you need to do is to determine the spacing for the element. This is achieved via the second option, the Margin. You can specify your spacing in px, em, or %. You can adjust the margins above and below the separator, but this is not important with an invisible one. This is best used to increase the separation between elements. It is also possible to use negative values with this element.
Step 6. If you have chosen a styled element, the remaining options are to style this, with regards to its color, icon, size, width and alignment. A huge variety of separators are possible.
Step 7. Once you have completed styling your Separator Element, 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 > Separator. Also, 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
Style – Selects the Style for the Separator. Choose between the seven Separator line styles, the No Style, or the Default option, set in Theme Options (Avada > Options > Avada Builder Elements > Separator).

Element Visibility – Allows you to control the Separator』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 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
Flex Grow – Controls the amount (in parts) of the available space inside a flex column the separator should take up. If the separator is the only element in the column using flew grow, any value above 0 will let it take up all available space. Set to 0 to disable its ability to grow.

Margin – Controls the spacing above and below the Separator. In px, em or %, e.g. 10px.

Separator Width – Controls the width of the Separator. In In pixels (px or %), ex: 1px, ex: 50%.

Alignment – Controls the alignment of the Separator. This only works when a width is specified. Choices are Center, Left, or Right.

Border Size – Controls the thickness of the Separator. In pixels.

Separator Color – Controls the Separator Color. Leave empty for the Default value, set in Theme Options (Avada > Options > Avada Builder Elements > Separator).

Select Icon – Allows you to select an icon to show in the center of the Separator.

Icon Size – In pixels.

Icon Color – Controls the color of the Icon.

Circled Icon – Controls whether the chosen icon has a circle around it. Choices are Default, Yes, or No.

Circle Color – Controls the background color of the circle around the icon. Leave empty for the default value.
View The Options ScreenGlobal OptionsLocation: Avada > Options > Avada Builder Elements > Separator.

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Separator Style – Controls the line style of all separators, divider lines on portfolio archives, blog archives, product archives and more.

Separator Color – Controls the color of all separators, divider lines and borders for meta, previous & next, filters, archive pages, boxes around number pagination, sidebar widgets, accordion divider lines, counter boxes and more.

Border Size – Controls the border size of the separator. In pixels.

Icon Size – In pixels.

Separator Circle – Turn on if you want to display a circle around the separator icon.

Circle Color – Controls the background color of the circle around the icon.
View The Options Screen

Featured Images Slider Element

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

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

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

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

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

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

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

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.

Image Element

The Image Element is a fundamental Element in Avada Builder. Images play critical roles in websites, and with the Image Element, you can easily add images to your site, with a large amount of control over their appearance and behavior. Continue reading below to learn more about one of the most commonly used elements in Avada, and watch the video for a visual overview.,Pet Supplies,View Element Demo Page!,Overview
How To Use The Image Element

How To Insert An Image Element

How To Add An Image To The Element

How To Use 『Gallery ID』 Option
How To Use The Image Element To Add A Logo To A Header Layout
Image Element Options

Global Image Element Options

Links & Resources,How To Use The Image ElementThe Image Element can be used anywhere in your content. This element has numerous options, as well as a few global options. This element also features a Lightbox option where you can display a single or multiple image elements, and with Avada 7, it can be used to add a site logo to a Header Layout, using the Dynamic options in the Element.
How To Insert An Image 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 Image from the Elements List.
Step 4. Click the 『+ Element』 button to bring up the Elements window. Locate the Image Element and click it to add it to the page. Alternatively, just search for 『Image』 and the Image Elements will be filtered for your selection.
How To Add An Image To The ElementStep 1. Once you』ve added the Element into the page, you will see a placeholder image on the page (Avada Live).
Step 2. The first element option is called Image. Click the 『Plus』 button and select or upload the image you』d like to display inside the image element.
Step 3. Configure the Element to your preferences. There is a wide range of options with this Element, including Style Types, Boders, Captions, Masks, Aspect ratios etc.
Step 4. Once finished, remember to save your changes.
How To Use 『Gallery ID』 OptionCreating A Gallery With Image ElementsThe 『Gallery ID』 option allows you to combine any number of Image Elements on the page to display in the same lightbox gallery. Continue reading below to learn how to use this option.
Step 1. Add an Image Element in the usual manner.
Step 2. Set the 『Image Lightbox』 option to Yes. If you』d like to set a different lightbox image, assign one using the 『Lightbox Image』 option.
Step 3. Locate the 『Gallery ID』 option and insert a unique name for the lightbox gallery that this image frame will belong to. For example, Products.
Step 4. Repeat steps 1 – 3 for all the Image elements you』d like to include in the lightbox gallery.
How To Use The Image Element To Add A Logo To A Header LayoutYou can also use the Image Element to add a Logo to a Header Layout. To do this, you can simply insert an image as normal, or you can use the Dynamic Content option in the Image field. Under Site, there is a Logo option, and when you select this, you can choose a Logo Type (see below). You can select any of the three logo types (Default, Sticky and Mobile) in both Normal or Retina, or you can select the All option. This pulls the most appropriate logo from the Global Options Logo area as the image, depending on the size of your screen. NB. Just be aware, this method loads more content than adding a single image, and so likely affects page scores more than the simple method of adding a single image for the logo.
Read More: How To Use The Image Element To Add A Logo In A Header Layout!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 settings will use the global settings assigned for this element at Options > Avada Builder Elements > Image. 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
Image – Allows you to upload an image to display. Dynamic options are also available.

Image Aspect Ratio – Select an aspect ratio for the image.

Custom Aspect Ratio – Set a custom aspect ratio for the image.

Image Focus Point – Set the image focus point by dragging the blue dot.

Image Sticky Max Width – Set the maximum width the image should take up when its parent container is sticky. Enter value including any valid CSS unit, ex: 200px. Leave empty to use the full image width.
Skip Lazy Loading – Select whether you want to skip lazy loading on this image or not.
Image Lightbox – Allows you to display the image in a lightbox. Choose between Yes or No.

Gallery ID – Allows you to set a name for the lightbox gallery the image frame belongs to.

Lightbox Image – Allows you to upload a different image to display on the lightbox.

Image Alt Text – Allows you to set alternative information in case the image cannot be viewed.

Image Link URL – Allows you to set a URL which the image will link to when clicked. 『Image Lightbox』 option must be set to No.

Link Target – Allows you to set how the link opens. Choose between _self for the same window or _blank for a new window.

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

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

CSS ID – Allows you to add an ID for the column.
View The Options ScreenDesign Tab
Image Max Width – Set the maximum width the image should take up. Enter value including any valid CSS unit, ex: 200px. Leave empty to use full image width.

Alignment – Allows you to choose how to align the image. Choose between Text Flow, Left, Right, or Center. This is now part of the Responsive Option Sets, which means you can set this option independently for Medium and Small Screen Layouts.

Mask – Select an image mask.

Custom Mask – Upload a custom mask image. The image should be in SVG or PNG format with transparent background.

Mask Size – Select the mask size. Choose from Fit, Fill or Custom.

Custom Size – Set the size of the image mask. Enter value including any valid CSS unit ex. 60% or 200px.

Mask Position – Set image mask position.

Custom Mask Position – Set a custom image mask position. Enter value including any valid CSS unit in pair first for X axis second for Y axis ex. 60% 50px.

Mask Repeat – Select how the image mask repeats.

Style Type – Allows you to select a style type. Choose from None, Glow, Drop Shadow, or Bottom Shadow.

Glow / Drop Shadow Blur – Allows you to set the amount of blur added to the glow or drop shadow styles.

Style Color – Allows you to set the color for the styles.

Hover Type – Allows you to select the hover effect type. Choose from None, Zoom In, Zoom Out, or Lift Up.

Margin – Adjust the margins around the image. Enter values including any valid CSS unit.

Border Size – Allows you to set the border』s size.

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

Border Radius – Allows you to set the border』s radius.
View The Options ScreenCaption Tab
Caption – Choose the caption style. By default set to Off. Choices are Off, Above, Below, Navin, Dario, Resa, Schantel & Dany.

Title / Caption Align – Choose how to align the caption.

Image Title – Enter title text to be displayed on image.

Image Caption – Enter caption text to be displayed on image.

Image Title Color – Controls the color of the image title.

Image Title Size – Controls the font size of the image title. Enter value including any valid CSS unit, ex: 20px.

Image Title Heading Tag – Choose HTML tag of the image title, either div or the heading tag, h1-h6.

Image Title Typography

Font Family – Controls the font family of the image title.

Font Size – Controls the size of the font.

Text Transform – Choose how the title is displayed. Choose from Default, Normal, or Uppercase.

Image Caption Color – Controls the color of the image caption.

Image Caption Background Color – Controls the background color of the caption.

Image Caption Typography

Font Family – Controls the font family of the image title.

Font Size – Controls the size of the font.

Text Transform – Choose how the title is displayed. Choose from Default, Normal, or Uppercase.

Caption Border Color – Controls the color of the caption border.

Image Overlay Color – Controls the color of the image overlay.

Caption Area Margin – In pixels or percentage, ex: 10px or 10%. Only available on Above, and Below.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

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.

Filter Type – These filters have both a normal and a hover state.

Hue – Controls the hue (color) of the image. In degrees.

Saturation – Controls the saturation (color density) of the image. Default is 100. Fully desaturated = 0, and 200 = fully saturated.

Brightness – Controls the brightness of the image. Default is 100.

Contrast – Controls the contrast of the image. Default is 100. Low contrast is 0, and 200 is high contrast.

Invert – Controls the colors of the image. Default is 0. To fully invert the colors, set the slider to 100.

Sepia – Desaturates, and adds a sepia (brown) tone to the image. To fully desaturate and add sepia tone, set slider to 100.

Opacity – Controls the opacity of the image. Default is 100. To make image fully transparent, set slider to 0.

Blur – Adds a blur to the image. Default is 0. Fully blurred is 50.
View The Options ScreenGlobal OptionsLocation: Avada > Options > Avada Builder Elements > Image
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Image Style Type – Allows you to set the Image Element』s Style type.

Image Glow / Drop Shadow Blur – Allows you to set the amount of blur added to the glow or drop shadow effect.

Image Style Color – This controls the style color for all style types except border.

Image Border Size – Allows you to set the border size. Accepts a pixel value.

Image Border Color – Allows you to set the border color. Accepts a hexcode (#000000).

Image Border Radius – Allows you to set the border radius. Accepts a pixel value.
View The Options Screen,Useful Links & ResourcesHow To Use Captions On Image Based Elements
Creating a Gallery with Image Elements

Image Size Guide
Image Hover EffectsHow To Change Image Sizes in Child Themes
Image Rollovers

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.

Highlight Element

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

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

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

Background Color – Pick a highlight background color.

Rounded Corners – Choose to have rounded corners.

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

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

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

Author 詩語

Select Field Element

reCAPTCHA Field Element

Privacy Element

Separator Element

Recent Posts Element

Featured Images Slider Element

Pagination Element

Image Element

Nested Columns Element

Highlight Element