Tabbed content is an easy way to showcase large amount of content within a limited space. Weebly with the introduction of its App Center brings many new apps to add additional elements. “Tabs” is one such app that you can connect to your site for free. In this article we will discuss how to add horizontal tabs in Weebly with the default tabs app and using custom code.
Add Horizontal Tabs Using Default Tabs App
App Center is a marketplace where you can find all Weebly and third-party apps like Tabs app.
- Once you are in Weebly site editor, navigate to the App Center through “Build > Apps”.
- Use the search box in top right corner to type “tabs” and hit enter.
- You will see the Tabs app in the search result and click on it to view the details.
- Click on the “Add” button and connect the app to your Weebly site.
You can view the connected app under “Build” section like the default elements. Drag and drop the Tabs element to insert tabbed content on your site. You can customize the tab heading and the content on the editor to create horizontal tabs in Weebly.
Features of Tabs App
Users can customize the following in tabs app:
- Add unlimited tabs – we recommend restricting to 4 or 5 tabs at the maximum in order not to struck up on the editor. Also more number of tabs will have readability issue on mobile devices.
- Customize the color of active, inactive tabs and the border.
- Drag and drop any elements inside the content area of the tabs. You can maps, contact form, slideshow, etc. inside the content area of the tabs.
- Select one of the themes – standard, line, material and simple – for the tabbed content.
Though Tabs is a native app from Weebly, it is not a user friendly app. The problem is that when you have added content in wrong a tab, there is no way to drag the tab and arrange the sequence. You need to delete the whole element and add it again with the correct sequence.
Custom Tabs for Weebly Site
There are many readymade CSS and jQuery tabs are available on the internet that you can add with little modifications. One such custom tabs is from codedrops made with CSS. This is especially suitable when you only have a text content to add inside the tabs. Below is how the tabs will look like.
Below is the complete CSS code for the horizontal tabs widget. You can insert this on your Weebly site under “Header Code” section of the page.
<style>
.tabs {
position: relative;
width: 100%;
}
.tabs input {
position: absolute;
z-index: 1000;
width: 160px;
height: 40px;
left: 0px;
top: 0px;
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
cursor: pointer;
}
.tabs input#tab-2{
left: 160px;
}
.tabs input#tab-3{
left: 320px;
}
.tabs input#tab-4{
left: 480px;
}
.tabs label {
background: skyblue;
font-size: 16px;
line-height: 40px;
position: relative;
padding: 0 20px;
float: left;
display: block;
color: #333333;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
border-radius: 3px 3px 0 0;
box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}
.tabs label:after {
content: '';
background: #fff;
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
display: block;
}
.tabs input:hover + label {
background: #f1f1f1;
}
.tabs label:first-of-type {
z-index: 4;
box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}
.tab-label-2 {
z-index: 3;
}
.tab-label-3 {
z-index: 2;
}
.tab-label-4 {
z-index: 1;
}
.tabs input:checked + label {
background: #f8f8f8;
z-index: 6;
}
.clear-shadow {
clear: both;
}
.content {
background: rgba(96, 125, 139, 0.16);
position: relative;
width: 100%;
height: 300px;
z-index: 5;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
}
.content div {
position: absolute;
top: 0;
left: 0;
padding: 10px 40px;
z-index: 1;
opacity: 0;
-webkit-transition: opacity linear 0.1s;
-moz-transition: opacity linear 0.1s;
-o-transition: opacity linear 0.1s;
-ms-transition: opacity linear 0.1s;
transition: opacity linear 0.1s;
}
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: opacity ease-out 0.2s 0.1s;
-moz-transition: opacity ease-out 0.2s 0.1s;
-o-transition: opacity ease-out 0.2s 0.1s;
-ms-transition: opacity ease-out 0.2s 0.1s;
transition: opacity ease-out 0.2s 0.1s;
}
.content div h2,
.content div h3{
color: lightslategrey;
padding: 20px;
}
.content div p {
font-size: 20px;
line-height: 28px;
font-style: italic;
text-align: left;
color: #777;
padding-left: 15px;
font-family: Cambria, Georgia, serif;
border-left: 8px solid rgba(63,148,148, 0.1);
}
</style>
Below is the HTML code for the tabs which you can insert using “Embed Code” element.
<section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">This is Tab 1</label> <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> <label for="tab-2" class="tab-label-2">This is Tab 2</label> <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" /> <label for="tab-3" class="tab-label-3">This is Tab 3</label> <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" /> <label for="tab-4" class="tab-label-4">This is Tab 4</label> <div class="clear-shadow"></div> <div class="content"> <!-- This is a content for Tab 1 --> <div class="content-1"> <h2>Heading 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- This is a content for Tab 2 --> <div class="content-2"> <h2>Heading 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- This is a content for Tab 3 --> <div class="content-3"> <h2>Heading 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- This is a content for Tab 4 --> <div class="content-4"> <h2>Heading 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 4</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </section>
We make the first title on the tab (This is tab 1) as 160px and increase to 320px and 480px for further titles. You can adjust it accordingly so that the clickable area fits to the tab title. The advantage of the custom tabs widget is that you can prepare the content offline and paste on your site in few minutes. When you want to rearrange the tabs, you can do that in offline and simply replace the old code with new.
Leave a Reply
Your email is safe with us.