elements 归档 - 第 12 页共 15 页

Gravity Form Element

The Gravity Form Element is a simple helper Element that allows you to quickly add your Gravity Forms directly into your page content.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

Select Form – Select the form you want to display.

Display Form Title – Choose whether or not to display the form title.

Display Form Description – Choose whether or not to display the form description.

Enable Ajax – Specify whether or not to use Ajax to submit the form. This allows for the form to display errors and to submit data without requiring a page reload.
View The Options ScreenGlobal OptionsThere are no Global Options for the Gravity Form Element.

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.

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

Menu Anchor Element

The Menu Anchor Element is a very simple element, that allows you to add a menu anchor (anchor id) anywhere on your page. By adding an anchor id, and then setting up an anchor link somewhere else on the page, people can click on the anchor link and be taken directly to the section with the anchor id. See below to read more about this handy element.
This is an Anchor Link, which will take you down the page to the Anchor ID!,View Element Demo Page!Read all about Anchor Scrolling Here.,OverviewHow To Use The ElementElement OptionsLinks & Resources,How to use the Menu Anchor Element
Using the Menu Anchor Element allows you to target a specific section of the page. For example, if you』d like to target specific content, then you would place a Menu Anchor element directly above it. That way, the user scrolls directly to the content you』d like them to see rather than just the beginning of the section it』s part of.

Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Add your content as normal then determine the content on the page you』d like to target.
Step 3 – Now we need to add the Menu Anchor element. To do this, add a 『1/1』 Column directly above the content you』re targeting by clicking the 『+ Columns』 button on the lower right side of the Container.
Step 4 – Once you』ve added the 『1/1』 column, click the 『+ Elements』 button to bring up the Elements window. Locate the 『Menu Anchor』 element and click it to bring up it』s options window.
Step 5 – In the 『Name』 field, enter a unique Anchor ID. For example, aboutme.
Step 6 – Once finished, click 『Save』. Repeat steps 3-5 for all the different content you』d like to target.
Step 7 – The last step, which is outside of the usage of this element, is to add your anchor links that will connect to the anchor id. There are various ways to do this, depending on what you are wanting to link. For more information on the various ways to do that, please see this document.

767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Menu Anchor Element OptionsName – This name will be the id you will have to use in your anchor link.
CSS Class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.,Useful Links & ResourcesAnchor ScrollingModal ElementModal Text / HTML Link ElementOne Page Text Link Element
One Page Menu with Multi-Page Links

Notice Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Notice Element is used to display messages after form submission. There is a field for both a success message, and a failure message. They come pre-populated with default messages, or you can totally customize them with your own messages. You will find this Element on almost all the prebuilt forms.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Notice ElementThe Notice Element allows you to place checkboxes into your forms.
Step 1. Create a new, or edit and existing Form in the Avada Form Builder.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose Notice from the Form Elements tab.
Step 4. The Notice Element controls the notices shows when the Form Confirmation Options in the Confirmation Tab of the Form Options panel is set to Display Message. The Element comes pre-populated with default messages, but you can of course customize these messages as you wish. When using Display Message as the Confirmation Type, this is a required Element for your form.
Step 5. Once you have configured the Element, save your page.
Read below for a description of all element options.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element. You access the Form Builder Elements when adding an Element while editing a Form in the Avada Form Builder (Forms > Form Builder, from the Avada Dashboard).
You can deploy as many individual Elements in your forms as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each instance of the Element independently, greatly enhancing your flexibility and creative options.

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

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

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

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

CSS ID – Allows you to add an ID to the wrapping HTML.
View The Options ScreenGlobal OptionsThere are no specific Global Options for the Notice Element, but note that the colors for the Notice Element come from the Success and Error Global Colors in the Alert Element (Options > Avada Builder Elements > Alert).,Useful Links & Resources
The Avada Form Builder

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms

Portfolio Element

