Avada 文檔

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.

Image Element

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

How To Insert An Image Element

How To Add An Image To The Element

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

Global Image Element Options

Links & Resources,How To Use The Image ElementThe Image Element can be used anywhere in your content. This element has numerous options, as well as a few global options. This element also features a Lightbox option where you can display a single or multiple image elements, and with Avada 7, it can be used to add a site logo to a Header Layout, using the Dynamic options in the Element.
How To Insert An Image ElementStep 1. Ensure Avada Builder, or Avada Live is active.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose Image from the Elements List.
Step 4. Click the 『+ Element』 button to bring up the Elements window. Locate the Image Element and click it to add it to the page. Alternatively, just search for 『Image』 and the Image Elements will be filtered for your selection.
How To Add An Image To The ElementStep 1. Once you』ve added the Element into the page, you will see a placeholder image on the page (Avada Live).
Step 2. The first element option is called Image. Click the 『Plus』 button and select or upload the image you』d like to display inside the image element.
Step 3. Configure the Element to your preferences. There is a wide range of options with this Element, including Style Types, Boders, Captions, Masks, Aspect ratios etc.
Step 4. Once finished, remember to save your changes.
How To Use 『Gallery ID』 OptionCreating A Gallery With Image ElementsThe 『Gallery ID』 option allows you to combine any number of Image Elements on the page to display in the same lightbox gallery. Continue reading below to learn how to use this option.
Step 1. Add an Image Element in the usual manner.
Step 2. Set the 『Image Lightbox』 option to Yes. If you』d like to set a different lightbox image, assign one using the 『Lightbox Image』 option.
Step 3. Locate the 『Gallery ID』 option and insert a unique name for the lightbox gallery that this image frame will belong to. For example, Products.
Step 4. Repeat steps 1 – 3 for all the Image elements you』d like to include in the lightbox gallery.
How To Use The Image Element To Add A Logo To A Header LayoutYou can also use the Image Element to add a Logo to a Header Layout. To do this, you can simply insert an image as normal, or you can use the Dynamic Content option in the Image field. Under Site, there is a Logo option, and when you select this, you can choose a Logo Type (see below). You can select any of the three logo types (Default, Sticky and Mobile) in both Normal or Retina, or you can select the All option. This pulls the most appropriate logo from the Global Options Logo area as the image, depending on the size of your screen. NB. Just be aware, this method loads more content than adding a single image, and so likely affects page scores more than the simple method of adding a single image for the logo.
Read More: How To Use The Image Element To Add A Logo In A Header Layout!767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The Default settings will use the global settings assigned for this element at Options > Avada Builder Elements > Image. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Image – Allows you to upload an image to display. Dynamic options are also available.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mask – Select an image mask.

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

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

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

Mask Position – Set image mask position.

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

Mask Repeat – Select how the image mask repeats.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Image Title Typography

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

Font Size – Controls the size of the font.

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

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

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

Image Caption Typography

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

Font Size – Controls the size of the font.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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.

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.

Caption Area Margin – In pixels or percentage, ex: 10px or 10%. Only available on Above, and Below.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Carousel. These global element options control all elements that use a carousel.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Element Options that allows you to control individual Element default settings.

Carousel Navigation Box Color – Controls the color of the navigation box for carousel sliders.

Carousel Hover Navigation Box Color – Controls the color of the hover navigation box for carousel sliders.

Carousel Speed – Controls the speed of all carousel elements. ex: 1000 = 1 second.
View The Options Screen,Dynamic Content In LayoutsWhen using the Image Carousel Element in Avada Layouts, you will also find a dynamic content option under the Bulk Upload option. Here you can add Featured Images, ACF Galleries, or Woo Galleries.

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

Icon Element

