Tabs: Vertical Dark

Scroll to shortcode

Payment methods

Sed id interdum massa. Curabitur sollicitudin eget tellus nec volutpat. Nunc a purus non libero pretium ultrices. In hac habitasse platea dictumst. Cras tempor urna a convallis blandit. Maecenas nec quam dolor. Integer lorem dui, porttitor sit amet ligula id, elementum laoreet nulla.

Shipping and delivery

Aenean ut consectetur ante, ac varius risus. Suspendisse pulvinar commodo feugiat. Donec blandit, ex at tincidunt pulvinar, velit mauris aliquet lectus, at convallis ligula tellus sit amet ex. Phasellus porta felis tincidunt dui posuere accumsan. Fusce fermentum vel felis at condimentum.

Returns and refunds

Maecenas ut vestibulum risus. Cras nisl leo, scelerisque sit amet nibh sed, hendrerit fermentum risus. Sed at molestie ligula. Vivamus efficitur faucibus sodales. Nulla id felis nisl. Proin tempor sapien vel odio semper, vitae semper sapien hendrerit. Fusce ut justo dapibus, vestibulum.

Shortcode

[section label="*Tabs: Vertical Dark" bg_color="rgb(20, 20, 20)" padding="114px" padding__sm="42px" padding__md="66px" class="tabs-vertical-dark"]
[gap]
[row]
[col span__sm="12"]
[row_inner style="collapse" width="custom" custom_width="964px"]
[col_inner span__sm="12"]
[tabgroup style="pills" nav_style="normal" class="dark-tabs"]
[tab title="Payment"]
[row_inner_1 style="collapse"]
[col_inner_1 span__sm="12" padding="36px 36px 36px 36px" padding__sm="24px 24px 24px 24px" bg_color="rgba(255, 255, 255, 0.05)" bg_radius="8" color="light"]
<h3 class="heading">Payment methods</h3>
<p class="no-margin">Sed id interdum massa. Curabitur sollicitudin eget tellus nec volutpat. Nunc a purus non libero pretium ultrices. In hac habitasse platea dictumst. Cras tempor urna a convallis blandit. Maecenas nec quam dolor. Integer lorem dui, porttitor sit amet ligula id, elementum laoreet nulla.</p>
[/col_inner_1]
[/row_inner_1]
[/tab]
[tab title="Shipping & delivery"]
[row_inner_1 style="collapse"]
[col_inner_1 span__sm="12" padding="36px 36px 36px 36px" padding__sm="24px 24px 24px 24px" bg_color="rgba(255, 255, 255, 0.05)" bg_radius="8" color="light"]
<h3 class="heading">Shipping and delivery</h3>
<p class="no-margin">Aenean ut consectetur ante, ac varius risus. Suspendisse pulvinar commodo feugiat. Donec blandit, ex at tincidunt pulvinar, velit mauris aliquet lectus, at convallis ligula tellus sit amet ex. Phasellus porta felis tincidunt dui posuere accumsan. Fusce fermentum vel felis at condimentum.</p>
[/col_inner_1]
[/row_inner_1]
[/tab]
[tab title="Returns"]
[row_inner_1 style="collapse"]
[col_inner_1 span__sm="12" padding="36px 36px 36px 36px" padding__sm="24px 24px 24px 24px" bg_color="rgba(255, 255, 255, 0.05)" bg_radius="8" color="light"]
<h3 class="heading">Returns and refunds</h3>
<p class="no-margin">Maecenas ut vestibulum risus. Cras nisl leo, scelerisque sit amet nibh sed, hendrerit fermentum risus. Sed at molestie ligula. Vivamus efficitur faucibus sodales. Nulla id felis nisl. Proin tempor sapien vel odio semper, vitae semper sapien hendrerit. Fusce ut justo dapibus, vestibulum.</p>
[/col_inner_1]
[/row_inner_1]
[/tab]
[/tabgroup]
[/col_inner]
[/row_inner]
[/col]
[/row]
[/section]

CSS

/*---------- Tabs: Vertical Dark ----------*/
.tabs-vertical-dark .nav-pills > li > a {
  font-size: 16px;
  border-radius: 6px;
  padding: 4px 24px;
  margin: 0 12px 12px 0;
  transition: all 200ms ease;
  -webkit-transition: all 200ms ease;
  background-color: hsla(0, 0%, 100%, 0.1); /* Change tab background color */
  color: hsla(0, 0%, 100%, 0.5); /* Change tab text color */
}
.tabs-vertical-dark .nav-pills > li.active > a {
  background-color: hsla(0, 0%, 100%, 0.5); /* Change active tab background color */
  color: #fff; /* Change active tab text color */
}
.tabs-vertical-dark .tab-panels {
  padding-top: 0;
}
.tabs-vertical-dark h3.heading {
  font-size: 200%; /* 32px */
  line-height: 1.2;
}
@media screen and (max-width:549px) {
  .tabs-vertical-dark h3.heading {
    font-size: 150%; /* 24px */
  }
}

How to use Flatresources

Using Flatresources with your Flatsome website is easy as a breeze.

First, copy the provided Shortcode and paste it to the text page editor or directly to the UX Builder.

1. Copy and paste the Shortcode

Copying the Shortcode
Pasting the Shortcode using UX Builder import function
Pasting the Shortcode to the page text editor

2. Add the custom CSS code

Second, copy the CSS code (if provided) and paste it into your project to achieve the desired appearance.

There are multiple methods of adding and updating CSS code in WordPress, so let's look at each one of them.

Using a plugin (Simple Custom CSS and JS PRO)

This is our preferred method because it allows you to create multiple stylesheets to keep things neat and tidy. If you upgrade to the paid license, you will be able to apply the CSS code only to selected URLs, keep track of revisions, and much more.

Adding CSS using the Simple Custom CSS and JS plugin
WordPress Additional CSS

Appearance → Customize → Additional CSS

Adding CSS using the WordPress Additional CSS
Flatsome Custom CSS

Flatsome → Advanced → Custom CSS

Adding CSS using Flatsome Custom CSS
Theme style.css

Appearance → Theme Editor → style.css

Adding CSS using theme Stylesheet