elements 歸檔 - 第 8 頁共 15 頁

Social Links Element

The Social Links Element allows you to add social media links anywhere in your content. The Element is loaded with options that allow you to easily customize your Social Media icons. Read below to discover more about this useful social media element, and watch the video for a visual overview.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Social Links ElementThe Social Links Element is a quick and easy way to add your own social media links 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. Locate the 『Social Links』 element and click it to add it to the page and bring up its options window.
Step 4. Configure the Social Links Element to your liking. There are styling options for the icons, including the ability to use either branded or custom colors for the icons, and then, once you have styled the icons the way you like, there are fields to add your own profile links for every major Social Media platform. You can also add an email icon, and any custom social icons specified in the Theme Options.
Step 5. Once you have finished configuring the options, click 『Save』.
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: The Default setting will use the global settings assigned for this element at Options > Avada Builder Elements > Social Links. 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
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.

SoundCloud Link – Insert your custom SoundCloud link.

Spotify Link – Insert your custom Spotify link.

Teams Link – Insert your custom Microsoft Teams 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.

WeChat Link – Insert your custom WeChat 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.

Phone Number – Insert a phone number to display the phone icon.

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

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

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

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

CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
View The Options ScreenDesign TabAlignment – Select the icon』s alignment. Choose from Text Flow, Left, Center, or Right. NB. This option now has responsive options, so that the alignment can be independently controlled for large, medium and small screens.
Margin – Enter values including any valid CSS unit, ex: 4%. Leave empty for default values. NB. This option now has responsive options, so that the alignment can be independently controlled for large, medium and small screens.

Tooltip Position – Choose the display position for tooltips.

Font Size – Controls the font size for the social icons. Enter value including CSS unit (px, em, rem), ex: 10px Leave empty for default value.

Boxed Style – Choose to get boxed icons.

Boxed Social Icons – Choose to get boxed icons.

Box Border Size – Controls the border size. In pixels or percentage, ex: 10px or 10%. Leave empty for default values.

Box Border Radius – Choose the border radius of the boxed icons. In pixels (px), ex: 1px, or 「round」. Leave empty for default value.

Color Type – Select the color type for social icons. Choose from Default, Custom Colors, or Brand Colors.

Custom Colors

Regular Options

Icon Color – Specify the color of social icons. Leave empty for default value.

Background Color – Specify the box background color of social icons. Leave empty for default value.

Border Color – Specify the border color of social icons. Leave empty for default value.

Hover Options

Icon Color – Specify the color of social icons on hover. Leave empty for default value.

Background Color – Specify the box background color of social icons on hover. Leave empty for default value.

Border Color – Specify the border color of social icons on hover. 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 1.

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.NB. These social icon global options control both the Social Link Element and the Person Element.

Margins – Controls the margins around the element.

Social Links Icons Tooltip Position – Controls the tooltip position of the social links icons.

Icons Font Size – Controls the font size for the icons.

Icon Color Type – Custom colors allow you to choose a color for icons and boxes. Brand colors will use the exact brand color of each network for the icons or boxes.

Icons Color – Controls the color of the custom icons.

Icons Hover Color – Controls the hover color of the custom icons.

Boxed Style – Turn on to have the icon displayed in a small box. Turn off to have the icon displayed with no box.

Boxed Padding – Enter value including any valid CSS unit, ex: 8px.

Box Background – Select a custom social icon box color.

Box Hover Background – Select a custom social icon box color on hover.

Box Border Size – Controls the borders size of social icon box.

Box Radius – Box radius for the social icons. Enter value including any valid CSS unit, ex: 4px.

Border Color – Controls the borders color of social icon box.

Border Hover Color – Controls the borders color of social icon box on hover.
View The Options Screen

Privacy Element

