Uma olhada nos temas elegantes Divi 2.4

Publicados: 2015-06-22

miniatura divi Divi é atualmente o tema WordPress mais poderoso e avançado da Elegant Themes e acaba de ser atualizado com a maior atualização de sua história. O Divi oferece blocos de construção que você pode usar para criar layouts e áreas de conteúdo interessantes. Você pode adicionar texto, controles deslizantes, mapas, sinopses, acordeões, estruturas de preços e muito mais. Você pode criar praticamente qualquer tipo de site que precisar. E é claro que é responsivo.

Sou usuário do Divi desde o primeiro dia em que foi lançado. Neste artigo, compartilho meus pensamentos sobre o Divi e dou uma olhada no que há de novo na versão 2.4.

O que há de novo em 2.4

Divi 2.4 é a base da futura linha de produtos da ET. Possui mais de 1000 configurações de design e personalizador de módulos e adiciona alguns recursos interessantes:

  • Configurações globais – mais fáceis de fazer ajustes em todo o site
  • Grade fluida – o layout da página não possui larguras fixas. Com grade fluida você pode criar suas próprias larguras.
  • Configurações avançadas do construtor – cada módulo possui configurações avançadas de CSS a partir de uma interface de usuário simples.
  • Biblioteca Divi – layouts avançados.

Opções de temas

Opções de temas

Todos os temas ET usam uma tela de opções chamada epanel. Os recursos do epanel mudam dependendo dos recursos do tema. O epanel da Divi é extenso. Possui o básico, como logotipo, favicon, barra de navegação fixa, captura da primeira imagem, estilo do blog, número de postagens a serem exibidas, etc.

  • Página da loja WooCommerce
  • Chave do MailChimp
  • Autorização Aweber
  • Ícones de mídia social
  • URLs de redes sociais
  • Fontes do Google
  • Rolagem suave – permite que a próxima linha e seu conteúdo apareçam na rolagem
  • Códigos de acesso responsivos
  • Botão Voltar ao topo
  • CSS customizado
  • E mais

As configurações de navegação incluem páginas, categorias, link inicial, menu suspenso, etc. Possui configurações de layout, gerenciamento de anúncios, personalização de SEO, integração avançada de código e documentação. Você pode fazer muitas personalizações apenas no epanel.

Personalizador de temas

Personalizador de temas

O personalizador de temas funciona a partir do front-end e adiciona muitos controles deslizantes para ajustar tamanhos de fonte, estilos, linhas, botões, cores, animações, tamanho do cabeçalho, tamanho do rodapé, imagem de fundo e muito mais. Você pode fazer todos os seus ajustes e ver os efeitos conforme eles ocorrem (WYSIWYG – o que você vê é o que você obtém).

Você pode colocar suas informações de contato e links sociais no cabeçalho. O cabeçalho é uma escolha especialmente boa para empresas, pois coloca informações importantes na frente e no centro e permanece na tela quando os leitores rolam para baixo. Também inclui layout e topografia. Assim como as personalizações padrão, você pode escolher navegação, widgets e uma página inicial estática.

Ele ainda permite que você ajuste as configurações do celular para tablet e telefone, e cada uma é independente de todas as outras configurações e umas das outras. Você vê os efeitos em uma tela que simula o dispositivo móvel para que possa ver como ele é antes de publicar. Esse é um recurso interessante porque você não precisa adquirir um dispositivo móvel apenas para verificar a aparência do site com os ajustes que acabou de fazer. Estou muito feliz em ver isso incluído.

Personalizador de Módulos

Personalizador de Módulos

Você pode personalizar a aparência dos módulos no front-end usando o Personalizador de Módulos. As personalizações incluem controles deslizantes para tamanhos, larguras, alturas etc. Você também pode escolher fontes, estilos, animações, ações etc.

Biblioteca Divi

Biblioteca Divi

A Biblioteca Divi contém layouts que você criou. Você pode editar qualquer um dos seus layouts e criar novos layouts a partir deste menu.

O Construtor Divi

O Construtor Divi

A verdadeira magia do Divi acontece quando você usa o Divi Builder. Você pode usar isso selecionando o botão chamado Use The Divi Builder acima do editor visual. A edição anterior tinha o Page Builder, que só funcionava com páginas. O Divi Builder funciona com todos os tipos de postagem.

  • O Divi também adiciona configurações de postagem ao seu editor para que você possa escolher o layout da página, a navegação por pontos, ocultar a navegação e ocultar o título da postagem em cada postagem, se desejar.

Você pode carregar um layout de página ou modificar o layout padrão. Um layout é composto de seções com linhas e colunas. Os módulos são então colocados nas colunas. Você pode alterar o layout arrastando e soltando qualquer seção, linha, coluna ou módulo.

