elements 归档 - 第 11 页共 15 页

Gallery Element

The Gallery Element is a fantastic way to quickly create a responsive and stylish image gallery on your Avada site. Select various layouts like Grid or Masonry, choose column width, column spacing, lightbox options, captions and more.
The Gallery Element was updated back in Avada 5.8, with the ability to add links to individual images, and lazy loading by default, and again with Avada 7.5 with the ability to add captions. Below, we』ll walk you through the various options and settings for this very useful element, and remember to watch the video below for a visual overview.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Gallery ElementStep 1 – In Avada Builder, click the + Element button to open the Elements list. You can visually find the Gallery Element or you can type in the search bar in the upper right-hand corner to filter for the Gallery Element.
Step 2 – Once the Element is inserted into the page, you can now add your images to the gallery. You can bulk upload images by choosing + Bulk Add on the Children tab, or by using the Bulk Image Upload option on the General tab (this one has the option of dynamic content). Adding items in bulk is ideal if you have all your images ready to go. Upload your images or if they』re already uploaded, just select them from the Media Library (with Cmd/Ctrl click, or Shift/Click for contiguous images) and when you are finished, click 『Insert Into Post』. Alternatively, you can add your images one at a time, under the Add / Edit Items options. Just click the + Add Images button and then the edit button on the item, or you can clone an image to retain its settings and then just change the image out.
Step 3 – Next, configure the settings which will style your gallery as desired. These settings are found on the General tab. There are options for layout, image size, number of columns and more. Please see below for a complete list of available settings and what they do, or checkout the Gallery Demo page for some great examples. There is also a Captions tab, if you wan to configure your Gallery to have captions.
Step 4 – When you have finished styling your element, save your changes.
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 Default settings will use the global settings assigned for this element in the Options > Avada Builder Elements > Gallery 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 add or edit new items for this Element. You can reorder elements by dragging them and dropping them into place.
+ Add Image – Allows you to add Items individually to the gallery. The item then needs to be edited to add the image to it.+ Bulk Add – Allows you to bulk upload or select images from the media library, which will populate into individual items.
Item Options

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.
View The Options ScreenItem Options
Image – Upload an individual image to add it to the gallery.

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

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

Image Link – Add the url the image should link to. If lightbox option is enabled, you can also use this to open a different image in the lightbox.

Link Target – Choose whether to open the link in the same browser tab (_self) or in a new one (_blank).
View The Options ScreenGeneral TabBulk Images Upload – Allows you to bulk upload or select images from the media library, which will populate into individual items. Dynamic content options are also available with this option.
Gallery Layout – Controls the gallery layout type. Choose between Default, Grid, or Masonry.

Picture Size – Choose between Default, Fixed, or Auto. Fixed will load a theme generated image size, which will be cropped to a predefined size. This will allow you to have a uniform layout even when your images aren』t the same size. Auto will use the image』s natural shape, and scale the image in keeping with its aspect ratio and the image will not be cropped.

Number of Columns – Can be set to a number 1 – 6. This setting will determine the max number of columns your layout can reach. IMPORTANT: Masonry layout does not work with 1 column.

Column Spacing – Controls the column spacing between each gallery image.

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

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

Hover Type – Choose between Default, None, Zoom In, Zoom out, or Lift Up. This will determine which animation style is applied to the image on hover.

Image Lightbox – Choose between Yes or No. This will determine if the images are displayed in the lightbox. Lightbox must be enabled in Theme Options or the image will open up in the same tab by itself.

Lightbox Content – Choose between Default, None, Titles, Captions, or Titles and Captions. Set if titles and/or captions will display in the lightbox. All titles and captions from each image are pulled from the image itself in the WordPress Media Library. NB. Titles and Captions must be enabled globally in Theme Options > Lightbox for them to display.

Gallery Image Border Size – Sets the border size of the gallery image.

Gallery Image Border Color – Sets the border color of the gallery image.

Gallery Image Border Radius – Sets the border radius of the gallery image. For example, 1px or round.
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 Avada Builder Elements tab in the Global 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.
View The Options ScreenCaption Tab
Caption – Choose the caption style. By default set to Off. Choices are Off, Above, Below, Navin, Dario, Resa, Schantel & Dany.

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

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

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

Image Title Typography

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

Font Size – Controls the font size of the image title.

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

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

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

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

Image Caption Font Family – Controls the font family of the image caption.

