Como inserir módulos Divi ou linhas dentro de outros módulos Divi (sem um plug-in)

Se você já é usuário Divi há algum tempo, pode ter pensado em inserir um Módulo Divi (ou Linha) dentro de outro Módulo. Na maioria dos casos, se você sabe como usar o Divi com proficiência, esse tipo de coisa não é realmente necessário. Os Módulos Divi já são elementos poderosos repletos de recursos e configurações de design integradas. Mas, às vezes, seria bom aprimorar esses recursos projetando dois módulos usando Divi e, em seguida, inserindo um no outro. Um bom exemplo disso seria inserir um módulo (como um formulário de contato) em um módulo de alternância para que o formulário seja exibido ao clicar no botão de alternância.

Neste tutorial, vamos compartilhar como inserir Módulos Divi ou Linhas em outro Módulo Divi. Para fazer isso, é necessário adicionar alguns pequenos trechos de JQuery. Assim que o código estiver pronto, podemos usar o Divi Builder para adicionar as classes CSS apropriadas para direcionar os elementos que queremos inserir / mover e o módulo em que queremos colocá-los.

Vamos começar!

Espiada

Aqui está uma rápida olhada nos exemplos que construiremos neste tutorial.

Um formulário de contato dentro de um módulo de alternância

Um Módulo de Alternância e Módulo de Botão dentro de um Módulo do Blurb (coluna à direita)

Uma divisória dentro de um módulo de alternância

Baixe o Layout GRATUITAMENTE

Para colocar suas mãos no layout 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.

Baixe os arquivos

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.

DOWNLOAD

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!

Inscreva-se no nosso canal no Youtube

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:

1. Se ainda não o fez, instale e ative o Divi Theme.
2. Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
3. Escolha a opção “Build From Scratch”.

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Coisas a ter em mente

Para este tutorial, o processo de estilização de todos os módulos que você deseja usar neste processo ainda pode ser feito visualmente usando as configurações internas do Divi Builder, portanto, deixaremos essa parte para você. Vamos nos concentrar mais em como aplicar as classes CSS e HTML corretos a cada elemento Divi para inserir o (s) módulo (s) / linha (s) dentro de outro módulo.

Lembre-se de que só poderemos ver o resultado final em uma página ativa, não durante a edição a partir do Divi Builder visual. Em outras palavras, podemos projetar os módulos com Divi, mas eles permanecerão separados no construtor até que você visualize a versão ao vivo da página.

Você só pode inserir módulos ou linhas dentro de um módulo que tenha a capacidade de adicionar texto / html.

Além disso, como explicaremos mais tarde, há certos limites para o número de instâncias (módulos ou linhas sendo inseridos em outro módulo) que você pode ter em uma coluna ou seção. Ao inserir módulos em outro módulo, você está limitado a um módulo de “destino” (o módulo que conterá o (s) módulo (s) que você deseja inserir) por coluna. E, ao inserir linhas em outro módulo, você está limitado a um módulo de “destino” por seção. Embora isso seja uma limitação em um sentido, oferece a opção de ter várias instâncias em sua página, quando necessário.

Parte 1: Como inserir módulos Divi em outro módulo

Na primeira parte deste tutorial, mostraremos como inserir Módulos Divi em outro módulo. Primeiro, mostraremos como adicionar um Módulo de contato dentro de um Módulo de alternância. Em seguida, mostraremos como adicionar um Módulo de alternância e um Módulo de botão dentro de um módulo do Blurb.

Exemplo 1: Inserindo um módulo de formulário de contato dentro de um módulo de alternância

Adicionar nova linha

Para começar, adicione uma nova linha de uma coluna à seção.

Adicionar Módulo de Alternância (o Módulo de Destino)

Dentro da coluna, adicione um módulo de alternância.

Para este exemplo, queremos inserir um módulo dentro deste Módulo Alternar, ao qual podemos nos referir como nosso módulo de destino. Tecnicamente, o destino real estará dentro do conteúdo do corpo do Módulo Alternar (onde você pode adicionar texto / HTML). Para designar o local de destino, precisamos inserir um novo div com uma classe CSS necessária que servirá como local de destino para nosso módulo portátil (o módulo que queremos inserir).

Na guia de conteúdo das configurações de alternância, adicione o seguinte HTML ao corpo. Certifique-se de clicar na guia Texto antes de inserir HTML.

<div class="divi-module-destination"></div>

Adicione o módulo de formulário de contato (o módulo portátil)

Em seguida, precisamos adicionar o módulo que queremos inserir no Módulo Alternar. Neste exemplo, vamos inserir um Módulo de formulário de contrato no corpo do Módulo de alternância. É importante adicionar o novo módulo “portátil” na mesma coluna do módulo de destino.

Para fazer isso, adicione um novo módulo de formulário de contato diretamente no módulo de alternância.

Clique na guia Avançado nas configurações do Formulário de Contato (de qualquer módulo que você deseja inserir) e adicione a seguinte Classe CSS:

• Classe CSS: divi-portable-module

Adicionar classe de coluna

