诗语，作者 Avada 文档 - 第 68 页共 79 页

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.

Popover Element

The Popover Element is a simple yet elegant way to display information without disrupting your page layout. The Popover Element can be used as a stand alone Element from the Avada Builder, but it is also an Inline Element, accessible from the Inline Editor. You can add popovers to text, images, and even buttons! To learn the different ways on how to add popovers, please continue reading below.,Hover Here To See The Popover Element In Action,View Element Demo Page!,OverviewHow To Add Popovers To TextHow To Add Popovers To ImagesHow To Add Popovers To Buttons
Inline Elements In Avada Live
Element OptionsGlobal OptionsUseful Links & Resources,How To Use The Popover ElementYou can add popovers to any text content or image you have. For example, a word between paragraphs or an entire sentence. You can also add popovers on buttons, however to do that, it requires a few more steps. Continue reading below to learn about how to add popovers to text, images, and buttons.
How To Add Popovers To TextHow To Add Popovers To ImagesHow To Add Popovers To ButtonsHow To Add Popovers To TextThere are two ways to add a Popover to text – to pre-existing text, or through the Popover Element itself. let』s look at both ways.
Existing TextStep 1. Select the text you want to be the trigger for the Popover in any Element that has a Text component, such as the Text Block, or Title. If you are working in Avada Live, the Inline Editor will appear, and from the + button, you can choose the Popover Element. If you are in Avada Builder, you will need to edit the Text based Element, and select the trigger text in the WordPress content editor field inside the Element.
Step 2. On the toolbar, you』ll find the 『Avada Builder Element Generator』 icon which looks like the Avada logo. Click the 『Element Generator』 icon to bring up the Elements window.
Step 3. Select the 『Popover』 element.
Step 4. In the 『Triggering Content』 field, you will see the text you have selected to trigger the popover with. For example, View More Info Here!.
Step 5. In the 『Popover Heading』 and 『Contents Inside Popover』 options, insert the heading text and the content, respectively, that you』d like to display in the popover.
Step 6. Set the other options such as the trigger method, popover position, heading/content background color, and other styling colors found in the Design tab.
Step 7. If you are working in the back-end Avada Builder, click the 『Insert』 button, and you will be back in the original text-based Element. Click Save.
Standalone ElementYou can also just add the Popover Element directly into your content.
Step 1. Select the Column you wish to place your Popover content, and select Popover from the Element list.
Step 2. In the 『Triggering Content』 field, you need to add some content. This can be plain text, or it could be another Element, chosen from the Avada Builder Element Generator. Obviously, not all Elements will work with this method. Stick to basic things like text, images, or buttons etc. It』s with this method we can add Popovers to images and buttons.
Step 3. Click Insert, to add the generated Element into the Triggering Content field.
Step 4. Set the other options such as the trigger method, popover position, heading/content background color, and other styling colors found in the Design tab. If you are working in the back-end Avada Builder, click Save to finish editing the Element.
How To Add Popovers To ImagesInstead of adding a Popover to an Image, we do it the other way around – we add an image to a popover.
Step 1 – Add the Popover Element to you content where you wish the image to display.
Step 2 – In the Triggering Content options, you need to add your image. Locate the WordPress content editor field in your chosen element. On the toolbar, you』ll find the 『Avada Builder Element Generator』 icon which looks like the Avada logo. Click the 『Element Generator』 icon to bring up the Elements window.
Step 3 – Select the 『Popover』 element.
Step 4 – In the 『Triggering Content』 field, click 『Add Media』 button, and select a picture from the Media Library. If there are no images in the Media Library, go to 『Upload Files』 tab, and upload an image. Upon selecting the chosen image, click 『Insert into page』 button.
Step 5 – In the 『Popover Heading』 and 『Contents Inside Popover』 options, insert the heading text and the content, respectively, that you』d like to display in the popover.
Step 6 – Set the other options such as the trigger method, popover position, heading/content background color, and other styling colors found in the Design tab.
Step 7 – Once finished, click the 『Insert』 button.
Step 8 – You can then add content into the main element as needed. Once you』re done, click 『Save』 to save your changes.
How To Add Popovers To ButtonsStep 1 – Create a popover by following the instructions in the 『How To Add Popovers To Text』 section above. Make sure to set the 『Triggering Method』 option to Hover in order for the popover to display when hovering over the button.
Step 2 – Insert the popover element to the page, then switch to the Default Editor to copy the popover』s code snippet. Once you』ve copied it, you can discard it. It looks something like this:
Copy to Clipboard[fusion_popover title="" content="This is a popover." trigger="hover" placement="top" class="" id="" title_bg_color="" content_bg_color="" bordercolor="" textcolor=""]Button Text[/fusion_popover] 1[fusion_popover title="" content="This is a popover." trigger="hover" placement="top" class="" id="" title_bg_color="" content_bg_color="" bordercolor="" textcolor=""]Button Text[/fusion_popover]Step 3 – Activate the Avada Page Builder again and insert a Button element. Click the 『Settings』 icon to bring up it』s options window.
Step 4 – Paste the Popover code snippet you just copied into the 『Button』s Text』 field. You can then customize the button to your liking using the different options available. Once you』re finished customizing the Button Element, click the 『Save』 button.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Inline Elements In Avada Live
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.
Note: The Default setting will use the global settings assigned for this element in the Options > Avada Builder Elements > Popover section. Also note that the displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Triggering Content – This is the content that will trigger the popover.

