Ir para o conteúdo principal

Como usar o módulo de código no Divi Builder

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

O módulo de código é uma tela em branco que permite adicionar código à sua página, como códigos de plug-in curtos ou código HTML estático. Se você quiser usar um plugin de terceiros, por exemplo, um plugin de deslizante Em terceiro lugar, você pode simplesmente colocar o shortcode do plugin em um módulo de código padrão ou fullwidth para exibir o elemento sem impedimentos.

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

Antes de poder adicionar um módulo de código à sua página, você deve primeiro acessar o Divi Builder. Quando o tema Divi estiver instalado no seu site, você notará um botão Use o Divi Builder acima do editor sempre que você criar uma nova página.

Clicar neste botão ativa o Divi Builder, que lhe dá acesso a todos os módulos do Divi Builder. Então clique no botão Use o Visual Builder para iniciar o gerador no modo visual.

Você também pode clicar no botão Use o Visual Builder quando estiver navegando em seu site upstream se você estiver logado no seu painel do WordPress.

botão divi construtor módulo blog divi

Uma vez inserido no 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ê iniciar uma nova página, não se esqueça de adicionar uma linha à sua página primeiro.

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 inserir a palavra "código" e pressionar Enter para pesquisar e adicionar automaticamente o módulo de código! Uma vez que o módulo é adicionado, você será bem-vindo com a lista de opções do módulo. Essas opções são separadas em três grupos principais: Conteúdo , Projeto et avançado .

Caso de uso, adicionando uma folha de estilos maçante para animar o conteúdo em uma página individual

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

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 554.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

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

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

Tudo o que você precisa fazer é adicionar algumas classes CSS para animar qualquer elemento da sua página de classe CSS na sua página. Neste exemplo, vou saltar o botão quando a página for carregada.

Nas configurações do módulo Button, na guia Advanced, insira as duas classes "animated" e "bounce" na caixa de texto CSS Class.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Agora o botão salta quando a página é carregada.

Dica: Às vezes, a adição de código com quebras de linha impedirá que o código funcione. É melhor criar seu código em um editor de texto e colá-lo no módulo de código.

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 nesta guia.

Conteúdo

Você pode colocar qualquer código HTML, CSS ou JavaScript que deseja exibir na página no local atual. Somente editores e administradores podem publicar HTML não filtrado, o que significa que o código pode ser removido do módulo se for usado por um autor ou colaborador. Você também pode colocar códigos curtos no módulo. Esses códigos de acesso serão exibidos dentro da coluna pai sem nenhum wrapper de módulo Divi adicional.

Rótulo de Administração

Isso mudará a tag do módulo no gerador para fácil identificação. Ao usar a exibição WireFrame no Visual Builder, essas etiquetas aparecerão no bloco do módulo da interface do Divi Builder.

Opções de design de código

Na guia Design, você encontrará todas as opções de estilo do módulo, como fontes, cores, tamanho e espaçamento. Esta aba permite que você altere a aparência do seu módulo. Cada módulo Divi tem uma longa lista de parâmetros de design que você pode usar para modificar praticamente qualquer coisa.

Largura máxima

Qualquer valor inserido aqui limita a largura de qualquer conteúdo processado no módulo de código para o 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.

Código de opções avançadas de código

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

ID CSS

Insira um ID CSS fácil de usar para este módulo. Um identificador 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 as classes CSS opcionais para usar neste 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 em seu tema Divi Child ou no CSS personalizado que você adiciona à sua página ou site usando as opções de tema Divi ou as configurações da página Divi Builder.

CSS personalizado

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

visibilidade

Esta opção permite controlar os dispositivos nos quais seu módulo aparece. Você pode optar por desativar seu módulo em tablets, smartphones ou desktops 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.

Isso é tudo para este Tutoriel.

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
2 ações
ação2
chilrear
Enregistrer
Whatsapp