Em seguida, precisamos adicionar uma classe personalizada à coluna que contém os dois módulos. Abra as configurações da coluna e adicione a seguinte classe CSS:

• Classe CSS: coluna-pai

Adicione o código

O código necessário para fazer isso funcionar é muito curto e simples. Basicamente, queremos usar JQuery para encontrar cada módulo com a classe “divi-portable-module” com a coluna pai (aquele com a classe “parent-column”) e anexar cada um desses módulos dentro do div com a classe “ divi-módulo-destino ”.

O código também inclui um fragmento para inserir um módulo de botão em outro módulo e um fragmento para inserir linhas Divi em um módulo.

Para adicionar o código, adicione um novo módulo de código no módulo de formulário de contato.

Antes de colar o código necessário, adicione as tags de script necessárias para incorporar JS em HTML dentro da caixa Código:

Em seguida, cole o seguinte código entre as tags de script :

(function ($) {
  $(document).ready(function () {

    // Option #1: Move Divi Module(s) into a Module
    // Limit: One Instance per Column
    // Use following code if you want to move 
    // a module inside another module. Each column with the
    // class 'parent-column' will append any module(s)
    // with the class 'divi-portable-module' to the div
    // with the class 'divi-module-destination'.
    // Only one instance of 'divi-module-destination' should
    // be added per column.
    $('.divi-portable-module').each(function () {
      $(this).closest('.parent-column').find('.divi-module-destination').append($(this));
    });
    
    // Buttons: Insert Button Module(s) into a Module
    // Adding a custom CSS class to a button module
    // is applied to the 'a' tag which is a child element
    // of the module wrapper. This code makes sure to append
    // the entire button module wrapper (the parent element)
    // as well. This functionality is the same as option #3 above.
    // Siimply use the class 'divi-portable-button' on a button module
    // instead of 'divi-portable-module'.
    $('.divi-portable-button').parent().each(function () {
      $(this).closest('.parent-column').find('.divi-module-destination').append($(this));
    });

    // Option #2: Move Divi Row(s) into a Module
    // Limit: One Instance per Section
    // Use the following code if you want to move 
    // a row inside a module on more than one section
    // of a page. Each section with the
    // class 'parent-section' will append any row(s)
    // with the class 'divi-portable-row' to the div
    // with the class 'divi-row-destination'.
    // Only one instance of 'divi-row-destination' should
    // be added per section.
    $('.divi-portable-row').each(function () {
      $(this).closest('.parent-section').find('.divi-row-destination').append($(this));
    });

  });
})(jQuery);

Compreendendo a funcionalidade

Dentro do Divi Builder no backend, os módulos permanecerão separados. No entanto, se você visualizar os resultados na página ao vivo no frontend, verá que o formulário de contato foi inserido no módulo Alternar.

Se você inspecionar o código na página ativa, poderá ver que o Módulo do Formulário de Contato foi inserido com sucesso dentro do div com a classe “divi-módulo-destino”.

Estilizando os Módulos

Como mencionamos antes, os módulos permanecerão separados no backend Divi Builder. No entanto, os estilos que você adicionar a cada um ainda serão aplicados. Portanto, sinta-se à vontade para adicionar e atualizar os estilos do módulo de destino e do módulo portátil usando o Divi Builder.

NOTA: Em alguns casos, os estilos do módulo de destino (agora um módulo pai) podem ser aplicados ao módulo inserido. Se for esse o caso, você deve ser capaz de substituir esse estilo atualizando as configurações do módulo inserido.

O resultado

Aqui está o resultado final ao visualizar a página ao vivo.

Exemplo 2: inserindo um módulo de alternância dentro de um módulo do Blurb

Para nosso próximo exemplo, vamos inserir um Módulo Alternar dentro de um Módulo Blurb. O processo é o mesmo de antes. O trecho de código limita o uso de um módulo de destino por coluna. Em outras palavras, você pode ter vários módulos portáteis com a classe “divi-portable-module” que podem ser adicionados ao módulo de destino, mas você só pode ter uma instância do div com a classe “divi-module-destination” por coluna.

Para demonstrar isso, vamos repetir o mesmo processo com outro grupo de módulos em outra coluna da mesma linha.

Adicionar nova coluna à linha

Primeiro, adicione uma nova coluna à linha existente.

Adicionar classe de coluna

Dê à nova coluna a seguinte classe CSS, como fizemos na primeira coluna:

• Classe CSS: coluna-pai

Adicionar Módulo Blurb (o Módulo de Destino)

Dentro da nova coluna, adicione um módulo blurb que servirá como nosso módulo de destino.

Dentro do corpo da sinopse, cole o seguinte HTML que inclui o mesmo div com a classe “divi-module-destination” onde você deseja que os módulos portáteis sejam inseridos (neste caso, sob o texto do corpo simulado):

<div class="divi-module-destination"></div>

Adicionar módulo de alternância (módulo portátil)

Como queremos adicionar um módulo de alternância à sinopse, crie um novo módulo de alternância na mesma coluna da sinopse.

Em seguida, adicione a seguinte classe CSS ao módulo Alternar para designá-lo como o módulo que queremos mover / inserir na sinopse:

