Como usar entradas CSS personalizadas integradas da Divi para edição responsiva avançada

Divi possui edição de design responsiva integrada que torna extremamente fácil ajustar o estilo do seu site no desktop, tablet ou tela do telefone (sem saber CSS). Parte da edição responsiva incorporada do Divi inclui um método simplificado para fazer alterações de design responsivo mais avançadas usando CSS customizado. Isso é muito mais conveniente do que depender de uma folha de estilo externa com consultas de mídia. Você pode até fazer ajustes no CSS visualmente em tempo real para cada uma das telas do dispositivo, eliminando muitas das suposições do design responsivo.

Neste tutorial, vou mostrar como fazer alterações convenientes no design responsivo usando CSS personalizado para que você possa fazer retoques de design avançados que podem não estar disponíveis nas opções de design integradas do Divi.

Vamos começar.

Pontos de interrupção integrados da Divi para edição responsiva

Divi tem três pontos de interrupção responsivos gerais (pontos onde o design muda com base na largura do navegador) que são integrados às configurações de qualquer elemento no Divi Builder. Esses três pontos de interrupção têm como objetivo principal facilitar as configurações de design específicas para telas de desktops, tablets e telefones.

Os três principais pontos de interrupção responsivos da Divi para telas de desktops, tablets e telefones são os seguintes:

• Desktop: 981 px e superior
• Tablet: entre 980 px e 768 px
• Celular: 767 px e abaixo

Esses três pontos de interrupção são os mesmos em todas as guias de design responsivo em todo o Divi builder, não apenas para CSS personalizado avançado. Portanto, toda vez que você implanta as guias de design responsivo, qualquer estilo feito nessas guias será exibido dentro da faixa desses três pontos de interrupção responsivos principais.

Além disso, vale a pena mencionar que esses pontos de interrupção gerais para exibições de dispositivos não são os únicos pontos de interrupção integrados à estrutura do Divi Theme. Você pode aprender mais sobre isso em nosso artigo sobre como identificar os pontos de interrupção responsivos do Divi.

Compreendendo as caixas de entrada CSS personalizadas da Divi

Quando você personaliza um elemento (seção, linha ou módulo) no construtor Divi, cada opção de design corresponde (ou visa) uma parte específica desse elemento. Por exemplo, ao editar um módulo de texto, você pode direcionar qualquer parte desse módulo usando as configurações embutidas (ou seja, Fonte do Título 2, Preenchimento esquerdo, etc…).

Da mesma forma, quando você personaliza um elemento Divi (seção, linha ou módulo) usando as caixas de entrada CSS personalizadas avançadas, cada caixa de entrada corresponderá (ou terá como destino) a totalidade ou certas partes desse elemento Divi. O número de caixas CSS personalizadas disponíveis será diferente dependendo do elemento que você está estilizando. Um módulo de texto pode ter apenas três caixas de entrada de elemento CSS personalizado (antes, principal e depois), mas um módulo de call to action terá caixas adicionais para título, descrição e botão. Isso ocorre porque o módulo tem mais partes que podem ser direcionadas nesse elemento do módulo.

Aqui está uma ilustração das diferentes caixas de entrada CSS personalizadas disponíveis para o módulo Call to Action.

Cada caixa de entrada CSS customizada tem como alvo uma classe CSS específica dentro do elemento. Para ver a classe que está sendo direcionada para um elemento específico, simplesmente passe o mouse sobre o elemento e clique no ícone do ponto de interrogação. Lá você verá a classe CSS sendo direcionada.

Portanto, você não precisa adicionar uma classe CSS ao seu snippet CSS na caixa de entrada. Se você fizer isso, o código não funcionará.

Em vez disso, basta adicionar as propriedades CSS diretamente à caixa que você deseja aplicar à classe que já está sendo direcionada.

Como adicionar CSS personalizado a pontos de interrupção de design responsivo

