Google Map Element

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.

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.

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.
View The Options Screen,Useful Links & Resources
Setting Up Google Maps
Google Map Options
Google Maps Not Working?

Gallery Element

Gallery Element

The Gallery Element is a fantastic way to quickly create a responsive and stylish image gallery on your Avada site. Select various layouts like Grid or Masonry, choose column width, column spacing, lightbox options, captions and more.
The Gallery Element was updated back in Avada 5.8, with the ability to add links to individual images, and lazy loading by default, and again with Avada 7.5 with the ability to add captions. Below, we』ll walk you through the various options and settings for this very useful element, and remember to watch the video below for a visual overview.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Gallery ElementStep 1 – In Avada Builder, click the + Element button to open the Elements list. You can visually find the Gallery Element or you can type in the search bar in the upper right-hand corner to filter for the Gallery Element.
Step 2 – Once the Element is inserted into the page, you can now add your images to the gallery. You can bulk upload images by choosing + Bulk Add on the Children tab, or by using the Bulk Image Upload option on the General tab (this one has the option of dynamic content). Adding items in bulk is ideal if you have all your images ready to go. Upload your images or if they』re already uploaded, just select them from the Media Library (with Cmd/Ctrl click, or Shift/Click for contiguous images) and when you are finished, click 『Insert Into Post』. Alternatively, you can add your images one at a time, under the Add / Edit Items options. Just click the + Add Images button and then the edit button on the item, or you can clone an image to retain its settings and then just change the image out.
Step 3 – Next, configure the settings which will style your gallery as desired. These settings are found on the General tab. There are options for layout, image size, number of columns and more. Please see below for a complete list of available settings and what they do, or checkout the Gallery Demo page for some great examples. There is also a Captions tab, if you wan to configure your Gallery to have captions.
Step 4 – When you have finished styling your element, save your changes.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The Default settings will use the global settings assigned for this element in the Options > Avada Builder Elements > Gallery section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
Children Tab
Add / Edit Items – This is where add or edit new items for this Element. You can reorder elements by dragging them and dropping them into place.
+ Add Image – Allows you to add Items individually to the gallery. The item then needs to be edited to add the image to it.+ Bulk Add – Allows you to bulk upload or select images from the media library, which will populate into individual items.
Item Options

Edit Item Icon – Allows you to edit an item.

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

Delete Item Icon –  Allows you to delete an item.

Re-order Feature –  Allows you to drag and drop the item to your desired order to rearrange them. A small thumbnail of the image is shown to assist you in this.
View The Options ScreenItem Options
Image – Upload an individual image to add it to the gallery.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Gallery Image Border Radius – Sets the border radius of the gallery image. For example, 1px or round.
Element Visibility – Allows you to choose which devices to display the element. Choose one or more from Mobile, Tablet, or Desktop. Each of the 3 sizes has a custom width setting on the Avada Builder Elements tab in the Global Options.
CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
View The Options ScreenCaption Tab
Caption – Choose the caption style. By default set to Off. Choices are Off, Above, Below, Navin, Dario, Resa, Schantel & Dany.

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

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

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

Image Title Typography

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

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

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

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

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

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

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

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

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

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

Caption Align – Choose how to align the caption.

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

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

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

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

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

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

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

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

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

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

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

Flip Boxes Element

Flip Boxes Element

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

Edit Item Icon – Allows you to edit an item.

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

Delete Item Icon –  Allows you to delete an item.

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

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

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

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

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

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

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

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

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

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

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

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

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

Spinning Icon – Choose to let the icon spin.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Spinning Icon – Choose to let the icon spin.

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

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

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

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

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

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

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

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

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

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

Border Color – Controls the border color.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Flickr Element

Flickr Element

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

Flickr ID – Get your Flickr ID

Count – Number of photos to show.

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

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

Count – Number of photos to show.

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

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

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

Column Spacing – Controls the spacing between columns.

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

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

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

Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options Screen,Global OptionsThere are no Global Options for the Flickr Element.

Featured Images Slider Element

Featured Images Slider Element