• Classe CSS: divi-portable-module

Resultado

Agora verifique a página ao vivo para ver o resultado. A alternância agora residirá no módulo blurb.

Exemplo 3: Inserindo um módulo de botão dentro de um módulo do Blurb

Para este próximo exemplo, vamos inserir um módulo de botão no mesmo módulo de blurb de nosso exemplo anterior. Normalmente, para qualquer outro módulo, repetiríamos o mesmo processo para adicionar um novo módulo portátil à sinopse. Mas, como o módulo de botão é construído de forma um pouco diferente no backend, precisamos adicionar uma classe diferente ao módulo de botão.

Adicionar Módulo de Botão (Módulo Portátil # 2)

Para fazer isso, adicione um novo módulo de botão sob o módulo de alternância que já está sendo inserido na sinopse.

Em seguida, adicione a seguinte classe CSS ao módulo do botão:

• Classe CSS: divi-portable-button

O resultado

Agora confira o resultado na página ao vivo. O Módulo Blurb agora contém o módulo de alternância e o módulo de botão.

E aqui está o trecho de código correspondente usado para inserir o módulo de botão dentro do módulo com o div de “destino”. A principal diferença com este trecho de código é que estamos visando o elemento pai (o envoltório do botão div nos bastidores) da classe de botão “divi-portable-button”.

Parte 2: Como inserir linhas divi em um módulo

Se você deseja inserir uma linha inteira (ou linhas) dentro de um módulo, o processo é muito semelhante a inserir um módulo em outro módulo. Precisamos adicionar a classe “seção-pai” à seção que contém o módulo de destino e as linhas portáteis que queremos inserir. Precisamos adicionar o div com a classe “divi-row-destination” ao módulo de destino. E precisamos adicionar a classe “divi-portable-row” à (s) linha (s) que queremos inserir no módulo de destino.

Veja como fazer.

Adicionar Seção

Primeiro, adicione uma nova seção regular à página.

Na guia avançada das configurações da seção, adicione a seguinte classe CSS:

• Classe CSS: seção pai

Adicionar linha para o módulo de destino

Adicione uma nova linha de uma coluna para conter o módulo de destino.

Adicionar Módulo de Alternância (o Módulo de Destino de Linha)

Para este exemplo, vamos inserir uma linha dentro de um módulo Toggle. Portanto, adicione um novo Módulo de Alternância à linha.

Como o Módulo de alternância é nosso módulo de destino, abra as configurações para alternar e adicione o seguinte HTML ao conteúdo do corpo:

<div class="divi-row-destination"></div>

Criar linha portátil

Agora que o módulo de destino está instalado, adicione uma nova linha na linha anterior. Isso servirá como a linha portátil que inseriremos no Módulo Alternar.

Preencher linha com conteúdo

Neste ponto, você pode preencher a linha com qualquer conteúdo / módulos que desejar usando o Divi Builder. Lembre-se de que tudo dentro da linha acabará sendo inserido no módulo de alternância, uma vez que reside dentro da linha.

Adicionar classe à linha

Em seguida, abra as configurações da linha e designe-a como uma linha que você deseja inserir no Módulo Alternar, dando-lhe a seguinte classe CSS:

• Classe CSS: divi-portable-row

Como funciona

Como um lembrete, a linha permanecerá separada do módulo ao editar o layout usando o Divi Builder no backend. Mas a funcionalidade está pronta para inserir a linha dentro do Módulo Alternar.

O resultado

Para ver o resultado, verifique a página ao vivo e abra o módulo de alternância. Agora ele contém a linha inteira.

E aqui está o trecho de código correspondente que torna isso possível. Observe as classes correspondentes sendo usadas.

Inserindo várias linhas dentro do módulo

Contanto que você mantenha uma instância do módulo de destino (ou seja, o div com a classe “divi-row-destination”) por seção, você pode inserir várias linhas para esse destino simplesmente dando a mesma classe “divi-portable-row ”.

Por exemplo, você pode adicionar outra linha com um módulo de galeria acima da linha com os itens de menu criados anteriormente. Em seguida, dê à linha a mesma classe “divi-portable-row”

Ambas as linhas com a classe “divi-portable-row” serão inseridas no Módulo Toggle.

Usando um Plugin / Shortcode

Se você está procurando um plugin que faz algo semelhante e fornece mais flexibilidade ou opções, você pode verificar o plugin Shortcodes for Divi em nosso mercado, que permite incorporar qualquer layout Divi à sua página usando um shortcode. Uma vez instalado, o plugin irá gerar um shortcode incorporável para cada layout que você salvou em sua biblioteca Divi.

Pensamentos finais

Na maioria dos casos, não deve haver necessidade de inserir módulos ou linhas em outros módulos, a menos que haja uma necessidade especial. Normalmente, você pode obter o layout / design de que precisa sem ter que fazer esse tipo de coisa. No entanto, para aqueles que procuram uma maneira simples de fazer isso sem ter que recorrer a um plugin, espero que esta solução seja útil.

Além disso, pense em todas as aplicações possíveis!

Estou ansioso para ouvir de você nos comentários.

Saúde!