Containers
Avada uses Fusion Builder which operates using containers. All content goes inside of containers, the flow is container > columns > elements. Each container has several options to help build your site. Containers can span the entire width of your browser window, or keep content contained inside the site width, they can have background images, parallax effects, borders, colors, padding, positioning, and a lot more.
Video & Image Backgrounds
Containers provide an abundance of customization settings to make your pages look as unique and elegant as possible. Choose an image, solid color, or even a video to be your background. Control the border size and color, the padding, as well as the position of the section. This shortcode also has a unique effect that blurs and fades image backgrounds.
Container Video Backgrounds
The same self hosted video backgrounds that can be used with our Fusion Slider are also available in containers. Use color overlays, set color opacity, mute and loop the videos. Video backgrounds are perfect for adding visual appeal to your layouts.
Awesome Blur/Fading Effect On Scroll For The Container Background Image
Use as Many As You Want!
Use as many Containers as you need to create beautiful layouts that will capture your viewer’s attention. Set background images, colors or videos to span 100% browser width to make it even more interesting.
We Are Here To Serve You
Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui.
Ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
Our Crazy Skills
This Is Content Inside of A Container
- Fully responsive so your content will always look good on any screen size
- Awesome sliders give you the opportunity to showcase your content
- Advanced theme options panel to easily customize your website
- Multiple layout options for home pages, portfolio and blog section
- Amazing shortcodes loaded with meta options for easy customization
- We offer free support because we care about your site as much as you.
Spacing & Width Options
Set Containers to be 100% full width, or contained to the site width in theme options. Set the spacing between columns, as well as the top, bottom, left and right padding. The container also includes an option that lets you set columns to have equal heights.
100% Content Width
Content placed on the inside of a full width container can now be set to 100% of the browser window. This little option gives you major flexibility in building creative layouts.
Equal Column Heights
The height of the column will depend on the interior content. At times this can be a design distraction. Now you can easily set columns inside a full width container to be equal heights.
Spacing Between Columns
We love spacing, it is needed for clean design. However, many situations will look even better with no spacing between columns. Avada 3.7 gives you the power to make the decision.
Complete Set of Options
Every option and description included with the container element is listed below.
- backgroundcolor – Accepts a hexcode ( #000000 ). Sets the icon’s background color. Leave blank for Theme Option selection.
- backgroundimage – The URL path of the background image you’d like to display, starting with http:// and usually ending on .jpg, .png or .gif.
- backgroundrepeat – Can be one of these values: no-repeat, repeat, repeat-y, or repeat-x. Sets how the background repeats.
- backgroundposition – Accept a pixel value, percentage or certain alphabetic values. For example, 50px, 100%, left top, left center, left bottom, right top, right center, right bottom, center top, center center, or center bottom. Sets the background’s position.
- backgroundattachment – Can be one of these values: fixed, scroll, or local. Sets how the background scrolls.
- video_webm – The URL path of your WebM video file. WebM and MP4 format must be included to render your video with cross browser compatibility.
- video_mp4 – The URL path of your MP4 video file. WebM and MP4 format must be included to render your video with cross browser compatibility.
- video_ogv – The URL path of your OGV video file. This parameter is optional.
- video_preview_image – The URL path of the preview image you’d like to display, starting with http:// and usually ending on .jpg, .png or .gif. If uploading Self-Hosted videos, this parameter must be filled.
- video_mute – Can be one of these values: yes, or no. This will enable or disable mute.
- video_loop – Can be one of these values: yes, or no. This will enable or disable video loop.
- overlay_color – Accepts a hexcode ( #000000 ). Sets the video’s overlay color. Leave blank for Theme Option selection.
- overlay_opacity – Can be a numerical value from 0.1 to 1. Sets the color opacity level. 1 is equivalent to 100%.
- fade – Can be one of these values: yes, or no. Sets the image to fade and blur on scroll. This parameter is for images only.
- bordersize – Accepts a pixel value that sets the border’s size. For example, 5px.
- bordercolor – Accepts a hexcode ( #000000 ). Sets the border’s color. Leave blank for Theme Option selection.
- borderstyle – Can be one of these values: solid, dashed, or dotted. Sets the border’s style.
- paddingtop – Accepts a numerical value that sets the top padding in pixels. For example, 20.
- paddingbottom – Accepts a numerical value that sets the bottom padding in pixels. For example, 20.
- paddingleft – Accepts a numerical value that sets the left padding in pixels. For example, 20.
- paddingright – Accepts a numerical value that sets the right padding in pixels. For example, 20.
- menu_anchor – The unique name you give the corresponding menu item.
- equal_height_columns – Can be one of these values: yes, or no. Sets all the column shortcodes inside the container to be equal in height.
- hundred_percent – Can be one of these values: yes, or no. Sets if the interior content is 100% width or contained to the site width setting. Selecting yes will remove left/right padding.
- class – Add a custom class to the wrapping HTML element for further css customization.
- id – Add a custom id to the wrapping HTML element for further css customization.