The Icon Element, (formerly the Font Awesome Icon Element) was renamed back in Avada 6.2. This was because of the added ability to add custom icon sets to Avada, which this element can then access. For more details on that, please see How To Upload And Use Custom Icons in Avada.
But regardless of the name change, this element is still a great way to add any of the 1,609 Free Font Awesome Icons to your content, as well as any custom fonts you want to upload. And if that』s not enough for you, you can now import custom Icon sets directly from Avada Studio. And if you』re a total icon freak, there is also Font Awesome Pro Integration in Avada, giving you access to 7,800+ Font Awesome Icons through the Avada Builder.
A full set of styling options in this Element allow you to select icon size, weight, color, background, rotation, spinning and more. And every one is 100% full vector, so they look incredibly sharp and are retina-ready! Read below for an overview of the specific features of this awesome Element.,IMPORTANT NOTE: Font Awesome Pro requires an annual subscription, please check their site for detailed information & pricing.,View Element Demo Page!,OverviewHow To Use The Icon ElementElement OptionsGlobal Options,How To Use The Icon ElementThe Icon Element allows you to place icons anywhere on your site.
Step 1. Ensure Avada Builder, or Avada Live is active.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose Icon from the Elements List.
Step 4. There are three tabs in the Icon Element. The first one, General, is where you choose your font, and make some basic settings to do with size, functionality and alignment. The Icon picker was also updated with Avada 6.2 to show any installed icon sets, both Font Awesome Icon sets and Custom Icon sets. The Design tab is where you configure your selected icon』s appearance with margin, circle, color, background and border options. The Extras tab offers animation options that allow you to determine how the icon interacts with the loading of the page.
Step 5. Once you have completed styling your Icon, click Save.
Read below for a detailed description of all element options.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The Default setting will use the global settings assigned for this element at Options > Avada Builder Elements > Icon. 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
Select Icon – Click an icon to select, click again to deselect. Use the Plus symbol to add a custom icon set.

Icon Size – Set the size of the icon. In pixels (px), ex: 13px.

Flip Icon – Choose to flip the icon.

Rotate Icon – Choose to rotate the icon.

Spinning Icon – Choose to let the icon spin.

Link – Add the url the icon should link to.

Link Target –_self = open in same window, _blank = open in new window.

Alignment – Select the icon』s alignment. Choose from Text Flow, Center, Left, or Right. This setting now has Responsive Options. See the Responsive Option Sets document for more info.

Element Visibility – Allows you to control the Element』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 for the Element.

CSS ID – Allows you to add an ID for the Element.
View The Options ScreenDesign Tab
Margin – Spacing around the font awesome icon. In px, em or %, e.g. 10px. Note: Leave empty for automatic margin calculation, based on alignment and icon size.

Icon Color – Controls the color of the icon.

Icon Hover Color – Controls the hover color of the icon.

Icon Background – Turn on to display a background behind the icon.

Icon Background Size – Controls the background size of the icon. In pixels.

Icon Background Color – Controls the color of the icon background.

Icon Hover Background Color – Controls the hover color of the icon background.

Icon Background Border Size – Controls the size of the background border.

Icon Background Border Color – Controls the color of the background border.

Icon Hover Background Border Color – Controls the hover color of the background border.

Border Radius – Enter values including any valid CSS unit, ex: 10px. Leave empty for default values.

Icon Hover Animation Type – Select the animation type for icon on hover. Choose from Fade, Slide or Pulsate.
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: Avada > Options > Avada Builder Elements > Icon
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Icon Font Size – Controls the size of the icon. In pixels.

Icon Color – Controls the color of the icon.

Icon Hover Color – Controls the hover color of the icon.

Icon Background – Turn on to display a background behind the icon.

Icon Background Color – Controls the color of the icon background.

Icon Hover Background Color – Controls the color of the icon background on hover.

Icon Border Size – Controls the border size of the icon.

Icon Background Border Color – Controls the border color of the icon background.

Icon Hover Background Border Color – Controls the border color of the icon background border on hover.

Border Radius – Set the border radius.

Icon Hover Animation Type – Controls the hover effect of the icon. Choose from Fade, Slide, or Pulsate.
View The Options Screen

How To Use the Dynamic Options In The Countdown Element

