The Image Element is a fundamental Element in Avada Builder. Images play critical roles in websites, and with the Image Element, you can easily add images to your site, with a large amount of control over their appearance and behavior. Continue reading below to learn more about one of the most commonly used elements in Avada, and watch the video for a visual overview.,Pet Supplies,View Element Demo Page!,Overview
How To Use The Image Element
How To Insert An Image Element
How To Add An Image To The Element
How To Use 『Gallery ID』 Option
How To Use The Image Element To Add A Logo To A Header Layout
Image Element Options
Global Image Element Options
Links & Resources,How To Use The Image ElementThe Image Element can be used anywhere in your content. This element has numerous options, as well as a few global options. This element also features a Lightbox option where you can display a single or multiple image elements, and with Avada 7, it can be used to add a site logo to a Header Layout, using the Dynamic options in the Element.
How To Insert An Image ElementStep 1. Ensure Avada Builder, or Avada Live is active.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose Image from the Elements List.
Step 4. Click the 『+ Element』 button to bring up the Elements window. Locate the Image Element and click it to add it to the page. Alternatively, just search for 『Image』 and the Image Elements will be filtered for your selection.
How To Add An Image To The ElementStep 1. Once you』ve added the Element into the page, you will see a placeholder image on the page (Avada Live).
Step 2. The first element option is called Image. Click the 『Plus』 button and select or upload the image you』d like to display inside the image element.
Step 3. Configure the Element to your preferences. There is a wide range of options with this Element, including Style Types, Boders, Captions, Masks, Aspect ratios etc.
Step 4. Once finished, remember to save your changes.
How To Use 『Gallery ID』 OptionCreating A Gallery With Image ElementsThe 『Gallery ID』 option allows you to combine any number of Image Elements on the page to display in the same lightbox gallery. Continue reading below to learn how to use this option.
Step 1. Add an Image Element in the usual manner.
Step 2. Set the 『Image Lightbox』 option to Yes. If you』d like to set a different lightbox image, assign one using the 『Lightbox Image』 option.
Step 3. Locate the 『Gallery ID』 option and insert a unique name for the lightbox gallery that this image frame will belong to. For example, Products.
Step 4. Repeat steps 1 – 3 for all the Image elements you』d like to include in the lightbox gallery.
How To Use The Image Element To Add A Logo To A Header LayoutYou can also use the Image Element to add a Logo to a Header Layout. To do this, you can simply insert an image as normal, or you can use the Dynamic Content option in the Image field. Under Site, there is a Logo option, and when you select this, you can choose a Logo Type (see below). You can select any of the three logo types (Default, Sticky and Mobile) in both Normal or Retina, or you can select the All option. This pulls the most appropriate logo from the Global Options Logo area as the image, depending on the size of your screen. NB. Just be aware, this method loads more content than adding a single image, and so likely affects page scores more than the simple method of adding a single image for the logo.
Read More: How To Use The Image Element To Add A Logo In A Header Layout!767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The Default settings will use the global settings assigned for this element at Options > Avada Builder Elements > Image. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Image – Allows you to upload an image to display. Dynamic options are also available.
Image Aspect Ratio – Select an aspect ratio for the image.
Custom Aspect Ratio – Set a custom aspect ratio for the image.
Image Focus Point – Set the image focus point by dragging the blue dot.
Image Sticky Max Width – Set the maximum width the image should take up when its parent container is sticky. Enter value including any valid CSS unit, ex: 200px. Leave empty to use the full image width.
Skip Lazy Loading – Select whether you want to skip lazy loading on this image or not.
Image Lightbox – Allows you to display the image in a lightbox. Choose between Yes or No.
Gallery ID – Allows you to set a name for the lightbox gallery the image frame belongs to.
Lightbox Image – Allows you to upload a different image to display on the lightbox.
Image Alt Text – Allows you to set alternative information in case the image cannot be viewed.
Image Link URL – Allows you to set a URL which the image will link to when clicked. 『Image Lightbox』 option must be set to No.
Link Target – Allows you to set how the link opens. Choose between _self for the same window or _blank for a new window.
Element Visibility – Choose to show or hide the element on small, medium, or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Avada Builder Elements tab in the Global Options.
Element Sticky Visibility – (Only visible if parent Container is set to Sticky). Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.
CSS Class – Allows you to add a class for the column.
CSS ID – Allows you to add an ID for the column.
View The Options ScreenDesign Tab
Image Max Width – Set the maximum width the image should take up. Enter value including any valid CSS unit, ex: 200px. Leave empty to use full image width.
Alignment – Allows you to choose how to align the image. Choose between Text Flow, Left, Right, or Center. This is now part of the Responsive Option Sets, which means you can set this option independently for Medium and Small Screen Layouts.
Mask – Select an image mask.
Custom Mask – Upload a custom mask image. The image should be in SVG or PNG format with transparent background.
Mask Size – Select the mask size. Choose from Fit, Fill or Custom.
Custom Size – Set the size of the image mask. Enter value including any valid CSS unit ex. 60% or 200px.
Mask Position – Set image mask position.
Custom Mask Position – Set a custom image mask position. Enter value including any valid CSS unit in pair first for X axis second for Y axis ex. 60% 50px.
Mask Repeat – Select how the image mask repeats.
Style Type – Allows you to select a style type. Choose from None, Glow, Drop Shadow, or Bottom Shadow.
Glow / Drop Shadow Blur – Allows you to set the amount of blur added to the glow or drop shadow styles.
Style Color – Allows you to set the color for the styles.
Hover Type – Allows you to select the hover effect type. Choose from None, Zoom In, Zoom Out, or Lift Up.
Margin – Adjust the margins around the image. Enter values including any valid CSS unit.
Border Size – Allows you to set the border』s size.
Border Color – Allows you to set the border』s color.
Border Radius – Allows you to set the border』s radius.
View The Options ScreenCaption Tab
Caption – Choose the caption style. By default set to Off. Choices are Off, Above, Below, Navin, Dario, Resa, Schantel & Dany.
Title / Caption Align – Choose how to align the caption.
Image Title – Enter title text to be displayed on image.
Image Caption – Enter caption text to be displayed on image.
Image Title Color – Controls the color of the image title.
Image Title Size – Controls the font size of the image title. Enter value including any valid CSS unit, ex: 20px.
Image Title Heading Tag – Choose HTML tag of the image title, either div or the heading tag, h1-h6.
Image Title Typography
Font Family – Controls the font family of the image title.
Font Size – Controls the size of the font.
Text Transform – Choose how the title is displayed. Choose from Default, Normal, or Uppercase.
Image Caption Color – Controls the color of the image caption.
Image Caption Background Color – Controls the background color of the caption.
Image Caption Typography
Font Family – Controls the font family of the image title.
Font Size – Controls the size of the font.
Text Transform – Choose how the title is displayed. Choose from Default, Normal, or Uppercase.
Caption Border Color – Controls the color of the caption border.
Image Overlay Color – Controls the color of the image overlay.
Caption Area Margin – In pixels or percentage, ex: 10px or 10%. Only available on Above, and Below.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.
Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.
Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 5.
Filter Type – These filters have both a normal and a hover state.
Hue – Controls the hue (color) of the image. In degrees.
Saturation – Controls the saturation (color density) of the image. Default is 100. Fully desaturated = 0, and 200 = fully saturated.
Brightness – Controls the brightness of the image. Default is 100.
Contrast – Controls the contrast of the image. Default is 100. Low contrast is 0, and 200 is high contrast.
Invert – Controls the colors of the image. Default is 0. To fully invert the colors, set the slider to 100.
Sepia – Desaturates, and adds a sepia (brown) tone to the image. To fully desaturate and add sepia tone, set slider to 100.
Opacity – Controls the opacity of the image. Default is 100. To make image fully transparent, set slider to 0.
Blur – Adds a blur to the image. Default is 0. Fully blurred is 50.
View The Options ScreenGlobal OptionsLocation: Avada > Options > Avada Builder Elements > Image
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.
Image Style Type – Allows you to set the Image Element』s Style type.
Image Glow / Drop Shadow Blur – Allows you to set the amount of blur added to the glow or drop shadow effect.
Image Style Color – This controls the style color for all style types except border.
Image Border Size – Allows you to set the border size. Accepts a pixel value.
Image Border Color – Allows you to set the border color. Accepts a hexcode (#000000).
Image Border Radius – Allows you to set the border radius. Accepts a pixel value.
View The Options Screen,Useful Links & ResourcesHow To Use Captions On Image Based Elements
Creating a Gallery with Image Elements
Image Size Guide
Image Hover EffectsHow To Change Image Sizes in Child Themes
Image Rollovers