Erbus S.A. | Stripes

Create awesome trendy layouts with fullwidth stripes! Use existing page examples from our dummy content, or design your own unique pages. Stripes are extremely easy to use – they are fully integrated into Visual Composer, so you don’t need to mess up with complicated [text shortcodes]. Stripes are responsive and work perfectly in all modern browsers; support fixed fullwidth images, patterns, parallax effects and even videos!

[dt_gap height=»30″]

Features and settings

[dt_gap height=»20″]

[dt_list style=»1″ dividers=»false»]

[dt_list_item image=»»]2 default stripes with predefined text & lines colors (for light and dark backgrounds) – #4, #5[/dt_list_item]

[dt_list_item image=»»]3 stripe slots in Theme Options with fully customizable headers, text & lines colors – #1, #2, #3[/dt_list_item]

[dt_list_item image=»»]background color setting[/dt_list_item]

[dt_list_item image=»»]background image setting[/dt_list_item]

[dt_list_item image=»»]image repeat & positioning; fullscreen image[/dt_list_item]

[dt_list_item image=»»]parallax with speed and direction settings[/dt_list_item]

[dt_list_item image=»»]supports fullscreen self-hosted videos[/dt_list_item]

[dt_list_item image=»»]top and bottom margins & paddings (you can use them to stick stripes to header and footer or instead of gaps)[/dt_list_item]

[/dt_list]

[dt_gap height=»35″]

Setting up stripe in Visual Composer

[dt_gap height=»20″]

