Como ajustar a ordem de empilhamento das colunas da Divi em dispositivos móveis

Divi é construído em uma grade responsiva que empilha (ou ordena) suas colunas de uma certa maneira ao passar de telas de desktop para telas móveis. As colunas são empilhadas em ordem da esquerda para a direita. Portanto, se você tiver três colunas na área de trabalho, a coluna da esquerda (primeira) será empilhada primeiro no celular, seguida pelas colunas 2 e 3 abaixo. Isso faz sentido e geralmente é o que é necessário para a maioria dos sites. Mas às vezes certos designs que ficam ótimos no desktop criam uma ordem inconsistente de conteúdo no celular. Nesse caso, você precisará alterar a ordem das colunas para criar uma experiência de usuário mais consistente no celular.

Hoje vou mostrar duas maneiras de alterar a ordem de empilhamento das colunas do Divi em dispositivos móveis. O primeiro envolve a criação de uma versão alternativa do conteúdo especificamente para dispositivos móveis usando o recurso “Disable On” do Divi. A segunda maneira é usar CSS personalizado para adicionar classes às suas colunas que designam sua ordem no celular.

Vamos começar!

Criação do conteúdo

Inscreva-se no nosso canal no Youtube

Em uma nova página, clique para usar o Divi Builder e inicie o Visual Builder.

No construtor visual, escolha um layout de 2 colunas (1/2 - 1/2).

Adicione um módulo de imagem à primeira coluna dentro de sua linha.

Em Configurações de imagem, carregue e insira uma imagem. (Estou usando uma imagem de 770 x 433 de unsplash.com)

Em seguida, insira um módulo de texto na segunda coluna de sua linha.

Em Configurações gerais de texto, adicione seu texto à caixa de texto Conteúdo.

Salve 

Agora você deve ter uma linha com 2 colunas com a primeira linha contendo uma imagem e a segunda linha contendo texto. Eu rotulei as colunas para você na imagem a seguir.

No construtor visual, duplique a linha com as mesmas 2 colunas clicando no ícone de linha duplicada.

Em sua segunda linha (a linha duplicada que você acabou de criar), arraste o módulo de imagem para a segunda coluna e arraste o módulo de texto para a primeira coluna.

Alternar as posições da imagem e do texto em cada linha desta forma pode ser uma maneira criativa e eficaz de exibir seu conteúdo em sua página da web. Mas também cria um problema quando as colunas são empilhadas em dispositivos móveis. Ao reduzir a largura do seu navegador para menos de 980 px (o ponto de interrupção para dispositivos móveis), o conteúdo de cada linha se empilha da esquerda para a direita. Isso significa que a primeira coluna de sua linha será empilhada em cima da segunda coluna. Isso pode causar um problema se você quiser manter o fluxo de conteúdo consistente em dispositivos móveis. Com o layout atual, o fluxo de conteúdo no celular será empilhado na seguinte ordem:

Coluna 1 (imagem)
Coluna 2 (Texto)
Coluna 1 (Texto)
Coluna 2 (imagem)

Um layout melhor para dispositivos móveis será alterar a ordem de empilhamento das colunas em uma de suas linhas para que você obtenha um layout de conteúdo mais consistente.

Duas maneiras de alterar a ordem de empilhamento de colunas no celular

1: Alterando a ordem de empilhamento de coluna no celular usando o recurso "Desativar ativado" do Divi

O recurso “Disable On” do Divi permite que você crie diferentes versões de seu conteúdo no telefone, tablet e telas de desktop. Com alguns cliques, você pode ocultar ou mostrar seções de conteúdo em qualquer dispositivo.

Para este exemplo, precisamos manter a segunda linha visível na área de trabalho, mas ocultá-la em dispositivos móveis. Em seguida, precisamos criar uma versão diferente da segunda linha para ficar visível apenas no celular.

Usando o Visual Builder, duplique a segunda linha.

Antes de editarmos a nova linha duplicada, abra as Configurações de linha na segunda linha.

Em Configurações gerais de linha, marque para desabilitar a linha no telefone e tablet.

Salve 

Agora, a segunda linha ficará oculta em dispositivos móveis. Em seguida, precisamos alterar o layout de nossa nova terceira linha para como queremos que a ordem das colunas esteja no celular.

Arraste o conteúdo do módulo de texto para a segunda coluna e arraste o módulo de imagem para a primeira coluna.

Agora vá para Configurações Gerais de Linha para a terceira linha e marque a caixa para desabilitar a linha na área de trabalho.

Salve 

Agora verifique seus resultados. Você notará que a terceira coluna está desabilitada no desktop e depois habilitada nos dispositivos móveis. Isso cria um layout mais consistente no celular.

É isso!

Com essa capacidade de desabilitar e habilitar certas seções de conteúdo, você pode alterar / reordenar qualquer tipo de layout facilmente.

Além disso, ao visualizar sua página no Visual Builder, o Divi desvanece convenientemente o conteúdo que está oculto na página para que você possa identificar qual conteúdo está desabilitado.

Usar o recurso “Disabled On” para ocultar colunas e linhas é uma aposta segura. No entanto, se você fizer muito isso e / ou tiver muito conteúdo, a edição da página pode ficar confusa. E, ao fazer atualizações no conteúdo, você deve atualizar o conteúdo em todas as versões, não apenas em uma.

