Quem aprendeu o Elementor há alguns anos pensa em secções e colunas: uma secção a toda a largura, dentro dela colunas, nas colunas os widgets. Quem começa hoje vê, em vez disso, contentores. Os dois sistemas existem lado a lado, e isso gera confusão. Aqui fica o enquadramento.
A diferença numa frase
O sistema antigo tinha três níveis fixos — secção, coluna, widget. O contentor é um nível, que se deixa encaixar à vontade e que internamente trabalha com flexbox, o modelo de layout com que hoje é construído praticamente qualquer site moderno.
O que fica melhor com isso
Menos encaixes, menos markup. Uma secção de uma só coluna precisava antes de secção e coluna, portanto de dois níveis para um bloco de conteúdo. Com contentores é um. Ao longo de uma página inteira isso soma-se a nitidamente menos HTML — o que beneficia o tempo de carregamento e torna a estrutura mais legível.
Alinhamento que funciona de verdade. Alinhar em baixo três caixas com alturas de texto diferentes era, com colunas, uma bricolage de alturas mínimas iguais e trabalho manual. Com flexbox são dois cliques: direção, alinhamento, pronto.
Comportamento em vez de adivinhar números. Define se os elementos ficam numa fila ou uns por baixo dos outros, como se distribuem, se quebram quando o espaço aperta. O layout reage ao espaço disponível, em vez de estar preso a valores percentuais fixos — o que faz a diferença sobretudo em tablets.
Ordem livremente alterável. No ambiente de trabalho a imagem deve ficar à esquerda, mas no telemóvel por cima do texto? Com flexbox isso é uma definição, não uma construção dupla.
As quatro definições de que realmente precisa
O contentor tem muitas opções. Na prática trabalha quase exclusivamente com quatro:
Direção — lado a lado (linha) ou uns por baixo dos outros (coluna). O interruptor mais importante de todos.
Alinhamento — como os elementos assentam transversalmente à direção. Numa linha: em cima, ao centro, em baixo.
Distribuição — como o espaço é repartido ao longo da direção. „Espaço entre“ é o valor de que precisa para cabeçalhos com o logótipo à esquerda e o menu à direita.
Espaçamento (gap) — a distância entre os elementos. Substitui os espaçamentos interiores que antes se punham em cada coluna, e de forma mais fiável.
Quando tiver percebido estas quatro, constrói noventa por cento de todos os layouts. O resto é acabamento.
Uma estrutura que se tem revelado boa
Para uma secção de conteúdo normal uso um contentor exterior, direção coluna, a toda a largura com fundo. Dentro dele um contentor interior, limitado em largura e centrado — essa é a sua área de texto. E dentro dele, onde for preciso, um contentor com direção linha para os elementos que ficam lado a lado.
Este padrão — por fora a moldura, por dentro a limitação de largura e aí dentro os conteúdos — aguenta muito e continua compreensível passados meses.
Deve reconstruir as páginas existentes?
Não. Pelo menos não sem motivo.
O Elementor oferece uma conversão de secções em contentores. Funciona muitas vezes bem, mas nem sempre sem perdas — sobretudo em páginas com muitos espaçamentos individuais, margens negativas ou CSS próprio. Reconstruir uma página que está com bom aspeto e funciona não lhe traz um visitante a mais e pode custar meio dia de retrabalho.
O meu procedimento: o novo constrói-se com contentores, o existente fica. Se uma página antiga for de qualquer maneira revista no conteúdo, aproveite a ocasião para a reconstruir. Assim o site migra pouco a pouco, sem que faça disso um projeto de remodelação.
Se mesmo assim converter: cópia de segurança antes e, depois, verificar cada página no telemóvel e no tablet. O que mais pode correr mal nisso está em atualizar o Elementor sem quebrar o layout.
O efeito secundário que mais aprecio
Menos encaixes significa menos HTML por página. Isso não é um milagre de desempenho — o tempo de carregamento depende muito mais das imagens e dos scripts. Mas é um passo na direção certa, e não custa nada, porque já está a construir de qualquer forma. As maiores alavancas para o tempo de carregamento estão em Elementor e Core Web Vitals.
Elementor Pro: os contentores existem nas duas versões. O Pro só se torna relevante quando quiser usar esta estrutura também no cabeçalho, no rodapé e nos layouts de artigo. Ver o Elementor Pro
Se está a começar de novo
Nem sequer aprenda o sistema antigo. As secções e as colunas ainda vão aparecer-lhe durante muito tempo em tutoriais e vídeos mais antigos — pode lê-los sem os usar. Comece diretamente pelos contentores; isso poupa-lhe aprender um modelo para o desaprender mais tarde.
É exatamente assim que procedo também na minha formação de Elementor: flexbox desde o início, porque é esse o estado sobre o qual vai trabalhar nos próximos anos.
Etiquetas