The Portfolio Element allows you to display your collected portfolio posts on any page you wish. It includes 3 different layout styles: Carousel, Grid, or Masonry. All styles can specify a certain category and number of posts, along with a plethora of customization options that are simply amazing. All layouts can also use 1-6 columns. Read below for an overview of the specific features of this much-used Element.,View Element Demo Page!,OverviewHow To Use The Element
Element Options
Global OptionsUseful Links & Resources,How To Use The Portfolio ElementThe Portfolio Element allows you to add a customized range of your Portfolio items 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 portfolio items into.
Step 3 – Click on the + Element button at the bottom of the column. Select Portfolio.
Step 4 – Start by working through the options. You can style the output of this element in three main ways. It can be a Portfolio Carousel, a Grid layout, or a Masonry layout. There are several options after this that control the look and feel of the layout, depending on what option you initially select. Be sure to visit the Portfolio Element Demo page to get a good idea of what』s possible with this amazing element.
Step 5 – After the styling options, come the content options. With this Element, you can specify which categories you would like to include, or alternatively exclude. You can control their alignment, offset the content (for example a post offset of 1 would not show the latest portfolio item but would start with the second latest), set the number of posts per page, specify the pagination, as well as many other small granular controls. To get the layout you want might take some experimentation, but pretty much all options you might wish for are included.
Step 6 – Once you have set all your styling options, there is also the Extras Tab, that has animation options, if you wish to influence how your content interacts with the page load.
Step 7 – Once you have completed styling your Portfolio Element, click Save. 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.
Note: The Default setting will use the global settings assigned for this element in your Options > Avada Builder Elements > Portfolio 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.
General Tab
Layout – Controls the portfolio』s layout. Choose between Carousel, Grid, or Masonry.

Picture Size – Controls how the featured image will be sized. Choose between Default, Fixed, or Auto. Choose Fixed to load a theme generated image size so your images display in the same width and size, creating a uniform layout. Choosing Auto will use the featured image』s natural height and width.

Text Layout – Controls if the portfolio text content is displayed boxed or unboxed or is completely disabled. Choose between Default, No Text, Boxed, or Unboxed.

Grid Box Color – Controls the background color for the grid boxes. For Grid layout, this option will only work in boxed mode.

Grid Element Color – Controls the color of borders/date box/timeline dots and arrows for the grid boxes.

Grid Separator Style – Controls the line style of grid separators. Choose between Default, No Style, Single Border Solid, Double Border Solid, Single Border Dashed, Double Border Dashed, Single Border Dotted, Double Border Dotted, or Shadow.

Grid Separator Color – Controls the line style color of grid separators.

Number of Columns – Controls the number of columns per row. With Carousel layout, this specifies the maximum amount of columns.

Column Spacing – Controls the space or padding between the columns of the portfolio items.

Masonry Image Aspect Ratio – Controls the ratio to decide when an image should become landscape (ratio being width: height) and portrait (ratio being height: width). Note: The value of 「1.0」 represents a special case, which will use the auto-calculated ratios like in versions prior to Avada 5.5.

Masonry 2×2 Width – Controls when a square 1×1 image should become 2×2. This will not apply to images that highly favor landscape or portrait layouts. Note: There is a 「Masonry Image Layout」 setting for every image in the WP media library that allows you to manually set how an image will appear (1×1, landscape, portrait or 2×2), regardless of the original ratio.

Content Position – Controls the content』s orientation in relation to the image. This option is only for Grid and Masonry layouts and with Columns set to 1. Choose between Below Image or Next to Image.

Equal Heights – Allows you to display grid boxes with equal heights per row. Choose between Yes or No.

Posts Per Page – Controls how many portfolio items to display on the page. Set to -1 to display all portfolio items. Set to 0 to use the number of posts from Settings > Reading.

Portfolio Title Display – Controls what displays with the portfolio post title. Choose between Default, Title and Categories, Only Title, Only Categories, or None.

Portfolio Text Alignment – Controls the alignment of the portfolio title, categories and excerpt text when using the Portfolio Text layouts in portfolio archive pages. Choose between Left, Center, or Right.

Portfolio Text Layout Padding – Controls the top, right, bottom, and left padding for the portfolio text layout when using boxed mode.

Show Filters – Allows you to show or hide the category filters. Choose between Yes, Yes without 「All」, or No.

Pull Posts By – Allows you to choose how posts are filtered. Choose between Category or Tag.

Categories – Controls which categories to display on the page. Only portfolio items organized under these categories will be shown. Leave blank to display all categories.

Exclude Categories – Controls which categories to hide from the page. Only portfolio items tagged under these categories will be hidden. Leave blank to load all categories.

Tags – Controls which tags to display on the page. Only portfolio items organized under these tags will be shown. Leave blank to display all tags.

Exclude Tags – Controls which tags to hide from the page. Only portfolio items organized under these tags will be hidden. Leave blank to load all tags.

Pagination Type – Controls the pagination type. Choose between Default, Pagination, Infinite Scrolling, Load More Button, or None.

Hide URL Parameter – You can use this setting to disable the URL parameter used in single post links when navigating from a Portfolio Element that』s filtering by Categories or Tags. You can find more info on that here.

Post Offset – Controls how many portfolio items to skip before showing posts on the page.

Order By – Controls how portfolios should be ordered. Choose between Date, Post Title, Portfolio Order, Post Slug, Author, Number of Comments, Last Modified, or Random.

Order – Controls the sorting order of portfolios. Choose between Descending or Ascending.

Text Display – Controls how to display the post excerpt. Choose between Default, No Text, Excerpt, or Full Content.

Excerpt Length – Controls the number of words/characters to display in the excerpt.

Strip HTML – Allows you to strip HTML from the excerpt for portfolio archive pages. Choose between On or Off. Choose On to strip HTML, or Off to keep it.

Carousel Layout – Controls the carousel』s layout. Choose between Title below image or Title on rollover.

Carousel Scroll Items – Accepts a numerical value that sets how many items to scroll. Leave empty to scroll the number of visible items.

Carousel Autoplay – Allows you to enable or disable the carousel』s autoplay feature. Choose between Yes or No.

Carousel Show Navigation – Allows you to show or hide the carousel』s navigation. Choose between Yes or No.

Carousel Mouse Scroll – Allows you to enable or disable the carousel』s mouse drag control. Choose between Yes or No.

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

Portfolio Featured Image Size – Controls if the featured image size is fixed (cropped) or auto (full image ratio) for portfolio elements. IMPORTANT: Fixed works best with a standard 940px site width. Auto works best with larger site widths.

Number of Columns – Set the number of columns per row. With Carousel layout, this specifies the maximum amount of columns. IMPORTANT: Masonry layout does not work with 1 column.

Column Spacing – Controls the column spacing for portfolio items. In pixels.

Number of Portfolio Items Per Page – Controls the number of posts that display per page for portfolio elements. Set to -1 to display all. Set to 0 to use the number of posts from Settings > Reading.

Portfolio Text Layout – Controls if the portfolio text content is displayed boxed or unboxed or is completely disabled for portfolio elements.

Portfolio Text Display – Choose how to display the post excerpt for portfolio elements.

Excerpt Length – Controls the number of words in the excerpts for portfolio elements.

Strip HTML from Excerpt – Turn on to strip HTML content from the excerpt for portfolio elements.

Portfolio Title Display – Controls what displays with the portfolio post title for portfolio elements.

Portfolio Text Alignment – Controls the alignment of the portfolio title, categories and excerpt text when using the Portfolio Text layouts in portfolio elements.

Portfolio Text Layout Padding – Controls the padding for the portfolio text layout when using boxed mode in portfolio elements. Enter values including any valid CSS unit, ex: 25px, 25px, 25px, 25px.

Pagination Type – Controls the pagination type for portfolio elements. Choose from Pagination, Infinite Scroll, or Load More Button.

Load More Posts Button Background Color – Controls the background color of the load more button for ajax post loading for portfolio elements.

Load More Posts Button Text Color – Controls the text color of the load more button for ajax post loading for portfolio elements.

Load More Posts Button Hover Background Color – Controls the hover background color of the load more button for ajax post loading for portfolio elements.

Load More Posts Hover Button Text Color – Controls the hover text color of the load more button for ajax post loading for portfolio elements.
View The Options ScreenAvada Page OptionsWhen creating or editing a Portfolio item, there is also a Portfolio tab on the Avada Page Options. See below for a quick overview, or for more detail, read the Portfolio Post Options doc.

Show Previous/Next Pagination – Choose to show or hide the post navigation.

Use 100% Width Page – Choose to set this post to 100% browser width.

Width (Content Columns for Featured Image) – Choose if the featured image is full or half width.

Disable First Featured Image – Disable the 1st featured image on single post pages.

Featured Image Dimensions – In pixels or percentage, ex: 100% or 100px. Or Use 「auto」 for automatic resizing if you added either width or height.

Video Embed Code – Insert Youtube or Vimeo embed code.

Youtube/Vimeo Video URL for Lightbox – Insert the video URL that will show in the lightbox.

Show Project Description Title – Choose to show or hide the project description title.

Show Project Details – Choose to show or hide the project details text.

Project URL – The URL the project text links to.

Project URL Text – The custom project text that will link.

Image Rollover Icons – Choose which icons display on this post. Leave empty for default value

Custom Link URL On Archives – Link URL that will be used on archives either for the rollover link icon or on the image if rollover icons are disabled. Leave blank for post URL.

Open Portfolio Links In New Window – Choose to open the single post page, project URL and copyright URL links in a new window.

Show Author – Choose to show or hide the author in the Project Details.

Show Social Share Box – Choose to show or hide the social share box.

Show Related Projects – Choose to show or hide related projects on this post.

Show Comments – Choose to show or hide comments area.
View The Options Screen,Useful Links & ResourcesDisplaying and Configuring Portfolio Posts On Your SiteCreating Portfolio PostsPortfolio Masonry Layout (Video)Portfolio Post Type Global OptionsPortfolio Single Post Page Extended

Code Block Element

The Code Block Element lets you add HTML or CSS code to the page without WordPress changing the format. This comes in handy when you need to add custom code to your page. Read on to see how to use this Element, and watch the video for a visual overview.,Code Block Content
Avada | Responsive Multi-Purpose Theme by ThemeFusion | ThemeForest
,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Code Block ElementThe Code Block Element allows you to add code (HTML, CSS, Javascript etc) to the page without WordPress changing the format. For the element to work, Code Block Encoding, found in Options > Advanced > Theme Features tab, must be enabled.
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 Alert from the Elements List.
Step 4. If you don』t know what content to use the Code Block Element for, your probably don』t need it. But essentially, any content within a Code Block element is encoded, and this stops WordPress from getting it』s hands on the code and inserting tags, line breaks and any other formatting changes, that it likes to make to content inside the editor. By default, Avada takes the content and converts it into a base64 string so that it can be decoded when the page is rendered. This way it will come out on the page exactly the same as it was inserted into the Code Block.
Step 5. Once you have entered your code, click Save. You will be returned to the edit page. You can preview the page to view the rendered code, and you can always edit the element again to make changes.
Read below for a detailed description of all element options.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Code Block Element OptionsThere are no options for the Code Block Element. Simply add your code in the Element, and it will be displayed on the front end.
IMPORTANT NOTE: It is important to ensure that the 「Code Block Encoding」 setting in Theme Options is enabled in order for the code to appear correctly on the frontend.Global OptionsThere are no Global Options for the Code Block Element.

Convert Plus Element

Convert Plus is a powerful, yet easy to use premium popup plugin, that comes bundled with Avada. When the plugin is enabled, there is also a Convert Plus Element for you to use, to assist you in adding any of your Convert plus modules into your content.
Convert plus has three modules, Modal, Info Bar, or Slide In, and with the Convert Plus Element, you can easily add them into your content, with custom manual triggering or inline display. Read on to find out more about this useful Element.,View The Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Convert Plus ElementThe Convert Plus Element allows you to add your custom Convert plus modules 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 Convert Plus from the Elements List.
Step 4. Choose the module type you wish to add (Modal, Info Bar, or Slide In), and then choose your specific, previously created module. These modules are created in the Convert Plus section, available from your WordPress Dashboard.
Step 5. Choose your launch type – Manual Trigger, or Inline Display. If you choose Manual Trigger, you can enter the content with which to trigger the module in the text editor at the bottom of the dialog.
Step 6. Click Save to add the Element to your page.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsIMPORTANT NOTE: The Convert Plus Element will only display if you have the Convert Plus Premium plugin installed and activated.Location: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

Select Module – Select the module you wish to insert. Choose from Modal, Info Bar, or Slide In.

Select Modal – Select the modal you want to use. Modals with status 「Pause」 are not included as they won』t display until you make them 「Live」.

Select Slide In – Select the Slide In you want to use. Slide Ins with status 「Pause」 are not included as they won』t display until you make them 「Live」.

Select Info Bar – Select the info bar you want to use. Info Bars with status 「Pause」 are not included as they won』t display until you make them 「Live」.

Launch Type – Controls how the module will be launched. Choose from Manual Trigger, or Inline Display.

Content – Enter some content with which to trigger your Convert Plus module. This section will only be visible if you choose Manual Trigger.
View The Options ScreenGlobal OptionsThe Convert Plus Element does not have any global options.

Facebook Page Element

The Facebook Page Element allows you to add a Facebook feed anywhere in your content. Read the document to see the full range of options, and watch the video below for a visual overview.,View Element Demo Page!,OverviewHow To Use The Element Element OptionsGlobal Options,How To Use The Facebook Page ElementStep 1 – Select where you』d like to place your Facebook feed. Add the Facebook Page Element from the Element Dialog.
Step 2 – Configure the Element as required. Set the page URL and dimensions, and configure the various Facebook Elements to be displayed.
Step 3 – On the Design tab, you can set the Margins and alignment of the Element, and if you wish, you can add animation to the Element on the Extras tab.
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 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
Page URL – The URL of the Facebook Page.

Dimension – Box width and height in pixels. Width has to be between 180 and 500.

Tabs – Tabs to render. Choose from Timeline, Events and Messages.

Header – Select header size. Choose from Large or Small.

Cover – Show / Hide cover photo in the header.

Friends Photos – Show / Hide profile photos when friends like this page.

Call To Action – Show / Hide the custom call to action button if available.

Lazy Load – Enable / Disable lazy loading.

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

Alignment – Select the alignment of the icons and the text.
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.

Column Element

The Column Element goes hand in hand with the Container Element, and is another essential structural component when building your site in Avada.
With Avada 7.0, we have completely re-imagined both the Container and Column elements, basing them on CSS Flexbox. This means that extremely flexible positioning and spacing have now arrived in the Fusion Builder. At the same time, we have kept our classic setup for Containers and Columns in case you want to keep using it on pre-existing sites. For more information on this, see the Introducing Flexbox For Containers and Columns doc.
The options below are what you will see for the Flex-based Columns. If you are using the Legacy options, please see the Container and Column Element Legacy Settings document for a rundown of those options.
Continue reading below for details on how to use the Column Element, and watch the video below for a visual overview of this foundational Design Element.,View Element Demo Page!OverviewHow To Add Columns In Avada Builder
How To Add Columns In Avada Live

Column Sizes

