Apresentando o Elementor 3.10 – Novos elementos aninhados – o futuro do design com widgets Elementor

O Elementor e o Elementor Pro 3.10 incluem novos recursos de design que abrirão todo um novo mundo de criatividade quando se trata de projetar seus sites com Nested Elements e introduz uma nova unidade personalizada nos controles de dimensionamento que permitirão que você alcance um nível mais alto de precisão ao se trata de projetar seus sites. Essas versões também incluem uma nova biblioteca baseada em contêiner e melhorias de desempenho.

Novos elementos aninhados que irão elevar o design do seu site

O Nested Elements desbloqueia uma maneira totalmente nova de conceituar o design do seu site. Com elementos aninhados, você pode colocar qualquer elemento dentro de outro, aproveitando o poder dos contêineres Flexbox. Semelhante a como você pode colocar um Container dentro de outro, e aninha-los infinitamente, com Nested Elements, você pode colocar qualquer elemento (widget ou container), dentro de outro.

Como os Flexbox Containers são oficialmente estáveis, nos próximos lançamentos, introduziremos o recurso Nesting em vários widgets existentes, como Carrossel, Acordeão, Guias e muito mais. Também apresentaremos widgets aninhados totalmente novos, como o Mega Menu.

Apresentando o widget Renewed Tabs – O primeiro widget aninhado Elementor, desbloqueando a flexibilidade do design

Com o novo widget Tabs, você poderá liberar sua criatividade de design e atingir um alto nível de sofisticação. O novo widget Tabs é baseado em contêiner e inclui três melhorias principais, em comparação com o widget Tabs original:

• Abas e Títulos – Usando o novo widget Abas, você poderá ajustar o layout e o posicionamento das abas para determinar onde elas estão localizadas em relação ao conteúdo da aba – na parte superior, inferior ou em um de seus lados. Além disso, você terá mais opções de estilo, incluindo a capacidade de adicionar ícones ao título da guia.
• Nova área de conteúdo – Com o poder dos Flexbox Containers, a área de conteúdo de cada guia se tornará um contêiner principal, no qual você pode colocar qualquer elemento, ajustar seu layout e apresentar qualquer conteúdo que desejar – assim como a tela em branco do Editor.
• Nova configuração responsiva – Para melhorar o design e a experiência do usuário por tamanho de dispositivo, você pode escolher o ponto de interrupção no qual a guia será exibida automaticamente como um acordeão. Isso significa que você não precisa criar conteúdo diferente para cada dispositivo, o que também melhora o desempenho.

Como o widget Tabs é baseado em contêiner, para usá-lo em seu site, você precisará garantir que os experimentos Flexbox Container e Nested Elements estejam ativados. Uma vez ativado, o novo widget de guias substituirá automaticamente o existente no painel de widgets (isso não afetará o design das guias existentes em seu site).

Novas unidades personalizadas – Escolha qualquer unidade que desejar, incluindo funções matemáticas CSS

Os controles numéricos no Editor estão sendo atualizados e agora você pode escolher qualquer unidade que desejar, misturar unidades numéricas e executar cálculos de função CSS dentro delas. Muitos elementos no Editor incluem opções de dimensionamento, como preenchimento e margens, tamanho da fonte e muito mais. Usar essas unidades de dimensionamento com sabedoria pode ter um impacto positivo na precisão do design e na capacidade de resposta do site.

Anteriormente, se você estivesse ajustando o preenchimento ou as margens, por exemplo, deveria escolher um dos seguintes tipos de unidades: PX, EM, REM, % ou VW. Com esta atualização, você também poderá escolher a opção personalizada, para ser mais específico com suas escolhas de unidade. Por exemplo, você pode escolher o PX para os lados e % para a parte superior e inferior. Além disso, com esta atualização, os rótulos das unidades foram movidos para uma lista suspensa para acomodar a nova opção personalizada.

Escolher a opção Personalizado também permitirá que você execute cálculos para a medição de um valor dentro do campo de entrada de valor, dessa forma, você pode obter maior precisão de design e suporte responsivo.

Por exemplo, ao escolher a opção personalizada nos controles de tamanho de tipografia, você poderá usar a função CSS `clamp()` para ajustar o tamanho da tipografia a diferentes tamanhos de dispositivos, ou a função CSS `calc()` para calcular e defina um valor que misture unidades e muito mais.

Como parte desta versão, os seguintes controles de dimensionamento terão opções personalizadas:

• Contêineres, seções e colunas – em todos os lugares possíveis, incluindo largura personalizada, borda etc.
• Controles de tipografia – altura da linha, espaçamento entre letras e entre palavras.

Áreas adicionais também serão atualizadas no futuro.

Kits, modelos e blocos de sites completos baseados em contêiner

Com o Flexbox Containers marcado como beta, tornando-o estável e pronto para uso, era importante fornecer a você kits e modelos completos de sites baseados em contêineres. Nas últimas semanas, a equipe da Biblioteca trabalhou para criar uma biblioteca completa baseada em contêiner, para que você possa iniciar o processo de criação e design do seu site, ao habilitar o experimento Flexbox Container, usando as tendências de design mais atualizadas .

