Apresentando o Elementor 3.13 – Crie layouts de site enxutos e flexíveis com CSS Grid

Aprimore seus recursos de design e aproveite novas maneiras de estilizar seu site com o Elementor 3.13 para obter designs exclusivos que mantêm os visitantes do site envolvidos. Esta versão inclui uma nova opção de layout em Containers – CSS Grid, uma ótima maneira de criar layouts de sites sofisticados e leves, mantendo um alto nível de consistência. Além disso, esta atualização apresenta mais opções de estilo no widget de menu e adiciona novos recursos à nova barra superior.

Novo – CSS Grid Container – Crie Layouts Leves, Responsivos e Profissionais

Agora, ao adicionar um Container, você pode escolher entre Flexbox ou Grid Containers. O uso de Grid Containers é ideal para layouts semelhantes a grades, ajuda a manter o alinhamento dos elementos no Container e reduz a curva de aprendizado associada à transição do layout de seção-coluna para o layout de contêiner.

Com Grid Containers, você pode escolher o número de linhas e colunas que deseja compor sua grade, determinar a distância entre suas colunas e linhas usando o controle Gaps e escolher se deseja que o Auto-Flow seja baseado em coluna ou linha. Você também pode justificar e alinhar conteúdo e itens, da mesma forma que faria com um Flexbox Container.

Cada célula na grade pode aceitar um elemento, que pode ser estilizado e editado normalmente. Para atingir um nível mais alto de sofisticação, você pode colocar um Flexbox Container dentro da célula de uma grade e colocar quantos elementos desejar dentro do Flexbox Container.

Para usar o Container Grid, certifique-se de ativar os recursos Flexbox Container e Grid Container no Painel do WordPress → Elementor → Configurações → Recursos.

[Pro] Novos recursos de estilo no widget de menu

Na versão anterior, a Elementor introduziu um novo widget Menu, que permite criar menus simples de nível único e sofisticados menus suspensos de conteúdo, com conteúdo aninhado. Este widget é um divisor de águas para a criação de sites, permitindo que você crie menus bonitos e funcionais para seus sites.

O Elementor Pro 3.13 apresenta dois novos recursos que agora estão disponíveis no widget Menu:

• Ícones no nível superior do menu – esse novo recurso de estilo permite que você aprimore o design de seus menus adicionando ícones atraentes que chamam a atenção dos visitantes. Com uma variedade de ícones para escolher na biblioteca de ícones ou a capacidade de carregar qualquer SVG, você pode personalizar seus menus para combinar com o estilo do seu site e destacá-los.

Estado ativo para links âncora – indica aos visitantes do site em que parte da página eles rolaram ou clicaram quando seu menu inclui links âncora. Dessa forma, você pode melhorar a experiência do visitante ajudando-o a navegar pelo seu site.

Aprimoramentos da barra superior - continuação da reformulação da interface do usuário do Elementor

No Elementor 3.12, iniciamos a implantação gradual das próximas alterações na interface do Elementor. Essas alterações são escritas em React, o que melhora o desempenho e permite o crescimento e a escala futuros do produto. Além disso, essas alterações promovem as práticas recomendadas da Elementor, resultando em uma experiência de usuário melhor e mais simplificada.

Uma das maiores mudanças é a nova barra superior, introduzida como um experimento que você pode ativar na página de recursos do Elementor no WordPress (Elementor → Configurações → Recursos → Barra superior do editor). Nesta versão, a barra superior inclui duas atualizações:

1. Salvar opções no botão Publicar – embora não seja um recurso novo, esse recurso não estava disponível na primeira versão da barra superior. Agora, você tem acesso a todas as opções de salvamento disponíveis no Editor – Salvar como Rascunho, Salvar como Modelo e Exibir Condições (quando aplicável). Isso também significa que a barra superior agora inclui todos os recursos disponíveis anteriormente na interface do usuário herdada do editor.
2. Navegação de página – um novo recurso que simplificará seu fluxo de trabalho e tornará a transição entre diferentes páginas e partes do tema mais suave. Clicar na indicação de página no centro da barra superior abrirá um menu suspenso que inclui as cinco últimas páginas / postagens / partes do tema em que você trabalhou e permitirá que você redirecione para qualquer um deles com um único clique, sem ter que navegar de volta para o painel do WordPress.

