Full Width Section
Avada now includes a full width 100% page template. Using this you can use full width sections that span the entire width of your browser window, or keep content contained inside the 960px width. Use background images, borders, colors, padding, positioning and more with the shortcode.
[/one_full][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”0px” paddingbottom=”60px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””][content_boxes layout=”icon-boxed” icon_circle_size=”large” icon_align=”left” columns=”3″ class=”” id=””][content_box title=”Beautifully Simplistic” icon=”fa-tablet” backgroundcolor=”#f6f6f6″ iconcolor=”” circlecolor=”” circlebordercolor=”” iconflip=”” iconrotate=”” iconspin=”no” image=”” image_width=”” image_height=”” link=”http://themeforest.net/user/ThemeFusion” linktext=”” linktarget=”_self” animation_type=”0″ animation_direction=”down” animation_speed=”1″] If you’re a code nerd or a Word Press newbie, Avada is for you. It’s built for everyone, and can be as simple or complex as you want.[/content_box][content_box title=”Free Support & Updates” icon=”fa-magic” backgroundcolor=”#f6f6f6″ iconcolor=”” circlecolor=”” circlebordercolor=”” iconflip=”” iconrotate=”” iconspin=”no” image=”” image_width=”” image_height=”” link=”http://themeforest.net/user/ThemeFusion” linktext=”” linktarget=”_self” animation_type=”0″ animation_direction=”down” animation_speed=”1″] We truly care about our users and our end product. Our users love Avada, and you will too with free updates & incredible support.[/content_box][content_box title=”Blissful Layout Options ” icon=”fa-thumbs-up” backgroundcolor=”#f6f6f6″ iconcolor=”” circlecolor=”” circlebordercolor=”” iconflip=”” iconrotate=”” iconspin=”no” image=”” image_width=”” image_height=”” link=”http://themeforest.net/user/ThemeFusion” linktext=”” linktarget=”_self” animation_type=”0″ animation_direction=”down” animation_speed=”1″] Avada includes so many different options and designs. Users are able to make amazingly cool layouts with the tools we provide.[/content_box][/content_boxes][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”30px” paddingbottom=”0px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””][one_full last=”yes” spacing=”yes” background_color=”#f6f6f6″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”solid” padding=”40px” class=”” id=””]Video & Image Backgrounds
The Full Width Section provides an abundance of customization settings to make your sections look as unique and elegant as you’d like. Choose an image, solid color, or even a video to be your Full Width Section’s 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.
[/one_full][/fullwidth][separator style_type=”none” top_margin=”15″ bottom_margin=”” sep_color=”” icon=”” width=”200px” class=”” id=””][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”right center” backgroundattachment=”fixed” video_webm=”http://theme-fusion.com/avada/agency/wp-content/uploads/sites/12/2014/11/Hand-With-Wedding-Ring.webm” video_mp4=”http://theme-fusion.com/avada/agency/wp-content/uploads/sites/12/2014/11/Hand-With-Wedding-Ring.mp4″ video_ogv=”” video_preview_image=”” overlay_color=”#000000″ overlay_opacity=”0.85″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”200px” paddingbottom=”200px” paddingleft=”40px” paddingright=”40px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””]Video Backgrounds For Full Width Container
The same self hosted video backgrounds that can be used with our Fusion Slider make their way to the highly popular Full Width Container. Use color overlays, set color opacity, mute and loop the videos. Video backgrounds are perfect for adding visual appeal to your layouts.
[/fullwidth][separator style_type=”none” top_margin=”15″ bottom_margin=”” sep_color=”” icon=”” width=”200px” class=”” id=””][fullwidth backgroundcolor=”#3d352f” backgroundimage=”http://cdn.fligo.eu/wp-content/uploads/2014/11/home_slider.jpg” backgroundrepeat=”no-repeat” backgroundposition=”right center” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”yes” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”200px” paddingbottom=”200px” paddingleft=”40px” paddingright=”40px” menu_anchor=”” equal_height_columns=”yes” hundred_percent=”no” class=”” id=””][two_third last=”no” spacing=”yes” background_color=”rgba(255,255,255,.7)” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”solid” padding=”30px” class=”” id=””]Awesome Blur/Fading Effect On Scroll For The Full Width Background Image
[/two_third][one_third last=”yes” spacing=”yes” background_color=”rgba(151,201,61,.7)” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”solid” padding=”30px” class=”” id=””][separator style_type=”none” top_margin=”40″ bottom_margin=”” sep_color=”” icon=”” width=”200px” class=”” id=””][button link=”http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion” color=”custom” size=”xlarge” type=”flat” shape=”round” target=”_blank” title=”” gradient_colors=”transparent|” gradient_hover_colors=”rgba(255,255,255,.1)|” accent_color=”rgba(255,255,255,.8)” accent_hover_color=”#ffffff” bevel_color=”” border_width=”1px” shadow=”no” icon=”” icon_position=”left” icon_divider=”no” modal=”” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”center” class=”” id=””]PURCHASE AVADA[/button][separator style_type=”none” top_margin=”10″ bottom_margin=”” sep_color=”” icon=”” width=”200px” class=”” id=””][/one_third][/fullwidth][separator style_type=”none” top_margin=”60″ bottom_margin=”60″ sep_color=”” icon=”” width=”200px” class=”” id=””][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”yes” bordersize=”0px” bordercolor=”#eaeaea” borderstyle=”solid” paddingtop=”0px” paddingbottom=”0px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””][one_full last=”yes” spacing=”yes” background_color=”#f6f6f6″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”solid” padding=”40px” class=”” id=””]Use as Many As You Want!
Use as many Full Width Sections 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.
[/one_full][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”30px” paddingbottom=”30px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””][three_fourth last=”no” spacing=”yes” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”” padding=”” class=”” id=””][title size=”2″ content_align=”left” style_type=”” sep_color=”” class=”” id=””]We Are Here To Serve You[/title]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.
[/three_fourth][one_fourth last=”yes” spacing=”yes” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”” padding=”” class=”” id=””][title size=”2″ content_align=”left” style_type=”” sep_color=”” class=”” id=””]Our Crazy Skills[/title][progress percentage=”90″ unit=”” filledcolor=”” unfilledcolor=”” striped=”no” animated_stripes=”no” textcolor=”” class=”” id=””]Web Design[/progress][progress percentage=”95″ unit=”” filledcolor=”” unfilledcolor=”” striped=”no” animated_stripes=”no” textcolor=”” class=”” id=””]HTML/CSS[/progress][progress percentage=”85″ unit=”” filledcolor=”” unfilledcolor=”” striped=”no” animated_stripes=”no” textcolor=”” class=”” id=””]Graphic Design[/progress][progress percentage=”75″ unit=”” filledcolor=”” unfilledcolor=”” striped=”no” animated_stripes=”no” textcolor=”” class=”” id=””]WordPress[/progress][/one_fourth][/fullwidth][fullwidth backgroundcolor=”#f6f6f6″ backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”scroll” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”1px” bordercolor=”#eae9e9″ borderstyle=”solid” paddingtop=”30px” paddingbottom=”0px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””][one_half last=”no” spacing=”yes” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”” padding=”” class=”” id=””][slider width=”100%” height=”100%” class=”” id=””][slide type=”image” link=”” linktarget=”” lightbox=””]http://cdn.fligo.eu/wp-content/uploads/2012/07/portfolio_4.jpg[/slide][slide type=”image” link=”” linktarget=”” lightbox=””]http://cdn.fligo.eu/wp-content/uploads/2012/07/portfolio_5.jpg[/slide][/slider][/one_half][one_half last=”yes” spacing=”yes” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”” padding=”” class=”” id=””][title size=”2″ content_align=”left” style_type=”” sep_color=”” class=”” id=””]This Is A Full Width Section, Pretty Cool Heh?[/title][checklist icon=”fa-star” iconcolor=”dark” circle=”no” circlecolor=”” size=”small” class=”” id=””][li_item icon=””]Fully responsive so your content will always look good on any screen size[/li_item][li_item icon=””]Awesome sliders give you the opportunity to showcase your content[/li_item][li_item icon=””]Advanced theme options panel to easily customize your website[/li_item][li_item icon=””]Multiple layout options for home pages, portfolio and blog section[/li_item][li_item icon=””]Amazing shortcodes loaded with meta options for easy customization[/li_item][li_item icon=””]We offer free support because we care about your site as much as you.[/li_item][/checklist][/one_half][/fullwidth][separator style_type=”none” top_margin=”60″ bottom_margin=”60″ sep_color=”” icon=”” width=”200px” class=”” id=””][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”0px” paddingbottom=”0px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””][one_full last=”yes” spacing=”yes” background_color=”#f6f6f6″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”solid” padding=”40px” class=”” id=””]Spacing & Width Options
Set Full Width Containers to be 100% full width, or boxed. Set the spacing between columns, as well as the top, bottom, left and right padding. This shortcode also includes an option that lets you set columns to have equal heights.
[/one_full][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”right center” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”yes” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”0px” paddingbottom=”0px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”yes” hundred_percent=”yes” class=”” id=””][one_third last=”no” spacing=”no” background_color=”#1a1613″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”solid” padding=”40px” class=”” id=””]100% Content Width
[separator style_type=”single” top_margin=”5″ bottom_margin=”20″ sep_color=”#ffffff” icon=”” width=”200px” class=”” id=””]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.
[/one_third][one_third last=”no” spacing=”no” background_color=”#312d29″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”solid” padding=”40px” class=”” id=””]Equal Column Heights
[separator style_type=”single” top_margin=”5″ bottom_margin=”20″ sep_color=”#ffffff” icon=”” width=”200px” class=”” id=””]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.
[/one_third][one_third last=”yes” spacing=”no” background_color=”#3d3b38″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”solid” padding=”40px” class=”” id=””]Spacing Between Columns
[separator style_type=”single” top_margin=”5″ bottom_margin=”20″ sep_color=”#ffffff” icon=”” width=”200px” class=”” id=””]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.
[/one_third][/fullwidth][separator style_type=”none” top_margin=”60″ bottom_margin=”60″ sep_color=”” icon=”” width=”200px” class=”” id=””][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”0px” paddingbottom=”0px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””][one_full last=”yes” spacing=”yes” background_color=”#f6f6f6″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”solid” padding=”40px” class=”” id=””]Complete Set of Options
Every option and description included with the full width container shortcode is listed below.
[/one_full][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”30px” paddingbottom=”80px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”yes” hundred_percent=”no” class=”” id=””][one_half last=”no” spacing=”yes” background_color=”#f8f8f8″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”1px” border_color=”#eaeaea” border_style=”solid” padding=”30px” class=”” id=””][checklist icon=”fa-check” iconcolor=”#333333″ circle=”no” circlecolor=”” size=”small” class=”” id=””][li_item icon=””]backgroundcolor – Accepts a hexcode ( #000000 ). Sets the icon’s background color. Leave blank for Theme Option selection.[/li_item][li_item icon=””]backgroundimage – The URL path of the background image you’d like to display, starting with http:// and usually ending on .jpg, .png or .gif.[/li_item][li_item icon=””]backgroundrepeat – Can be one of these values: no-repeat, repeat, repeat-y, or repeat-x. Sets how the background repeats.[/li_item][li_item icon=””]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.[/li_item][li_item icon=””]backgroundattachment – Can be one of these values: fixed, scroll, or local. Sets how the background scrolls.[/li_item][li_item icon=””]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.[/li_item][li_item icon=””]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.[/li_item][li_item icon=””]video_ogv – The URL path of your OGV video file. This parameter is optional.[/li_item][li_item icon=””]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.[/li_item][li_item icon=””]video_mute – Can be one of these values: yes, or no. This will enable or disable mute.[/li_item][li_item icon=””]video_loop – Can be one of these values: yes, or no. This will enable or disable video loop.[/li_item][li_item icon=””]overlay_color – Accepts a hexcode ( #000000 ). Sets the video’s overlay color. Leave blank for Theme Option selection.[/li_item][li_item icon=””]overlay_opacity – Can be a numerical value from 0.1 to 1. Sets the color opacity level. 1 is equivalent to 100%.[/li_item][/checklist][/one_half][one_half last=”yes” spacing=”yes” background_color=”#f8f8f8″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”1px” border_color=”#eaeaea” border_style=”solid” padding=”30px” class=”” id=””][checklist icon=”fa-check” iconcolor=”#333333″ circle=”no” circlecolor=”” size=”small” class=”” id=””][li_item icon=””]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.[/li_item][li_item icon=””]bordersize – Accepts a pixel value that sets the border’s size. For example, 5px.[/li_item][li_item icon=””]bordercolor – Accepts a hexcode ( #000000 ). Sets the border’s color. Leave blank for Theme Option selection.[/li_item][li_item icon=””]borderstyle – Can be one of these values: solid, dashed, or dotted. Sets the border’s style.[/li_item][li_item icon=””]paddingtop – Accepts a numerical value that sets the top padding in pixels. For example, 20.[/li_item][li_item icon=””]paddingbottom – Accepts a numerical value that sets the bottom padding in pixels. For example, 20.[/li_item][li_item icon=””]paddingleft – Accepts a numerical value that sets the left padding in pixels. For example, 20.[/li_item][li_item icon=””]paddingright – Accepts a numerical value that sets the right padding in pixels. For example, 20.[/li_item][li_item icon=””]menu_anchor – The unique name you give the corresponding menu item.[/li_item][li_item icon=””]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.[/li_item][li_item icon=””]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.[/li_item][li_item icon=””]class – Add a custom class to the wrapping HTML element for further css customization.[/li_item][li_item icon=””]id – Add a custom id to the wrapping HTML element for further css customization.[/li_item][/checklist][/one_half][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”http://cdn.fligo.eu/wp-content/uploads/2014/11/home_slider.jpg” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”1px” bordercolor=”” borderstyle=”solid” paddingtop=”35px” paddingbottom=”75px” paddingleft=”40px” paddingright=”40px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””]