Para acessar os três principais pontos de interrupção do design responsivo para qualquer uma das caixas de entrada css, simplesmente passe o mouse sobre o elemento e clique no ícone do tablet. Em seguida, você verá as três guias de design responsivo.

Agora, tudo o que você precisa fazer é usar as guias para adicionar CSS a qualquer uma das três telas do dispositivo (desktop, tablet e telefone).

Por exemplo, digamos que você queira que o botão promocional de uma frase de chamariz ocupe toda a largura do módulo no tablet e no telefone, mas não no desktop. Você selecionaria a guia do tablet na caixa de entrada do botão Promo e adicionaria “display: block;”.

Observe que quando você seleciona a guia da mesa gráfica, o modo de visualização do Divi Builder muda para o modo de visualização da mesa digitalizadora (largura de 768px) para uma melhor visualização de como seu design ficará em tempo real.

Dispositivos menores herdam o CSS de dispositivos maiores por padrão

Por padrão, o código aplicado à guia do tablet também será herdado pela tela do telefone. Para ajudar a nos lembrar disso, Divi adiciona um código de espaço reservado cinza à caixa de entrada com o mesmo código que foi adicionado à tela do tablet.

A razão pela qual a tela do telefone herda a tela do tablet é porque o ponto de interrupção real (consulta de mídia) para a tela do tablet no back-end está definido como “largura máxima: 980px;” o que significa que o código adicionado ao tablet também será aplicado ao telefone porque a tela do telefone tem menos de 980 px de largura. Portanto, se desejar aplicar um estilo diferente ao telefone, será necessário adicionar um código adicional à caixa de entrada da guia Telefone.

NOTA: Se você também adicionar CSS personalizado à tela do telefone, Divi mudará de forma inteligente a consulta de mídia para tablet no back-end para um intervalo mais preciso entre 768 px e 980 px (ou largura máxima: 980 px e largura mínima: 768 px).

O que o CSS personalizado é aplicado no back-end

Digamos que adicionamos CSS personalizado a todas as três guias responsivas (desktop, tablet e telefone).

Na área de trabalho, posicionamos o botão na parte inferior direita do módulo.

No tablet, substituímos o código da área de trabalho e simplesmente expandimos o botão até a largura total do módulo.

No telefone, substituímos o CSS do tablet e retornamos a exibição ao normal.

Se inspecionarmos o CSS no back-end, você verá que Divi organiza o código com as seguintes consultas de mídia para que você não precise:

Área de Trabalho:

@media only screen and (min-width: 981px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

Tábua:

@media only screen and (max-width: 980px) and (min-width: 768px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: block;
}

Telefone

@media only screen and (max-width: 767px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: inline-block;
}

Como o CSS é armazenado no Divi?

Como parte das otimizações de velocidade integradas do Divi, todos os estilos dentro do Divi Builder (incluindo o CSS personalizado) serão combinados, minimizados e armazenados como um arquivo CSS estático para carregamento mais rápido da página. Portanto, se você deseja ignorar a necessidade de adicionar CSS personalizado por meio de um tema filho, pode aproveitar as vantagens das entradas CSS responsivas integradas sem ter que se preocupar em desacelerar seu site.

Para mais informações, confira nosso post sobre como acelerar o seu site Divi.

Pensamentos finais

Esperançosamente, este post ajudará você a entender um pouco melhor como aproveitar as vantagens das caixas de entrada CSS personalizadas do Divi para fazer alterações de design responsivas convenientes em seu site.

Para a maioria das pessoas, não haverá necessidade de se aventurar na guia avançada para adicionar CSS personalizado ao seu design. Divi tem tantas opções integradas que até mesmo usuários avançados raramente encontrarão a necessidade de usar CSS personalizado. No entanto, se chegar a hora de você precisar de um estilo avançado, é útil saber como é fácil fazer no Divi.

Qual tem sido sua experiência com as entradas CSS personalizadas do Divi?