Responsive Option Sets
Element OptionsGlobal Options,How To Add Columns in Avada BuilderIMPORTANT NOTE You must first create a Container element before you can add a Column element.Step 1. Create a new page, or edit an existing one.
Step 2. Activate the Avada Builder, or Avada Live.
Step 3. Insert a Container element into the page by clicking the 『+ Container』 button. Once you insert a Container, you』ll be asked to choose the column or column layout you』d like to use. You can add an empty Container, but usually, it is at this stage that you add Columns to your Container.
Step 4. To add new columns to an existing Container, hover over the Container you』d like to add a new column to, and you will see a 『+ Column』 button, as seen below. Click this button to add a new column.
Step 5. To change the size of an existing column, click on the 『Resize Column』 icon on the upper left corner of the column. It will appear as the size your column currently is. For example, if it』s a 1/4 column, then the Resize Column option will appear as 『1/4』.
Step 6. To re-arrange columns, simply drag and drop the column into place. You can also drag and drop columns into different Containers elements.
Learn More About The Fusion Builder Content Creation Process 767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,How To Add Columns in Avada LiveStep 1. Create a new page.
Step 2. Activate Avada Live Builder Live by clicking the 『Avada Live』 button on top of the page editor.
Step 3. Insert a Container element into the page by clicking the 『Add Container』 Icon on the Starter Page. Once you insert a Container, you』ll be asked to choose the column or column layout you』d like to use. You can add an empty Container, but usually, it is at this stage you add Columns to your Container, as seen below.
Step 4. To add new columns to an existing Container, hover over the Column directly before where you』d like to add the column. Mouse over the Column controls and you』ll see an 『Add Column』 icon. Click this icon to add a new column. You will be presented with the Select Column dialog, where you can choose the layout of your new column/s.
Step 5. To change the size of an existing column, click on the 『Column Size』 icon on the column controls. It will appear as the size your column currently is. For example, if it』s a 1/4 column, then the Column Size option will appear as 『1/4』. Choose your new Column size from the options box.
Step 6. To re-arrange columns, simply mouse over the Column controls, and drag and drop the column into place. You can also drag and drop columns into different Containers elements.,Column SizesA Column can only be placed inside a Container element, and it will always base its divisions on the parent container』s width. Most of the time, this will be the Site Width you』ve set for the site. For example, if you』ve set the Site Width to be 1200px, then a 1/2 column will be 600px wide, minus any column spacing you』ve set. Below you can see the possible preset Column sizes when added to the page.
1/1 – A one whole column is 100% of it』s container.5/6 – A five sixth column is 83.33% of it』s container.4/5 – A four fifth column is 80% of it』s container.3/4 – A three fourth column is 75% of it』s container.2/3 – A two third column is 66.66% of it』s container.3/5 – A three fifth column is 60% of it』s container.1/2 – A one half column is 50% of it』s container.2/5 – A two fifth column is 40% of it』s container.1/3 – A one third column is 33.33% of it』s container.1/4 – A one fourth column is 25% of it』s container.1/5 – A one fifth column is 20% of it』s container.1/6 – A one sixth column is 16.66% of it』s container.Column WidthIn Avada 7.0, we have also introduced Custom Widths for Columns, as well as the ability to set column widths (and more) independently on large, medium and small layouts. For more information on how to use this amazing new feature with Columns, please read the How To Set The Display Order And Size Of Columns In Responsive Layouts doc.
You will find Custom Widths under Columns > Design > Width. As seen below, you can click on Use Custom Width, which allows you to set a Custom Width using a percentage value. This gives ultimate freedom of positioning.
Auto WidthThere is also a new width option called Auto. With this selected, instead of a fixed width size, the column will take up the space of the largest element inside it that has a set width. So it will only work in certain instances. But any time you have an Element that has a set width, such as an image or an icon etc, you can set the parent Column to Auto, and the Column will resize to the width of the Element.
Examples of Auto WidthOn the Home page of the Pet Supplies Website, there is a banner at the bottom of the Page Title Bar, with an image of some pet food, and some text. This becomes a sticky container as you scroll up, and the image has a Image Sticky Max Width that reduces its size as the Container becomes sticky. This image is in a Column set to Auto, so that the Column also resizes with the image, and so the spacing between it and the text next to it remains the same.,Responsive Option SetsAnother new feature for Containers and Columns in Avada 7.0 is Responsive Option Sets. You can see the Responsive Icons at the top right of the Element on any Columns when in the back-end of the Builder, as seen in the below image of the Column Element. In the Front-End Builder, you will see the Responsive Icons directly on the individual options.
You will only see Responsive Option Sets when using the new Flex Containers. With Columns inside Legacy Containers, they will not be available.
Please see the Responsive Options Sets document for specific details of this awesome new feature, but in short, it allows you to set independent options for multiple screen sizes without having to duplicate containers and use visibility options.. You will also see a screen icon on the individual options that are a part of this feature.,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 Global Options, found at Options > Avada Builder Elements > Column. 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 your Column type (Flex or Legacy), and so the options screen may look somewhat different.
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 (elements are stacked vertically), Row (elements are positioned horizontally if they fit), or Block (works like legacy mode to allow floating and wrapping). 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, when Row is selected in Content Layout option.

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 – Set to 「Yes」 to center the content vertically. Equal heights on the parent container must be turned on.

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. Choose from Default, Hidden, Scroll, Visible, or Auto.
View The Options ScreenBG (Background) TabColor Tab
Background Color – Controls the background color of the 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.

Gradient Angle – Controls the gradient angle. In degrees.

Radial Direction – Select direction for radial gradient.

Linear Angle – Set the angle of the linear gradient. In degrees.
Image Tab
Background Image –Upload an image to display in the background.

Background Position – Choose the position of the background image.

