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

Post Card Cart Element

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

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

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

Show Quantity – Display the quantity input.

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

Show Product Link – Display the Product Link.

Product Quick View – Enable product quick view for products.

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

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

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

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

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

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

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

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

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

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

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

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 Post Card Cart Element.

Media Slider Element

The Media Slider Element is a simple element that allows you to display multiple images, and/or videos, into your site content. Read below to discover more about this useful visual element.,Slider With Images or VideosLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac nisl eget metus imperdiet venenatis non at nisi. Nam vitae risus neque, sed egestas sem. Suspendisse tristique, purus et ullamcorper tempor, purus enim scelerisque nisl.
Unlimited use per pageMany parameters to control content & slide,View Element Demo Page!,OverviewHow To Use The ElementParent OptionsAdding/Editing SettingsIndividual Child OptionsGlobal Options,How To Use The Media Slider ElementThe Media Slider Element allows you to add image and / or video sliders anywhere in your content.
Step 1 – Create a new page or edit an existing one.
Step 2 – Add a container then select your desired column layout.
Step 3 – Click the 『+ Element』 button to bring up the Elements window. Locate the 『Media Slider』 element and click it to bring up its options window.
Step 4 – The options on the right hand side are Parent Options, and affect the whole slider. Before you begin, it』s a good idea to view the Element Demo page, to check out the different layouts and options on offer. The Parent options start with the Bulk Image Upload option, which allows you to add many images (slides) to your media slider in one go. You can always add more later. You can then choose from a range of options including margin, alignment, autoplay, smooth height, and more. You can even can add the dimensions you want the images to display at, in either pixels or percentage.
Step 5 – Once you have set all your Parent Options, you add Child Items on the left. Click the pencil icon to edit the existing item. The Child Item Options Panel appears. This is where you add, and configure, the individual slides. The Slide Type option allows you to choose whether the slide shows an image or a video. If you choose video, you must add the Video Element or Video Embed Code into the field below. You can also enable Lightbox for the images in the Media Slider, but to do that, the full path of the image file must be added into the Full Image Link or External Link field. This can be a local or an external link. Finally, if you don』t enable Lightbox, there is an option for opening the image links in a new browser tab or the same one.
Step 6 – You can then duplicate existing slides to edit, or create new slides, by clicking on the Clone Item icon, or the + Slide button respectively.
Step 7 – Once you have completed adding your slides, click Save. You will be returned to the edit page. You can preview the page to view your slider, and you can always edit the element again to make changes.
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: 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.
Parent Options
Bulk Image Upload – This option allows you to select multiple images at once and they will populate into individual items. It saves time instead of adding one image at a time.

Margin – Enter values including any valid CSS unit, ex: 4%.
Alignment – Select the slider』s alignment. Choose from Text Flow, Left, Center, or Right.
Autoplay – Turn on to autoplay the slideshows.

Smooth Height – Turn on to enable smooth height on slideshows when using images with different heights.

Slideshow Speed – Controls the speed of slideshows for the slider element. ex: 1000 = 1 second.

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

Image Size Dimensions – Dimensions in percentage (%) or pixels (px). With the Slider Element, it』s good practice to use the same size images and orientations for best results.

Element Visibility – Allows you to choose which devices to display the element. Choose one or more from Mobile, Tablet, or Desktop. Each of the 3 sizes has a custom width setting on the Fusion Builder Elements tab in the Theme Options.

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.
Add / Edit Settings
Add / Edit Items – This is where all your child element』s items are found. Each will be numbered to better keep track of how many you currently have. You can reorder elements by dragging them and dropping them into place.

Edit Item Icon – Allows you to edit an item.

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

Delete Item Icon – Allows you to delete an item.

Re-order Feature – Allows you to drag and drop the item to your desired order to rearrange them. A small thumbnail of the image is shown to assist you in this.

Add New Slider Button – Allows you to add a new Slider.
View The Options ScreenChild Options
Slide Type – Select whether the slide is an Image, or a Video.

Image – Upload an image to display.

Video Element or Video Embed Code – Click the Add YouTube Video or Add Vimeo Video, then enter your unique video ID, or just copy and paste your video embed code.

Full Image Link or External Link – Add the URL of where the image will link to. If the lightbox option is enabled, you have to add the full image link to show it in the lightbox.

Lightbox – Show image in lightbox. Lightbox must be enabled in Theme Options or the image will open up in the same tab by itself.

Link Target – Choose whether the slide opens in the same browser tab – _self, or in a new tab – _blank.
View The Options ScreenGlobal OptionsThere are no Global Options for the Media Slider Element.

Flickr Element

