This is a demo page of a layout made by Ania Romańska from Divi Lover. It is available to download and there is a step by step tutorial on how to create it. Read the blog post.

<script><!-- [et_pb_line_break_holder] -->jQuery(document).ready(function($) {<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> /* Blurbs as Tabs */<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $('.tab-title').each(function () { <!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> var section_id = $(this).find("a").attr("href");<!-- [et_pb_line_break_holder] --> $(this).find("a").removeAttr("href");<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $(this).click(function() {<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $(this).siblings().removeClass("active-tab");<!-- [et_pb_line_break_holder] --> $(this).addClass("active-tab");<!-- [et_pb_line_break_holder] --> $('.tab-content').hide();<!-- [et_pb_line_break_holder] --> $(section_id).show();<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --></script>
<style><!-- [et_pb_line_break_holder] -->/* -------------------------------------------- <!-- [et_pb_line_break_holder] --> ------ Blurbs as Tabs Custom Styling ------<!-- [et_pb_line_break_holder] --> -------------------------------------------- */<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/* Style the Blurbs Tabs */<!-- [et_pb_line_break_holder] -->#blurb-tabs .et_pb_column {<!-- [et_pb_line_break_holder] --> display:flex;<!-- [et_pb_line_break_holder] --> align-items:center;<!-- [et_pb_line_break_holder] --> justify-content:center;<!-- [et_pb_line_break_holder] --> flex-wrap:wrap;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->#blurb-tabs .tab-title {<!-- [et_pb_line_break_holder] --> width:25%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/* Hover Styles for Blurb Tabs - Titles */<!-- [et_pb_line_break_holder] -->#blurb-tabs .tab-title {<!-- [et_pb_line_break_holder] --> transition:all .3s ease-in-out;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->#blurb-tabs .tab-title:hover {<!-- [et_pb_line_break_holder] --> cursor:pointer; <!-- [et_pb_line_break_holder] --> background:#222; /* Tab hover background color */<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->#blurb-tabs .tab-title.active-tab {<!-- [et_pb_line_break_holder] --> background:#D9DFE2; /* Active tab background color */<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->#blurb-tabs .tab-title.active-tab .et_pb_blurb_container h4 a {<!-- [et_pb_line_break_holder] --> color:#000; /* Active tab title color */<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->#blurb-tabs .tab-title.active-tab .et-pb-icon {<!-- [et_pb_line_break_holder] --> color:#666!important; /* Active tab icon color */<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/* Tab Titles Mobile Styles */<!-- [et_pb_line_break_holder] -->@media (max-width: 767px ) {<!-- [et_pb_line_break_holder] --> #blurb-tabs .tab-title {<!-- [et_pb_line_break_holder] --> width:50%;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> #blurb-tabs .tab-title .et_pb_main_blurb_image {<!-- [et_pb_line_break_holder] --> margin-bottom:10px; /* Reduce icon bottom margin */<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@media (max-width: 479px ) {<!-- [et_pb_line_break_holder] --> #blurb-tabs .tab-title {<!-- [et_pb_line_break_holder] --> width:100%;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> #blurb-tabs .tab-title .et_pb_blurb_content { /* This moves icon to the right */<!-- [et_pb_line_break_holder] --> display:flex;<!-- [et_pb_line_break_holder] --> align-items:center;<!-- [et_pb_line_break_holder] --> justify-content:flex-start;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> #blurb-tabs .tab-title .et_pb_main_blurb_image { /* Fix icon margins on mobile */<!-- [et_pb_line_break_holder] --> margin-bottom:0;<!-- [et_pb_line_break_holder] --> margin-right:30px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/* Hide the tabs content/sections */<!-- [et_pb_line_break_holder] -->.tab-content {<!-- [et_pb_line_break_holder] --> display:none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style>

Discover Lorem Ipsum

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

Design Lorem Ipsum

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

Develop Lorem Ipsum

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

Deliver Lorem Ipsum

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

Pin It on Pinterest

Share This
Call Now Button