Background Repeat – Choose how the background image repeats.

Background Blend Mode – Choose the desired blending mode. This is the interaction between layers if you have for exmaple a background image and a background color or gradient.
Color Options ScreenGradient Options ScreenImage 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.

Rendering Logic – Add conditional render logic for the element. See Conditional Element Rendering in Avada for more details.

Filter Type (both regular & hover state options)

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

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

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

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

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

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

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

Blur – This filter adds a blur filter to the contents of the column.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Column.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Column Margins – Specify the default top/bottom margins for all column sizes. Enter values including any valid CSS unit, ex: 0px, 20px.

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

Column Width on Medium Screens – Controls how columns should be displayed on medium sized screens. Choose from Inherit from Large, or Full Width.

Column Width on Small Screens – Controls how columns should be displayed on small sized screens. Choose from Inherit from Large, or Full Width.
View The Options Screen

Countdown Element

The Countdown Element is the perfect element to actively show your visitors a countdown to a special event, sale, or anniversary etc. This Element allows you to enter an end date and it automatically calculates the time remaining to the specific date. And with Avada 7.3, you can even pull Event and Sales dates dynamically from WooCommerce and The Event Calendar. It also comes with several customization options to control all colors, backgrounds, borders, text and more.
Read on to find out more about this super useful Element, and watch the video for a visual overview.
The New Year Is Coming!2022 is here in:00000044Days0044Hrs3322Min3399SecDON'T WAIT - BUY AVADA NOW,View Element Demo Page!OverviewHow To Use The Countdown ElementHow To Use The WooCommerce / The Event Calendar Dynamic OptionsElement OptionsGlobal Options,How To Use The Countdown ElementThe Countdown Element allows you to add a customizable countdown box to your content.
Step 1. Ensure Avada Builder, or Avada Live is active. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 2. Choose Countdown from the Elements List.
Step 3. There are four tabs in the options for this element; the General Tab, the Background Tab, the Design Tab, and the Extras Tab. Starting with the General Tab, the first, and most important option, is the date and time you are counting down to. You can type the date and time directly into the field (just remember to use SQL time format – YYYY-MM-DD HH:MM:SS) or alternatively, you can use the included date and time picker at the right of the field. A related option immediately below this allows you to choose the Timezone the entered date and time relates to.
With Avada 6.2 and up, there is a layout option to show the Countdown as Stacked or Floated. You can choose to show weeks or not, and there are options for Border Radius, Headings, Subheadings, and a few for Links, if you want to link the Countdown box to another page, for example, an event page. There are also further customization options for Element Visibility, and CSS Class and CSS ID.
Step 4. The Background Tab allows you to style the background of your Countdown Box. You can have a solid color background, one with opacity, one with an image, or a combination of the last two. there are also two options for positioning your image.
Step 5. The Design Tab styles the content of your Countdown Box. There are various options for color styling the actual Countdown, the Countdown Text, Heading, Subheading, and Link.
Step 6. Once you have completed choosing your options, Save your changes.
Read below for a detailed description of all element options.,How To Use The WooCommerce / The Event Calendar Dynamic OptionsThe Countdown Element also allows you to pull your Countdown date from WooCommerce Sale start or end dates, or The Event Calendar Event start or end dates. This gives you enormous flexibility as to how you use this Element. Combined with the Display When Inactive option, you could even use this Element in a Layout for easy display of Sales and Events.
For full details on the dynamic options available in thie Element, please see the How To Use The Dynamic Options In The Countdown Element doc, linked here.
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: By default, the Element will use the global settings assigned for it in the Options > Avada Builder Elements > Countdown section. 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
Countdown Timer End – Set the end date and time for the countdown time. Click the calendar icon to use the date picker. Use SQL time format: YYYY-MM-DD HH:MM:SS. E.g: 2016-05-10 12:30:00.

Timezone – Choose which timezone should be used for the countdown calculation. Default currently set to Timezone Of Site. Choose between Timezone of Site and Timezone of User. Use the Dynamic Content option to set the date dynamically.

Layout – Select the layout of the Countdown element. You can choose from Default, Floated, or Stacked.

Show Weeks – Select 「yes」 to show weeks for longer countdowns.

Label Position – Select the position of the date/time labels. Choose from Text Flow, Top, or Bottom.