New with Avada 5.5.2 is the Fusion Builder Privacy Element. You can easily add this element to your privacy policy page, or wherever it fits best for your site. It will display checkboxes for all services you chose, and will show, to each of your users, which of the services they have consented to, and which they have not. They can also easily update their consents within the element. Please continue below to read more about this important privacy element.
IMPORTANT NOTE: The Privacy Element is disabled in Fusion Theme Options by default and needs to be enabled in the Theme Options > Privacy > Privacy Consent option for it to be accessible in the Fusion Builder. Embedded Content On This SiteThis is a working example, that lets you control the privacy settings for third-party embeds (in our case YouTube, Facebook, Twitter) on this site. More information and details can be found in our Privacy Policy.
Consent ChoiceWe provide you with the choice to accept this or not, as we prompt consent boxes for all embedded content, and no data is transferred before you have consented to it.
The checkboxes below show you all embeds you have consented to so far. You can opt-out any time by un-checking them and clicking the update button.
Google Maps,View Element Demo Page!View our full range of Privacy Tools!,OverviewHow To Use The ElementElement OptionsGlobal OptionsLinks & Resources,How To Use The Privacy ElementStep 1 – Create a new page or post, or edit an existing one.
Step 2 – Select the container and column you would like to place the Privacy notice into.
Step 3 – Click on the + Element button at the bottom of the column. Select Privacy.
Step 4 – Add your Privacy text to the dialogue and choose whether you want the form checkboxes to be stacked, or if they should be floated. Click Save to add the element to your page. You will be returned to the edit page. You can preview the page to view your content, and you can always edit the element again to make changes..
Read below for a detailed description of all element options.
767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
General Tab
Privacy Text – Allows you to add the text to display.

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

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

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

CSS ID – Allows you to add an ID for the column.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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

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

Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options ScreenGlobal OptionsThere are no Global Options for the actual Privacy Element, but there are options in the Theme Options, found at Avada > Theme Options > Privacy. These affect all aspects of the Privacy Tools added to Avada, but not the Element directly.,Useful Links & ResourcesGDPR and Avada Privacy ToolsAvada Privacy BarPrivacy Tools Options

Progress Bar Element

Avada includes multiple animated counter shortcodes, including the Progress Bar Element. These are great for displaying varying types of data and content to your viewers. The Progress Bar Element include several options for easy customization, and is a great way to visually attract the viewer and display content. read below to find out more about this visual element.,Progress Bar ElementLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
HTML Skills 85% WordPress Development 90% User Interface Design 85%,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Progress Bar ElementStep 1 – Create a new page or post, or edit an existing one.
Step 2 – Select the container and column you would like to place the progress bars.
Step 3 – Click on the + Element button at the bottom of the column. Select Progress Bar. Before configuring the options, it』s a good idea to view the Progress Bar Element Demo page to see what』s possible with this fun visual element.
Step 2 – That will open the element』s settings. This element has only one Options panel, and the options are quite straight forward. Initially, you choose the height of your progress bar, and then selecting where you want to display the text. It can be On, Below, or Above the bar itself. The next two options are about whether you want to show the filled area number and any chosen unit on the bar. For example, it could show 85%, just a number, or it could not show at all. The option below this, the Filled Area Percentage, is what determines how much the bar is actually filled with color. Under that, you can choose the color of the fill, the border color and size, the unfilled color and whether you want the filled area to be striped. You can even animate the stripes!
Step 3 – Once you have configured the styling options, the last thing to do is add any text you want on the bar and choose its color. That』s it.
Step 4 – When you have finished styling your element, click Save. You will be returned to your page content. Click preview to view your gallery on the front end, and you can always return to edit the element to make changes. To have multiple bars, the easiest way is to then duplicate the element and edit the cloned instance of it.
767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada767,637 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 Theme Options > Fusion Builder Elements > Progress Bar 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.
General Tab
Filled Area Percentage – From 1% to 100%.

Progress Bar Text – Insert the text that will show on the progress bar.

Display Percentage Value – Select if you want the filled area percentage value to be shown. Choose from Yes, or No.

Progress Bar Unit – Insert a unit for the progress bar. ex %.

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 Fusion Builder Elements tab in the Theme Options.

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 ScreenDesign Tab
Text Position – Select the position of the progress bar text. Choose 「Default」 for theme option selection. Choose from Default, On Bar, Above Bar, or Below bar.

Text Align – Choose the alignment of the text. If the text position is 「On Bar」, the alignment will work only if the bar is filled over 35% percent.

Text Color – Controls the text color. Leave empty for default value.

Typography

Font Family – Controls the font family of the text.

Striped Filling – Controls if the filled area is striped. Choose from No, or Yes.

Animated Stripes – Controls if the stripes are animated. Choose from No, or Yes.

Progress Bar Height – Insert a height for the progress bar. Enter value including any valid CSS unit, ex: 10px.

Filled Color – Controls the color of the filled in area.

Unfilled Color – Controls the color of the unfilled in area.

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

Filled Border Size – In pixels, from 0 – 20.

Filled Border Color – Controls the border color of the filled in area.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Progress Bar.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Progress Bar Text Position – Select the position of the progress bar text. Choose from On Bar, Above Bar, or Below Bar.

