Details

Convert your Flatsome tabs to a nice switch toggle. Great for periodically pricing layouts.

Full preview YouTube channel
Full preview

CSS

/*************** SWITCH TOGGLE PRICING ***************/

.switch-toggle-pricing .nav {
    background: #efefef; /* Change nav bg color */
    padding: 5px 5px;
    border-radius: 30px;
    width: fit-content;
    margin: auto;
}

.switch-toggle-pricing .col-round>* {
    border-radius: 8px;
    box-shadow: 1px 1px 39px 0 rgba(32,27,61,.07);
}

UX Shortcode

[section label="CSS* Switch Toggle Pricing" class="switch-toggle-pricing"]

[row h_align="center" padding="25px 25px 25px 25px"]

[col span="5" span__sm="12" span__md="8" bg_color="rgb(255,255,255)" class="col-round"]

[tabgroup style="pills" nav_size="small" align="center"]

[tab title="Yearly"]

[row_inner label="CSS* Premium: Pricing Box" col_bg="#2a33e2" class="premium-pricing-box"]

[col_inner span__sm="12" padding="25px 0px 15px 0px" align="center" color="light" class="col-round"]

$4

Per month, billed annually

[/col_inner] [/row_inner] [row_inner style="collapse"] [col_inner span="6" span__sm="6"]

Membership

[/col_inner] [col_inner span="6" span__sm="6"]

Premium

[/col_inner] [/row_inner] [row_inner style="collapse"] [col_inner span="6" span__sm="6"]

Period

[/col_inner] [col_inner span="6" span__sm="6"]

Yearly

[/col_inner] [/row_inner] [row_inner style="collapse"] [col_inner span="6" span__sm="6"]

Billed now

[/col_inner] [col_inner span="6" span__sm="6"]

$48 - Save 50%

[/col_inner] [/row_inner] [button text="Subscribe" color="success" expand="true" icon="icon-shopping-cart" link="https://www.flatcustom.com/checkout/?add-to-cart=368"] [/tab] [tab title="Monthly"] [row_inner col_bg="#2a33e2" class="premium-pricing-box"] [col_inner span__sm="12" padding="25px 0px 15px 0px" align="center" color="light" class="col-round"]

$8

Per month, billed monthly

[/col_inner] [/row_inner] [row_inner style="collapse"] [col_inner span="6" span__sm="6"]

Membership

[/col_inner] [col_inner span="6" span__sm="6"]

Premium

[/col_inner] [/row_inner] [row_inner style="collapse"] [col_inner span="6" span__sm="6"]

Period

[/col_inner] [col_inner span="6" span__sm="6"]

Monthly

[/col_inner] [/row_inner] [row_inner style="collapse"] [col_inner span="6" span__sm="6"]

Billed now

[/col_inner] [col_inner span="6" span__sm="6"]

$8

[/col_inner] [/row_inner] [button text="Subscribe" color="success" expand="true" icon="icon-shopping-cart"] [/tab] [/tabgroup] [/col] [/row] [/section]