{"id":37316,"date":"2021-03-18T02:28:44","date_gmt":"2021-03-18T01:28:44","guid":{"rendered":"https:\/\/franktielemans.be\/blog\/?page_id=37316"},"modified":"2023-08-22T13:53:00","modified_gmt":"2023-08-22T12:53:00","slug":"tabs-grid","status":"publish","type":"page","link":"https:\/\/franktielemans.be\/blog\/tabs-grid\/","title":{"rendered":"tabs grid"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"37316\" class=\"elementor elementor-37316\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ae290b1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ae290b1\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6149c8e\" data-id=\"6149c8e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4b38435 elementor-tabs-view-vertical tabgrid elementor-widget elementor-widget-tabs\" data-id=\"4b38435\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-7881\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-7881\" aria-expanded=\"false\"><i class=\"fas fa-running\"><\/i><\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-7882\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-7882\" aria-expanded=\"false\"><i class=\"fas fa-user-circle\"><\/i><\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-7883\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"3\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-7883\" aria-expanded=\"false\"><i class=\"fas fa-industry\"><\/i><\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-7884\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"4\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-7884\" aria-expanded=\"false\"><i class=\"fas fa-swimmer\"><\/i><\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-7885\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"5\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-7885\" aria-expanded=\"false\"><i class=\"fab fa-watchman-monitoring\"><\/i><\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-7886\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"6\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-7886\" aria-expanded=\"false\"><i class=\"fas fa-chess-queen\"><\/i><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-7881\" aria-expanded=\"false\"><i class=\"fas fa-running\"><\/i><\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-7881\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-7881\" tabindex=\"0\" hidden=\"false\"><p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-12622 size-full\" src=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/sports-1.jpg\" alt=\"\" width=\"1920\" height=\"750\" srcset=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/sports-1.jpg 1920w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/sports-1-300x117.jpg 300w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/sports-1-1024x400.jpg 1024w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/sports-1-768x300.jpg 768w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/sports-1-1536x600.jpg 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/p><div class=\"content-tab\"><h2><strong>Content tab1<\/strong><\/h2><p>Lorem ipsum dolor sit amet consectetur adipiscing elit montes volutpat, velit nullam laoreet curabitur dictumst.<\/p><p><a href=\"#\">read more<\/a><\/p><\/div><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-7882\" aria-expanded=\"false\"><i class=\"fas fa-user-circle\"><\/i><\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-7882\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-7882\" tabindex=\"0\" hidden=\"hidden\"><p><img decoding=\"async\" class=\"aligncenter wp-image-12577 size-full\" src=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/rennen.jpg\" alt=\"\" width=\"1920\" height=\"750\" srcset=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/rennen.jpg 1920w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/rennen-300x117.jpg 300w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/rennen-1024x400.jpg 1024w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/rennen-768x300.jpg 768w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/rennen-1536x600.jpg 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/p><div class=\"content-tab\"><h2><strong>Content tab2<\/strong><\/h2><p>Lorem ipsum dolor sit amet consectetur adipiscing elit montes volutes volutes volutpat, velit nuullamllam laoreet curabitur dictumst. amet consectetur<\/p><p><a href=\"#\">read more<\/a><\/p><\/div><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"3\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-7883\" aria-expanded=\"false\"><i class=\"fas fa-industry\"><\/i><\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-7883\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"3\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-7883\" tabindex=\"0\" hidden=\"hidden\"><p><img decoding=\"async\" class=\"aligncenter wp-image-12516 size-full\" src=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/swimming.jpg\" alt=\"\" width=\"1920\" height=\"750\" srcset=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/swimming.jpg 1920w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/swimming-300x117.jpg 300w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/swimming-1024x400.jpg 1024w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/swimming-768x300.jpg 768w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/swimming-1536x600.jpg 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/p><div class=\"content-tab\"><h2><strong>Content tab3<\/strong><\/h2><p>Lorem ipsum dolor sit amet consectetur adipiscing elit montes volutpat,.<\/p><p><a href=\"#\">read more<\/a><\/p><\/div><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"4\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-7884\" aria-expanded=\"false\"><i class=\"fas fa-swimmer\"><\/i><\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-7884\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"4\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-7884\" tabindex=\"0\" hidden=\"hidden\"><p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-33506 size-full\" src=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2021\/03\/Pic-Projects.png\" alt=\"\" width=\"1719\" height=\"790\" srcset=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2021\/03\/Pic-Projects.png 1719w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2021\/03\/Pic-Projects-300x138.png 300w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2021\/03\/Pic-Projects-1024x471.png 1024w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2021\/03\/Pic-Projects-768x353.png 768w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2021\/03\/Pic-Projects-1536x706.png 1536w\" sizes=\"(max-width: 1719px) 100vw, 1719px\" \/><\/p><div class=\"content-tab\"><h2><strong>Content tab4<\/strong><\/h2><p>Lorem ipsum dolor sit amet consectetur adipiscing elit montes volutpat, velit nullam laoreet curabitur dictumst. ipsum dolor sit amet con<\/p><p><a href=\"#\">read more<\/a><\/p><\/div><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"5\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-7885\" aria-expanded=\"false\"><i class=\"fab fa-watchman-monitoring\"><\/i><\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-7885\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"5\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-7885\" tabindex=\"0\" hidden=\"hidden\"><p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-12515 size-large\" src=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/cycling-1024x400.jpg\" alt=\"\" width=\"800\" height=\"313\" srcset=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/cycling-1024x400.jpg 1024w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/cycling-300x117.jpg 300w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/cycling-768x300.jpg 768w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/cycling-1536x600.jpg 1536w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/cycling.jpg 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p><div class=\"content-tab\"><h2><strong>Content tab5<\/strong><\/h2><p>Lorem ipsumsum dolor sit asum dolor sit a dolor sit amet consectetur adipiscing elit montes volutpat, velit nullam laoreet curabitur dictumst.<\/p><p><a href=\"#\">read more<\/a><\/p><\/div><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"6\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-7886\" aria-expanded=\"false\"><i class=\"fas fa-chess-queen\"><\/i><\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-7886\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"6\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-7886\" tabindex=\"0\" hidden=\"hidden\"><p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-12514 size-full\" src=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/skiurlaub-flachau-ski-amade-3.jpg\" alt=\"\" width=\"1920\" height=\"750\" srcset=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/skiurlaub-flachau-ski-amade-3.jpg 1920w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/skiurlaub-flachau-ski-amade-3-300x117.jpg 300w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/skiurlaub-flachau-ski-amade-3-1024x400.jpg 1024w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/skiurlaub-flachau-ski-amade-3-768x300.jpg 768w, https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2020\/04\/skiurlaub-flachau-ski-amade-3-1536x600.jpg 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/p><div class=\"content-tab\"><h2><strong>Content tab6<\/strong><\/h2><p>Lorem ipsum dolor sit amet consectetur adipiscing elit montes volutpat, velit nullam laoreet<\/p><p><a href=\"#\">read more<\/a><\/p><\/div><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-404deb4 e-flex e-con-boxed e-con e-parent\" data-id=\"404deb4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d94ec4 elementor-widget elementor-widget-code-highlight\" data-id=\"4d94ec4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.tabgrid .elementor-tab-mobile-title {\n    display: none !important;\n}\n\n\n.tabgrid .elementor-tabs-wrapper {\n    display: grid;\n    grid-template-columns: repeat(3,1fr);\n    grid-auto-rows: 240px;\n    grid-gap: 20px;\n    padding-right: 20px;\n    width: 50% !important;\n}\n\n.tabgrid .elementor-tabs {\n    padding: 20px;\n}\n\n.tabgrid .elementor-tab-desktop-title {\nbackground: #f1f1f1;\nborder-radius: 20px;\ndisplay: flex;\njustify-content: center;\nalign-items: center;\ntransition: 0.5s;\n\n}\n\n.tabgrid .elementor-tab-content a {\n    color:white;\n    display: inline-block;\n    background: skyblue;\n    padding: 10px 40px;\n    border-radius: 25px;\n    text-transform: uppercase;\n    font-size: 14px;\n    letter-spacing: 2px;\n    transition: 0.5s;\n    margin-top: 15px;\n}\n\n\n.tabgrid .elementor-tab-content a:hover {\n    background: lightblue;\n}\n\n\n\n.tabgrid .fas,\n.tabgrid .fab\n{\n    background: rgba(0,0,0,0.2);\n    display: inline-block;\n    width: 90px;\n    height: 90px;\n    display: grid;\n    place-items: center;\n    border-radius: 50%;\n    position: relative\n}\n\n\n.tabgrid .fas:after,\n.tabgrid .fab:after {\n    content: \"text\";\n    position: absolute;\n    bottom: -30px;\n    font-size: 18px;\n    \n}\n\n\n\n\n.tabgrid .elementor-tab-desktop-title.elementor-active {\n    background: skyblue !important;\n}\n\n.tabgrid .elementor-tabs-content-wrapper {\n    \n\n    width: 50% !important;\n    height: 498px;\n}\n\n.tabgrid .elementor-tab-content {\n    padding: 0;\n    background:  #f1f1f1;\n   border-radius: 20px;\n \/* clip-path:ellipse(0% 0% at 100% 0% );*\/\n \/*transition: opacity 0.5s 0s ease-in, clip-path 0.5s ease-in  ;*\/\n display: block !important;\n position: absolute; \ntransform: translateX(20px);\ntransition: all 0.5s;\n opacity: 0;\n}\n\n.tabgrid .elementor-tab-content.elementor-active {\n\/*clip-path:ellipse(140% 200% at 100% 0%);*\/\n opacity: 1;\n transform: translateX(0px);\n}\n\n\n\n.content-tab {\n    padding: 30px;\n             display: flex;\n         flex-direction: column;\n         justify-content: center;\n         height: 236px;\n}\n\n.tabgrid .aligncenter {\n    width: 100%;\n    height: 250px;\n    object-fit: cover;\n        border-radius: 20px 20px 0 0 ;\n}\n\n@media screen and (max-width: 1024px) {\n    \n    \n    .tabgrid .elementor-tabs-wrapper {\n    grid-template-columns: repeat(2,1fr);\n    grid-auto-rows: 185px;\n    width: 50% !important;\n}\n\n.tabgrid .elementor-tabs-content-wrapper {\n    width: 50% !important;\n      height: 498px;\n}\n\n.content-tab {\n    padding: 30px;\n             display: flex;\n         flex-direction: column;\n         justify-content: center;\n         height: 330px;\n}\n\n\n\n\n}\n\n@media screen and (max-width: 767px) {\n    \n    .tabgrid .elementor-tabs-wrapper,\n    .tabgrid .elementor-tabs-content-wrapper{\n        width: 100% !important;\n        grid-auto-rows: 100px;\n        grid-gap: 5px;\n    }\n    \n    \n    \n   .tabgrid .elementor-tabs {\n       padding: 0;\n   } \n    \n    \n.tabgrid .elementor-tabs-wrapper {\n    margin-bottom: 10px;\n    padding-right: 0;\n}\n\n\n.tabgrid .elementor-tab-desktop-title {\n    border-radius: 8px;\n}\n\n.aligncenter {\n    height: 100px;\n}\n\n\n.tabgrid .fas,\n.tabgrid .fab\n{\n    background: rgba(0,0,0,0.2);\n    display: inline-block;\n    width: 60px;\n    height: 60px;\n    display: grid;\n    place-items: center;\n    border-radius: 50%;\n}\n    \n}\n\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>This is a tabs widget modified in a grid layout and with custom animations. All done with CSS<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_oct_exclude_from_cache":false,"footnotes":""},"categories":[42],"tags":[84],"class_list":["post-37316","page","type-page","status-publish","hentry","category-widget-custom-styling","tag-tabs-widget"],"_links":{"self":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages\/37316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/comments?post=37316"}],"version-history":[{"count":0,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages\/37316\/revisions"}],"wp:attachment":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/media?parent=37316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/categories?post=37316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/tags?post=37316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}