Se desativar e ativar conteúdo não é a solução certa para você, há outra maneira de ordenar seu conteúdo no celular usando classes CSS.

2. Alterando a ordem de empilhamento de colunas no celular usando classes CSS

Para fazer isso, vamos usar algum CSS personalizado para que possamos adicionar uma classe às nossas colunas que irá ordená-las como você quiser na tela do celular.

Em seguida, no painel do wordpress, vá para Divi → Personalizador de temas → CSS adicional e adicione o seguinte CSS:

@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}

/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}

.second-on-mobile {
-webkit-order: 2;
order: 2;
}

.third-on-mobile {
-webkit-order: 3;
order: 3;
}

.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}

}

Salvar e publicar

Olhando para o CSS que você acabou de adicionar, observe que todo o CSS está contido em uma consulta de mídia que só usará o css para dispositivos móveis (em telas com menos de 980 px de largura).
Você também notará a primeira classe chamada “linha personalizada”. Esta classe será adicionada à linha que você deseja alterar a ordem de empilhamento das colunas no celular.

As próximas 4 classes (“primeiro no celular”, “segundo no celular”, “terceiro no celular” e “quarto no celular”) têm uma propriedade de pedido e um valor numérico atribuído a ela. Essas classes serão adicionadas às colunas em sua linha “personalizada” para designar a ordem em que você deseja que elas sejam exibidas no celular.

Agora que temos nosso CSS no lugar, vamos aplicar essas classes à nossa página.

Certifique-se de ter suas duas linhas criadas seguindo as instruções. Além disso, certifique-se de não ter nenhuma das linhas desabilitadas no celular ou desktop.

Para este exemplo, vamos alterar a ordem das colunas na segunda linha no celular. Aqui está uma ilustração do que queremos realizar.

Usando o Visual Builder, abra as configurações de linha para a segunda linha.

Em Row Setting, na guia CSS, adicione o seguinte:

Adicione “custom_row” à caixa de texto Classe CSS. (o envolve sua linha em uma caixa flexível)

Adicione “segundo no celular” à caixa de texto Classe CSS da coluna 1 (isso muda a ordem da coluna 1 para exibir o segundo no celular. O nome da classe deve tornar isso fácil de lembrar.)

Adicione “primeiro no celular” à caixa de texto Classe CSS da coluna 2 (isso altera a ordem da coluna 2 para exibição primeiro no celular).

Observação: é importante adicionar uma classe de ordenação a cada coluna.

Agora vamos verificar os resultados. Observe no celular como as colunas da segunda linha foram alteradas para exibir o mesmo que a primeira linha. Isso cria um fluxo consistente de imagem → texto → imagem → texto.

Alterando a ordem de empilhamento de colunas de qualquer layout usando classes CSS

Você pode alterar a ordem de qualquer layout de coluna usando o mesmo método. Lembre-se de que o CSS personalizado permite adicionar primeiro, segundo, terceiro e quarto valores de posicionamento. Por exemplo, se você deseja alterar a ordem de um quarto, meio quarto, layout como este:

Basta seguir os mesmos passos que você fez antes. Em suas configurações de linha, na guia CSS, adicione a classe “custom_row” à linha e adicione sua classe de ordenação (“primeiro no celular”, “segundo no celular”, “terceiro no celular”) para cada uma de suas colunas. Lembre-se de adicionar uma classe a cada uma de suas colunas para que todas tenham um valor de pedido designado.

É isso!

Método preferido

Se precisar criar layouts distintos para cada dispositivo e / ou planejar alterar o conteúdo, além da ordem das colunas no celular, você precisará usar o recurso “Disabled On” do Divi para personalizar seus layouts.

Se você só precisa reordenar as colunas no celular sem alterar o conteúdo e não quer se preocupar em fazer malabarismos com várias versões desabilitadas / habilitadas de conteúdo, você pode se beneficiar do método CSS.

Considerações de SEO

Tem havido muito debate ao longo dos anos sobre como os mecanismos de pesquisa lidam com o conteúdo que está desativado ou oculto em uma página. Mesmo que você oculte conteúdo para determinados dispositivos, o conteúdo ainda pode ser rastreado pelo Google. Isso pode ser considerado conteúdo duplicado e pode sugerir que o uso do recurso “Desativar” afetaria negativamente a classificação da sua página. No entanto, mecanismos de pesquisa como o Google são muito bons em identificar se o conteúdo está oculto por motivos de layout responsivo. Resumindo, o Google sabe se você está duplicando conteúdo para diferentes dispositivos e não irá penalizá-lo por isso. Contanto que você não oculte conteúdo por motivos maliciosos, é seguro usá-lo.

Pensamentos finais

Poder alterar a ordem de empilhamento das colunas é extremamente útil e, às vezes, necessário. Todos nós precisamos da capacidade de criar um layout de design exclusivo para exibição em desktop sem comprometer a consistência do fluxo de conteúdo no celular. Usando o recurso “Disable On” do Divi, você pode criar layouts completamente diferentes para cada dispositivo. Além disso, com algumas linhas de CSS customizado, você pode facilmente adicionar classes às suas linhas e colunas para ordená-las como desejar para dispositivos móveis.

Espero que esta postagem ajude você a ter mais controle sobre os monitores de seus celulares.

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

Saúde!