Como reordenar elementos em diferentes pontos de interrupção no divi 5

O design responsivo requer mais do que os layouts de dimensionamento, também requer controlar como o conteúdo é empilhado nos dispositivos. Um design que parece estruturado no desktop pode ser uma ordem confusa no celular, com barras laterais ou elementos secundários empurrando o conteúdo -chave de vista. O Divi 5 aborda isso com seu novo sistema Flexbox, que introduz estruturas de coluna responsivas pré -construídas e controles precisos de pedidos.

Nesta postagem, veremos por que a reordenação dos elementos é importante, como as ferramentas Flexbox do Divi 5 o tornam simples e percorreram as etapas para reestruturar layouts em diferentes pontos de interrupção.

Por que você gostaria de reordenar elementos

Quando um layout muda de desktop para celular, a ordem de empilhamento nem sempre reflete sua experiência pretendida. Um design de desktop de três colunas equilibrado pode entrar em colapso em uma pilha vertical, onde a coluna esquerda sempre vem primeiro, empurrando um formulário de frase de chamariz, inscrição ou informações de contato na página, onde os usuários podem nunca vê-la.

Inscreva -se no nosso canal do YouTube

O sistema Flexbox da Divi 5 corrige isso, permitindo que você reordene os elementos visualmente a cada ponto de interrupção. Você pode mover um CTA diretamente sob o título no celular, trazer depoimentos acima de uma tabela de preços ou destacar informações de contato antes do conteúdo longo. Em vez de ficar preso à lógica de empilhamento padrão do navegador, você decide a hierarquia. Isso garante que seu conteúdo mais importante sempre apareça onde mais importa.

Como o Flexbox do Divi 5 facilita a reordenação

O Divi 5 oferece controle direto sobre como os elementos se empilham nos pontos de interrupção. Você pode usar estruturas de coluna Flex pré-construída para configurar layouts que se adaptem naturalmente e ajustar as estruturas da coluna e as ordens de coluna em cada tamanho de tela.

O Flexbox age como um contêiner brilhante que ajusta com base no espaço. Em vez de empilhamento de conteúdo aleatoriamente, você controla o pedido em cada dispositivo.

O Divi 5 também lida bem com layouts aninhados e complexos. Você pode alterar estruturas de linha, tamanhos de coluna e ordem do módulo em cada ponto de interrupção sem copiar conteúdo ou codificação.

Ele também gerencia automaticamente o alinhamento e o posicionamento verticais, fazendo com que seu conteúdo pareça proposital, totalmente receptivo e não organizado aleatoriamente.

Um guia passo a passo para reordenação responsiva no Divi 5

Vamos dar uma olhada em como exatamente você pode reordenar elementos no Divi 5 usando seu novo sistema Flexbox. As etapas abaixo acompanham você na configuração de estruturas da coluna e ajustando a ordem em diferentes pontos de interrupção, para que seus layouts permaneçam claros e consistentes em todos os dispositivos.

1. Configure seus sete pontos de interrupção personalizados

O Divi 5 oferece sete pontos de interrupção em vez de três. Você pode alterar cada valor de pixel para que seu site pareça corretamente em qualquer dispositivo.

Clique no menu ElipSis na barra de tarefas e encontre os interruptores de alternância do ponto de interrupção. Cada um tem intervalos padrão, mas você pode alterar esses números para se encaixar melhor no seu público.

Você verá o telefone (abaixo de 767px), o telefone em largura (abaixo de 860px), tablet (abaixo de 980px), comprimido de largura (abaixo de 1024px), desktop (mais de 981px), widescreen (mais de 1280px) e ultra largo (1440px).

Depois de ativá -los, pequenos ícones aparecem na sua barra de tarefas. Clique em qualquer ícone para ver como seu site olha para o tamanho da tela imediatamente.

Em vez de clicar em todos os ícones e ser limitado em seus testes, você pode pegar a borda da tela e arrastá -lo para a esquerda ou direita. Seu design encolhe ou se expande à medida que você puxa, mostrando como o layout muda em diferentes larguras.

Arraste a tela para 300px e assista ao layout da área de trabalho de três colunas se transformar em uma única pilha móvel. Puxe -o de volta para 1200px e veja seu conteúdo espalhado novamente. Você não precisa alternar os modos de visualização ou redimensionar a janela do navegador.

2. Acesse os controles flexíveis

Clique no ícone Configurações de qualquer linha para abrir o painel de configurações no lado direito. Navegue até a guia Design na parte superior deste painel. No menu de layout, você encontrará todos os controles do Flexbox da Divi 5. Por padrão, o Flex é selecionado no estilo de layout.

Se não for aplicado ao seu layout existente, você poderá alterá -lo para flexionar com um clique.

Role para baixo para localizar o campo de direção do layout. Isso determinará a ordem e a maneira pela qual as colunas aparecem (lado a lado ou acima e abaixo uma da outra).

