post #1799

Tabs personalizadas com JetPlugin e CSS

Publicado em: 28/06/2022 / Atualizado em: 13/07/2022

Categorias: Blog CSS Elementor JetPlugins JetTabs Wordpress

É 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: