2 maneiras de criar programas personalizados no Divi
Publicados: 2020-09-13Mostrar mais seletores pode ser útil para muitos aplicativos diferentes em um site. Tradicionalmente, mostrar mais alternadores são usados para mostrar mais texto ao clicar em um link mostrar mais (como ler mais alternadores). Isso é útil para manter o design inicial mais compacto e conciso, deixando para o visitante clicar para obter mais informações, se necessário.
Neste tutorial, mostraremos duas maneiras de criar Show More Toggles personalizados para o seu site Divi. A primeira forma inclui a transformação de um módulo de alternância Divi em uma alternância de mostrar mais que fica sob um módulo, pronta para mostrar / ocultar o texto de adição. O segundo método envolverá a criação de uma alternância de mostrar mais que pode mostrar / ocultar linhas ou módulos Divi inteiros. Como você pode imaginar, isso abre a porta para mostrar ou ocultar basicamente qualquer conteúdo que você quiser!
Vamos começar.
Espiada
Aqui está uma rápida olhada nos botões de alternância de show que construiremos neste tutorial.
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Para importar o layout da seção para sua biblioteca Divi, navegue até a biblioteca Divi.
Clique no botão Importar.
No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.
Em seguida, clique no botão importar.
Feito isso, o layout da seção estará disponível no Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Escolha a opção “Build From Scratch”.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
1ª maneira: Construindo um Show More Toggle usando um Divi Toggle Module
Primeiro, adicione uma linha de duas colunas à sua seção.
Na coluna da esquerda, adicione um módulo de sinopse.
No módulo blurb, adicione um módulo de alternância. Vamos transformar o módulo de alternância em uma alternância de mostrar mais para que ele mostre / oculte mais texto sob o módulo de blurb ao clicar no alternador.
Para fazer isso, abra as configurações do módulo de alternância e atualize o texto do título:
- Título: Mostrar mais
Na guia de design, atualize o seguinte para eliminar os estilos padrão:
- Cor de fundo de alternância aberta: rgba (0,0,0,0);
- Cor de fundo de alternância fechada: rgba (0,0,0,0);
- Preenchimento: 0px superior, 0px inferior, 0px esquerdo
- Largura da borda: 0 px
Na guia Avançado, atualize o CSS personalizado para o seguinte:
Para o elemento principal ...
display:flex; flex-direction: column; align-items: flex-end;
Para o título de alternância ...
order:2; padding-right:25px !important;
Para Alternar Conteúdo ...
order:1; padding: 0px;
Este título de alternância e conteúdo de alternância são ordenados de maneira diferente usando a propriedade order com display: flex. Agora, o título clicável fica abaixo do conteúdo para que funcione como um show more alternar.
Agora, adicione a seguinte classe CSS ao módulo de alternância:
- Classe CSS: et-readmore-toggle
Isso é necessário para direcionar o módulo com nosso código JQuery que adicionaremos para alterar o texto do título ao clicar no botão de alternância.
Nós limpamos o módulo de alternância e removemos todo o preenchimento para que a alternância fique diretamente sob o módulo de sinopse acima. No entanto, ainda há muita margem inferior na sinopse superior, então o texto dentro do botão de alternância ficará muito longe do parágrafo anterior.
Abra as configurações do módulo blurb acima do botão e atualize a margem:
- Margem inferior: 10px;
Agora estamos prontos para adicionar o JQuery necessário para alterar o texto do título de alternância para “Mostrar mais” ou “Mostrar menos” quando clicado.
Para adicionar o código, adicione um módulo de código no módulo de alternância.
Em seguida, cole o seguinte JQuery certificando-se de envolver o código nas tags de script necessárias.
(function($) {
$(document).ready(function(){
$('.et-readmore-toggle .et_pb_toggle_title').on('click', function(e) {
if ($(e.target).closest('.et-readmore-toggle').hasClass('et_pb_toggle_open')) {
$(this).text('Show More');
} else {
$(this).text('Show Less');
}
});
});
})(jQuery);
Aqui está o resultado.
Este projeto é obviamente básico. Sinta-se à vontade para adicionar mais design ao alternador usando as opções Divi integradas para atender às suas necessidades.
2ª Maneira: Construindo um Show More Alterne para Mostrar / Ocultar Qualquer Módulo Divi ou Linha
Se a primeira exibição de mais alternância usando o módulo de alternância parecer um pouco limitante, o próximo método será de seu interesse. Vamos construir um show mais alternativo personalizado que você pode usar para mostrar / ocultar um módulo Divi ou até mesmo uma linha inteira!
Construindo um Show More Alternar para um Módulo Divi
Veja como fazer.
Primeiro, crie outra linha de duas colunas exatamente como você fez no primeiro exemplo.
Em seguida, adicione um módulo de sinopse à coluna 1.
No módulo blurb, vamos adicionar um módulo de formulário de contato.
Este formulário de contato será o módulo que mostraremos / ocultaremos ao clicar no botão mostrar mais.
Para direcionar este módulo no código, abra as configurações do formulário de contato e adicione a seguinte classe CSS:
- Classe CSS: et-show-more-content
Também precisaremos direcionar o contêiner pai do módulo que queremos mostrar / ocultar. Isso nos permitirá adicionar várias instâncias show more toggle na página, se necessário. Nesse caso, o container pai deste módulo de formulário de contato é a coluna 1. Abra as configurações da coluna 1 e adicione a seguinte classe CSS:
- Classe CSS: et-show-more-container
Para criar o botão de alternância mostrar mais, adicione um módulo de botão no módulo de formulário de contato.
Você pode criar o botão como quiser. Quando terminar, 0 abra as configurações do módulo do botão e adicione a seguinte classe CSS:
- Classe CSS: et-show-more-toggle
Em seguida, altere o texto do botão para “Mostrar mais”.
Agora estamos prontos para adicionar o código necessário para que nosso programa funcione mais.
Sob o botão, adicione um módulo de código para que possamos inserir nosso CSS e JQuery.
Primeiro, cole o seguinte CSS dentro da caixa de código, certificando-se de envolver o código nas tags de estilo necessárias:
.et-show-more-content {
display:none;
}
.et-fb .et-show-more-content {
display:block;
}
.et-show-more-toggle {
cursor:pointer;
}
Em seguida, no CSS, cole o seguinte JQuery certificando-se de envolver o código nas tags de script :
(function($) {
$(document).ready(function(){
$('.et-show-more-toggle').on('click', function(e) {
e.preventDefault();
$(e.target).closest('.et-show-more-container').children('.et-show-more-content').slideToggle("300");
$(this).toggleClass('et-show-more-toggle_active');
if ($(this).hasClass('et-show-more-toggle_active')) {
$(this).text('Show Less');
} else {
$(this).text('Show More');
}
});
});
})(jQuery);
Para equilibrar nosso design, duplique a coluna 1 para criar outra coluna idêntica. Certifique-se de excluir a terceira coluna vazia e o módulo de código extra que foi transportado com a duplicata.
Aqui está o resultado.
Criando um Show More Toggle para uma Divi Row
Agora que temos nosso show more toggles para um Divi Module, vamos construir sobre isso para adicionar um novo show more toggle para alternar toda a linha.
Primeiro, crie uma nova linha de uma coluna para conter nosso novo botão.
Em seguida, copie um dos módulos de botão mostrar mais existentes e cole-o dentro da nova linha. Em seguida, abra as configurações do botão e altere o alinhamento do botão:
- Alinhamento do botão: Centro
Uma vez que queremos direcionar a linha como o conteúdo que queremos mostrar / ocultar, abra as configurações da linha que contém a opção mostrar mais para os módulos do formulário de contato. Em seguida, adicione a seguinte classe CSS à linha:
- et-show-more-content
E também precisamos adicionar uma classe CSS personalizada ao contêiner pai da linha (que é a seção). Abra as configurações da seção e adicione a seguinte classe CSS:
- et-show-more-container
Aqui está o resultado.
Resultados finais
Aqui estão os resultados finais para os três botões de alternância que construímos.
Pensamentos finais
O objetivo deste tutorial foi mostrar alguns métodos para criar seu próprio show mais alterna no Divi. Esperançosamente, um deles será útil no futuro, para que você não precise usar um plugin. Embora não tenhamos adicionado nenhum design espetacular a esses exemplos, isso não significa que não possa ser feito. Com essa funcionalidade instalada, você pode se divertir projetando esses botões de alternância usando o construtor Divi. Ou você pode até usar alguns de nossos layouts predefinidos para experimentar também.
Estou ansioso para ouvir de você nos comentários.
Saúde!