As part of Avada Layouts, we created a series of Dynamic Elements that help generate content in the Content Layout Section of a Layout. These are called Layout Elements. In this document, we are looking at the Featured Images Slider Element.,IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.,View The Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Featured Images Slider ElementThe Featured Images Slider Element allows you to place featured images (either single, or if multiple, in a slider) anywhere in a Content Layout Section, in any Layout.
When you go to add an Element in a Content Layout Section, the Element dialog opens in a new tab called Layout Elements. This is where you will find the Featured Images Slider Element. These dynamic Elements can only be placed once into a Layout, with the exception of the Pagination Element, which can be placed twice. You can also use the full range of Design Elements when building your Layout.
The Featured Images Slider Element can be placed anywhere in you Layout Section, and will dynamically pull any connected Featured Image, or images, into the page, based on the settings in the Element, and the Conditions set in the Layout. For example, you might choose a certain size and hover effect in the Featured Images Slider Element, and set the condition for the Layout only to display on Single Posts.
See below for an example of the Featured Images Slider Element added to the Single Post Layout, on the Taxi Demo.
767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy the Layout Elements only once within each Layout. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Show First Featured Image – Turn on if you don』t want to display first featured image.

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

Image Size Dimensions – Dimensions in percentage (%) or pixels (px).

Lightbox – Show image in lightbox. Lightbox must be enabled in Global Options.

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

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

CSS ID – Allows you to add an ID for the Element.
View The Options ScreenDesign Tab
Margin – Enter values including any valid CSS unit, ex: 4%.
View The Options ScreenGlobal OptionsLayout Elements do not have any Global Options.

FAQ Element

FAQ Element

With the FAQ Element, you can quickly and easily create a list of FAQs for your visitors. FAQs can be used on any page or post. Read below for more details on this very useful element.,Vivamus quis nunc quis nibh elementum pellentesque non luctus lectusadmin2019-04-01T19:15:34+00:00Vivamus quis nunc quis nibh elementum pellentesque non luctus lectusLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id eros neque. Vestibulum erat nulla, porta pretium ultrices at, accumsan quis elit. Sed ligula nulla, gravida ut tempus a, pharetra et lacus. Suspendisse potenti. Fusce pellentesque augue sit amet ipsum mattis dignissim. Curabitur fringilla neque eu ligula pellentesque tempus. Fusce elementum lectus eget odio porttitor ut tincidunt nibh iaculis. Donec lacus est, mollis ut bibendum ac, adipiscing at dui. Cras porttitor neque eget orci pulvinar consequat. Cras vestibulum leo fermentum tellus ullamcorper vestibulum.
 