Seções

Seções

As seções podem ser adicionadas, excluídas, clonadas e modificadas. Você pode modificar a aparência e a reação do plano de fundo, adicionar uma imagem de plano de fundo, tornar o plano de fundo transparente, escolher sua cor, reproduzir um vídeo, escolher seu tamanho geral, se pode ou não ser pausado por outros players, se possui uma sombra interna , se usar um efeito de paralaxe, e defina CSS especial. Usando essas configurações, você pode fazer com que o mesmo layout simples pareça único.

Você também pode criar um clone de cada seção – completo com as mesmas linhas, módulos, conteúdo e configurações. Claro que você pode modificar a nova seção da maneira que quiser.

Existem quatro tipos diferentes de seções. Você pode adicionar uma seção padrão, uma seção de largura total, uma seção de especialidade ou adicionar da biblioteca.

Linhas

Linhas

Você pode adicionar novas linhas e modificar linhas existentes. As colunas podem então ser colocadas nas linhas, construindo seu layout.

Colunas

Colunas

Essas colunas são onde os módulos serão adicionados. Existem 11 layouts de coluna diferentes para escolher.

Seções de Especialidade

Seções de Especialidade

Existem também 9 layouts de colunas especiais. Estes incluem várias opções para barras laterais.

Carregar da biblioteca

Carregar da biblioteca

Você pode carregar layouts dos 32 layouts predefinidos ou layouts do que você criou. Cada um pode ser modificado. Os layouts incluem vários números de colunas, grades, carrosséis, barras laterais, páginas iniciais, lojas, corporativo, portfólios, blogs, modo de manutenção, em breve, página de destino, página de vendas, estudos de caso, recursos do produto, páginas sobre, páginas de contato, páginas de compras e muito mais.

Carregar da Biblioteca 2

Sua página é construída estabelecendo linhas, colocando colunas dentro dessas linhas e, em seguida, colocando módulos nessas colunas. Você pode adicionar novas linhas, mover linhas arrastando e soltando ou excluir linhas. Os layouts pré-fabricados já os têm feito para você. Eu escolhi o Homepage Basic e ele me deu um layout com um controle deslizante, cabeçalho, quatro sinopses e uma chamada para ação.

Módulos

Módulos

Módulos são tipos de conteúdo especiais (como widgets). Você pode adicionar novos módulos, arrastá-los e soltá-los na ordem que desejar ou excluí-los. Você também pode adicionar vários tipos de conteúdo. Você pode ter quantos módulos quiser e usá-los em qualquer combinação que desejar. Você não está limitado em quantas vezes você usa o mesmo módulo. Por exemplo, se você deseja uma tela cheia de mapas, basta adicionar quantos módulos de mapa desejar.

São 40 módulos:

  • Cabeçalho de largura total
  • Menu de largura total
  • Controle deslizante de largura total
  • Portfólio de largura total
  • Mapa de largura total
  • Código de largura total
  • Imagem de largura total
  • Título da postagem de largura total
  • Imagem
  • Galeria
  • Vídeo
  • Controle deslizante de vídeo
  • Texto
  • Resumo
  • Abas
  • Controle deslizante
  • Testemunho
  • Tabela de preços
  • Chamada para ação
  • Áudio
  • Inscrever-se
  • Conecte-se
  • Portfólio
  • Portfólio filtrável
  • Balcões de Bar
  • Contador de círculo
  • Contador de números
  • Acordeão
  • Alternancia
  • Formulário de Contato
  • Barra Lateral
  • Divisor
  • Pessoa
  • Blogue
  • Comprar
  • Temporizador de contagem regressiva
  • Mapa
  • Siga as mídias sociais
  • Título da postagem
  • Código

São módulos suficientes para que você possa criar alguns layouts e recursos interessantes para o seu site. Módulos é um dos pontos fortes do Divi. Ao colocar módulos em colunas, você pode literalmente criar um layout exclusivamente seu. Usando módulos, o Divi permite que você crie praticamente qualquer tipo de site que desejar.

Cada módulo tem suas próprias configurações. A maioria deles tem um editor, configurações avançadas de design e configurações de CSS, para que você possa adicionar seu conteúdo e modificar sua aparência. Veja alguns módulos e suas características:

Texto

Texto

Texto fornece o editor básico e seleções para cor e orientação do texto, configurações avançadas de design (controles deslizantes para larguras, alturas, cores, margens etc.) e CSS personalizado. A maioria dos módulos inclui esses recursos ou recursos semelhantes.

Resumo

Resumo

Cliquei no Blurb para ver que tipo de conteúdo eu poderia adicionar. Aqui eu posso dar um título, URL, determinar como o URL funciona, dar um ícone, escolher cores, fontes, ext., e então adicionar conteúdo usando o editor TinyMCE padrão. As configurações avançadas de design incluem as mesmas configurações do módulo de texto, mas com uma configuração de imagem adicionada.