With Avada 7.3, Dynamic Content options were added to the Countdown Element. These Dynamic Content options are particularly useful for users of WooCommerce and The Events Calendar, as you can use them to link the Countdown Element to specific WooCommerce sales or Event Calendar events. Read on to find out how you can use these Dynamic Content options.,Dynamic Content OptionsWith the Countdown Timer End option of the Countdown Element, it is now possible to use Dynamic Content, instead of simply adding a date and time. To do this, simply click on the Dynamic Content Icon to the right of the Option Title, and a dropdown selector will appear. Here, you can choose one of four Dynamic Content types, a Custom Field, a Shortcode, a WooCommerce Sales Date, or an Event Calendar Event Date.
The first one is a Custom Field, which is pretty much for advanced users. If, for example, a user had a Custom Post Type and a custom field into which they added a date, they could use that here. Likewise, with the Shortcode option. If a user created their own shortcode which returned a date, then they could use that here. But using the last two options are going to be much more likely for the majority of users, so let』s focus on those.,Linking To WooCommerce SalesWhen you choose a WooCommerce Sale Date as the Dynamic Content type, a further dialog appears. As you can see in the screenshot below, this allows you to choose a Sale Start Date, or a Sale End Date to count down to, as well as having a field for a Product ID, and one for a Fallback value.
Product IDYou can enter a Product ID to display a specific product』s sale date, or if you leave it empty, it will auto-pull the product ID of the currently viewed product to check for sales dates. How this works depends on where you place the Countdown Element, and whether you use the Hide When Inactive option.
To find a Product ID is relatively easy. With WooCommerce Products, it』s right there when you mouse over the product, as can be seen in the first screenshot below. For The Event Calendar Events, as you can see in the second screenshot, the Event ID can be seen at the bottom of your browser when you mouse over the Edit button. If your browser does not display this, simply edit the Event, and the Event ID is the number in the Event URL.
It』s also important to remember that sales dates are set on individual products in WooCommerce, not for the shop as a whole. So where the Dynamic Content option is most useful would perhaps be in a Single Product Layout, where the Element would pull the sales dates of the various products as they were viewed. To clarify how the Dynamic Options can work, let』s look at a couple of different scenarios.,Countdown To Sale Start In A LayoutLet』s say we add the Countdown Element to a Single Product Layout, and use the Dynamic Content options to set it to display the Sale Start Date. Because it』s being used in a product template, we don』t want to set an ID for a specific product, so here, we leave that empty. In the screenshot below, you can see the Element added to the top of the Layout Section, with the Date set to Sale Start Date.
But also, let』s say only selected products in our shop will be going on sale. Because the Element is being used in a template, it would normally be displayed on all products, including those with no sale dates. But in the Countdown Element, there is a very useful Display When Inactive option. If we set that to Hide, then the Element will only display on products with upcoming sales! And because we didn』t add a Product ID, the Element will auto-pull the dates from the individual products viewed, so even if the sales started on different dates, this would be reflected in the actual products. In the screenshots below, we can see what a product with a sale coming up would look like, and below that, what a product with no sale coming up would look like.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Countdown To Sale End In A LayoutOK, but what about when the sale starts? Our Sale Start Date now becomes Inactive, as it has passed, and so the Element no longer displays on the product. And now we might want another Countdown, this time to the end of the Sale. With the Dynamic Option in the Countdown Element, we can set both of these up at the same time.
In the same Product Layout Section, we can now add another Countdown Element, but this time we set the Dynamic Content of the Countdown Timer End option to Sale End Date. We also set the Display When Inactive Option To Hide, and change the Title and Subtitle Text. That』s it!
So now, before the sale has started we see the initial Countdown Element on any products that have a Sale Date, just like before. But after the sale has stared, this instance of the Element does not display any more and our second Countdown Element becomes active and displays on the page, as can be seen in the second screenshot. And on products that don』t have any sale, neither instance of the Element displays. How cool is that!,Countdown To Sale On Static PageIf you want to use the Countdown Element to count down to the start or end of a sale on a Home, or other static page, then the Dynamic Content options are not as useful as when used in a dynamic item like a Layout, as it』s very easy to just enter a date manually. But if you wanted to highlight the sale of a specific product, you could easily add the Element, and add the Product ID so that the Sales date of that specific product is used.
In the screnshot below, you can see an example of a specific product being promoted on the home pgae on the online Tutor website. It』s also set to Hide on the Display When Inactive option, so it will not display once the sale is live. This could of course be a count down to the end of a sale, or there could be both as done in the Layout above.,Linking To Event Calendar EventsThe process is basically the same with linking the Dynamic options of the Countdown Element to an Event Calendar Event. Again, when selecting the Event Date Dynamic Content Type, you are met with exactly the same options.
That said, Event Calendar Events are inherently different from WooCommerce Products. The Events page itself is automatically generated, and so is not a page that can be edited directly. And unlike WooCommerce Products, Layouts are not in use for Events, so the most likely places to use the Countdown Element with Dynamic Content is on a static page, like the Home page, or on the actual Event pages.,Countdown To Event On Static PageHere is an example of a Countdown to an Event on the Home page of the Online Tutor site. The Event Start Date option was selected in the Dynamic Content options, and a specific Event ID was added to pull the start date from the event in question. See the Product ID section above to see how to find IDs for Events.,Countdown To Event On Event PageTo be able to edit your individual Events in Avada Builder, make sure that 『Event』 is selected under Post Types in the Builder Options (Avada Dashboard > Options > Builder Options > Post Types).
Then it』s the same as any page. Simply add the Countdown Element, select the Start or End Date in the Dynamic options, and set the Event ID for that specific Event. Using the Dynamic Content options here doesn』t really have any advantage over manually enterting the date, but it』s another option you have.

Honeypot Field Element

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

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

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

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

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms

Highlight Element

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

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

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

Background Color – Pick a highlight background color.

Rounded Corners – Choose to have rounded corners.

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

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

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

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

Gravity Form Element

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

Select Form – Select the form you want to display.

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

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

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