Praesent tellus justo, euismod sed iaculis vel, fringilla vel sapien. Praesent sed mi nequeadmin2019-04-01T19:15:44+00:00Praesent tellus justo, euismod sed iaculis vel, fringilla vel sapien. Praesent sed mi nequePellentesque neque urna, accumsan quis volutpat ut, hendrerit et sapien. Nulla lobortis aliquam nisl et lacinia. Nulla facilisi. Ut nisi nulla, ultrices ut viverra sit amet, sagittis quis purus. Nunc eget nibh lorem. Quisque ac leo ut est semper varius. Nullam sit amet semper odio. Vestibulum tempor hendrerit vehicula. Pellentesque et felis odio, eget gravida enim. Donec dapibus erat vel quam tristique volutpat. Sed congue dignissim enim non feugiat. Praesent sit amet venenatis velit. Nulla luctus libero non diam porta aliquam lobortis mi pulvinar.
Donec vehicula molestie augue mi dignissim at. Etiam augue massa, condimentum.admin2019-04-01T19:15:53+00:00Donec vehicula molestie augue mi dignissim at. Etiam augue massa, condimentum.Nunc sit amet sapien eu urna viverra interdum eu ut ipsum. Pellentesque vulputate leo quis metus ullamcorper dapibus. Nam ac tortor a augue ultrices sagittis. Maecenas tempor justo eu leo euismod eget sollicitudin sem facilisis. Curabitur vitae elit nec diam bibendum sagittis quis vitae leo. Curabitur mollis est ut quam accumsan in luctus est aliquam. Etiam a eros neque. Aliquam bibendum, turpis a congue aliquam, enim nibh pharetra elit, eu adipiscing tellus dolor non est. Mauris faucibus, nisi quis pulvinar aliquet, lorem turpis vulputate elit, quis elementum nisl purus id nisi. Suspendisse et purus ut turpis tempor pellentesque.
Vivamus quis magna enim. Aliquam urna mi, aliquet ac dictum non, dapibus vitae erat.admin2019-04-01T19:16:01+00:00Vivamus quis magna enim. Aliquam urna mi, aliquet ac dictum non, dapibus vitae erat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id eros neque. Vestibulum erat nulla, porta pretium ultrices at, accumsan quis elit. Sed ligula nulla, gravida ut tempus a, pharetra et lacus. Suspendisse potenti. Fusce pellentesque augue sit amet ipsum mattis dignissim. Curabitur fringilla neque eu ligula pellentesque tempus. Fusce elementum lectus eget odio porttitor ut tincidunt nibh iaculis. Donec lacus est, mollis ut bibendum ac, adipiscing at dui. Cras porttitor neque eget orci pulvinar consequat. Cras vestibulum leo fermentum tellus ullamcorper vestibulum.
Nunc molestie porttitor urna rhoncus posuere. Etiam sed tortor vestibulum nulla ultricies sodales quis id turpis. Nulla laoreet euismod mattis. Proin felis ipsum, elementum faucibus ultrices et, vestibulum vitae orci. Curabitur congue vulputate orci, a commodo mauris consectetur vitae. Quisque sit amet arcu sit amet mi porttitor varius in quis felis. Duis sit amet est urna. Phasellus nulla est, tincidunt quis posuere volutpat, convallis ac risus. Ut in massa arcu, eu feugiat neque.
Class aptent taciti sociosqu ad litora torquent per conubia nostra pers.admin2019-04-01T19:16:09+00:00Class aptent taciti sociosqu ad litora torquent per conubia nostra pers.Vestibulum egestas pharetra felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse dignissim bibendum lectus, quis ornare tortor elementum quis. Aenean semper vehicula elementum. Nulla massa est, faucibus non semper quis, laoreet et sapien. Suspendisse massa odio, aliquet nec commodo et, venenatis ut velit. Pellentesque mauris lorem, dictum vitae feugiat quis, placerat vitae eros. Vestibulum quis purus vel urna convallis faucibus. Etiam vel mauris nisi, non vehicula est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam leo lorem, tincidunt sed molestie id, egestas feugiat quam. Aliquam sed ipsum non nulla tempus mollis elementum ac dolor. Curabitur ac metus et enim pellentesque pellentesque. Nunc ultrices, felis elementum iaculis semper, libero turpis semper erat, in dapibus nisi urna vel mi. Nulla sed nibh libero. Maecenas a libero mauris, sed malesuada dui.
Nunc euismod lobortis massa, id sollicitudin augue auctor vel. Integer ornare sollicitudin turpis vitae vestibulum. Curabitur faucibus ullamcorper lorem sed egestas. Pellentesque laoreet auctor eros, et consectetur eros auctor eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tortor nisi, egestas eget molestie tincidunt, tempus sed justo. Vestibulum ultricies auctor varius. Fusce consequat tincidunt dui, ac adipiscing turpis adipiscing pulvinar. Aliquam erat volutpat. Vivamus eleifend rhoncus nulla in laoreet.
Curabitur eget leo at velit imperdiet varius eu ipsum vitae velit congue iaculis vitaes.admin2019-04-01T19:16:17+00:00Curabitur eget leo at velit imperdiet varius eu ipsum vitae velit congue iaculis vitaes.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor, orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit, pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa. Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna, ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio, ac pulvinar felis quam sit.
Aenean consequat lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit, pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa. Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna, ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio, ac pulvinar felis quam sit.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The FAQ ElementThe FAQ Element allows you to add a customized range of your FAQ Custom Post Type items anywhere into your content. Be sure to visit the Element Demo page to get a good idea of what』s possible with this element.
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 Alert from the Elements List.
Step 4. For this element to work, you must have previously created FAQ items in the FAQ Custom Post Type, found on your main WordPress menu. Once you have FAQs, (and these can also be sorted into categories) you can use the FAQ Element to quickly place them throughout your content. You can add a single category, multiple categories, or you can exclude categories. There are also various ways of sorting the FAQs, and they can be treated as Toggles or Accordions. There are also a number of other styling options about size, color, icons and alignment.
Step 5. Once you have completed styling your FAQ Element, save your changes..
Read below for a detailed description of all element options.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The Default setting will use the global settings assigned for this element in the Avada > Options > Avada Builder Elements > FAQ 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.