Abaixo estão as opções de conteúdo justificar para controlar o alinhamento e a distribuição. Enquanto isso, as opções de itens alinhados aparecem logo abaixo das opções de posicionamento.

3. Estrutura de layout de ajuste fino para cada tamanho de tela

Seus controles do Flexbox agora estão ativos, mas os layouts da área de trabalho podem precisar de ajustes estruturais para telas menores. Um layout de três colunas pode funcionar lindamente em um desktop, mas fica esmagador e lotado em um tablet, exigindo uma grade 2 × 2, ainda mais em um dispositivo móvel onde há apenas espaço para uma grade.

Felizmente, os ícones do dispositivo no canto superior direito de seus controles permitem visualizar seu layout em diferentes telas e ajustar as configurações do Flexbox para cada ponto de interrupção. Isso permite ajustar o design para que pareça bom e funcione bem em todos os dispositivos.

Alterne para o ponto de interrupção do tablet e clique no botão Alterar a estrutura da coluna. Em vez da configuração atual, escolha um layout simétrico 2 × 2. Isso instantaneamente torna a visualização menos esmagadora, mostrando menos cartas em cada linha. Ajuste as lacunas verticais e horizontais, conforme necessário, para uma aparência equilibrada. Em seguida, selecione a coluna CTA, defina sua classe de coluna como fullwidth nas configurações de dimensionamento e selecione "crescer para preencher".

Sua versão para tablets agora mostra dois cartões simultaneamente, mantendo essa aparência uniforme. O botão de chamada para ação fica bem na linha na parte inferior, fazendo-o se destacar, semelhante ao layout da área de trabalho. Esta atualização ajuda a criar uma experiência mais limpa e convidativa que evite a sensação desordenada de muitas opções lotadas.

Para dispositivos móveis, use a opção Alterar a estrutura da estrutura da coluna para alternar para uma estrutura de uma única coluna. Nos controles do Flexbox, defina a direção do layout para a coluna reversa. Ajuste a lacuna ao que parece melhor para o seu conteúdo.

4. Reordene as colunas em pontos de interrupção

O uso de valores de ordem é uma ótima maneira de decidir manualmente a ordem dos elementos filhos dos seus contêineres flexíveis (geralmente colunas) em vários tamanhos de tela. A guia Order nas configurações da linha fornece a cada coluna um número que informa ao navegador: “Mostre esta coluna na posição 1, esta na posição 2” e assim por diante. Números mais baixos aparecem primeiro e números mais altos aparecem por último. Simples assim.

Você pode até usar o pedido "0" ou números negativos como "-1" para forçar o conteúdo específico a aparecer primeiro, independentemente de outros valores.

Cada ponto de interrupção suporta seu próprio sistema de pedidos, oferecendo controle completo sobre o posicionamento do elemento entre os dispositivos.

Vamos dar uma olhada em um exemplo prático: na área de trabalho, selecione a coluna 1 e defina seu pedido como 1. Selecione a coluna 2 e defina sua ordem como “2” e faça o mesmo para o restante da (s) coluna (s). O layout da sua área de trabalho flui naturalmente da esquerda para a direita, terminando com uma chamada à ação.

Pedido de personalização em tablets e celulares

Agora, mude para o ponto de interrupção do tablet usando a alternância do dispositivo. E altere as ordens da coluna:

Defina a coluna 6 (chamada para ação) como "3", para que apareça na linha do meio. Deixe as colunas 1 e 2 como está, a coluna 3 como 4 e o restante conforme desejado. Os usuários dos tablets veem sua frase de chamariz imediatamente após a proposta de valor, seguidos pelos detalhes de suporte.

Em seguida, mude para o celular usando a alternância do dispositivo. Altere a ordem da coluna CTA para "3" e deixe a ordem das duas primeiras colunas como está. Torne o restante da ordem da coluna semelhante ao arranjo do tablet.

A ordem de origem subjacente do seu conteúdo permanece a mesma, mas o CTA se move da última posição para a terceira sem afetar o layout da área de trabalho. Dessa forma, você pode controlar como as seções aparecem em diferentes pontos de interrupção sem duplicar ou reestruturar seu conteúdo.

Controle como tudo empilha com Divi 5

O novo sistema FlexBox da Divi 5 oferece controle preciso sobre como o conteúdo pilha entre os dispositivos. Com sete pontos de interrupção personalizáveis ​​e escala de lona ao vivo, você pode visualizar e ajustar layouts em qualquer tamanho de tela em tempo real.

Em vez de confiar na ordem de empilhamento padrão do navegador, você decide exatamente onde as barras laterais, os CTAs e o conteúdo -chave aparecem. O Flexbox permite manter a hierarquia e a clareza em todos os dispositivos sem soluções ou código extras.