Details

How to create a super easy Linktree alternative with WordPress, the Flatsome Theme and UX Builder.

Full preview YouTube channel

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]

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;
}