post
Tabs personalizadas com JetPlugin e CSS
Publicado em: 28/06/2022
É possível personalizar o widget Tabs do Jetplugins para deixar mais atrativo.
Neste exemplo, vamos deixar todos os blocos na horizontal, e que seja possível rolar para a horizontal em dispositivos mobile.
Adicione o código abaixo na seção CSS personalizado, no Elementor pro.
/* Código desenvolvido por: bruno.art.br */ :root { --cor-global-tab: #0001ff; /* Cor elementos ativos */ --colunas-global-tab: 3; /* Total de colunas que vai ter */ --largura-global-pagina: 1100px; /* Tamanho maximo do container */ } @media (max-width: 1024px) { selector .jet-tabs__control-wrapper { overflow-x: scroll; } selector .jet-tabs__control-wrapper { justify-content: start !important; padding: 0 20px; } } selector .jet-tabs__control-wrapper { display: grid; grid-template-columns: repeat(var(--colunas-global-tab), calc(var(--largura-global-pagina)/var(--colunas-global-tab))); max-width: 1216px; width: 100%; align-items: normal; } selector .jet-tabs__control-wrapper > div { text-align: center; padding: 40px 5px; position: relative; min-height: 200px !important; display: flex !important; border: 1px solid #ccc; } selector .jet-tabs__control-inner { width: 100%; } selector .jet-tabs__control-wrapper > div.active-tab { border: 2px solid var(--cor-global-tab); } selector .jet-tabs__control-wrapper > div:after { content:""; border-style: solid; border-width: 20px 20px 0px 20px; border-color: transparent #ccc transparent transparent; position: absolute; right: 10px; bottom: 10px; } selector .jet-tabs__control-wrapper > div.active-tab:after { border-color: transparent var(--cor-global-tab) transparent transparent; } selector .jet-tabs__control-wrapper > div:before { content: ""; background: #ccc; padding: 3px 50px; margin-top: -42px; position: absolute; margin-left: calc(50% - 50px); left: 0; } selector .jet-tabs__control-wrapper > div.active-tab:before { background: var(--cor-global-tab); } selector .jet-tabs__control-wrapper > div .jet-tabs__label-text span { color: var(--cor-global-tab); line-height: 40px; }
Resultado:

Veja seu funcionamento clicando aqui.
Link de compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/1799
ID de Referência: 1799
Sugira uma publicação
Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.