Módulo de código

O Módulo de Código

O que é o módulo de código?

O módulo de código é uma tela em branco que permite adicionar código à sua página. Como códigos de plug-ins ou HTML estático. Se você quiser usar um plug-in de terceiros, por exemplo, um plug-in de slider de terceiros. Basta colocar o shortcode do plug-in em um módulo de código padrão ou de largura total para exibir o item desimpedido.

Como adicionar um módulo de código à sua página

Antes de poder adicionar um módulo de código à sua página, primeiro você precisa pular para o Divi Builder. Uma vez que o Divi Theme tenha sido instalado em seu site você notará um botão Usar Divi Builder acima do editor de postagens toda vez que você estiver construindo uma nova página. Clicar neste botão permitirá ao Divi Builder, dar acesso a todos os módulos do Divi. Em seguida, clique no botão Usar o Visual Builder para iniciar o construtor no Modo Visual. Você também pode clicar no botão Usar o Visual Builder ao navegar pelo seu site no front end se estiver logado no seu Painel do WordPress.

Depois de inserir o Visual Builder, você pode clicar no botão cinza para adicionar um novo módulo à sua página. Novos módulos só podem ser adicionados dentro de linhas. Se você estiver iniciando uma nova página, não se esqueça de adicionar uma linha à sua página primeiro. Temos ótimos tutoriais sobre como usar os elementos de linha e seção do Divi.

Localize o módulo de código na lista de módulos e clique nele para adicioná-lo à sua página. A lista de módulos é pesquisável, o que significa que você também pode digitar a palavra “código” e depois clicar em enter para encontrar e adicionar automaticamente o módulo de código! Depois que o módulo for adicionado, você verá a lista de opções do módulo. Essas opções são separadas em três grupos principais: conteúdo, design e avançado.

Exemplo de caso de uso: Adicionando uma folha de estilos externa para animar o conteúdo em uma página individual

Neste exemplo, adicionarei um script de link para importar o Animate.css para adicionar efeitos de animação aos elementos da página. Como o arquivo Animate.css tem muito código, faz sentido carregá-lo somente na página que eu preciso.

Basta adicionar uma seção regular e uma linha de largura total (1 coluna) e adicionar o módulo de código.

Na caixa de texto de conteúdo, adicione o snippet de código.

Agora, tudo o que você precisa fazer é adicionar algumas classes CSS para animar qualquer elemento da sua página de classes CSS para sua página. Neste exemplo, vou fazer o botão saltar ao carregar a página.

Nas Configurações do Módulo do Botão, na guia Avançado, insira as duas clases “animadas” e “devolvidas” na caixa de texto Classe CSS.

Agora o botão irá saltar ao carregar a página.

Opções de Conteúdo de Código

Na aba de conteúdo, você encontrará todos os elementos de conteúdo do módulo, como texto, imagens e ícones. Tudo o que controla o que aparece no seu módulo será sempre encontrado nessa guia.

Conteúdo

Aqui você pode colocar qualquer código HTML, CSS ou JavaScript que você gostaria de exibir na página no local atual. Apenas Editores e Administradores podem postar HTML não filtrado, o que significa que alguns códigos podem ser removidos do módulo se forem usados por um Autor ou Colaborador. Você também pode colocar códigos de acesso no módulo. Esses códigos de acesso serão renderizados dentro da coluna pai sem nenhum wrapper de módulo Divi adicional.

Rótulo de administração

Isso mudará o rótulo do módulo no construtor para fácil identificação. Ao usar a visualização WireFrame no Visual Builder, essas etiquetas aparecerão no bloco do módulo na interface do Divi Builder.

Opções de Design de Código

Dentro da guia de design, você encontrará todas as opções de estilo do módulo, como fontes, cores, dimensionamento e espaçamento. Esta é a guia que você usará para alterar a aparência do seu módulo. Cada módulo Divi tem uma longa lista de configurações de design que você pode usar para alterar praticamente qualquer coisa.

Largura máxima

Qualquer valor inserido aqui restringirá a largura de qualquer conteúdo processado no módulo de código ao valor definido. Por exemplo, inserir 50% no campo de entrada reduzirá o conteúdo do módulo de código para 50% da coluna que o contém.

Opções Avançadas de Código

Na guia avançada, você encontrará opções que os designers da Web mais experientes podem achar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar CSS personalizado a qualquer um dos muitos elementos do módulo. Você também pode aplicar classes e IDs CSS personalizadas ao módulo, que pode ser usado para personalizar o módulo no arquivo style.css do tema filho.

ID CSS

Digite um ID CSS opcional a ser usado para este módulo. Um ID pode ser usado para criar um estilo CSS personalizado ou para criar links para seções específicas de sua página.

Classe CSS

Digite classes CSS opcionais a serem usadas para este módulo. Uma classe CSS pode ser usada para criar um estilo CSS personalizado. Você pode adicionar várias classes separadas por um espaço. Essas classes podem ser usadas no seu Divi Child Theme ou no CSS personalizado que você adiciona à sua página ou ao seu site usando as opções Divi Theme ou Divi Builder Page Settings.

CSS customizado

O CSS personalizado também pode ser aplicado ao módulo e a qualquer um dos elementos internos do módulo. Na seção CSS personalizado, você encontrará um campo de texto no qual poderá adicionar CSS personalizado diretamente a cada elemento. As entradas CSS nessas configurações já estão agrupadas em tags de estilo, portanto, você só precisa inserir regras CSS separadas por ponto e vírgula.

Visibilidade

Esta opção permite controlar em quais dispositivos seu módulo aparece. Você pode optar por desativar seu módulo em tablets, smartphones ou computadores desktop individualmente. Isso é útil se você quiser usar módulos diferentes em dispositivos diferentes ou se quiser simplificar o design móvel eliminando determinados elementos da página.