CMS Wordpress 12 Août 2021 Créé par 3mn de lecture

Módulo de código da Divi

Lien de l'article

Sommaire

Procédure

O Divi builder está incluído nos nossos pacotesde alojamento web Wordpress. Se pretender suporte para o DIVI builder, deve subscrever uma licença diretamente no sítio Web Divi do tema Elegent.

Introdução

A LWS oferece 3 plug-ins premium da Elegant Themes (Divi, Bloom e Monarch). Estes são actualizados regularmente. Uma vez cliente da LWS, terá acesso gratuito a estes plugins escolhendo a distribuição 'Divi Builder' ao instalar o Wordpress CMS com o nosso Auto-Installer.

Se tiver um pacote cPanel ou se já tiver instalado o Wordpress com esta distribuição, mas não tiver acesso a todos os temas ou actualizações, informe-nos fornecendo-nos os dados de acesso à área de administração do seu site Wordpress para que um técnico possa atualizar a licença.

Nota: terá de subscrever uma licença Elegant Themes para beneficiar do suporte. A LWS não fornece suporte para estes produtos.

O que é o Módulo de Código Divi?

O módulo Código é uma tela em branco que permite adicionar código à sua página, como códigos curtos de plug-ins ou HTML estático. Se pretender utilizar um plug-in de terceiros, por exemplo, um plug-in de deslizador de terceiros, pode simplesmente colocar o código de acesso do plug-in num módulo de código padrão ou de largura total para apresentar o elemento sem obstáculos.

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

Antes de poder adicionar um módulo de código à sua página, terá primeiro de mudar para o Divi Builder. Depois que o tema Divi for instalado em seu site, você notará um botão Usar Divi Builder acima do editor de postagem sempre que criar uma nova página. Clique neste botão para ativar o Divi Builder, dando-lhe acesso a todos os seus módulos. Em seguida, clique no botão Usar Visual Builder para iniciar o construtor no modo visual. Também pode clicar no botão Utilizar Visual Bu ilder enquanto navega no seu sítio Web na parte da frente, se tiver sessão iniciada no seu painel de controlo do WordPress.

Módulo de código da Divi

Depois de entrar no Visual Builder, pode clicar no botão + cinzento para adicionar um novo módulo à sua página. Os novos módulos só podem ser adicionados dentro de linhas. Se estiver a iniciar uma nova página, não se esqueça de adicionar primeiro uma linha à sua página.

Módulo de código da Divi Localize o módulo de código na lista de módulos e clique nele para o adicionar à sua página. A lista de módulos é pesquisável, o que significa que também pode escrever a palavra "código" e, em seguida, clicar no botão Enter para encontrar e adicionar automaticamente o módulo de código! Assim que o módulo tiver sido adicionado, ser-lhe-á apresentada uma lista de opções para o módulo. Estas opções estão divididas em três grupos principais: Conteúdo, Estilo e Avançado.

Exemplo de caso de utilização: Adicionar uma folha de estilos externa para animar o conteúdo de uma página individual

Neste exemplo, vou adicionar um script de ligação para importar Animate.css para adicionar efeitos de animação aos elementos da página. Como o ficheiro Animate.css tem muito código, faz sentido carregá-lo apenas na página de que necessito.

Basta adicionar uma secção normal e uma linha de largura total (1 coluna) e adicionar o módulo Código.

Módulo de código da Divi

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

Módulo de código da Divi

Agora só tem de adicionar algumas classes CSS para animar qualquer elemento da sua página de classes CSS na sua página. Neste exemplo, vou fazer com que o botão salte quando a página for carregada.

Nas definições do módulo do botão, no separador Avançadas, introduza as duas classes "animated" e "bounce" na caixa de texto da classe CSS.

O botão irá agora saltar quando a página for carregada.

Seguem-se mais alguns exemplos de como pode utilizar o módulo de código:

Adicionar blocos de código javascript ou bibliotecas que se aplicam apenas à sua página.
Integrar plug-ins de terceiros, como o revolution slider.
Pode utilizar o módulo de código de largura total para integrar um formulário padrão para questionários mais interactivos, formulários de contacto, etc.
Adicionar um menu de ação flutuante
Criar um anúncio de barra superior deslizante.
Adicionar um botão de ação flutuante.

Dica: Por vezes, adicionar código com quebras de linha faz com que o código não funcione. É melhor criar o seu código num editor de texto e concatená-lo (tudo numa linha) antes de o colar no módulo Código.