The Flickr Element allows you to add a Flickr feed anywhere in your content. Read the document to see the full range of options.,View Element Demo Page!,OverviewHow To Use The Element Element OptionsGlobal Options,How To Use The Flickr ElementStep 1 – Select where you』d like to place your Flickr feed. Add the Flickr Element from the Element Dialog.
Step 2 – Configure the Element as required. On the General tab, set your Flickr ID to pull your own Flickr feed into the Element, determine the number of images to display and your preferred aspect ratio.
Step 3 – On the Design tab, set your preferred columns, spacing and margins.
Step 4 – You can choose to animate the Element on the Extras tab if you wish.
767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: Please note that the displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
API Key – Use default or get your own from Flickr APP Garden.

Flickr ID – Get your Flickr ID

Count – Number of photos to show.

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

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

Count – Number of photos to show.

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

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

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

Column Spacing – Controls the spacing between columns.

Margin – Enter values including any valid CSS unit, ex: 4%.
View The Options Screen,Extras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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

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

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 Screen,Global OptionsThere are no Global Options for the Flickr Element.

Password Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Password Field Element is a special text field on a form that doesn』t display what the user types. This value is then passed on in the submission entry. See the Sign Up Prebuilt Form for an example of this Element.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Password Field ElementThe Password Field Element allows you to place checkboxes into your forms.
Step 1. Create a new, or edit and existing Form in the Avada Form Builder.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose Password Field from the Form Elements tab.
Step 4. Go through the options to populate and configure the element. The Password Field Element is a simple Element and basically doesn』t require any configuration other than design considerations.
Step 5. Once you have configured the Element, save your page.
Read below for a description of all element options.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element. You access the Form Builder Elements when adding an Element while editing a Form in the Avada Form Builder (Forms > Form Builder, from the Avada Dashboard).
You can deploy as many individual Elements in your forms as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each instance of the Element independently, greatly enhancing your flexibility and creative options.
General Tab
Field Label – Enter the label for the input field. This is how users will identify individual fields.

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

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

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

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

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

Tab Index – Tab index for this input field.

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

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

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms

Image Hotspots Element

The Image Hotspots Element allows you to add hotspots to an image, allowing you to highlight a certain area, or areas, of the image with a label that can open either a popover box or a link. Read below for an overview of the specific features of the Element.,Olives Chick Peas Naan Bread Yoghurt Figs Peas Red Peppers Cucumber,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Image Hotspots 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 Hotspots from the Elements List.
Step 4. Insert an Image via the General tab.
Step 5. On the Children tab, you can add your Hotspot points, and configure their positions and content.
Step 6. There is a Design Tab for each hotspot, as well as a Design tab for the Element as a whole.
Step 7. Remember to save your changes when you are finished customizing the Element.
Read below for a detailed 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 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.
Children Tab
Add / Edit Items – This is where add or edit new items for this Element. You can reorder elements by dragging them and dropping them into place.

+ Add Hotspot Point – Allows you to add a hotspot point to the image.

Item Options

Edit Item Icon – Allows you to edit the individual child items in your list.

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

Delete Item Icon – Allows you to delete an item.

Re-order Feature – The four-arrowed icon allows you to drag and drop the hotspot points into your desired order.
View The Options ScreenGeneral Tab
Image – Upload an image to display.

Maximum Image 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 – Select the alignment of the image. Choose from Text Flow, Left, Center, or Right.

Popover Trigger Method – Choose mouse action to trigger popover. Choose from Hover, or Click.

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

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

CSS ID – Allows you to add an ID for the column.
View The Options ScreenDesign TabHotspots Animation – Controls the background color of the popover heading. Choose from None, Pumping, Pulsating, Showing, or Pumping & Showing.
Popover Heading Background Color – Controls the background color of the popover heading.

Popover Content Background Color – Controls the background color of the popover content area.

Popover Border Color – Controls the border color of the of the popover box.

Popover Text Color – Controls all the text color inside the popover box.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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

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

Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options ScreenItem General Tab
Horizontal Position – Select the horizontal position of the hotspot. In percentage of the image height.

Vertical Position – Select the vertical position of the hotspot. In percentage of the image width.

Triggering Icon – Select an icon to be displayed inside the triggering button.

Triggering Text – The short text that will be displayed inside the triggering button.

Button Trigger Action – Choose what the hotspot button action would be. You can open a popover or a link.

Popover Heading – The long title that will be shown when a user moves the mouse over a hotspot.

Content Inside Popover – The long text that will be shown when a user moves the mouse over a hotspot.

Popover Preferred Open Position – Choose where the popover will prefer to be placed in rapport with the triggering button. The placement will be shift to another place automatically if it cannot open in the preferred place. Choose from Auto, Top, Right, Bottom, or Left.

Link – The link where the user would go when click the button.