Agora, ao ativar o experimento Flexbox Container em seu site, você terá um kit e uma biblioteca de modelos totalmente novos. As atualizações também incluem dezenas dos mais populares kits completos de sites e modelos de página que foram convertidos do layout baseado em seção para Flexbox Containers, bem como novos kits de sites e modelos de página.

Com a nova biblioteca, há duas atualizações adicionais dignas de nota. A primeira é que introduzimos algumas mini-lojas, um kit de site completo de uma página para sites de comércio eletrônico, incluindo botões PayPal e Stripe para cobrança de pagamentos. A segunda é que todos os Blocos anteriores (como Contato, 404, etc.) foram substituídos por designs completamente novos.

[Pro] Data de vencimento dinâmica no widget de contagem regressiva

O Widget de contagem regressiva, uma ótima ferramenta para criar FOMO e impulsionar a conversão, agora possui um controle dinâmico de tags na data de vencimento. Com esta atualização, você poderá usar campos personalizados nativos do WordPress, bem como campos personalizados do ACF e PODS para preencher dinamicamente a data de vencimento em cada página.

Com os novos controles dinâmicos de tags, você poderá usar o widget Countdown no modelo Single Post, por exemplo, e adicionar um campo personalizado no WordPress a cada um dos seus posts que inclui a data de vencimento que você deseja incluir em cada post. Isso também permitirá que você entregue um site a um cliente, permitindo que ele atualize a data de vencimento no WordPress, sem enviá-lo ao Editor, onde poderá alterar seu design.

Novidade: desativar totalmente as fontes do Google

As fontes do Google, uma popular biblioteca de fontes on-line, permitem que você use uma variedade de fontes em seu site. No entanto, em eventos recentes, descobriu-se que o Google Fonts violava o GDPR e os regulamentos de privacidade.

Para eliminar esse risco, o Elementor permite que você remova todas as fontes do Google do seu site. Ao desativar as fontes do Google, você não poderá mais usar a biblioteca de fontes on-line do Google no Editor, o que reduzirá o número de fontes disponíveis para você no Editor para 7 fontes. Se você já usou uma fonte do Google em seu site, mas optou por desativar as fontes do Google com esta atualização, todas as fontes em seu site serão padronizadas para uma das fontes disponíveis em seu site. Para continuar usando suas fontes favoritas, você pode carregar fontes hospedadas localmente no Elementor usando o recurso Fontes personalizadas, disponível para usuários do Elementor Pro.

Melhorias de desempenho e acessibilidade

No Elementor 3.10, continuamos a introduzir melhorias de desempenho e acessibilidade. Esta atualização inclui três novas atualizações de melhoria de desempenho e duas atualizações de melhoria de acessibilidade.

Carga lenta do Google Maps

O widget Google Maps da Elementor permite que você coloque um mapa em qualquer lugar do seu site, o widget perfeito para usar quando você deseja compartilhar um local específico com os visitantes do seu site. Com esta atualização, você poderá fazer o carregamento lento de iframes do Google Maps, o que acelera o carregamento inicial da página.

Carregamento lento de imagens com tamanhos personalizados

O tamanho da imagem que você usa pode ter um impacto significativo no desempenho do seu site. Nas atualizações anteriores, adicionamos a capacidade de carregar lentamente quase todas as imagens carregadas na biblioteca de mídia. Com o Elementor 3.10, você também poderá carregar lentamente imagens de tamanho personalizado.

Controlando o pré-carregamento de vídeos auto-hospedados

Semelhante às imagens, os vídeos também afetam a velocidade e o desempenho do seu site, com os vídeos auto-hospedados geralmente tendo mais impacto do que os vídeos hospedados no YouTube, por exemplo, que aplicam técnicas de otimização. Com esta atualização, em vez de carregar vídeos auto-hospedados durante o carregamento inicial da página, você pode escolher se deseja pré-carregar o vídeo, os metadados do vídeo ou não pré-carregar nenhum conteúdo antes que o visitante clique em reproduzir.

Melhorias de acessibilidade para navegação na página

O widget Block Quote e o widget Post Comments, dois widgets do Elementor Pro, receberam atualizações de marcação para torná-los ainda mais acessíveis para pessoas com deficiência que usam tecnologias assistivas para navegar pela página.

Desfrute de mais opções de design, mais capacidade de resposta e melhor desempenho

O Elementor 3.10 desbloqueia uma variedade de novas oportunidades de design para você usar em seu site. A introdução do novo widget Tabs, a primeira atualização que aproveita o recurso Nested Elements, permitirá que você crie layouts altamente avançados e criativos usando todos os widgets do Elementor, de uma maneira familiar de arrastar e soltar. Ao habilitar o Flexbox Containers para usar esse novo widget, você também será exposto a um kit totalmente novo baseado em contêiner e a uma biblioteca de modelos para iniciar seu processo criativo.

Certifique-se de experimentar o Elementor 3.10 e deixe-nos saber o que você pensa nos comentários abaixo.