Image Caption Transform – Choose how the image caption is displayed.

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

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

Caption Align – Choose how to align the caption.

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

Picture Size – Choose between Fixed, or Auto. Fixed will load a theme generated image size, which will be cropped to a predefined size. This will allow you to have a uniform layout even when your images aren』t the same size. Auto will use the image』s natural shape, and scale the image in keeping with its aspect ratio and the image will not be cropped.

Gallery Layout – Controls the gallery layout type. Choose between Grid, or Masonry.

Number of Columns – Can be set to a number 1 – 6. This setting will determine the max number of columns your layout can reach. IMPORTANT: Masonry layout does not work with 1 column.

Column Spacing – Controls the column spacing between each gallery image.

Hover Type – Choose between None, Zoom In, Zoom out, or Lift Up. This will determine which animation style is applied to the image on hover.

Lightbox Content – Choose between None, Titles, Captions, or Titles and Captions. Set if titles and/or captions will display in the lightbox. All titles and captions from each image are pulled from the image itself in the WordPress Media Library.

Gallery Image Border Size – Sets the border size of the gallery image.

Gallery Image Border Color – Sets the border color of the gallery image.

Gallery Image Border Radius – Sets the border radius of the gallery image. For example, 1px or round.
View The Options Screen,Useful Links & ResourcesHow To Use Captions On Image Based ElementsCreating A Gallery With Image ElementsMasonry Layout Options

Image Before & After Element

Never before has it been easier to display the differences between two images. The Image Before & After Element allows you to beautifully highlight image differences with two transitions. Slide, and Fade. Each transition has its own customization options for even more flexibility. Read below for an overview of the Image Before & After Element.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Image Before & After Element
The Image Before & After Element is a new visual element to highlight the before and after state of something using two images.

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 before and after image.
Step 3 – Click on the + Element button at the bottom of the column. Select Image Before & After.
Step 4 – Now you have the options window open. The first step is to choose your Effect type. View the More Examples link at the top of the page to see the various effects. Once you have chosen your effect type, you need to choose your Before and After images and their labels if desired. There are then a number of options to do with the label, border and borders size options, image fade transition speed, plus a whole list of options to control how the handle looks and is placed.
Step 5 – There is also an animation tab if you wish to influence how the element loads on the page.
Step 6 – Once you have configured your options, click Save.
Step 8 – If you preview your page, you will see the result of the Image Before & After Element as you have styled it. You can always return to edit the 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 can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The Default setting will use the global settings assigned for this element in your Options > Avada Builder Elements > Image Before & After section.
General Tab
Effect Type – Select which type of effect your before and after image uses. 「Slide」 provides a handle to move back and forth while 「Fade」 changes the image on mouse hover.

Before Image – Upload a before image to display.

Before Image Label – Add text that will be displayed as a label on the before image when hovered. If left empty, no label will show.

After Image – Upload an 『after』 image to display. The image should be the same size as the 『before』 image.

After Image Label – Add text that will be displayed as a label on the after image when hovered. If left empty, no label will show.

Label Font Size – Controls the font size of the label text. In Pixels. Note: font family is controlled by body font in the Avada Options.

Label Accent Color – Controls the color of the label background and text. The text takes 100% of this color, background takes a % of it.

Label Placement – Choose if labels are on top of the image and centered, on top of the image up & down or outside of the image up & down.

Image Fade Transition Speed – Controls the speed of the fade transition on mouse hover. In seconds.

Link URL – Add the URL the item will link to, ex: https://example.com. (Only on Fade Effect Type)

Link Target – _self = open in same browser tab, _blank = open in new browser tab. (Only on Fade Effect Type)

Handle Design Style – Controls the design of the handle used to change the before and after image.

Handle Color – Controls the color of the before and after image handle line and arrows. ex: #ffffff.

Handle Background Color – Controls the background color of the before and after image handle switch. ex: #000000.

Handle Offset – Controls where the handle will be positioned on page load, allowing you to control how much of each image displays by default.

Handle Orientation – Controls the position of the before and after image handle. You can choose Vertical or Horizontal.

Handle Movement Control – Controls how the viewer interacts with the image handler. The image handle can use Drag & Click, Drag Only, or Hover.

Max Width – Set the maximum width the element should take up. Enter value including any valid CSS unit, ex: 200px. Leave empty to use the full image width.

Border Size – In pixels.

Border Color – Controls the border color. Leave empty for default value.

Border Radius – Controls the image border radius. In pixels (px), ex: 1px, or 「round」. Leave empty for default value.

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

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

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

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

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

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

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

Effect Type – Select which type of effect your 『before and after』 image should use. 「Slide」 provides a handle to move back and forth while 「Fade」 changes the image on mouse hover.

Label Font Size – Controls the font size of the label text. Note: font family is controlled by body font in theme options. In pixels.

Label Accent Color – Controls the color of the label background and text. The text takes 100% of this color, background takes a % of it.

Label Placement – Choose if labels are on top of the image and centered, on top of the image up & down or outside of the image up & down.

Handle Design Style – Controls the design of the handle used to change the before and after image.

Handle Color – Controls the color of the before and after image handle line and arrows. ex: #ffffff

Handle Background Color – Controls the background color of the before and after image handle switch. ex: #000000.

Handle Offset – Controls where the handle will be positioned on page load allowing you to control how much of each image displays by default. In percentage.

Handle Orientation – Controls the position of the before and after image handle.

Handle Movement Control – Controls how the viewer interacts with the image handler. The image handle can use Drag & Click, Drag Only, or Hover.

Image Fade Transition Speed – Controls the speed of the fade transition on mouse hover. In seconds.
View The Options Screen

Lottie Animation Element

The Lottie Animation Element offers you a way to add Lottie Animations to your content. A Lottie is 「a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation.」 You can find animations at LottieFiles, and use the Element to add them anywhere in your content.
The Element is easy to use and has a range of styling options. Read below for more information, or watch the video for a visual overview..,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Lottie Animation ElementThe Lottie Animation Element is easy to add anywhere in your content. Follow these simple steps below.
Step 1. Find a Lottie Animation you want to display. Visit LottieFiles to see a large range of Lottie animations you can download.
Step 2. Download your chosen Lottie Animation as a JSON file.
Step 3. Add the Lottie Animation Element to a Column in Avada Builder.
Step 4. Select the JSON file from your computer to upload.
Step 5. If you wish to make further customization, there are lots of options, with which you can customize the loading and display of your Lottie Animation.
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.
General Tab
JSON Upload – Upload a lottie JSON file. Visit LottieFiles to find animations.

Link URL – Add the URL the animation will link to, ex. https://example.com

Link Target – Choose whether the link will open in the same tab (-self) or in a new tab (_blank).

Trigger – Select the trigger for the Animation to play. Choose from None, Viewport, Hover, or Click.

Trigger Offset – Controls when the animation should play. Choose from Default, Top of Element hits bottom of viewport, Top of Element hits middle of viewport, or Bottom of Element enters viewport.

Loop – Controls whether the animation should loop or not. Default is Yes.

Reverse – Select yes to play the animation in reverse.

Playback Speed – The speed at which the animation should play.

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

Max Width – Set the maximum width the animation should take up. Enter value including any valid CSS unit, ex: 200px. Leave empty to use full width.

Align – Choose how to align the animation. Choose from Text Flow, Left, Right, and Center. This option is also part of the Responsive Option Sets.

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

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.

Filter Type (both regular & hover state options)

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

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

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

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

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

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

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

Blur – This filter adds a blur filter to the contents of the column.
View The Options ScreenGlobal OptionsThere are no Global Options for the Lottie Animation 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.

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 News Ticker Element.

Phone Number Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Phone Number Field Element is a numeric field used to collect mobile or landline numbers. It does not accept spaces or letters. Examples of this Element can be found in the Registration Form Dark, Standard Contact Form, Sweepstakes Form, and the Reservation Form, to name a few.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Phone Number Field ElementThe Phone Number Field Element allows you to place a 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 Phone Number Field from the Form Elements tab.
Step 4. Go through the options to populate and configure your checkboxes. Add a label, decide if it is to be a required field, add an optional tooltip, choose whether your options are to be displayed stacked or floated etc. You can add your own options, either individually or in bulk, or you can choose from a range of pre-populated choices, such as Countries, Days of the Week, Months of the Year, U.S. States, Years, and Days of the Month.
Step 5. Once you have configured the Element, save your page.
Read below for a description of all element options.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element. You access the Form Builder Elements when adding an Element while editing a Form in the Avada Form Builder (Forms > Form Builder, from the Avada Dashboard).
You can deploy as many individual Elements in your forms as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each instance of the Element independently, greatly enhancing your flexibility and creative options.
General Tab
Field Label – Enter the label for the input field. This is how users will identify individual fields.

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

