https://youtu.be/1iqjhnHVA9Y

Sempre que editar um módulo, linha ou seção, você notará três guias no pop-up de configurações: Conteúdo, Design e Avançado. Tudo o que você precisa para criar layouts Divi incríveis e aproveitar ao máximo cada módulo pode ser encontrado na guia Conteúdo. No entanto, se você deseja ainda mais controle sobre a aparência do módulo, pode se aventurar na guia Design. Se você é um desenvolvedor e deseja usar seu próprio CSS em vez de usar os controles de design na guia Design, você pode se aventurar ainda mais na guia Avançado. Quando combinados, não há nada que não possa ser personalizado.

Configurações da aba Design

As configurações de design variam de módulo para módulo. Para cada um, adicionamos todas as configurações de design possíveis que você poderia desejar na guia Design. Devido à grande variedade de configurações de design disponíveis para certos módulos, nós os separamos em listas suspensas rotuladas que alternam cada grupo de configurações de design. Há também uma caixa de Opções de pesquisa conveniente acima de todas as opções para tornar a localização de uma opção de design específica muito mais fácil.

Para localizar e usar as Configurações de projeto, basta editar um módulo, linha ou seção existente (ou criar um novo) para abrir o pop-up de configurações. Em seguida, clique na guia Design para exibir as opções de design.

Nessa guia, você consegue fazer praticamente tudo que precisa. As configurações variam dependendo do tipo de módulo que você está editando. Normalmente você encontrará opções para ajustar a tipografia (como tamanho do texto, espaçamento entre letras, altura da linha, etc.), ajustes de espaçamento (como padding e margin, opções de cores (como cor do texto, cor de sobreposição, cores de fundo da coluna) bem como uma série de configurações exclusivas para certos elementos. Utilizar essas opções de design pode criar alguns verdadeiramente únicos.

Configurações avançadas

Na guia Design, criamos tantas opções que você pode fazer quase tudo que pode ser feito com CSS (sem tocar em uma linha de código). Se você for um desenvolvedor, no entanto, pode preferir escrever seu próprio código em vez de usar as configurações de design personalizado. Neste caso, você pode usar a guia Avançado, que pode ser encontrada ao lado da guia Design na janela de configurações modais para módulos, linhas e seções.

Nesta guia, você pode adicionar um ID CSS personalizado ou classe CSS para direcionar e aplicar seu próprio CSS do arquivo style.css do tema filho.

Se você quiser eliminar a necessidade de criar temas filho, pode facilmente direcionar CSS para módulos individuais em páginas individuais, utilizando as opções no menu suspenso Custom CSS. Aqui, dividimos todos os elementos estruturais do módulo e fornecemos campos de área de texto onde você pode digitar seu próprio CSS. Usando este painel, você pode aplicar CSS a partes individuais do módulo. Por exemplo, você pode aplicar CSS personalizado diretamente a um ícone do Blurb ou criar o seu próprio: após o pseudo elemento direto do Divi Builder.

E, finalmente, na lista suspensa de visibilidade, você pode ajustar a visibilidade do seu módulo em telefones, tablets e desktops.