How to Add Tabbed Content in WordPress Posts and Pages


How to Add Tabs to WordPress Post and Pages
Gloria Russell

If you’re trying to condense a lot of information into as little of space as possible, tabs are quite useful. For example, let’s say you have five paragraphs on your site and you want to shorten the visual length of the webpage. You could place each of those five paragraphs into their own tabs and greatly shorten the length of the page. That is, as long as it makes sense to put content into the tabs.

WonderPlugin
Tasha Martin

@import url(https://fonts.googleapis.com/css?family=Open+Sans); #wonderplugincarousel-30 .amazingcarousel-image { position: relative; padding: 4px; } #wonderplugincarousel-30 .amazingcarousel-image img { display: block; width: 100%; max-width: 100%; border: 0; margin: 0; padding: 0; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } #wonderplugincarousel-30 .amazingcarousel-title { position:relative; font:14px “Open Sans”, sans-serif; color:#333333; margin:6px; text-align:center; text-shadow:0px 1px 1px #fff; } #wonderplugincarousel-30 .amazingcarousel-list-container { padding: 16px 0; } #wonderplugincarousel-30 .amazingcarousel-item-container { text-align: center; padding: 4px; background-color: #fff; border: 1px solid #ddd; -moz-box-shadow: 0px 0px 5px 1px rgba(96, 96, 96, 0.1); -webkit-box-shadow: 0px 0px 5px 1px rgba(96, 96, 96, 0.1); box-shadow: 0px 0px 5px 1px rgba(96, 96, 96, 0.1); } #wonderplugincarousel-30 .amazingcarousel-prev { left: 0%; top: 50%; margin-left: -48px; margin-top: -16px; } #wonderplugincarousel-30 .amazingcarousel-next { right: 0%; top: 50%; margin-right: -48px; margin-top: -16px; } #wonderplugincarousel-30 .amazingcarousel-nav { position: absolute; width: 100%; top: 100%; } #wonderplugincarousel-30 .amazingcarousel-bullet-wrapper { margin: 4px auto; } .amazingcarousel-socialmedia-button { display: inline-block; margin: 4px; }.amazingcarousel-socialmedia-button a { box-shadow: none; }.amazingcarousel-socialmedia-icon { display:table-cell; width:32px; height:32px; font-size:18px; border-radius:50%; color:#fff; vertical-align:middle; text-align:center; cursor:pointer; padding:0;}.amazingcarousel-socialmedia-rotate { transition: transform .4s ease-in; } .amazingcarousel-socialmedia-rotate:hover { transform: rotate(360deg); }
Big Buck Bunny
Elephant Dreams
Daffodil Flowers
Dandelion
Golden Wheat Field
Night In The City
Sakura Trees
Autumn

Be the first to comment

Leave a Reply

Your email address will not be published.


*