Link Title – The link title will be displayed when a user keep the mouse over a link.

Link Open Window – How the link will be opened, either in the current window, or in a new tab.
View The Options ScreenItem Design Tab
Font Size – Enter value including any valid CSS unit.

Text Color – Select the color of the text and the icon.

Background Color – Select the background color of the hotspot.

Hover Text Color – Select the color of the text and the icon when the mouse is over the button.

Hover Background Color – Select the background color of the hotspot when the mouse is over the button.

Distance Between Icon And Text – The distance between icon and text. Ex: 5px

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

Border Radius – Enter values including any valid CSS unit, ex: 10px or 10%.
View The Options ScreenGlobal OptionsThere are no Global Options for the Image Hotspots Element.

News Ticker Element

The News Ticker Element allows you to add a news ticker to any page (or in a layout section) that pulls posts, events or a range of other content. Read below for an overview of the specific features of the Element.,Latest Docs:How To Use The Tag Cloud Element Video|How To Make A Flyout Menu With The Off Canvas Builder Video|How To use The Facebook Page Element Video|How To Use The Twitter Timeline Element Video|How To Use The Off Canvas Builder video|How To Use The Color Picker In Avada|How To Use The Global Color Palette In Avada|Tag Cloud Element|Flickr Element|Twitter Timeline Element,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The News Ticker ElementStep 1. Ensure Avada Builder, or Avada Live is active.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose News Ticker from the Elements List.
Step 4. Simply configure the Element as you wish. Initially, choose the source of the ticker feed by choosing a Post Type to display, and then configure the feed. There are options to display the ticker as a running ticker, or one at a time, as well as being able to control the speed and distance between posts etc. There are also some design options for styling the Element.
Step 5. Click Save when you are finished customizing the Element.
Read below for a detailed description of all element options.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Ticker Title – Set the ticker title.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Title Padding – Controls the padding of the title.

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

Regular Options

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

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

Hover/Active Options

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

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

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

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

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

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

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

Box Shadow Spread Radius – Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels. Only shows if Box Shadow is set to Yes.

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

Box Shadow Style – Set the style of the box shadow to either be an outer or inner shadow. Only shows if Box Shadow is set to Yes.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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

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

Honeypot Field Element

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

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

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

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

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms

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

Flip Boxes Element

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

Edit Item Icon – Allows you to edit an item.

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

Delete Item Icon – Allows you to delete an item.

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

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

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

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

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

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

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

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

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

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

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

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

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

Spinning Icon – Choose to let the icon spin.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Spinning Icon – Choose to let the icon spin.

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

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

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

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

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

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

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

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

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

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

Border Color – Controls the border color.

Border Radius – Controls the flip box border radius. In pixels (px), ex: 1px, or 「round」.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom., Flip Vertically, Flip Horizontally, or Light Speed.

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

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

Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Flip Boxes.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Person Element

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

Name – Insert the name of the person.

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

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

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

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

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

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

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

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

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

Picture Border Color – Controls the picture border color.

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

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

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

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

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

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

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

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

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

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

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

Deviantart Link – Insert your custom Deviantart link.

Discord Link – Insert your custom Discord link.

Digg Link – Insert your custom Digg link.

Dribbble Link – Insert your custom Dribbble link.

Dropbox Link – Insert your custom Dropbox link.

Facebook Link – Insert your custom Facebook link.

Flickr Link – Insert your custom Flickr link.

Forrst Link – Insert your custom Forrst link.

Instagram Link – Insert your custom Instagram link.

LinkedIn Link – Insert your custom LinkedIn link.

Myspace Link – Insert your custom Myspace link.

PayPal Link – Insert your custom PayPal link.

Pinterest Link – Insert your custom Pinterest link.

Reddit Link – Insert your custom Reddit link.

RSS Link – Insert your custom RSS link.

Skype Link – Insert your custom Skype link.

Teamsd Link – Insert your custom Microsoft Teams link.

SoundCloud Link – Insert your custom SoundCloud link.

Spotify Link – Insert your custom Spotify link.

Telegram Link – Insert your custom Telegram link.

Tiktok Link – Insert your custom Tiktok link.

Tumblr Link – Insert your custom Tumblr link.

Twitch Link – Insert your custom Twitch link.

Twitter Link – Insert your custom Twitter link.

Vimeo Link – Insert your custom Vimeo link.

VK Link – Insert your custom VK link.

WhatsApp Link – Insert your custom WhatsApp link.

Xing Link – Insert your custom Xing link.

Yahoo Link – Insert your custom Yahoo link.

Yelp Link – Insert your custom Yelp link.

Youtube Link – Insert your custom Youtube link.

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

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

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

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

CSS ID – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Person.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

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

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

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

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

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

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

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

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

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