1. UX Shortcode
[section label="Flattree: Hero" bg="https://www.sebdelaweb.com/wp-content/uploads/linktree-alternative-hero-bg-flatsome-wordpress-ux-builder.jpg" bg_pos="50% 46%" height="300px" height__sm="200px" height__md="250px" class="page-full-height"] [/section] [section bg_color="rgb(247, 249, 255)"] [row label="CSS* Flattree: Avatar" h_align="center" class="flattree-avatar"] [col span="2" span__sm="6" span__md="3" margin="-100px 0px 0px 0px"] [ux_image id="https://www.sebdelaweb.com/wp-content/uploads/linktree-alternative-avatar-flatsome-wordpress-ux-builder.jpg"] [/col] [/row] [row label="CSS* Flattree: Name" class="flattree-name"] [col span__sm="12" margin="0px 0px -20px 0px" align="center"]Jane Reyson
Dynamic Designer
[/col] [/row] [row label="CSS* Flattree: Links V1" h_align="center" class="flattree-links"] [col span="8" span__sm="12" align="center"] [row_inner label="Link 1" col_bg="rgb(255,255,255)" padding="20px 20px 20px 20px"] [col_inner span__sm="12" margin="0px 0px -10px 0px" depth_hover="5"] [featured_box img="https://www.sebdelaweb.com/wp-content/uploads/linktree-alternative-link1-flatsome-wordpress-ux-builder.jpg" img_width="70" pos="left" link="#"]Visit our store: Gadgets for life
[/featured_box] [/col_inner] [/row_inner] [row_inner label="Link 2" col_bg="rgb(255,255,255)" padding="20px 20px 20px 20px"] [col_inner span__sm="12" margin="0px 0px -10px 0px" depth_hover="5"] [featured_box img="https://www.sebdelaweb.com/wp-content/uploads/linktree-alternative-link2-flatsome-wordpress-ux-builder.jpg" img_width="70" pos="left" link="#"]Buy new book: 101 Essays for change
[/featured_box] [/col_inner] [/row_inner] [row_inner label="Link 3" col_bg="rgb(255,255,255)" padding="20px 20px 20px 20px"] [col_inner span__sm="12" margin="0px 0px -10px 0px" depth_hover="5"] [featured_box img="https://www.sebdelaweb.com/wp-content/uploads/linktree-alternative-link3-flatsome-wordpress-ux-builder.jpg" img_width="70" pos="left" link="#"]Read latest blog: Travel the world
[/featured_box] [/col_inner] [/row_inner] [/col] [/row] [row label="Flattree: Links V2" h_align="center"] [col span="8" span__sm="12" align="center"] [button text="Visit our store: Gadgets for life" size="large" expand="true" icon="icon-shopping-cart" icon_pos="left" link="#"] [button text="Buy new book: 101 Essays for change" size="large" expand="true" link="#"] [button text="Read latest blog: Travel the world" size="large" expand="true" link="#"] [/col] [/row] [row label="Flattree: Thank You"] [col span__sm="12" align="center"] [follow style="small" scale="120" facebook="#" instagram="#" twitter="#" linkedin="#"] [/col] [/row] [/section]
2. CSS
/*************** FLATTREE LINKPAGE ***************/ .flattree-avatar img { border-radius:100%; border: 8px solid #fff; background: #fff; } .flattree-name h1 { font-size: 200%; line-height:100%; margin-bottom:5px; } .flattree-name p { font-size: 90%; opacity: .7; } .flattree-links .col-inner .col-inner { border-radius:10px; box-shadow: 1px 1px 10px 0 rgba(32,27,61,.07); -webkit-transition: all .2s ease; transition: all .2s ease; } .flattree-links img { border-radius:10px; } .flattree-links .icon-box-text { display: flex; align-items: center; justify-content: center; }
Need professional design help?
Let's take your Flatsome shop to the next level.
Seb's design service💎 Improve your Flatsome design in 30 minutes
Get 22 design tips that every Flatsome site could use.
Flatsome tutorial
Improve your Flatsome Mobile Menu with CSS
Take your Flatsome mobile menu to the next level with
Flatsome tutorial
Flatsome Custom Product Layout like Amazon
Create a custom product layout like Amazon for your WooCommerce