Mapa

Mapa

Mapa dá-lhe um bom mapa que você pode exibir como mapa regular (com ou sem terreno) ou vê-lo na visualização de satélite (com ou sem rótulos). Você pode adicionar alfinetes para destacar locais específicos no mapa. Basta digitar o endereço e selecionar para adicionar um novo pin. As configurações avançadas fornecem um filtro de escala de cinza com controles de porcentagem.

Blogue

Blogue

O módulo Blog é interessante. Ele permite que você coloque as postagens do blog em uma única coluna de qualquer largura de sua escolha. A razão pela qual eu gosto disso é que você pode ter uma página inicial estática e ainda exibir suas postagens de blog de categorias específicas que você escolher. Você pode mostrar quantos quiser e pode mostrar um trecho, nome do autor, data, categorias, paginação, imagem em destaque, botão leia mais e muito mais. Isso daria um layout de estilo de revista interessante. Ele inclui as mesmas configurações avançadas de design do módulo de texto, mas com algumas configurações extras para cores de fundo e cabeçalhos.

Título da postagem

Título da postagem

Este é um dos novos módulos. Ele permite que você crie a aparência do título da postagem e escolha o que está incluído e o que não está. Os recursos avançados de design são basicamente os mesmos do módulo de texto, com algumas configurações extras, como cor de fundo.

Título da postagem 2

Aqui está uma olhada nas configurações avançadas de design para o módulo de título do post.

Usando Divi como um tema regular

Usando Divi como um tema regular

Claro que você não precisa usar nenhum desses recursos. Você pode usar o Divi como faria com qualquer outro tema. Basta escolher a configuração desejada no epanel e criar conteúdo normalmente – usando o editor padrão. Isso torna um site ou blog simples e limpo, elegante o suficiente para ser usado como está.

Suporte de linguas

Suporte de linguas

O Divi possui suporte integrado para mais de 30 idiomas e pode ser traduzido para outros. Isso inclui o front-end e o construtor, que é exibido da direita para a esquerda quando um idioma RTL está ativado.

Obtendo Divi

Obtendo Divi

O Divi faz parte do Plano Pessoal do ET, que custa US$ 69 por ano e inclui acesso a todos os temas, atualizações perpétuas, suporte e uso ilimitado. Se você cancelar sua assinatura, poderá manter tudo o que baixou do ET.

Divi por si só vale esse preço na minha opinião (especialmente quando você considera que a maioria dos temas desse calibre custa muito mais do que isso), mas quando você considera que inclui 87 temas e contando, juntar Elegant Themes por pelo menos um ano é um não- cérebro.

Mais abaixo na estrada

Os próximos lançamentos na agenda do ET são o plugin Divi Builder, um tema de revista chamado Extra que compartilhará os mesmos elementos de construção, mas com foco no layout da revista, e depois o Divi 3.0. É claro que a ET está totalmente comprometida com o sucesso do Divi e da plataforma do construtor Divi. Agora que vi o Divi 2.4, não consigo imaginar as melhorias e os recursos do Divi 3.0.

Plugin Divi Builder

Uma desvantagem do Divi é que, depois de criar um layout de página, você não pode alternar temas sem recriar as páginas e postagens. O ET resolveu isso com um plugin gratuito que mantém o layout, não importa qual tema você esteja usando. Você consegue manter todos os seus layouts e módulos, mesmo que não use um tema do ET. Este plugin deve estar disponível em breve.

Pensamentos finais

O Divi pode criar layouts complexos, mas ainda é fácil de usar. Não tem uma grande curva de aprendizado. Você pode facilmente adicionar elementos e arrastá-los e soltá-los em qualquer lugar que desejar para criar seus próprios layouts personalizados e modificar sua aparência com controles deslizantes. Eles podem ser tão complexos ou tão simples quanto você quiser.

Pode levar algum tempo para obter seu layout do jeito que você deseja, mas pelo menos você pode salvar seus layouts como modelos ou usar layouts pré-fabricados que podem economizar muito tempo de desenvolvimento. É mais fácil do que nunca fazer ajustes de estilo avançado e cada configuração tem um botão de desfazer para que você não precise se preocupar em cometer erros. Os sites feitos com o Divi parecem impressionantes em qualquer dispositivo e carregam rapidamente. Eu recomendo o Divi 2.4 da Elegant Themes.

Saiba mais sobre o Divi e baixe aqui

E você? Já experimentou o Divi? Sua experiência foi parecida com a minha? Você tem alguma coisa a acrescentar? Conte-nos sobre isso nos comentários abaixo.