{"id":5927,"date":"2020-11-12T13:47:14","date_gmt":"2020-11-12T13:47:14","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=5927"},"modified":"2022-08-29T15:26:20","modified_gmt":"2022-08-29T15:26:20","slug":"wordpress-tabs","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/","title":{"rendered":"How to Create Smart and Beautiful WordPress Tabs"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Fun fact: did you notice that even wordpress.org uses WordPress tabs to chunk information?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Check this out:<img loading=\"lazy\" class=\"aligncenter wp-image-5935\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/10\/smush.jpg\" alt=\"WordPress tabs on wordpress.org\" width=\"650\" height=\"317\" \/><\/span><\/p>\n<p style=\"text-align: center;\"><i><span style=\"font-weight: 400;\">Source: wordpress.org<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">WordPress tabs are a type of navigation that can improve the customer experience. How so? By not cluttering a lot of info into paragraphs, but using a better organizing method.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Tabbed navigation is similar to files organization in an office or at the doctor.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Not to be confused with menus. Most of the time, <a href=\"https:\/\/colibriwp.com\/blog\/wordpress-menus\/\">menu<\/a> items open up a separate page with its own URL. Here no URL change will happen.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Not to be confused with <a href=\"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/\">accordions<\/a> either. An accordion will stack information vertically. Headers can be clicked to reveal or hide content associated with them.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, why would your WordPress site need tabs? To improve navigation, usability, and therefore customer satisfaction and conversion rates.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Plenty of reasons, right?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Tabbed navigation is still a common practice in e-commerce to present products. Many visitors already recognize tabs or expect tabs in certain places.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s say you sell electronics. You will need to present lots of product info:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Product description<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Product photos<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Technical specs<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Reviews<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Warranty info<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Shipping details<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Tabs will help you to compress big content into limited spaces.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, in this article, we will start by providing you with some tab design inspiration. Next, we\u2019ll go a bit into some best case practices. In the end, I\u2019ll guide you through the technical WordPress tabs aspects.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s get going!<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Tabs: some inspiration<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now, let\u2019s check some websites out there that use tabs. I\u2019m definitely in for proof. Images can explain better things than words, don\u2019t you think?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let&#8217;s see, eBay is using tabs for product description. All the tech specs go under \u201cDescription\u201d, and they gathered \u201cshipment and payment\u201d under the same tab. I\u2019m pretty sure they\u2019ve tested the layout because, for a site with such traffic, any change can affect conversion rates heavily.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5931\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/10\/ebay-tabs.jpg\" alt=\"eBay is using tabs\" width=\"650\" height=\"655\" \/><\/p>\n<p style=\"text-align: center;\"><i><span style=\"font-weight: 400;\">Source: ebay.com<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">BobbyBrown cosmetics goes for a minimalist approach, the tabs don\u2019t have a button-like approach. They use an underline to inform the user that he selected a tab.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5929\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/10\/Bobby-Brown-tabs.jpg\" alt=\"Tabs on the BobbyBrown cosmetics website\" width=\"650\" height=\"253\" \/><\/p>\n<p style=\"text-align: center;\"><i><span style=\"font-weight: 400;\">Source: bobbibrowncosmetics.com<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">I\u2019m always feeling lost when I go to booking.com. They have lots of information you need to scroll down for. Recently I noticed that they made some changes to reduce scroll, but still, it ain\u2019t enough (for me).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Trivago, on the other hand, seems to organize information a little better. I know it\u2019s hard to do when you need to provide so many details.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">They use tabs to organize hotel information such as overview, info, photos, reviews, deals.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5934\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/10\/Trivago-tabs.jpg\" alt=\"Tabs used by Trivago\" width=\"600\" height=\"347\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: trivago.com<\/em><\/p>\n<p><span style=\"font-weight: 400;\">Tabs are a common practice on websites that offer travel packages such as flights, accommodations, <a href=\"https:\/\/www.discovercars.com\/\" target=\"_blank\" rel=\"noopener\">car rentals<\/a>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Expedia does it nicely when it presents its offering for 6 services. The experience is clean and unintrusive.<\/span><\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" class=\"aligncenter wp-image-5932\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/10\/Expedia.jpg\" alt=\"Expedia is using tabs for services\" width=\"800\" height=\"271\" \/><i><span style=\"font-weight: 400;\">Source: expedia.com<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">Honda uses tabs in a more creative way. It mixes images and videos alongside text to sell a great Honda experience.<\/span><\/p>\n<div class='embed-container'><a href=\"https:\/\/share.getcloudapp.com\/d5upJBym\"><img loading=\"lazy\" src=\"https:\/\/p221.p4.n0.cdn.getcloudapp.com\/items\/d5upJBym\/Screen%20Recording%202020-10-29%20at%2002.29.55.65%20PM.gif\" alt=\"Screen Recording 2020-10-29 at 02.29.55.65 PM.gif\" width=\"1328\" height=\"596\" \/><\/a><\/div>\n<p><i><span style=\"font-weight: 400;\">Source: automobiles.honda.com<\/span><\/i><\/p>\n<h2><span style=\"font-weight: 400;\">WordPress tabs: best case practices<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Simply put, tabs are a set of buttons usually set horizontally. This is why their design should be really close to a button design.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, let\u2019s look a bit at the best case practices for using tabs in your WordPress website:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Don\u2019t go for multiple rows, it will make it hard for the user to remember which tab he visited. If you realize you need more rows, this means you\u2019ll need to find a better way to organize information<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Keep tab headings short and sweet<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use tabs only when users don&#8217;t need to see content from multiple tabs at the same time<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Clearly indicate which tab is active<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The unselected tabs should remain visible, and not lost in the background<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Make sure your tab appear like separate buttons that you can interact with<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Add hover effects on tabs as you would on buttons<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use tabs when you have between two and nine different categories of content<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The categories are similar in nature, a user would expect to see them there (eg: product description, product reviews)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Don\u2019t use tabbed navigation when you intend to insert a \u201cmore\u201d link<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">You can use gradients to add depth and dimension to the tabs.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">How to create WordPress tabs using page builders<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">I am using the Colibri page builder for the purpose of this exercise.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Tabs can be found as a component.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can find components when you click on \u201c+\u201d from the upper left.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-5928 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/10\/Add-WordPress-components.jpg\" alt=\"Add WordPress components\" width=\"654\" height=\"454\" \/><\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-5933 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/10\/The-Tab-component.jpg\" alt=\"The WordPress Tab component\" width=\"671\" height=\"706\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Go to Components and drag the \u201cTab\u201d component to your website preview on the right.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, you can play with the customization options on the left.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5930\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/10\/Customize-the-tab.jpg\" alt=\"Customize the WordPress tab\" width=\"800\" height=\"388\" \/><\/p>\n<p><span style=\"font-weight: 400;\">When your tab looks like you want to, just hit \u201cPublish\u201d and you\u2019re live.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Tabs: a plugin to help you with setting up WordPress tabs<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">If you run an <a href=\"https:\/\/blog.sellfy.com\/starting-online-store\/\">online store<\/a> integrated with WooCommerce, in WordPress there are two very popular plugins for WordPress tabs.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"wp-image-5938 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/10\/WooCommerce-tabs.jpg\" alt=\"WooCommerce WordPress tabs\" width=\"600\" height=\"205\" \/><\/p>\n<p style=\"text-align: center;\"><i><span style=\"font-weight: 400;\">Source: wordpress.org<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">But, I want to introduce you to a favorite of mine: Tabs.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"wp-image-5937 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/10\/Tabs-WordPress-plugin.jpg\" alt=\"Tabs WordPress plugin\" width=\"700\" height=\"228\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: wordpress.org<\/em><\/p>\n<p><span style=\"font-weight: 400;\">Tabs has a lot of customization options that you\u2019ll soon be fond of. Why I feel that you will love it too:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">You will design mobile-friendly WordPress tabs<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">You can work with shortcodes<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Tabs works by drag and drop<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It has 20+ design templates so that you don\u2019t need to bother with inspiration<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">500+ Google Fonts<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Tabs works with most of the themes out there.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">WordPress tabs: the conclusions<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Tabs are here to make information easier to digest in a world of shorter attention spans. In terms of tools, there are plenty of them out there that can help you out with setting up WordPress tabs. This is the easiest thing to do.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">More important is to figure out what kind of information can fit in your tabs. If you\u2019re not sure that a tab will help you organize certain information, you can always do some user research or an A\/B test. Our own assumptions are not enough. Real behavioral data will lead you to the right answer.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At the end of the day, you need to care about usability, chunking, and website speed.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, if you liked this article, and you want to learn more about how to <\/span><a href=\"https:\/\/colibriwp.com\/blog\/web-design-trends\/\"><span style=\"font-weight: 400;\">design a WordPress website<\/span><\/a><span style=\"font-weight: 400;\">, make sure to subscribe to our <\/span><a href=\"https:\/\/www.youtube.com\/channel\/UCN3ZM-C7TJgklVfseVHamHQ\"><span style=\"font-weight: 400;\">Youtube channel<\/span><\/a><span style=\"font-weight: 400;\"> and follow us on<\/span><a href=\"https:\/\/twitter.com\/WpColibri\"><span style=\"font-weight: 400;\"> Twitter<\/span><\/a><span style=\"font-weight: 400;\"> and <\/span><a href=\"https:\/\/www.facebook.com\/ColibriWP\"><span style=\"font-weight: 400;\">Facebook!<\/span><\/a><\/p>\n<p>[sibwp_form id=1]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Fun fact: did you notice that even wordpress.org uses WordPress tabs to chunk information? Check this out: Source: wordpress.org WordPress tabs are a type of navigation that can improve the customer experience. How so? By not cluttering a lot of info into paragraphs, but using a better organizing method. Tabbed navigation is similar to files&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/\">Read more<\/a><\/p>\n","protected":false},"author":6,"featured_media":5940,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[159],"tags":[200],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create WordPress tabs. Best case practices &amp; inspiration included<\/title>\n<meta name=\"description\" content=\"How to create smart and beautiful WordPress tabs. check the best case practices. Get inspired by Honda, Expedia, Trivago and eBay.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create WordPress tabs. Best case practices &amp; inspiration included\" \/>\n<meta property=\"og:description\" content=\"How to create smart and beautiful WordPress tabs. check the best case practices. Get inspired by Honda, Expedia, Trivago and eBay.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/\" \/>\n<meta property=\"og:site_name\" content=\"ColibriWP Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-12T13:47:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-29T15:26:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/10\/maksym-kaharlytskyi-Q9y3LRuuxmg-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1278\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alina Belascu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\",\"url\":\"https:\/\/colibriwp.com\/blog\/\",\"name\":\"ColibriWP Blog\",\"description\":\"WordPress know-how to boost your design skills\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/colibriwp.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/10\/maksym-kaharlytskyi-Q9y3LRuuxmg-unsplash.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/10\/maksym-kaharlytskyi-Q9y3LRuuxmg-unsplash.jpg\",\"width\":1920,\"height\":1278,\"caption\":\"WordPress tabs\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/#webpage\",\"url\":\"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/\",\"name\":\"How to create WordPress tabs. Best case practices & inspiration included\",\"isPartOf\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/#primaryimage\"},\"datePublished\":\"2020-11-12T13:47:14+00:00\",\"dateModified\":\"2022-08-29T15:26:20+00:00\",\"author\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\"},\"description\":\"How to create smart and beautiful WordPress tabs. check the best case practices. Get inspired by Honda, Expedia, Trivago and eBay.\",\"breadcrumb\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/colibriwp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create Smart and Beautiful WordPress Tabs\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\",\"name\":\"Alina Belascu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"caption\":\"Alina Belascu\"},\"description\":\"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.\",\"url\":\"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create WordPress tabs. Best case practices & inspiration included","description":"How to create smart and beautiful WordPress tabs. check the best case practices. Get inspired by Honda, Expedia, Trivago and eBay.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/","og_locale":"en_US","og_type":"article","og_title":"How to create WordPress tabs. Best case practices & inspiration included","og_description":"How to create smart and beautiful WordPress tabs. check the best case practices. Get inspired by Honda, Expedia, Trivago and eBay.","og_url":"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/","og_site_name":"ColibriWP Blog","article_published_time":"2020-11-12T13:47:14+00:00","article_modified_time":"2022-08-29T15:26:20+00:00","og_image":[{"width":1920,"height":1278,"url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/10\/maksym-kaharlytskyi-Q9y3LRuuxmg-unsplash.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alina Belascu","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/colibriwp.com\/blog\/#website","url":"https:\/\/colibriwp.com\/blog\/","name":"ColibriWP Blog","description":"WordPress know-how to boost your design skills","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colibriwp.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/#primaryimage","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/10\/maksym-kaharlytskyi-Q9y3LRuuxmg-unsplash.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/10\/maksym-kaharlytskyi-Q9y3LRuuxmg-unsplash.jpg","width":1920,"height":1278,"caption":"WordPress tabs"},{"@type":"WebPage","@id":"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/#webpage","url":"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/","name":"How to create WordPress tabs. Best case practices & inspiration included","isPartOf":{"@id":"https:\/\/colibriwp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/#primaryimage"},"datePublished":"2020-11-12T13:47:14+00:00","dateModified":"2022-08-29T15:26:20+00:00","author":{"@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311"},"description":"How to create smart and beautiful WordPress tabs. check the best case practices. Get inspired by Honda, Expedia, Trivago and eBay.","breadcrumb":{"@id":"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colibriwp.com\/blog\/wordpress-tabs\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colibriwp.com\/blog\/wordpress-tabs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colibriwp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create Smart and Beautiful WordPress Tabs"}]},{"@type":"Person","@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311","name":"Alina Belascu","image":{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","caption":"Alina Belascu"},"description":"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.","url":"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/"}]}},"_links":{"self":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/5927"}],"collection":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/comments?post=5927"}],"version-history":[{"count":2,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/5927\/revisions"}],"predecessor-version":[{"id":11173,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/5927\/revisions\/11173"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media\/5940"}],"wp:attachment":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media?parent=5927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/categories?post=5927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/tags?post=5927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}