Display Filters – Choose to display the FAQ filters, or not. Choose from Default, Show, Show without 「All」, or Hide.

Maximum FAQ Element – Select the maximum number of FAQ elements. Set to -1 to display all.

Categories – Select categories to include or leave blank for all.

Exclude Categories – Select categories to exclude.

Order By – Defines how FAQs should be ordered. Choose from Date, Post Title, FAQ Order, Post Slug, Author, Last Modified, or Random.

Order – Defines the sorting order of FAQs. Choose from Descending, or Ascending.

Display Featured Images – Select whether to display the FAQ featured images. Choose from Default, Yes, or No.

Toggles or Accordions – Choose to display FAQ items as Toggles, or Accordions. Toggles allow several items to be open at a time. Accordions only allow one item to be open at a time.

Boxed Mode – Select whether to display FAQs items in boxed mode. Choose from Default, Yes, or No.

Boxed Mode Border Width – Set the border width for FAQ items. In pixels. Select from 1 – 20.

Boxed Mode Border Color – Set the border color for FAQ items.

Boxed Mode Background Color – Set the background color for FAQ items.

Boxed Mode Background Hover Color – Set the background hover color for FAQ items.

Divider Line – Select whether to display a divider line between each item. Choose from Default, Yes, or No.

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

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

Icon Color – Set the color of the icon in the toggle box.

Icon Boxed Mode – Choose to display icon in boxed mode.

Icon Inactive Box Color – Controls the color of the inactive toggle box.

Icon Alignment – Controls the alignment of FAQ icon. Choose between Default, Left, or Right.

FAQ Toggle Hover Accent Color – Controls the accent color on hover for icon box and title.

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: WordPress Dashboard > Avada > Options > Avada Builder Elements > FAQ
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

FAQ Featured Images – Turn on to display featured images.

FAQ Filters – Controls how the filters display for FAQs. Choose from Show, Show without 「All」, or Hide.

FAQs in Toggles or Accordions – Toggles allow several items to be open at a time. Accordions only allow one item to be open at a time.

FAQ Items in Boxed Mode – Turn on to display items in boxed mode. FAQ Item divider line must be disabled for this option to work.

FAQ Item Boxed Mode Border Width – Controls the border size of the FAQ item. In pixels. This is a dependent option that always stays visible because other Builder Options can utilize it.

FAQ Item Boxed Mode Border Color – Controls the border color of the FAQ item. This is a dependent option that always stays visible because other Builder Options can utilize it.

FAQ Item Boxed Mode Background Color – Controls the background color of the FAQ item. This is a dependent option that always stays visible because other Builder Options can utilize it.

FAQ Item Boxed Mode Background Hover Color – Controls the background hover color of the FAQ item. This is a dependent option that always stays visible because other Builder Options can utilize it.

FAQ Item Divider Line – Turn on to display a divider line between each item. This is a dependent option that always stays visible because other Builder Options can utilize it.

FAQ Title Font Size – Controls the size of the title text. Enter value including any valid CSS unit, ex: 13px.

FAQ Item Icon Size – Set the size of the icon. In pixels.

FAQ Item Icon Color – Controls the color of icon in FAQ box.

FAQ Item Icon Boxed Mode – Turn on to display icon in boxed mode.

FAQ Item Icon Inactive Box Color – Controls the color of the inactive FAQ box. This is a dependent option that always stays visible because other Builder Options can utilize it.