Popover Heading – Insert the heading text of the popover.

Contents Inside Popover –Text to be displayed inside the popover.

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

Popover Position – Select the display position of the popover. Choose from Default, Top, Bottom, Left, or Right.

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

CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
View The Options ScreenDesign Tab
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. Leave empty for the default value.

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. Leave blank for default value.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Popover
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

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. Leave blank for default value.

Popover Position – Selects the position of the popover in reference to the triggering element. Choose from Top, Right, Bottom, or Left.
View The Options Screen,Useful Links & ResourcesRead more about Inline Elements HereRead about how to use the Element Generator Here!

Layer Slider Element

If you have the bundled Premium Slider Plugin, Layer Slider, activated on your site, you will have the Layer Slider Element available through the Avada Builder. This very simple Element has only one purpose, and that is to enable you to add a Layer Slider slider anywhere in your content, and not be limited to above or below the header, as is the case when adding them through the Avada Page Options.
Read on to see the options for this simple helper Element, and watch the video below for a visual overview.,View Element Demo Page!,Layer Slider Element OptionsSelect Slider – As you can see, this Element has only one option, and that is to choose the Slider you wish to show. The Slider will interact with the column and container it is placed in, so if you place it in a 1/2 Column, it will only fill that area.
IMPORTANT NOTE: Many themes sold on ThemeForest come bundled with premium plugins from CodeCanyon. A plugin offers additional functionality and features beyond a typical WordPress installation, and you do not need additional licensing in order to use the plugin with your theme. The terms and conditions for bundled plugins is set out by Envato.As of Avada 5.4.1, Avada bundled plugins can be updated independently and outside of an Avada update. The update notification will be visible and can be accessed via the Avada > Plugins section.
Global OptionsThere are no Global Options for this Element.
767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,Useful Links & ResourcesThere are extensive options when creating sliders with Layer Slider. Avail yourself of the plugin documentation below.

Layer Slider – Extensive Documentation can be found at the Kreaturamedia website.
Layer Slider templates FREE and PremiumAvada Bundled Plugins Info

Number Element

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

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

Min Value – Minimum allowed value.

Max Value – Maximum allowed value.

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

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

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

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

Tab Index – Tab index for this input field.

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

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

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms

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

Modal Element

