Divi 3.0 apresenta um incrível construtor de front-end para sua loja WooCommerce

Divi é o nosso tema WordPress de escolha quando se trata de WooCommerce, eo novo Divi 3.0 apresenta um novo “construtor visual” (também chamado de “editor front-end”) que foi reconstruído a partir do zero usando o React, uma biblioteca JavaScript moderna para interfaces de usuário. Esse novo construtor permite que os usuários editem suas páginas do WordPress no front-end de seu site usando controles visuais simples e bonitos. Quando você ativa o construtor, vê sua página exatamente como apareceria no front-end de seu website.

Com o construtor ativo, no entanto, a página torna-se editável usando a vasta gama de elementos de conteúdo e configurações de design do Divi. Você pode clicar em um parágrafo e começar a digitar, realçar texto e ajustar sua fonte, tamanho e estilo, ou abrir as configurações de qualquer elemento e alterar seu conteúdo, aparência e posicionamento. Arrastar, soltar, redimensionar, copiar, colar, excluir e duplicar elementos também é fácil.

A página se torna viva e cada elemento parece tangível porque você é capaz de manipular tudo de maneira natural e intuitiva. Quando você faz uma alteração de design ou adiciona um novo conteúdo a uma página, essas alterações aparecem instantaneamente. Isso ocorre porque o novo construtor visual não depende do carregamento tradicional, portanto, há necessidade de atualizações de página ou barras de carregamento Ajax durante a maior parte da experiência do construtor. Este é o futuro do WYSIWYG.

Adicionar novo conteúdo dos módulos 40 + da Divi

Adicionar novo conteúdo no Divi 3.0 é simples. Passe o mouse sobre o local desejado na página e clique no botão "+" para adicionar um novo elemento. Você é recebido com uma lista de módulos de conteúdo 40 + do Divi que podem ser usados ​​para criar praticamente qualquer tipo de site. Não há necessidade de arrastar e soltar conteúdo de um dock central porque a dica de ferramenta de conteúdo do Divi está sempre disponível quando você precisa.

Inline-Editor-1

Personalize facilmente tudo

A beleza do Divi 3.0 se torna aparente quando você começa a ajustar o design do seu conteúdo. Tudo pode ser personalizado e você pode ver essas mudanças aparecerem em tempo real:

  • Escolha entre dezenas de fontes personalizadas.
  • Ajuste a cor do texto, tamanho, altura da linha e espaçamento entre letras.
  • Adicione preenchimento e margens personalizados.
  • Altere as estruturas das colunas e as alturas das linhas.
  • Adicione cores e imagens de fundo.
  • Ativar fundos de paralaxe e fundos de vídeo.
  • Arraste, solte, copie e cole elementos de conteúdo.
  • Aplique configurações de design diferentes para cada ponto de interrupção responsivo.
  • Arraste para ajustar as alturas e larguras das linhas.
  • Desfrute de uma bela experiência de edição inline

Quando o novo construtor visual está ativo, todo o texto na página se torna editável. Não há necessidade de abrir as configurações de um elemento para ajustar seu conteúdo de texto. Basta clicar em qualquer parágrafo e começar a digitar para adicionar texto ou destacar qualquer texto para ajustar sua fonte, tamanho, estilo e espaçamento. Eles criaram sua própria interface do editor in-line que é super suave e maravilhosa de usar. Se você já se sentiu frustrado com a interface padrão do TinyMCE, ficará surpreso quando usar o Divi 3.0.

Experimente a velocidade inacreditável

O criador visual do Divi 3.0 é provavelmente a experiência de construção de sites online mais rápida que você já utilizou. Há pouco ou nenhuma atualização de página ou barras de carregamento do Ajax. De fato, não há nenhum carregamento tradicional de qualquer tipo durante a maior parte do processo de construção. Isso ocorre porque o JavaScript capacita o construtor e a experiência de construção ocorre inteiramente no seu navegador.

Em vez de depender da comunicação entre o navegador e o servidor para que ocorram alterações, o construtor Divi 3.0 só precisa aguardar o tempo necessário para que o aplicativo calcule cada alteração. Quando usado com um computador decente e um navegador moderno, você experimentará atualizações quase instantâneas à medida que adiciona e ajusta o conteúdo. A carga do servidor, a velocidade do servidor e a velocidade da Internet não são mais um fator.

A interface de construtor "invisível" e personalizável

Interface

Eles nomearam com código o design do novo criador visual de “Interface Invisível”. Isso representa uma de suas principais filosofias de design, que é que “um bom design geralmente passa despercebido.” A melhor interface do usuário é uma que não atrapalha, e um que prevê suas intenções e oferece soluções. Isto é o que significa que uma interface é verdadeiramente “intuitiva”. O Divi 3.0 não bombardeia você com grades, linhas e botões desnecessários. Não há cabeçalhos flutuantes ou barras laterais para roubar a sua tela ou overlays para obscurecer sua visão. Quando você carrega o construtor pela primeira vez, talvez nem saiba que ele está lá, mas quando você começa a explorar a página com o mouse, os controles se tornam aparentes.

O construtor visual do Divi 3.0 é o primeiro construtor de páginas do WordPress a oferecer uma interface personalizável. Isso significa que você não está incluso em certas convenções de interface do usuário quando se trata de como os controles do construtor são exibidos. Você pode escolher que essas configurações apareçam em um popup modal, ou você pode encaixar esse popup na lateral da página e entrar no modo “sidebar”. Você pode ajustar
o tamanho e a posição do pop-up e da barra lateral para que você possa otimizar seu espaço com base no tamanho da sua tela ou no conteúdo da sua página.

Catalin Zorzini

Eu sou um blogueiro de web design e comecei este projeto depois de passar algumas semanas lutando para descobrir o que é a melhor plataforma de comércio eletrônico para mim. Confira minha corrente top 10 construtores de sites de comércio eletrônico.