[dt_fancy_image type=»image» image=»http://the7.dream-demo.com/wp-content/uploads/2013/10/stripes-composer.jpg» image_alt=»Stripe options pop-up window» lightbox=»true» style=»3″ width=»890″ padding=»10″ align=»left» animation=»none»]

Editing stripe style in Theme Options

[dt_gap height=»20″][dt_fancy_image type=»image» image=»http://the7.dream-demo.com/wp-content/uploads/2013/10/stripes-design.jpg» image_alt=»Headers, text & default background settings» lightbox=»true» style=»3″ width=»890″ padding=»10″ align=»left» animation=»none»]

Stripe Style #3 with Fixed Background

[dt_gap height=»5″]

Text & lines colors are customisable via Theme Options

[dt_gap height=»40″]

[dt_list style=»1″ dividers=»true»]

[dt_list_item image=»»]Dolor amet glavrida amos[/dt_list_item]

[dt_list_item image=»»] Maecenas id lacus tempor amet[/dt_list_item]

[dt_list_item image=»»]Lorem ipsum dolor[/dt_list_item]

[dt_list_item image=»»]Aenean suscipit vulputate lorem[/dt_list_item]

[dt_list_item image=»»]Lorem ipsum dolor[/dt_list_item]

[dt_list_item image=»»]Dolor amet glavrida amos[/dt_list_item]

[dt_list_item image=»»]Lorem ipsum dolor[/dt_list_item]

[dt_list_item image=»»]Dolor amet glavrida amos[/dt_list_item]

[/dt_list]

[dt_gap height=»30″]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue volutpat neque, semper hendrerit est sollicitudin imperdiet. Aenean id mauris quis massa tristique porttitor. Nam at ligula sagittis, vulputate tortor vitae, lobortis tellus. Aenean suscipit vulputate lorem a bibendum. Proin volutpat sit amet sapien id venenatis. Maecenas id lacus tempor, sollicitudin odio vitae, sagittis eros. Mauris suscipit lorem quis dictum faucibus.

Phasellus congue volutpat neque, semper hendrerit est sollicitudin imperdiet. Aenean id mauris quis massa tristique porttitor.

[dt_gap height=»30″]

[dt_teaser type=»image» image=»http://the7.dream-demo.com/wp-content/uploads/2013/12/dt-082.jpg» image_alt=»banner-image» lightbox=»true» style=»2″ content_size=»normal» text_align=»center» background=»fancy» animation=»none» target=»blank»]

Lorem ipsum dolor

Amet onse lorem ipsum adipiscing elit congue volutpat.[/dt_teaser][dt_gap height=»30″]

Stripe Style #1

[dt_gap height=»5″]

Text & lines colors are customisable via Theme Options

[dt_gap height=»40″]

Phasellus congue volutpat neque, semper hendrerit est sollicitudin imperdiet. Aenean id mauris quis massa tristique porttitor.

[dt_gap height=»30″]

[dt_teaser type=»image» image=»http://the7.dream-demo.com/wp-content/uploads/2013/12/dt-083.jpg» image_alt=»banner-image» lightbox=»true» style=»2″ content_size=»normal» text_align=»center» background=»fancy» animation=»none» target=»blank»]

Lorem ipsum dolor

Amet onse lorem ipsum adipiscing elit congue volutpat.[/dt_teaser][dt_gap height=»30″]

[dt_blog_posts_small columns=»1″ featured_images=»true» number=»3″ orderby=»date» order=»desc» category=»programming-blog,sport-blog,photography-blog»][dt_gap height=»30″]

Stripe Style #4 with Parallax Background

[dt_gap height=»5″]

Predefined light text & lines color

[dt_gap height=»40″]

[dt_teaser type=»image» image=»http://the7.dream-demo.com/wp-content/uploads/2013/12/dt-085.jpg» image_alt=»banner-image» lightbox=»true» style=»2″ content_size=»normal» text_align=»center» background=»fancy» animation=»none» target=»blank»]

Lorem ipsum dolor

Amet onse lorem ipsum adipiscing elit congue volutpat.[/dt_teaser][dt_gap height=»30″]

[dt_list style=»2″ dividers=»true»]

[dt_list_item image=»»] Maecenas id lacus tempor amet[/dt_list_item]

[dt_list_item image=»»]Lorem ipsum dolor[/dt_list_item]

[dt_list_item image=»»]Aenean suscipit vulputate lorem[/dt_list_item]

[dt_list_item image=»»]Lorem ipsum dolor[/dt_list_item]

[dt_list_item image=»»]Dolor amet glavrida amos[/dt_list_item]

[dt_list_item image=»»]Lorem ipsum dolor[/dt_list_item]

[dt_list_item image=»»]Dolor amet glavrida amos[/dt_list_item]

[/dt_list]

[dt_gap height=»30″]

Phasellus congue volutpat neque, semper hendrerit est sollicitudin imperdiet. Aenean id mauris quis massa tristique porttitor.

[dt_gap height=»30″]

Stripe Style #2

[dt_gap height=»5″]

Text & lines colors are customisable via Theme Options

[dt_gap height=»40″]

[dt_list style=»2″ dividers=»true»]

[dt_list_item image=»»]Dolor amet glavrida amos[/dt_list_item]

[dt_list_item image=»»] Maecenas id lacus tempor amet[/dt_list_item]

[dt_list_item image=»»]Lorem ipsum dolor[/dt_list_item]

[dt_list_item image=»»]Aenean suscipit vulputate lorem[/dt_list_item]

[dt_list_item image=»»]Lorem ipsum dolor[/dt_list_item]

[dt_list_item image=»»]Dolor amet glavrida amos[/dt_list_item]

[dt_list_item image=»»]Lorem ipsum dolor[/dt_list_item]

[dt_list_item image=»»]Dolor amet glavrida amos[/dt_list_item]

[/dt_list]

[dt_gap height=»30″]

Phasellus congue volutpat neque, semper hendrerit est sollicitudin imperdiet. Aenean id mauris quis massa tristique porttitor.

[dt_gap height=»30″]

[dt_testimonials type=»slider» columns=»2″ number=»12″ orderby=»date» order=»desc» category=»home-small»][dt_gap height=»30″]

Stripe Style #5 with Parallax Background

[dt_gap height=»5″]

Predefined dark text & lines color

[dt_gap height=»40″]

Phasellus congue volutpat neque, semper hendrerit est sollicitudin imperdiet. Aenean id mauris quis massa tristique porttitor.

[dt_gap height=»30″]

[dt_list style=»1″ dividers=»true»]

[dt_list_item image=»»]Dolor amet glavrida amos[/dt_list_item]

[dt_list_item image=»»] Maecenas id lacus tempor amet[/dt_list_item]

[dt_list_item image=»»]Lorem ipsum dolor[/dt_list_item]

[dt_list_item image=»»]Aenean suscipit vulputate lorem[/dt_list_item]

[dt_list_item image=»»]Lorem ipsum dolor[/dt_list_item]

[dt_list_item image=»»]Dolor amet glavrida amos[/dt_list_item]

[dt_list_item image=»»]Lorem ipsum dolor[/dt_list_item]

[dt_list_item image=»»]Dolor amet glavrida amos[/dt_list_item]

[/dt_list]

[dt_gap height=»30″]

[dt_teaser type=»image» image=»http://the7.dream-demo.com/wp-content/uploads/2013/12/dt-087.jpg» image_alt=»banner-image» lightbox=»true» style=»2″ content_size=»normal» text_align=»center» background=»fancy» animation=»none» target=»blank»]

Lorem ipsum dolor

Amet onse lorem ipsum adipiscing elit congue volutpat.[/dt_teaser][dt_gap height=»30″]

Stripe Style #4 with Video

[dt_gap height=»5″]

Predefined light text & lines color

[dt_gap height=»40″]

[dt_teaser type=»image» image=»http://the7.dream-demo.com/wp-content/uploads/2013/12/dt-086.jpg» image_alt=»banner-image» lightbox=»true» style=»2″ content_size=»normal» text_align=»center» background=»fancy» animation=»none» target=»blank»]

Lorem ipsum dolor

Amet onse lorem ipsum adipiscing elit congue volutpat.[/dt_teaser][dt_gap height=»30″]

[dt_list style=»2″ dividers=»true»]

[dt_list_item image=»»] Maecenas id lacus tempor amet[/dt_list_item]

[dt_list_item image=»»]Lorem ipsum dolor[/dt_list_item]

[dt_list_item image=»»]Aenean suscipit vulputate lorem[/dt_list_item]

[dt_list_item image=»»]Lorem ipsum dolor[/dt_list_item]

[dt_list_item image=»»]Dolor amet glavrida amos[/dt_list_item]

[dt_list_item image=»»]Lorem ipsum dolor[/dt_list_item]

[dt_list_item image=»»]Dolor amet glavrida amos[/dt_list_item]

[/dt_list]

[dt_gap height=»30″]

Phasellus congue volutpat neque, semper hendrerit est sollicitudin imperdiet. Aenean id mauris quis massa tristique porttitor.

[dt_gap height=»30″]