Progress Bar Text Color – Controls the color of the progress bar text.

Progress Bar Height – Insert a height for the progress bar. Enter value including any valid CSS unit, ex: 37px.

Progress Bar Filled Color – Controls the color of the progress bar filled area.

Progress Bar Unfilled Color – Controls the color of the progress bar unfilled area.

Progress Bar Filled Border Size – Controls the border size of the progress bar filled area. In pixels, from 0 – 20.

Progress Bar Filled Border Color – Controls the border color of the progress bar filled area.
View The Options Screen,Useful Links & ResourcesHow To Change The Speed of Progress Bar Shortcode

Scroll Progress Element

The Scroll Progress Element is new in Avada 7.3 and is the perfect Element to actively show your users how far they are through a page, by showing a scroll progress bar. You can see an example of it along the bottom of this page, as you scroll down.
Read on to find out more about this super useful Element, and watch the video below for a visual overview.,View Element Demo Page!OverviewHow To Use The Scroll Progress ElementUsing The Scroll Progress Element in Avada LayoutsElement OptionsGlobal Options,How To Use The Scroll Progress ElementThe Scroll Progress Bar Element can be implemented in several different ways. With the Progress Bar Position option, it can be Fixed to the Top, or the Bottom of the Viewport, or it can be set to Content Flow, which essentially means you can place it anywere in the content.
So the first thing to decide is where you want it positioned. With both Fixed To Top, and Fixed To Bottom positions, the Scroll Progress Bar extends the full width of the Viewport, and regardless of where you place the Element in your page content, on the front end, it is postitioned at the very top or the very bottom of the Viewport. If you have a Sticky Header, it remains above the Sticky Header when active.
When using the Content Flow Position, the Scroll Progress bar remains in the flow of content, wherever you have placed it, but is then also limited to the container width you set. There is a Z Index option, that allows you to ensure the bar is seen above other content, and several design options to control the colors and size of the bar, and even border options.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Using The Scroll Progress Element in Avada LayoutsThe Scroll Progress Element is likely even more useful in a Layout. In this case, you simply need to add the Element to one of the Layout Sections assigned to the Layout. If you choose Fixed To Top, or Fixed To Bottom positioning, then it doesn』t even matter which Layout Section, or where in the Layout Section it is placed. It will then display at the very Top, or the Bottom of the viewport on the pages set by the condition of the Layout.
If you choose Content Flow however, the Scroll Bar will display precisely in the position you place it in the Layout Section you place it in. In this way, for example, you could place it in a Header Layout, so that it displays at the bottom of a sticky container as the page scrolls. To add the Element in this way, consider exactly where you want the Scroll Progress bar to display. Amongst the things to consider are whether you want the bar to go the full width of the viewport, whether you need it to be Sticky, the Z-Index, to potentially keep it on top of a Sticky header, and the margins etc.,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 > Scroll Progress section. Also not 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 TabProgress Bar Position – Select the position of the progress bar. Choose from Content Flow, Fixed To Top, or Fixed To Bottom. Leave empty for the default value.Z-Index – Value for the progress bar』s z-index CSS property.Progress Bar Height – Insert a height for the progress bar. Enter value including any valid CSS unit, ex: 10px. Leave empty for default value.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 – 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 Separator.

CSS ID – Allows you to add an ID for the Separator.
View The Options ScreenDesign Tab
Background Color – Controls the background color for the Scroll Progress bar. Leave empty for default value.
Progress Color – Select a color for the progress bar. Leave empty for default value.Border Size – Set the border size. In pixels.Border Color – Controls the border color for the progress bar.Border Radius – Enter values including any valid CSS unit, ex: 10px. 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 OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Scroll Progress.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Progress Bar Position – Controls the timezone that is used for the countdown calculation.

Progress Bar Height – Insert a height for the progress bar.

Background Color – Controls the background color for the Scroll Progress bar.

Progress Color – Select a color for the progress bar.

Progress Bar Border Size – Set the border size. In pixels.

Progress Bar Border Color – Controls the border color for the progress bar.

Border Radius – Enter values including any valid CSS unit, ex: 10px.
View The Options Screen