FAQ Item Icon Alignment – Controls the alignment of the icon.

FAQ Item Icon Toggle Hover Accent Color – Controls the accent color on hover for icon box and title.
View The Options Screen

Facebook Page Element

Facebook Page Element

The Facebook Page Element allows you to add a Facebook feed anywhere in your content. Read the document to see the full range of options, and watch the video below for a visual overview.,View Element Demo Page!,OverviewHow To Use The Element Element OptionsGlobal Options,How To Use The Facebook Page ElementStep 1 – Select where you』d like to place your Facebook feed. Add the Facebook Page Element from the Element Dialog.
Step 2 – Configure the Element as required. Set the page URL and dimensions, and configure the various Facebook Elements to be displayed.
Step 3 – On the Design tab, you can set the Margins and alignment of the Element, and if you wish, you can add animation to the Element on the Extras tab.
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 can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: Please note that the displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Page URL – The URL of the Facebook Page.

Dimension – Box width and height in pixels. Width has to be between 180 and 500.

Tabs – Tabs to render. Choose from Timeline, Events and Messages.

Header – Select header size. Choose from Large or Small.

Cover – Show / Hide cover photo in the header.

Friends Photos – Show / Hide profile photos when friends like this page.

Call To Action – Show / Hide the custom call to action button if available.

Lazy Load – Enable / Disable lazy loading.

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

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

CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
View the Options ScreenDesign Tab
Margin – Enter values including any valid CSS unit, ex: 4%.

Alignment – Select the alignment of the icons and the text.
View The Options Screen,Extras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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

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

Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options Screen,Global OptionsThere are no Global Options for the Facebook Element.

Events Element

Events Element

The Events Calendar is by far the most popular calendar plugin around. As it is one of the free premium plugins included with Avada, we offer full design integration and support for it. We』ve also created an Events Element, so you can easily display your events anywhere you』d like on your pages or posts. Read below for more details on this very useful element, and watch the video for a visual overview.,Events Element Example,View Element Demo Page!Read our special feature on The Events Calendar!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Events ElementThe Events Element allows you to add a customized range of your Events anywhere in your content. Be sure to visit the Element Demo page to get a good idea of what』s possible with this element.
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 Events from the Elements List.
Step 4. Start by working through the options. This is a relatively simple element to configure. Start by selecting the categories you wish to show in your Event Element. You then choose the number and maximum number of columns to display. To fill the column the element is in, these two numbers should be the same. If you have chosen 4 columns but only 2 events, they will only fill half the column. Likewise, if you have chosen 4 columns, but have 6 events, they will show on a second row. Then continue through the options to style the element as you wish.
Step 5. Once you have completed styling your Events 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,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 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 > Events 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.

Categories – Select a specific category or leave blank for all.

Display Past Events – Turn this on if you want the past events to be displayed.

Order – You can display your events in either Descending or Ascending order.

Number of Events – Select the number of events to display. Up to 25 events can be displayed.

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

Column Spacing – Controls the column spacing for events items. Setting to -1 will keep the default 4% column spacing. From -1 to 300%.

Picture Size – Choose between Cover (image will scale to cover the container) or Auto (width and height will adjust to the image).

Content Padding – Controls the padding for the event contents. Enter values including any valid CSS unit, ex: 20px, 20px, 20px, 20px.

Content Alignment – Controls the alignment of contents. Choose from Text Flow, Left, Right or Centre.

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

Excerpt Length- Insert the number of words/characters you want to show in the excerpt.

Strip HTML – Strip HTML from the post excerpt. Choose from Default, Yes, or No.

Pagination Type – Select the type of pagination you want. Choose from No Pagination, Pagination, Infinite Scrolling, or Load More Button.

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: WordPress Dashboard > Avada > Options > Avada Builder Elements > Events.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Number of Events Per Page – Controls the number of events displayed per page for events element. Set to -1 to display all. Set to 0 to use the number of posts from Settings > Reading. In pixels.

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

Events Content Padding – Controls the top/right/bottom/left padding of the events contents. Enter values including any valid CSS unit, ex: 20px, 20px, 20px, 20px.