The Modal Element can be used to display additional content via a popup window on a page. Modal boxes are hidden by default and can only be triggered by a Menu item, a button element or a modal text / HTML link element, which can be either text or an image. Any of our other elements can be used inside it, so you can organize your content however you prefer.
This Button Opens A Modal Window!,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsLinks & Resources,How To Create A ModalStep 1 – Add a Container to the page and choose a column layout.
Step 2 – Click the 『+ Element』 button on the column to open the Elements window. Locate the Modal Element and click it to open the Options window. You can insert the Modal element anywhere on your page.
Step 3 – In the 『Name of Modal』 field, enter a unique identifier for your modal. For example, popup. Keep in mind that this same unique identifier will be used in your modal trigger which will be explained below.
IMPORTANT NOTE: Remember to keep your identifier unique. Do not use generic identifiers like video, image, footer, header etc. Generic names may be used as class names within the theme, thereby conflicting and causing the modal popup to not work.Step 4 – Once done, click the Save button to insert it into the page.
Step 5 – After setting up the Modal element, you then have to then setup a Modal Trigger (button, text link or image) with the same matching unique identifier you added to the 『Name of Modal』 field. See the section below for more instructions.
How To Create A Modal Button TriggerStep 1 – Add a Container to the page and choose a column layout.
Step 2 – Click the 『+ Element』 button on the column to open the Elements window. Locate the Button Element and click it to open the Options window.
Step 3 – Locate the 『Modal Window Anchor』 field. Enter the exact unique identifier you entered into the 『Name of Modal』 field in your Modal element. For example, popup.
Step 4 – Once done, click the 『Save』 button. You can now view the modal on the front end of your site by clicking this button.
How To Create A Modal Text / HTML Link TriggerStep 1 – Add a Container to the page and select your desired column layout.
Step 2 – Click the 『+ Element』 button on the column to bring up the Elements window. Choose the Modal Text / HTML Link Element to open the Options window.
Step 3 – In the 『Name Of Modal』 field, enter the exact unique identifier you entered into the 『Name of Modal』 field in your Modal element. For example, popup.
Step 4 – In the 『Text or HTML Code』 field, enter the text or content that will trigger the modal when clicked. For example, 「Open this popup window for more details」. If you』d like to use an image, then enter the image tag. See below for an example.
Step 5 – Once done, click 『Save』 to add the Modal Text Link Element into the page content.
Step 6 – You can now view the modal on the front end of your site by clicking the text or image you inserted.
Step 7 – Once done, click 『Insert』 to add the Modal Text Link Element into the WordPress Content Editor.
Step 8 – Add the rest of your content as normal, then click 『Save』. You can now view the modal on the front end of your site by clicking this text or image.
Copy to Clipboard 1IMPORTANT NOTE – Aside from the Text Block element, you can add a Modal Text Link element to any element that has a WordPress Content Editor such as Titles, Toggles, Alert, Tabs etc.How to Launch a Modal From a Menu ItemYou can use a main menu item to launch your Modal as well. This is beneficial because it allows you to have a sitewide Modal with the same content on every page of your site. This could be used in a variety of ways, but one common method is to use it as a contact form Modal in conjunction with a Contact Form 7 shortcode.
Note: Since the Modal element needs to be on the same page as its trigger for it to work, you』ll need to be sure that your Modal Element shortcode is also added to a sitewide element. This most easily can be done by adding your Modal shortcode to a text widget in your footer. For information on generating raw shortcodes in Avada, please see our post here.
Step 1 – Navigate to the Appearance > Menus page in your WordPress admin. Edit the menu that you want to add your Modal menu item link to.
Step 2 – Add a 「Custom Link」 menu item to the menu and give it a name (the URL can just be 「#」).
Step 3 – Now, on your newly added menu item, click the 「Avada Options」 button to open the menu』s Avada settings.
Step 4 – Locate the 「Modal Window Anchor」 text field and add your Modal』s ID/Name which was added to the Modal element』s 「Name of Modal」 field. (If you』re using a Modal Shortcode, it will be the value added to the 「name」 attribute.)
Step 5 – Save the menu settings and check the frontend. If you』ve already created your Modal Element and added it to the page, it should now launch when your menu item is clicked.
NOTE: This will need to be added to a header menu item and won』t work from menu widgets.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.
IMPORTANT NOTE – You can have more than one modal on any given page, however each modal on the page must have a unique identifier. Modals added to different pages, in contrast can have the same identifier.
Name Of Modal – Allows you to set your Modal』s unique identifier. This is used for linking the Modal to a Modal Trigger.

Modal Heading – Allows you to set your Modal』s heading text.

Size of Modal – Allows you to set the size of your Modal.

Background Color – Allows you to set the background color of your Modal.

Border Color – Allows you to set the Modal border color.

Show Footer – Allows you to set if your Modal will show the footer with the close button or not.

Contents of Modal – Allows you to set your Modal』s content.

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

CSS ID – Allows you to add an ID to the wrapping HTML element.
View The Options ScreenGlobal OptionsThere are no Global Options for the Modal Element.,Useful Links & ResourcesAnchor ScrollingMenu Anchor ElementModal Text / HTML Link ElementOne Page Text Link ElementOne Page Menu with Multi-Page Links

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.

Portfolio Element

The Portfolio Element allows you to display your collected portfolio posts on any page you wish. It includes 3 different layout styles: Carousel, Grid, or Masonry. All styles can specify a certain category and number of posts, along with a plethora of customization options that are simply amazing. All layouts can also use 1-6 columns. Read below for an overview of the specific features of this much-used Element.,View Element Demo Page!,OverviewHow To Use The Element
Element Options
Global OptionsUseful Links & Resources,How To Use The Portfolio ElementThe Portfolio Element allows you to add a customized range of your Portfolio items anywhere in your content.
Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Select the container and column you would like to place the portfolio items into.
Step 3 – Click on the + Element button at the bottom of the column. Select Portfolio.
Step 4 – Start by working through the options. You can style the output of this element in three main ways. It can be a Portfolio Carousel, a Grid layout, or a Masonry layout. There are several options after this that control the look and feel of the layout, depending on what option you initially select. Be sure to visit the Portfolio Element Demo page to get a good idea of what』s possible with this amazing element.
Step 5 – After the styling options, come the content options. With this Element, you can specify which categories you would like to include, or alternatively exclude. You can control their alignment, offset the content (for example a post offset of 1 would not show the latest portfolio item but would start with the second latest), set the number of posts per page, specify the pagination, as well as many other small granular controls. To get the layout you want might take some experimentation, but pretty much all options you might wish for are included.
Step 6 – Once you have set all your styling options, there is also the Extras Tab, that has animation options, if you wish to influence how your content interacts with the page load.
Step 7 – Once you have completed styling your Portfolio Element, click Save. You will be returned to the edit page. You can preview the page to view your content, and you can always edit the element again to make changes..
Read below for a detailed description of all element options.
767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The Default setting will use the global settings assigned for this element in your Options > Avada Builder Elements > Portfolio section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Layout – Controls the portfolio』s layout. Choose between Carousel, Grid, or Masonry.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Video Embed Code – Insert Youtube or Vimeo embed code.

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

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

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

Project URL – The URL the project text links to.

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

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

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

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

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

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

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

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

Lightbox Element

The Lightbox Element is one of several media elements offered by Avada – check out the Image, Gallery, Soundcloud, Youtube and Vimeo Elements as well. Lightbox is also integrated into Avada for galleries and in various other areas, but the Lightbox Element is for single image or video use on any page or post. If you want to show more images, use the Gallery Element instead. Read on for an overview of this simple but very useful visual Element.,Busy City at Night,View Element Demo Page!Read more about Videos in Lightbox!,OverviewHow To Use The ElementElement OptionsGlobal OptionsLinks & Resources,How To Use The Lightbox Element
The Lightbox Element is a very simple Element to use.

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 shortcodes.
Step 3 – Click on the + Element button at the bottom of the column. Select or search for Lightbox.
Step 4 – Now you have the options window open. The first step is to choose which what sort of media you wish to display. You can show images or videos in Lightbox.
Step 5 – The next step is to upload the full size image. This is the image that will be displayed when you open the Lightbox. Alternatively, place the url for the video in the field below. Then you choose the Thumbnail image. This is what will display on the page before you open the Lightbox. Finally, there is an Alt Text and a Description Field if you wish to use these, as well as a CSS Class and a CSS ID field.
Step 6 – Once you have finished configuring your options, click Save.
Step 7 – If you preview your page, you will see the Lightbox thumbnail, and if you click that, the Lightbox will open with the full size image or video. You can always return to the element to edit your 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.
These are the element options for the Lightbox Element added through the Avada Builder. You can also add a Lightbox Element to a content area (eg. a Text Block Element), via the Element Generator found in the WordPress Content Editor toolbar. Learn more about Inline Elements here.
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.

Content Type – Select what you want to display in the lightbox. You can choose between Image, or Video.

Full Image – Choose the full-size image that will show up in the Lightbox.

Video URL – Enter the full video URL that will show up in the lightbox.

Thumbnail Image – Add a thumbnail image for the page. Clicking this image will show the Lightbox. You can choose any size image, but it makes sense for it to be smaller than the full-size image.

Alt Text – The alt attribute provides alternative information if an image cannot be viewed.

Lightbox Title – This will show up in the lightbox as a title above the image.

Lightbox Description – This will show up in the lightbox as a description below the image.

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 OptionsThere are no Global Options for the Lightbox Element, but the styling options found in the Global Options for Lightbox (Avada > Options > Lightbox) will affect the visual appearance of the Lightbox used by the Element. Follow the link below to read more about the Lightbox Global Options.
Read all about Lightbox Global Options Here!,Useful Links & ResourcesVideos in LightboxLightbox Global Options