Linhas aninhadas vs seções especializadas no Divi 5 (e por que estamos depreciando -as)

Divi tem sido uma potência para a construção de belos sites. As seções especializadas estenderam os recursos de layout da Divi por anos, permitindo que estruturas complexas de coluna aninhadas que seções regulares não conseguiam suportar. Mas essa abordagem veio com sua complexidade e limitações, ligada profundamente à antiga estrutura de código de atalho da Divi.

Agora, o Divi 5 vem com linhas aninhadas - um recurso nativo que permite colocar linhas dentro de colunas em qualquer lugar, em seções regulares. Esse recurso remove as restrições anteriores e unifica o edifício do layout sob um único tipo de seção flexível. Com linhas aninhadas, você pode construir os mesmos layouts complexos e assimétricos que as seções especializadas permitem, mas mais intuitivamente.

Neste post, discutiremos a mudança das seções especializadas e como as linhas aninhadas e o sistema de layout reprojetado do Divi 5 fornece uma maneira melhor de criar layouts complexos. O futuro da Divi está aqui, e é mais simples, mais flexível e construído para a criatividade ilimitada.

Inscreva -se no nosso canal do YouTube

O Divi 5 está pronto para ser usado em novos sites hoje.

Uma retrospectiva de seções especializadas

As seções especializadas foram introduzidas no Divi (2014) para abordar as limitações das seções regulares. Eles permitiram estruturas de coluna mais complexas, incluindo barras laterais e layouts assimétricos, que eram impossíveis em seções regulares.

A estrutura baseada em shortcode da Divi, baseada na complexidade do layout fundamentalmente limitada, restringindo a profundidade do ninho e introduzindo gargalos de desempenho. Layouts aninhados complexos eram difíceis de construir e propensos a renderizar problemas, para que não fossem possíveis até seções especializadas.

No entanto, eles introduziram complexidade adicional porque seções especializadas eram suas próprias coisas (observe as opções de passagem de coluna extra e CSS para essas seções). Eles não eram ruins, mas definitivamente se comportaram de maneira diferente das seções, linhas e colunas regulares.

As seções especiais adicionaram os campos extras e de classe CSS/ID que eram necessários, mas incongruentes com o restante das opções do construtor.

Seções especializadas permitiram estruturas de coluna pseudo-aninhadas, dobrando as regras do código de atalho, criando o que não foi possível em seções regulares.

Não seria bom se seções regulares fossem poderosas o suficiente para fazer o que você precisa deles?

Linhas aninhadas e uma maneira melhor de construir páginas

Com o Divi 5, as linhas aninhadas permitem oficialmente as linhas (e suas colunas) dentro de outras linhas e colunas. Isso significa que você pode criar layouts profundamente aninhados com colunas e linhas ilimitadas dentro uma da outra. Elimina a necessidade de seções especializadas.

Esse novo recurso também adicionou opções de dimensionamento às colunas, o que significa que existe uma maneira consistente de tamanho e estilo de todos os elementos de contêiner.

Como recriar facilmente uma seção especializada com linhas aninhadas

O pacote de layout de aluguel da Scooter (particularmente a seção de heróis da página inicial) usa uma seção especializada para posicionar os elementos -chave. No entanto, em vez de usar uma seção especializada com suas configurações exclusivas, usaremos linhas aninhadas para obter um efeito semelhante.

NOTA: Atualmente, o Divi 5 possui seções especializadas, mas elas acabarão sendo preteridas (mas ainda funcionarão e serão duplicáveis ​​nas páginas onde existem atualmente).

Adicione uma seção padrão à sua página e defina a cor do plano de fundo em preto (se você importou o layout para a sua página, terá a imagem do círculo de pontos para usar como uma imagem de fundo com uma posição central superior e tamanho real).

Defina a largura e a largura da seção para 100%.

Verifique se a linha dentro da seção possui uma estrutura de duas colunas e uma divisão 3/5 + 2/5. Além disso, defina a largura da linha e a largura máxima para 100%.

Se você deseja usar outros novos recursos, adicione apenas uma única coluna com dois grupos de módulos dentro. Você usará opções de dimensionamento para os grupos em vez de confiar nas estruturas de coluna padrão da Divi.

A coluna esquerda abrigará o lado mais complicado (em termos de módulos), e a coluna direita abrigará a grande imagem em destaque.

Adicionaremos todos os nossos módulos para ter uma noção do layout. Isso inclui primeiro um módulo de título ou texto, depois uma linha aninhada (duas colunas de largura igual), um módulo de imagem na coluna esquerda e um módulo de texto e um módulo de botão na coluna direita. Volte à linha pai, na coluna direita, adicione um módulo de imagem.

Vamos replicar apenas o espaçamento/dimensionamento na área de trabalho para ilustrar como podemos recriar a seção especializada usando linhas aninhadas. Vá em frente e adicione o conteúdo e as imagens (novamente, as imagens estão disponíveis ao importar o layout para uma página no seu site). Você também pode modificar o texto e os estilos de cores para corresponder, como achar melhor. A imagem principal na coluna direita deve ser aplicada como imagem de fundo e o módulo de imagem com a imagem de acento que chegaremos posteriormente.

Para a coluna esquerda da linha diretamente na seção, adicione ~ 10% de preenchimento esquerdo para espancá -lo do lado esquerdo (fazê -lo dessa maneira significa que você precisará redimensionar as coisas para cada ponto de interrupção).

Agora, abra as configurações da coluna direita diretamente sob a linha pai. Use uma imagem de fundo da coluna.

O módulo de imagem dentro desta coluna deve ter um filtro> mistura> Sobreposição definida para ele. Na posição avançada>, a imagem está absolutamente posicionada e ancorada no canto inferior esquerdo.

E é quase isso para a recriação da seção especializada (na área de trabalho). Como usamos a estrutura predefinida da coluna (colunas 3/5 + 2/5), o Divi possui algum dimensionamento e posicionamento padrão em vários pontos de interrupção que precisam ser abordados. Você pode evitar isso usando uma coluna de pai solteiro, mas grupos de módulos para manter o conteúdo para os lados esquerdo e direito desta seção.

Mas pelo menos neste momento, você sabe que é possível aninhar linhas e recriar seções especializadas.

Entrando em um novo futuro

O Divi 5 está próximo de uma versão beta, mas já fizemos esforços significativos para revisar o sistema de design da Divi.

• Layouts do Flexbox (em breve) : oferecerá mais controle sobre o alinhamento e a distribuição do espaço dentro das linhas.
• Linhas aninhadas : Ninho sem fim das estruturas de linha e coluna para criar um pouco de complexidade com o sistema de linha baseado em flutuação nativo.
• Dimensionamento avançado da coluna : Controles de dimensionamento ausentes adicionados para larguras e alturas da coluna.
• Grupos de módulos : permite o agrupamento de módulos para facilitar o gerenciamento e o estilo.
• Variáveis ​​de design : defina e reutilizam variáveis ​​globais (cores, fontes, espaçamento, imagens, texto) em todos os elementos e campos.
• Cores relativas com HSL (em breve) : Controle de cores dinâmicas e consistentes com a marca com base em matiz, saturação e leveza.

Todos esses recursos fazem parte da reinvenção da Divi e são fundamentais ao seu retorno. Estamos provando que a base que construímos nos últimos dois anos valeu a pena. Podemos criar recursos que não foram possíveis no D4, e estamos fazendo cada um em questão de semanas.

O Divi 5 está pronto para ser usado em novos sites hoje.

Baixe o divi 5 Learn mais sobre o divi 5