[Pro] Preencha dinamicamente o trecho do seu post, com o conteúdo do seu post

Anteriormente, usar o widget Post Excerpt ou a tag dinâmica no WordPress significava que o conteúdo seria preenchido automaticamente a partir do Custom Excerpt inserido manualmente no WordPress. No entanto, com o Elementor 3.13, agora você tem a opção de escolher se deseja que o conteúdo seja preenchido automaticamente a partir dos primeiros caracteres de sua postagem ou do trecho personalizado no WordPress. Esta atualização resolve uma das principais solicitações desde a introdução do Loop Builder e, especificamente, desde a capacidade de adicionar o widget Post Excerpt ao seu item de loop.

Novo: Alavanque Elementor AI, perfeitamente adaptado para Elementor

O Elementor 3.13 também inclui o Elementor AI, que é integrado nativamente ao Editor e transformará a maneira como você cria sites. Esta versão apresenta a primeira fase do Elementor AI, que permite que você crie texto e código com o poder da IA. Você pode usá-lo para criar conteúdo do zero, aprimorar o conteúdo existente em seu site, traduzi-lo para qualquer site e muito mais. Além disso, você pode usar o Elementor AI para escrever código para CSS personalizado ou código personalizado (requer Elementor Pro ou hospedagem) ou trechos de HTML. Você pode ler mais sobre o que pode fazer com o Elementor AI aqui.

Melhorias de desempenho

Nas versões anteriores, as melhorias de desempenho concentravam-se nos widgets mais comuns nas páginas principais. Com o Elementor 3.13, o foco mudou para widgets usados ​​principalmente em páginas internas, onde os visitantes do site costumam passar a maior parte do tempo.

Os widgets Caixa do autor, Informações do post e Lista de preços exibem imagens e fotos de perfil do usuário; essas imagens agora têm um carregamento lento aplicado a elas. Essa alteração deve melhorar o carregamento de página inicial de suas páginas internas.

Além disso, como o cabeçalho aparece acima da dobra, ele sempre deve ser carregado imediatamente após o carregamento da página. Portanto, o carregamento lento foi removido dos cabeçalhos para melhorar a experiência do visitante ao usar o experimento Lazy Load Background Images.

Melhorias de acessibilidade

O Elementor 3.13 está cheio de ajustes e correções que melhoram a acessibilidade do seu site, bem como o Editor. Nesta versão, focamos na navegação pelo teclado, implementando tags ARIA adicionais, corrigindo problemas de conformidade ARIA existentes e aplicando marcação semântica.

Você pode ler mais sobre essas melhorias de acessibilidade no Blog dos desenvolvedores.

Desfrute de mais opções de estilo e design para experiências de site de alta marca e envolventes

Eleve o design do seu site e desbloqueie novas possibilidades de estilo para personalizar seu site usando o Elementor 3.13. Com o CSS Grid Containers, você pode criar layouts leves, flexíveis e semelhantes a grades perfeitamente, e com os novos recursos de estilo no widget de menu, você pode criar designs distintos que cativam e mantêm os visitantes do site envolvidos.

Esta versão também inclui novos recursos no recurso Top Bar, o que significa que todos os recursos anteriormente disponíveis no Editor agora estão disponíveis ao usar o experimento Top Bar.

O Elementor 3.13 também inclui uma avaliação gratuita do Elementor AI, que transformará a maneira como você cria sites, permitindo que você crie instantaneamente texto original, aprimore o texto existente e codifique para aprimorar seu site e seu design.

Experimente os novos recursos do Elementor 3.13 e deixe-nos saber o que você pensa sobre eles nos comentários abaixo.