In this video I cover a foolproof way to create SVG wavey lines using just the Flatsome UX Builder; no code or extra CSS required! These waves seem to be becoming more and more popular in web design and certainly are a more interesting way of creating transitions from images and sections than straight horizontal lines. However, use sparingly and don’t use on websites that really don’t suit this kind of design language.
The effect is quite ‘playful’ so you wouldn’t expect to see it on a website for a law firm for example.
Any questions please drop a comment below.
Getwaves.io. Here’s the website for generating SVGs if you cannot create your own.
UX Shortcode for this page (you’ll have to drop in your own images including the SVG)
[section padding="0px" margin="-15%"] [ux_banner height="638px" bg="1491"] [text_box position_x="50" position_y="50"] <h3 class="uppercase"><strong>This is a simple banner</strong></h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> [/text_box] [/ux_banner] [/section] [section padding="0px"] [ux_banner height="15%" bg="2060" bg_color="rgba(255, 255, 255, 0)" bg_pos="44% 57%"] [text_box position_x="50" position_y="50"] [/text_box] [/ux_banner] [/section] [section label="Catogories" padding="50px" class="home-merken"] [row h_align="center"] [col span="9" span__sm="12" span__md="9" margin="0px 0px -40px 0px"] [row_inner style="collapse" padding="0px 2px 0px 2px"] [col_inner span="3" span__sm="12" span__md="6"] [button text="Electronics" style="outline" padding="5px 25px 5px 25px" expand="true"] [/col_inner] [col_inner span="3" span__sm="12" span__md="6"] [button text="Interior" style="outline" padding="5px 25px 5px 25px" expand="true"] [/col_inner] [col_inner span="3" span__sm="12" span__md="6"] [button text="Gadgets" style="outline" padding="5px 25px 5px 25px" expand="true"] [/col_inner] [col_inner span="3" span__sm="12" span__md="6"] [button text="Bags" style="outline" padding="5px 25px 5px 25px" expand="true"] [/col_inner] [/row_inner] [/col] [/row] [/section] [section label="New arrivals" padding="60px"] [row] [col span__sm="12" margin="0px 0px 5px 0px" align="center"] <h2>Discover our new arrivals</h2> [/col] [/row] [row] [col span__sm="12"] <p>[ux_products style="normal" type="row" columns="2" columns__sm="1" columns__md="2" products="2" image_height="100%"]</p> [/col] [/row] [row] [col span__sm="12" margin="0px 0px -40px 0px" align="center"] [button text="More new arrivals" style="outline" padding="5px 25px 5px 25px"] [/col] [/row] [/section] [row label="Title Essentials"] [col span__sm="12" margin="0px 0px 5px 0px" align="center"] <h2>Summer essentials</h2> [/col] [/row] [section label="Photo background" height="350px"] [/section] [section label="Product Essentials" bg_color="rgb(250, 250, 250)" padding="80px"] [row] [col span__sm="12" padding="30px 0px 0px 0px" margin="0px 0px -40px 0px"] <p>[ux_products style="normal" type="row" columns__sm="2" columns__md="2" ids="14026,422,132,13809" image_height="100%"]</p> [/col] [/row] [/section] [section label="Product Featured" padding="100px"] [row h_align="center"] [col span="10" span__sm="12" span__md="12" padding="40px 0px 0px 0px"] [row_inner v_align="middle"] [col_inner span="6" span__sm="12"] [ux_banner height="99.99%"] [text_box position_x="50" position_y="50"] [/text_box] [/ux_banner] [/col_inner] [col_inner span="6" span__sm="12"] <h6>Featured</h6> <h3>The new sound sensation</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> [row_inner_1 style="collapse"] [col_inner_1 span__sm="12" padding="20px 0px 0px 5px" depth="2" depth_hover="4"] <p>[ux_products_list products="1"]</p> [/col_inner_1] [/row_inner_1] [/col_inner] [/row_inner] [/col] [/row] [/section] [section label="Team Photo Banner" height="400px"] [/section] [row label="Team" h_align="center"] [col span="8" span__sm="12" span__md="10" padding="50px 50px 50px 50px" margin="-80px 0px 0px 0px" align="center" bg_color="rgb(255,255,255)"] <h2>Our team is ready</h2> <p> Lorem ipsum dolor sit amet consectetur adipiscing elit.</p> [button text="Our story" style="underline"] [/col] [/row] [section label="Newsletter" bg_color="#273647" dark="true"] [row style="small" h_align="center"] [col span="4" span__sm="12" span__md="10"] <h5>Subscribe to our newsletter and get a €15 discount on your next purchase</h5> [/col] [col span="4" span__sm="12" span__md="10"] <ul style="font-size: 90%; line-height: 100%;"> <li class="bullet-checkmark">Get notified when new products arrive</li> <li class="bullet-checkmark">Up to date with the latest trends</li> <li class="bullet-checkmark">Get access to exclusive offers</li> </ul> [/col] [col span="4" span__sm="12" span__md="10"] [contact-form-7 id="15248"] [/col] [/row] [/section]