Hidden Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Hidden Field Element is an advanced Element. You can use a hidden field to include unmodified data when a form is submitted. The content is hidden from the user completely, but can store a value that is sent along with the form. You could use JavaScript to identify the browser or page id, or many other things.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Hidden Field ElementThe Hidden Field Element allows you to include unmodified (and hidden) data when a form is submitted.
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 Hidden Field from the Form Elements tab.
Step 4. Go through the options to populate and configure your hidden field element. Add a field name, and a field value. for example, a JavaScript snippet.
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.

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

Field Value – Enter the value to be set for this hidden 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 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.

Menu Element

The Menu Element was added to Avada in Avada 7.0, and this fully featured Element can be used both throughout your content, and in the construction of Header Layouts using Avada Layouts. Read on to find out more about this exciting new Element, or watch the video for a visual overview.,Toggle NavigationHOMEAVADAABOUT USPARTNERSSPECIAL AVADA HOSTINGWORDPRESS HOSTINGWORDPRESS CUSTOMIZATIONBLOGCONTACTSUPPORTGETTING STARTEDDOCUMENTATIONTUTORIAL VIDEOSSUBMIT A TICKETSYSTEM STATUSCOMMUNITY FORUMMY ACCOUNTSALE,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Menu ElementThe Menu Element allows you to place a menu anywhere on your site, including in a Header Layout in Avada Layouts.
Step 1. Create a new page, post, or Header Layout Section, or edit an existing one.
Step 2. Select the container and column you would like to place the menu into.
Step 3. Click on Add Menu, and select, or search for, the Menu Element.
Step 4. There are five tabs in the Menu Element. The first one, General, is where you select the Menu to display and make some basic configuration settings to do with functionality and alignment. The Main tab is where you configure your selected menu』s appearance and colors. The Submenu tab has its own configuration options for any submenus. The Mobile tab is where you configure your menu for mobile, and the Extras tab offers animation options that allow you to determine how the menu interacts with the loading of the page.
Step 5. Save the Element as per the method in the interface of the Fusion Builder you are working in.
Read How The Menu Element & Menu Work Together !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 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
Menu – Select the menu which you want to use. You must first create these in Appearances > Menu, from the WordPress Dashboard.

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.

Direction – Select if you want a horizontal or a vertical menu.

Margin – Spacing above and below the section. Enter values including any valid CSS unit, ex: 4%.

Transition Time – The time it takes for submenus to expand and all other transitions on hover. In milliseconds.

Space Between Main Menu and Submenu – Controls the space between the main menu and dropdowns.

Menu Arrows – Choose if you want to show dropdown arrows on the main menu and submenus. Choose from Main, Main Active, and Submenus. You can select multiple options.

Arrow Size – Controls the width and height of the arrows. In px.

CSS Class – Add a class to the wrapping HTML element.

CSS ID – Add an ID to the wrapping HTML element.
View The Options ScreenMain Tab
Minimum Height – The minimum height for the main menu. Use any valid CSS unit.

Sticky Minimum Height – The minimum height for main menu links. This is a dependent option that shows when the parent container is sticky. Use any valid CSS unit.

Align Items – Select how main menu navigation-items will be aligned. Defines the default behavior for how flex items are laid out along the cross axis on the current line (perpendicular to the main axis). Choose from Start, Center, End, and Stretch.

Justification – Select how main menu navigation-items will be justified. choose from Start, Center, End, Between, Space Around, or Space Evenly.

Main Menu Typography

Font Family – Controls the font family of the menu items. Leave empty to use the site default.

Font Size – The font size for main menu links. Use any valid CSS unit.

Letter Spacing – Controls the letter spacing of the main menu items. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.

Text Transform – Select how the text is displayed. Choose from Normal or Uppercase.

Main Menu Item Text Align – Select if main menu items should be aligned to the left, right or centered. (Centered works well with Vertical Menus). Choose from Flex Start, Center, Flex End, or Space Between.

Main Menu Item Padding – Select the padding for navigation items. Enter values including any valid CSS unit, ex: 10px or 10%.

Main Menu Item Spacing – The gap between main menu items. Use any valid CSS value, including its unit (10px, 4%, 1em etc).

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

Main Menu Hover Transition – Select the animation type when hovering the main menu items. This animation is applied to the background-color and borders. Choose from Bottom, Center Horizontal, Center Grow, Center Vertical, Fade, Left, Right, or Top.

Main Menu Icon Position – Controls the main menu icon position. Choose from Top, Right, Bottom, or Left.

Main Menu Icon Size – Controls the size of the main menu icons.

Mega Menu Thumbnail Size – Controls the width and height of the main menu mega-menu thumbnails. Use 「auto」 for automatic resizing if you added either width or height.