Required Field – 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

Google Map Element

The Google Map Element is just one part of the integration Avada offers for Google Maps. This Element can be used on any page, post, or widget area. We include intuitive options that allow you to use the default google map styles, or customize the options to fit your branding style. Avada also lets you select multiple map locations on a single map, each with its own content. Select 4 map types, display a color overlay, upload a custom map marker, customize the map popup box along with many other unique options. Read on for an overview of this useful Element.,IMPORTANT NOTE: Google Maps introduced pricing plans for their Google Map Service in June 2018. Read this Setting Up Google Maps article to help you get started.,Google Map Element Example,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Google Map ElementThe Google Map Element allows you to add customized maps anywhere on your site.
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 『Google Map』 element and click it to bring up its options window.
Step 4 – To start with the Google Map Element, you need to choose the Google API Type. You can choose from three API types, including JS API, Embed API, and Static API. Google have recently made big changes in the way Google Maps work, so it』s a good idea to start with the Google Maps User Guide to read up on that, and don』t forget to check out the Element Demo page to see the options available.
Step 5 – Once you have chosen your API type, you enter your address (or addresses). You can also use longitude and latitude coordinates. Then you select your map type, though the choices offered here will depend on the API type you have chosen. Next are a selection of styling options, including map dimensions and zoom level, and a few user interface options.
Step 6 – Once you have completed customizing your map, click Save. You will be returned to the edit page. You can preview the page to view the map, and you can always edit the element again to make changes.
Read below for a detailed description of all element options.
767,626 Businesses Trust Avada
Get Avada767,626 Businesses Trust Avada
Get Avada767,626 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The Default settings will use the global settings assigned for this element in the Options > Avada Builder Elements > Google Map 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.

Google API Type – Select the Google API type that should be used to load your map. The JavaScript API allows for more options and custom styling, but could be charged for by Google depending on the number of map loads. The embed and the static API can be used for free regardless of map loads. For more information please see the Google Maps Users Guide.

Address – Add the address of the location you wish to display. Address example: 775 New York Ave, Brooklyn, Kings, New York 11203. If the location is off, please try to use long/lat coordinates. ex: 12.381068,-1.492711. This option will only show if you choose the Embed API.

Map Type – Select the type of google map to display. Choose from Road, or Satellite. This option will only show if you choose the Embed API.

Address – This option will only show if you choose the JS API. Add the address of the location you wish to display. Single address example: 775 New York Ave, Brooklyn, Kings, New York 11203. If the location is off, please try to use long/lat coordinates with latlng=. ex: latlng=12.381068,-1.492711. For multiple addresses, separate addresses by using the | symbol. ex: Address 1|Address 2|Address 3.

Map Type – This option will only show if you choose the JS API. Select the type of google map to display. Choose from Roadmap, Satellite, Hybrid, or Terrain.

Map Dimensions – Map dimensions in percentage, pixels or ems. NOTE: Height does not accept percentage value.

Zoom Level – A higher number will be more zoomed in on the map. Choose from 1-25.

Scrollwheel on Map – Enable zooming using the mouse scroll wheel. Use Cmd/Ctrl key + scroll to zoom. If set to NO, cooperative gesture handling will be enabled.

Show Scale Control on Map – Displays the map』s scale.

Show Pan Control on Map – Displays the Pan Control button.

Address Pin Animation – Choose to animate the address pin when the map first loads.

Show Tooltip by Default – Display or hide the tooltip by default when the map first loads.

Select the Map Styling Switch – Choose default styling for classic google map styles. Choose theme styling for our custom style. Choose custom styling to make your own with the advanced options below.

Map Overlay Color – Custom styling setting only. Pick any overlaying color for the map besides pure black or white. Works best with 「roadmap」 type.

Map Color – Custom styling setting only. Pick any color for the map besides pure black or white.

Infobox Content – Custom styling setting only. Type in custom infobox content to replace address string. For multiple addresses, separate infobox contents by using the | symbol. ex: InfoBox 1|InfoBox 2|InfoBox 3.

Infobox Styling – Custom styling setting only. Choose between default or custom infobox.

Infobox Text Color – Custom styling setting only. Pick a color for the infobox text.

Info Box Background Color – Custom styling setting only. Pick a color for the infobox background.

