Personalizar o código do seu tema Extra

Procédure

Introdução

A LWS oferece-lhe 3 plugins 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.

Personalizar o código do seu tema Extra

Pode utilizar o módulo Código para adicionar HTML personalizado e/ou códigos de acesso do WordPress aos seus layouts. No exemplo acima, adicionámos um formulário de opt-in de e-mail utilizando um shortcode fornecido pelo plugin de opt-in de e-mail, Bloom.

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 precisa de mudar para o Divi Builder. Depois que o tema Extra 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 Usar 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.

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.

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.

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

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.

Agora o botão salta quando a página carrega!

Conclusão

Obrigado por ter seguido este tutorial!

Utilize o módulo de código para colocar código personalizado na sua página, como HTML e JS, ou introduzir códigos curtos de terceiros.

Vemo-nos em breve para um novo tutorial ;)

Para saber mais sobre o tema Extra e como o utilizar

Criar um blogue com o tema Extra

O módulo de texto Extra

> Consultar a nossa secção de ajuda do tema Extra