Mega Menu Title Justification – Select how mega menu titles will be justified.

Main Menu Item Styling – Use filters to see specific type of content.

Regular Options

Main Menu Item Background Color – Controls the background color for navigation links.

Main Menu Item Link Color – Controls the color for main menu navigation links.

Main Menu Item Border-Size – Select the top, bottom, left & right border-widths for navigation items. Enter values including any valid CSS unit, ex: 10px.

Main Menu Item Border Color – Controls the border-color for non-hover & non-active navigation links.

Main Menu Item Icon Color – Controls the color of the icon.

Hover/Active Options

Main Menu Item Hover Background Color – Controls the background color for menu item hover and active states.

Main Menu Item Hover Color – Controls the color for active items on navigation links.

Main Menu Item Hover Border-Size – Select the top, bottom, left & right border-widths for active/hover navigation items. Enter values including any valid CSS unit, ex: 10px.

Main Menu Item Hover Border Color – Controls the border-color for hover & active navigation links.

Main Menu Item Icon Hover Color – Controls the icon』s hover color.
View The Options ScreenSubmenu Tab
Dropdown Carets – Select whether dropdown carets should show as submenu indicator.

Submenu Mode – Select whether you want a classic dropdown, or a full-screen Flyout. Choose from Dropdown, or Flyout.

Expand Method – Select how submenus will expand. Choose from Hover, or Icon Click.

Submenu Expand Direction – Changes the expand direction for submenus and vertical menus. Choose from Left, or Right.

Submenu Expand Transition – Changes the expand transition for submenus. Choose from Fade, or Slide Up.

Submenu Maximum Width – The maximum width for submenus. Use any valid CSS value.

Flyout Direction – Controls the direction the flyout sub menu starts from. Choose from Fade, Left, Right, Bottom, or Top.
Submenu Typography

Font Size – The font-size for submenu links. Use any valid CSS unit.

Font Family – Controls the font family of the menu items. Leave empty to use the site default.
Text Transform – Choose how the text is displayed. Choose from Normal, or Uppercase.
Submenu Item Padding – Select the padding for navigation items. Enter values including any valid CSS unit, ex: 10px or 10%.

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

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

Box Shadow Spread Radius – Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels.

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

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

Submenu Separator Color – Controls the color for the sub menu items separator. Set to transparent for no separator.
Submenu Item Styling – Use filters to see specific type of content.Regular
Submenu Background Color – Controls the background-color for active on navigation links.

Submenu Text Color – Controls the text color for submenu dropdowns.

Hover/Active

Submenu Hover/Active Background Color – Controls the background-color for hover/active sub menu items.

Submenu Hover/Active Text Color – Controls the text color for submenu items hover / active states.
View The Options ScreenMobile Tab
Collapse To Mobile Breakpoint – The breakpoint at which your navigation will collapse to mobile mode. Choose from Never, Small Screen, Medium Screen, Large Screen, or Custom.

Collapse To Mobile Breakpoint – The breakpoint at which your navigation will collapse to mobile mode, when selecting Custom in the option above. In pixels.

Mobile Menu Mode – Choose if you want the mobile navigation to be collapsed to a button, or always expanded.

Mobile Menu Expand Mode – Change the width and position of expanded mobile menus. Choose from Within Column – Normal, Within Column – Static or Full Width – Static.

Mobile Menu Trigger Padding – Select the padding for your mobile menu』s expand/collapse button. Enter values including any valid CSS unit, ex: 10px.

Mobile Menu Trigger Background Color – Controls the background-color for the mobile menu trigger.

Mobile Menu Trigger Text Color – Controls the text-color for the mobile menu trigger.

Mobile Menu Trigger Text – The text shown next to the trigger navigation icon.

Mobile Menu Trigger Expand Icon – Select icon for expanding/opening the navigation.
Mobile Menu Trigger Collapse Icon – Select icon for collapsing/closing the navigation.
Mobile Menu Trigger Font Size – Controls the size of the mobile menu trigger. In pixels.

Mobile Menu Trigger Horizontal Align – Change the horizontal alignment of the collapse/expand button within its container column.

Mobile Menu Trigger Button Full Width – Turn on to make the mobile menu trigger button span full-width.
Mobile Menu Trigger Bottom Margin – Controls the space between the mobile menu trigger and expanded mobile menu.
Mobile Menu Item Minimum Height – Controls the height of each menu item. In pixels.