Custom Marker Icon – Custom styling setting only. Use full image URLs for custom marker icons or input 「theme」 for our custom marker. For multiple addresses, separate icons by using the | symbol or use one for all. ex: Icon 1|Icon 2|Icon 3. NOTE: Icon images may be in PNG, JPEG or GIF formats and may be up to 4096 pixels maximum size (64×64 for square images).

Element Visibility – Allows you to select the screen sizes to show or hide the element in. You can choose one or more settings. Choose from Small Screen, Medium Screen, or Large Screen.

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 OptionsLocation: As well as the Element Options, there is a single global option that can be set for the Google Map Element in the Global Options (Avada > Options > Avada Builder Elements > Google Map.
Apart from the Element Options, there is a whole raft of options for Google Maps, located in the Theme Options, under Avada > Options > Contact Template > Google Map & > Google Map Styling. See the article in the Links section below for more information.

Image Carousel Element

The Image Carousel Element is perfect for showcasing a set of images, your portfolio pieces, client logos and much more. The customization options it offers give you incredible flexibility to choose how it looks, works, and interacts with the user. Read below to discover more about this useful visual element.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Image Carousel ElementThe Image Carousel Element allows you to add beautiful image carousels to you website, with a minimum of fuss.
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 image carousel into.
Step 3 – Click on the + Element button at the bottom of the column. Select Image Carousel.
Step 4 – The options on the right hand side are Parent Options, and affect the entire carousel. This is a relatively simple element with some basic styling options, but make sure to view the Image Carousel Element Demo page, to appreciate the different layouts and options on offer. The first two options relate to the images displayed on the carousel. Firstly, you need to select or upload the images you want to use, and then choose their size. The Bulk Image Upload option allows you to add all the carousel images in one go, instead of one at a time from the child options. Simply choose the images you want to add by clicking on Select Images and choosing images already in your Media Library by using the Cmd / Ctrl key, or by uploading and selecting new ones (these will be auto selected). Once you have finished your selections, click Insert into Page. With the fixed size option, a fixed width and height are used, and so, if images chosen have a different aspect ratio, or orientation, they will be cropped, so that all thumbnails have the same size. With the Auto option, the width and height will adjust to each image. For best results using the image carousel, it is recommended that you use images of the same size and orientation, to avoid cropping and unusual layouts.
Step 5 – The remaining parent options are styling options, like the Hover type, whether the carousel should autoplay, the maximum number of columns on the screen, as well as some spacing, scrolling and border options. There is also an option for the individual carousel images to open in a Lightbox.
Step 6 – 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. In this Element, this is a very simple section, where you can edit each image for the carousel, or add new ones. Each image can link to a url if you wish, and there are options for the image links to open ina new window, and you can add alt text to each image.
Step 7 – If you wish to add additional images to the Image Carousel, you can then duplicate existing, or add new images by clicking on the Clone Item icon, or the + Image button respectively.
Step 8 – Once you have completed adding your images, click Save. You will be returned to the edit page. You can preview the page to view your carousel, and you can always edit the element again to make changes.
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 Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Carousel Elements 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 add or edit new items for this Element. You can reorder elements by dragging them and dropping them into place.
+ Add Image – Allows you to add Items individually to the gallery. The item then needs to be edited to add the image to it.+ Bulk Add – Allows you to bulk upload or select images from the media library, which will populate into individual items.
Item Options

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.

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

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

Image Link – Add the url the image should link to. If lightbox option is enabled, you can also use this to open a different image in the lightbox.

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

Image Alt Text – The alt attribute provides alternative information if an image cannot be viewed.
View The Options ScreenGeneral TabBulk Image Upload – Allows you to bulk upload or select images from the media library, which will populate into individual items. When using the Image Carousel Element in Layouts, dynamic content options will also be available. See the Dynamic Content In Layouts section below.
Picture Size – Choose the Picture size. Select from Fixed, or Auto. Fixed = width and height will be fixed. Auto = width and height will adjust to the image.

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

Autoplay – Select whether to autoplay the carousel. Choose from Yes, or No.

Maximum Columns – Select the number of max columns to display. From 1 – 6.

Column Spacing – Insert the amount of spacing between items without 「px」. ex: 13. From 0 – 300.

Scroll Items – Insert the number of items to scroll. Leave empty to scroll the 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.

Border – Choose to enable a border around the images.

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

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.