Events Text Display – Choose how to display the post excerpt for events elements.

Excerpt Length – Set the length of your excerpt here. 

Strip HTML from Excerpt – When set to Yes, this strips any HTML from the Excerpt text shown.
View The Options Screen

Email Field Element

Email Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.An email field is a single textbox that』s validated to only accept email addresses, and one of the most common form Elements. Almost all of the Prebuilt Forms use the Email Field Element.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Email Field ElementThe Email Field Element allows you to place a single textbox that』s validated to only accept email addresses 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 Email Field from the Form Elements tab.
Step 4. Go through the options to populate and configure your email field. Add a label and a name, decide if it is to be a required field, add optional placeholder and tooltip text, choose when to show the custom picker, and choose an icon.
Step 5. Once you have configured the Element, save your page.
Read below for a description of all element options.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element. You access the Form Builder Elements when adding an Element while editing a Form in the Avada Form Builder (Forms > Form Builder, from the Avada Dashboard).
You can deploy as many individual Elements in your forms as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each instance of the Element independently, greatly enhancing your flexibility and creative options.
General Tab
Field Label – Enter the label for the input field. This is how users will identify individual fields.

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

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

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

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

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

Tab Index – Tab index for this input field.

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

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

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms

Dropcap Element

Dropcap Element

The Dropcap Element is a standard typographical device, commonly used in articles and posts. The Avada Builder Dropcap Element offers you the ability to control various aspects of the drop cap, like boxed or unboxed options, boxed radius and color. It is an Inline Element, which means it is only accessible through the Avada Element Generator, or the Inline Editor in the Avada Live. See the links below for more information on those topics.
Furabitur sit amet magna quam. Praesent in libero vel turpis pellentesque egestas sit amet vel nunc. Nunc lobortis dui neque, quis accumsan dolor. Aenean aliquet dignissim semper. Maecenas ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.,View Element Demo Page!,OverviewHow To Use The Element
How To Use The Element In Avada Live
Element OptionsGlobal Options,How To Use The Dropcap Element
Using the Dropcap Element allows you add a dropcap to the first word of a sentence.

Step 1. Create a new page or post, or edit an existing one.
Step 2. Add a text based element, and add your content, leaving the first letter off the first word to allow for the Dropcap at the start.
Step 3. Now we need to add the Dropcap Element. To do this, position your cursor at the place you want the dropcap, and then click the Avada Builder Element Generator icon on the toolbar, as seen in Example 1.
Step 4. Locate the Dropcap Element and click it to bring up the options window.
Step 5. In the Dropcap Letter field, enter the letter you wish to use for the dropcap.
Step 6. You can choose to have the dropcap boxed or not, as well as choosing the radius of the box if you wish.
Step 7. In the Design tab, there are two Options. Color sets the color of the letter if you selected No for Boxed Dropcap, or it controls the color of the box if you have selected Yes. You can also change the color for the dropcap letter when using a Boxed Dropcap, with the Text Color option.
Step 8. Once finished, click 『Insert』. You』ll be returned to the original text based element, and you can see the One Page Tex Link shortcode has been added to the code. See Example 2. Save the element to save your changes.
Step 9. If you preview your page, you will see the dropcap as you have styled it. See Example 3.

Example 1

Example 2

Example 3

767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,How To Use The Dropcap Element 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 > Dropcap section.
General Tab
Dropcap Letter – Add the letter to be used as a dropcap.

Boxed Dropcap – Choose if you want a boxed dropcap.

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

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

CSS ID – Allows you to add an ID for the Separator.
View The Options ScreenDesign Tab
Color – Controls the color of the dropcap letter, when using Unboxed Dropcap, and controls the Box Color when using the Boxed Dropcap.

Text Color – Controls the color of the dropcap letter, when using the Boxed Dropcap.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Dropcap
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Dropcap Color – Controls the color of the dropcap text, or the dropcap box if a box is used.

Dropcap Text Color – Controls the color of the dropcap text when a box is used.
View The Options Screen,Useful Links & Resources
Read more about Inline Elements Here

Read about how to use the Avada Builder Element Generator Here!