Mobile Menu Sticky Maximum Height – The maximum height for mobile main menu links when the container is sticky. Use any valid CSS unit.

Mobile Menu Text Align – Select if mobile menu items should be aligned to the left, right or centered.

Mobile Navigation Indent Submenus – Turn on to enable indentation for sub-menus.

Mobile Menu Typography

Font Family – Controls the font family for mobile menu.

Font Size – Controls the font size for mobile menu.

Mobile Menu Separator Color – Controls the color for mobile menu separators.
Mobile Menu Item Styling – Use filters to see specific type of content.Regular
Mobile Menu Background Color – Controls the background color for mobile menus.

Mobile Menu Text Color – Controls the text color for mobile menus.
Active
Mobile Menu Active Item Background Color – Controls the background color for mobile menu active & focused items.

Mobile Menu Active Item Text Color – Controls the text color for mobile menu active & focused items.
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.

Number Element

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

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

Min Value – Minimum allowed value.

Max Value – Maximum allowed value.

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

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

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

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

Tab Index – Tab index for this input field.

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

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

Post Card Archives Element

In Avada 7.3, we created the Post Cards feature, and the Post Cards Element. In the Layout Elements, you will find the Post Card Archives Element. This special Element is useful for when you want to change the way archives display, by using a Post Card design.,IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.,View The Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Post Card Archives ElementThe Post Card Archives Element allows you to place archive content using a Post Card layout anywhere in a Content Layout Section, in a Layout displaying Archive content.
When you go to add an Element in a Content Layout Section, the Element dialog opens in a new tab called Layout Elements. This is where you will find the Post Card Archives Element. These dynamic Elements can only be placed once into a Layout, with the exception of the Pagination Element, which can be placed twice. You can also use the full range of Design Elements when building your Layout.
The Post Card Archives Element can be placed anywhere in your Layout Section, and will dynamically pull Archives Content into the page, based on the Post Card layout chosen, and the Conditions set in the Layout. For example, you might choose a Product Grid Post Card, and set the condition for the Layout only to display on Post Category Archives.
See below for an example of the Post Card Archives Element in a Product Category Content layout on the Avada Retail prebuilt website. Here, it』s set to display the Category Products in a Grid when viewing the Product Category Archives.
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 the Layout Elements only once within each Layout. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General TabPost Card – Selected a post card design to use. Post cards can be created in the Avada Library.Post Card List View – This post card will be used in the list view which can be triggered with the sorting element (WooCommerce). Post cards can be created in the Avada Library.Posts Per Page – Select number of posts per page. Set to -1 to display all. Set to 0 to use the post type default number of posts. For portfolio and products this comes from the global options. For all others Settings > Reading.Pagination Type – Choose the type of pagination. Choose from Pagination, Infinite Scroll, or Load More Button.Nothing Found Message – Replacement text when no results are found.
Element Visibility – Allows you to control the Element』s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

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

CSS ID – Allows you to add an ID for the Element.
View The Options ScreenDesign TabLayout – Select how you want post cards to display.Post Card Alignment – Select how you want post cards to align within rows. Choose from Flex Start, Center, Flex End, or Stretch.Number of Columns – Set the number of columns per row.Column Spacing – Insert the amount of horizontal spacing between items without 『px』. ex: 40.Row Spacing – Insert the amount of vertical spacing between items without 『px』. ex: 40.Separator – Choose the horizontal separator line style. This will only be used on single column grids or list view.Separator Color – Controls the separator color.Separator Width – In pixels (px or %), ex: 1px, ex: 50%. Leave blank for full width.Separator Alignment – Select the separator alignment; only works when a width is specified. Choose from Center, Left, or Right.Separator Border Size – In pixels.Autoplay – Choose to autoplay the items.Scroll Items – Insert the amount of items to scroll. Leave empty to scroll number of visible items.Show Navigation – Choose to show navigation buttons on the carousel.Mouse Scroll – Choose to enable mouse drag control on the carousel. IMPORTANT: For easy draggability, when mouse scroll is activated, links will be disabled.Navigation Margin – Controls the space between content and navigation. Enter value including any valid CSS unit, ex: -40px.
Animation – Choose animation style. Select Fade, or Slide.
Margin – In pixels or percentage, ex: 10px or 10%.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.

標籤： elements

Social Links Element

Privacy Element

Related Posts Element

Progress Bar Element

Scroll Progress Element

Hidden Field Element

Image Hotspots Element

Menu Element

Number Element

Post Card Archives Element