Display Before Started / When Ended – Display the Element before it has begun, and when it has ended. Choose from Show, or Hide.

Element Border Radius – Choose the border radius of outer box. In pixels (px), ex: 1px.

Heading Text – Choose a heading text for the countdown.

Subheading Text – Choose a subheading text for the countdown.

Link URL – Add a URL for the link. E.g: https://example.com.

Margin – Control the margins around the Element. In pixels or percentage, ex: 10px or 10%.

Radius – Choose the radius of outer box. In pixels (px), ex: 1px.

Link Text – Choose a link text for the countdown.

Link Target – Choose whether to open the link in the same tab (_self) or a new tab (_blank).

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 for the Separator.

CSS ID – Allows you to add an ID for the Separator.
View The Options ScreenBackground Tab
Background Color – Choose a background color for the countdown wrapping box.

Background Image – Upload an image to display in the background.

Background Position – Choose the position of the background image. Choose from Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Bottom and Center Center.

Background Repeat – Choose how the background image repeats. Choose from No Repeat, Repeat Vertically and Horizontally, Repeat Horizontally, and Repeat Vertically.
View The Options ScreenDesign Tab
Counter Box Spacing – Controls the space between the counter boxes. Enter value including any valid CSS unit, ex: 20px.

Counter Box Background Color – Choose a background color for the counter boxes.

Counter Box Border Size – In pixels.

Counter Box Border Color – Controls the border color for the counter boxes.

Counter Box Border Radius – Controls the border radius for the counter boxes. In pixels (px), ex: 1px, or 「round」.

Counter Box Padding – Set the padding for the counter boxes. Enter values including any valid CSS unit, ex: 4%. Leave empty for default values.

Counter Font Size – Controls the font size for the countdown timer. Enter value including any valid CSS unit, ex: 20px.

Counter Text Color – Choose a text color for the countdown timer. Leave empty for default value.

Counter Label Font Size – Controls the font size for the countdown label. Enter value including any valid CSS unit, ex: 20px.

Counter Label Text Color – Choose a text color for the countdown timer labels.

Heading Font Size – Controls the font size for the countdown heading. Enter value including any valid CSS unit, ex: 20px.

Heading Text Color – Choose a text color for the countdown heading.

Subheading Font Size – Controls the font size for the countdown subheading. Enter value including any valid CSS unit, ex: 20px.

Subheading Text Color – Choose a text color for the countdown subheading.

Link Text Color – Choose a text color for the countdown link.
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 > Countdown.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Countdown Timezone – Controls the timezone that is used for the countdown calculation.

Countdown Layout – Select the default layout of the countdown element.

Countdown Show Weeks – Turn on to display the number of weeks in the countdown.

Countdown Label Position – Select the default position of the date/time labels.

Countdown Background Color – Controls the background color for the countdown box.

Countdown Background Image – Select an image for the countdown box background.

Countdown Background Repeat – Controls how the background image repeats. Choose from Repeat All, Repeat Horizontal, or Repeat Vertical.

Countdown Background Position – Controls how the background image is positioned.

Countdown Counter Box Spacing – Controls the spacing between the counter boxes.

Countdown Counter Box Background Color – Controls the background color for the counter boxes.

Countdown Counter Box Padding – Set the padding for the counter boxes.

Countdown Counter Border Size – Controls the border size of the counter boxes.

Countdown Counter Border Color – Controls the border color of the counter boxes.

Countdown Counter Border Radius – Controls the border radius of the counter boxes.

Countdown Counter Font Size – Controls the font size for the countdown timer.

Countdown Counter Text Color – Controls the color for the countdown timer text.

Countdown Counter Label Font Size – Controls the font size for the countdown label.

Countdown Counter Label Text Color – Controls the color for the countdown timer labels.

Countdown Heading Font Size – Controls the font size for the countdown headings.

Countdown Heading Text Color – Controls the color for the countdown headings.

Countdown Subheading Font Size – Controls the font size for the countdown subheadings.

Countdown Subheading Text Color – Controls the color for the countdown subheadings.

Countdown Link Text Color – Controls the color for the countdown link text.

Countdown Link Target – Controls how the link will open.
View The Options Screen