Destaque do produto Divi: Pacote Divi Designer

O Divi Designer Pack é um pacote de layout com mais de 720 elementos de design que você pode usar com o Divi Builder para criar sem esforço seu próximo site. Ele vem com layouts claros e escuros e uma variedade de designs para cada seção da sua página. Neste post, vamos dar uma olhada em alguns dos layouts que acompanham o Divi Designer Pack para ver se este é o produto certo para você.

Vamos começar!

Instalando o Divi Designer Pack

O Divi Designer Pack vem como um arquivo .ZIP contendo arquivos .json da Divi Library. Os layouts são empacotados para que você possa instalar todos os layouts, todos os layouts de uma determinada categoria ou todos os layouts claros ou escuros de uma determinada categoria, dependendo de suas necessidades.

Para instalar os layouts, comece descompactando o arquivo .ZIP em seu gerenciador de arquivos. Em seguida, abra o painel do WordPress e navegue até a página Divi Library. Clique em Importar e exportar na parte superior e selecione a guia Importar. Escolha um arquivo de pacote de layout .json para importar e selecione Importar layouts do Divi Builder.

Depois que o layout for importado, abra sua página no Divi Builder. Clique no ícone de adição azul para adicionar uma nova seção e selecione Adicionar da biblioteca.

Localize o layout que deseja usar na Biblioteca Divi.

Em seguida, clique no botão Usar esta seção para carregar o layout em sua página.

Pacote Divi Designer

O Divi Designer Pack vem com mais de 720 layouts para várias seções do site com designs claros e escuros. Cada um dos layouts pode ser personalizado ao seu gosto e todo o conteúdo pode ser substituído pelo seu. Como há tantos layouts diferentes neste pacote, não podemos abordá-los todos neste post. Vamos dar uma olhada em alguns layouts de cada categoria para lhe dar uma ideia de quais designs você pode obter com o Divi Designer Pack. Você também pode visualizar todos os layouts no site de demonstração ao vivo.

Seções de Design Divi Designer

Divi Designer Sobre Seções

Existem 25 layouts de seção no total. O Layout 2 tem uma imagem e uma caixa de texto sobreposta com um número. Há texto no lado direito, junto com alguns módulos de sinopse.

Aqui está a versão escura do layout 2.

O Layout 11 apresenta um design de dois tons com algum texto à esquerda e uma imagem à direita, um botão CTA e alguns módulos de sinopse com ícones de mídia social.

Sobre o layout 17 usa formas de gradiente ao redor de uma imagem. Há algum texto e um botão CTA à esquerda, junto com alguns módulos de sinopse com ícones de seta.

Seções do blog Divi Designer

Existem 7 seções de blog no total, com variações escuras e claras. Essas seções exibem uma seleção de postagens em seu blog. O Layout 1 tem um design simples e minimalista, com efeito de foco de zoom nas imagens e efeito de foco de sublinhado no título do post.

O terceiro layout do blog apresenta um botão CTA no canto superior direito e cartões com um leve efeito de sombra.

Aqui está a variação escura do layout do blog 5. Ele apresenta um efeito de foco que adiciona um sublinhado ao título do post e move o cartão ligeiramente para cima.

O layout do blog 7 apresenta um cartão com as informações da postagem na parte superior, a imagem no meio e um botão de mais informações na parte inferior.

Divi Designer Seções do carrossel

Existem 16 designs diferentes de carrosséis, com vários tipos diferentes de carrosséis. O primeiro exemplo é o carrossel 4, um carrossel de membros da equipe. Cada cartão de membro da equipe apresenta uma imagem, nome, cargo, descrição e ícones de mídia social.

O Layout 7 é um carrossel de depoimentos. Este é o layout escuro. Cada item do carrossel apresenta uma foto de perfil, texto de depoimento, nome e cargo.

Carrossel 13 é um carrossel de postagem de blog. É um layout de cartão simples com a categoria do blog no canto superior direito da imagem e o título do post abaixo.

Divi Designer Seções de contato

O Divi Designer vem com 20 layouts de seção de contato. Este é o layout 4, que apresenta algum texto e informações de contato à esquerda e um formulário de contato à direita.

O layout de contato 6 é uma seção simples com um número de telefone, algum texto e um botão CTA à esquerda, com uma imagem à direita.

O Layout 15 apresenta o formulário de contato à esquerda com informações de contato à direita sobre um plano de fundo gradiente.

Esta é a variação escura do layout 15.

Divi Designer Counter Sections

Existem 16 layouts de contador no total. O primeiro layout é para obter um orçamento gratuito e tem algum texto e um botão CTA à esquerda e uma imagem e alguns contadores de números abaixo.

O Layout 9 apresenta algum texto na parte superior e contadores de números com ícones abaixo.

O layout de contador 11 tem uma barra de contador que é preenchida à medida que a página é carregada. Este é o layout escuro.

O layout do contador 15 apresenta texto à esquerda e um botão CTA, com mais algum texto à direita, seguido por contadores de números.

Divi Designer CTA Seções

Existem 15 layouts de CTA no Divi Designer Pack. Este primeiro exemplo é o layout 5. É uma seção CTA que destaca um aplicativo móvel e apresenta imagens que podem ser vinculadas à Google Play Store e à App Store.

Este é o layout 7 do CTA na variação escura. Ele tem uma imagem sobreposta escura com um ícone, texto e dois botões CTA.

O Layout 9 apresenta um módulo de sinopse com algum texto e um botão CTA sobrepondo uma imagem com cantos arredondados.

O Layout 10 apresenta alguns ícones de texto e mídia social.

Seções de perguntas frequentes do Divi Designer

Existem 15 layouts de seção de perguntas frequentes. Esta é a seção um do FAQ. Ele apresenta uma imagem grande de um lado e perguntas frequentes de estilo alternado à direita.

E esta é a versão escura da seção um do FAQ.

O layout de FAQ 4 tem um layout de alternância de largura total.

Por fim, o layout 7 do FAQ apresenta perguntas frequentes alternadas à esquerda e uma imagem, algum texto e um botão CTA à direita.

Divi Designer Hero Seções

Existem 30 layouts de seção de heróis no total. O primeiro, layout 8, apresenta algum texto no lado esquerdo com uma imagem transparente de uma pessoa no lado direito.

O layout do herói 9 apresenta uma imagem de fundo escurecida com um grande texto do herói e uma barra de pesquisa. Abaixo da barra de pesquisa, há três cartões de imagem com texto descritivo e um botão para ler mais.

O Layout 19 usa uma grande imagem de fundo escurecida e apresenta algum texto e dois botões.

Seções de preços do Divi Designer

Há também 20 layouts de preços. Este é o layout de preços 7. Ele apresenta um fundo rosa e dois cartões de preços com algum texto à direita. Cada cartão de preços tem um título e subtítulo, um preço, detalhes e um botão comprar agora.

O layout de preços 8 apresenta três níveis de preços. O título e o preço, juntamente com o subtítulo, estão à esquerda. Os recursos estão à direita, apresentados com marcas de seleção, e o botão comprar agora está à direita. A opção do meio é destacada em verde.

O Layout 12 apresenta três cartões com ícone, título, subtítulo e preço no topo de cada cartão. Há um banner verde que separa o topo dos recursos e, em seguida, uma lista de recursos seguida de um botão. Cada cartão tem um efeito de foco que move o cartão para cima ao passar o mouse.

Aqui está a versão escura do layout de preços 19. Ele tem alguns ícones de sinopse na parte superior para destacar os recursos e três blocos de planos de preços.

Divi Designer Services Seções

O Divi Designer Pack vem com 25 layouts de serviços. O Layout 3 apresenta um cabeçalho, três módulos de sinopse em um fundo escuro com texto descritivo e um botão.

O layout de serviços 14 tem três cartões com um ícone na parte superior, algum texto descritivo, uma lista de texto numerada e um link para visualizar detalhes.

O Layout 19 apresenta algum texto de cabeçalho e texto de descrição, junto com seis módulos de sinopse com ícones representando cada serviço.

Esta é a versão escura do layout de serviços 25. Possui quatro seções de serviços com um efeito de foco que torna o cartão escuro.

Divi Designer Slider Seções

Há um total de 15 layouts de controle deslizante. O layout do controle deslizante 1 apresenta um pequeno controle deslizante de texto com um número, texto e um botão em cada slide. Há uma seção de título com fundo verde acima do controle deslizante e uma imagem no lado direito.

O layout do controle deslizante 8 é um controle deslizante de imagem grande com uma sobreposição escura. Há um texto à esquerda e um botão abaixo.

O layout do slider 12 tem uma grande imagem de fundo e slides de texto em um fundo branco que muda a cada slide. Há também um botão em cada slide.

Divi Designer Team Seções

Existem 25 layouts de seção de equipe no total. O Layout 8 apresenta um título e três imagens de membros da equipe com um efeito de foco. Quando você passa o mouse sobre a imagem, há uma sobreposição escura e o nome do membro da equipe, o cargo e os ícones de mídia social são exibidos.

Aqui está a versão escura do layout 8.

O Layout 13 tem um título e texto no lado esquerdo, juntamente com um botão CTA. À direita estão três imagens circulares de membros da equipe. Semelhante ao último design, quando você passa o mouse sobre a imagem, o nome do membro da equipe, o cargo e os ícones de mídia social são revelados.

Este design tem layout 18 e apresenta cartões com fotos de membros da equipe, cargos e links de mídia social. À direita, há um título e uma descrição, seguidos por um botão CTA.

Seções de depoimentos do Divi Designer

Existem 25 seções de depoimentos diferentes. Este é o layout 1 e apresenta o cabeçalho e o corpo do texto na parte superior, seguidos por três seções de depoimentos. Cada depoimento tem um ícone, uma imagem, corpo do texto, um nome, cargo e empresa.

Esta seção é o layout 2. Ele apresenta dois cartões de depoimento com um ícone de citação, texto, imagem, nome, cargo e cargo da empresa em uma imagem de fundo com sobreposição escura. À esquerda, você pode encontrar algum texto de cabeçalho, texto do corpo e um botão CTA.

Esta é a versão escura do layout 5, com seções coloridas contendo depoimentos de clientes.

O Layout 7 apresenta um controle deslizante de depoimento à esquerda com uma imagem, texto de depoimento e um nome na parte inferior. À direita está o texto do cabeçalho, o corpo do texto e um botão CTA.

Modelos de Construtor de Tema Divi Designer

Em seguida, estão os modelos do construtor de temas. Estes são modelos de cabeçalho, rodapé e corpo que podem ser carregados do construtor de temas nas configurações do Divi no painel do WordPress.

Modelos de Rodapé Divi Designer

Há um total de 20 modelos de rodapé. O primeiro é o layout de rodapé 4. Este design apresenta um logotipo, ícones de mídia social e um aviso de direitos autorais à esquerda. À direita estão duas colunas de itens de menu.

O layout de rodapé 13 tem um formulário de contato à esquerda e informações de contato e ícones de mídia social à direita. Há uma barra de sub-rodapé com informações de direitos autorais também.

O layout 19 do rodapé apresenta um logotipo, endereço e horário de atendimento no lado esquerdo. No centro, há uma barra de menu e, à direita, um formulário de inscrição no boletim informativo e links de mídia social. Na parte inferior há um aviso de direitos autorais.

Modelos de Cabeçalho Divi Designer

Existem 20 modelos de cabeçalho no Divi Designer Pack também. Este é o cabeçalho 7. Ele apresenta uma barra de menu secundária em verde com informações de contato e um botão CTA. A barra de menu principal apresenta um logotipo à esquerda e itens de menu alinhados à direita.

O layout de cabeçalho 8 apresenta informações de contato com um logotipo embutido na parte superior. Abaixo estão os itens do menu.

O layout de cabeçalho 13 apresenta alguns ícones de mídia social à esquerda, um logotipo no centro e um botão CTA à direita. Abaixo estão os itens do menu, alinhados à esquerda, e uma barra de pesquisa alinhada à direita.

Divi Designer 404 Modelos

Existem 25 modelos de página 404 diferentes. O primeiro design, layout 6, apresenta as letras “OOPS” atrás do texto de erro 404. Este layout também possui um botão laranja para ir para a página inicial.

Este é o layout 9. Ele apresenta um grande texto sombreado e o erro 404, juntamente com um botão para voltar à página inicial, seguido por alguns ícones de mídia social.

O layout 12 apresenta os números 404 em fonte grande e possui um botão para voltar à página inicial.

Modelos de Blog Divi Designer

Modelos de Página de Blog Divi Designer

Existem 20 modelos de blog que acompanham o Divi Designer Pack. O layout de blog 1 apresenta um cabeçalho de imagem com um título e um botão. As postagens são listadas à esquerda com a imagem em destaque, as informações da postagem e o botão leia mais. Há uma barra lateral à direita com uma barra de pesquisa, postagens recentes e comentários recentes. Na parte inferior há outra imagem com texto sobreposto.

Aqui está a versão escura do layout do blog 1.

O layout 8 do blog apresenta alguns divisores de seção curvos e uma seção de cabeçalho com texto e um botão na parte superior. As postagens do blog têm um layout em estilo de cartão com uma imagem, detalhes da postagem e um botão para ler mais. Na parte inferior da página há outra seção de texto.

O layout de blog 18 apresenta uma seção de título com texto e um botão, seguido por duas colunas de blog. A coluna da esquerda exibe postagens com uma grande imagem em destaque. A coluna da direita apresenta apenas os detalhes da postagem e um botão para ler mais. Finalmente, há algum texto adicional no rodapé.

Modelos de Postagens Divi Designer

Existem 20 modelos de postagem diferentes que acompanham o pacote. O layout de postagem 4 tem a imagem em destaque no topo da página, com o título da postagem, as informações da postagem e um botão sobreposto. A seguir, está o conteúdo da postagem e os comentários. Há uma barra lateral à direita que apresenta uma barra de pesquisa, postagens recentes e comentários recentes. Na parte inferior da página há algum texto adicional.

Aqui está a versão escura do post layout 5. A imagem em destaque está na parte superior com um divisor curvo. O conteúdo da postagem e os comentários estão em um fundo escuro, seguidos por uma seção com uma imagem e um texto sobreposto promovendo uma oferta.

O Layout 11 começa com o título do post na parte superior e, em seguida, a grande imagem em destaque. Em seguida, você pode encontrar o conteúdo da postagem e os comentários. À direita há um cartão contendo as informações do post.

Post layout 13 também apresenta o título na parte superior, seguido da imagem em destaque. As informações da postagem estão listadas abaixo da imagem. Em seguida, há o conteúdo e os comentários do post e, finalmente, há uma seção de posts relacionados exibindo cartões com outros posts do blog.

Modelos Divi Designer Woo

Os Woo Templates são layouts que funcionam com o plug-in Woo Commerce.

Modelos de Carrinho Divi Designer

Existem 13 modelos de carrinho que acompanham o pacote. O layout do carrinho 1 apresenta um tema de cor azul. Há um cabeçalho na parte superior, seguido do carrinho onde você pode ver o conteúdo do carrinho, aplicar um cupom e atualizar o carrinho. Há um botão de retorno à loja abaixo disso. À direita está o total do carrinho, seguido do botão prosseguir para o checkout.

O layout do carrinho 2 tem um cabeçalho com um ícone de carrinho. Depois, há o carrinho onde você pode ver os produtos. Em seguida, à esquerda, há algumas informações do cupom e, à direita, o total do carrinho e o botão prosseguir para o checkout.

O layout do carrinho 8 começa com um título, seguido pelo conteúdo do carrinho. Abaixo deles estão alguns ícones de sinopse e um botão de retorno à loja. Em seguida, está o total do carrinho e um botão prosseguir para o checkout. À direita, há um módulo sanfona com algumas perguntas frequentes.

E aqui está a versão escura do layout do carrinho 8.

Modelos de Check-out Divi Designer

Existem 13 modelos de checkout no total. O layout de caixa 3 apresenta links para as páginas da loja e do carrinho na parte superior, seguidos por uma seção de entrada de cupom. Abaixo, à esquerda, estão os detalhes de cobrança e informações adicionais e, à direita, o total do pedido e o pagamento. Esta é a versão escura.

Este é o 4º modelo. Ele apresenta vários ícones na parte superior que estão vinculados ao carrinho e à loja, seguidos por uma entrada de código de cupom. À esquerda estão os detalhes de cobrança e informações adicionais, e à direita estão o total do pedido e a forma de pagamento.

Aqui está a versão escura do layout de checkout 4.

O layout de caixa 10 apresenta uma entrada de título e cupom na parte superior, seguida pelos detalhes de cobrança e informações adicionais. À direita estão o total do pedido, o pagamento e alguns módulos de sinopse.

Modelos de produtos Divi Designer

Existem 13 modelos de produtos também. Este é o layout 2, que apresenta uma imagem grande do produto na parte superior. Em seguida, está o nome do produto, custo, descrição e botão adicionar ao carrinho. Abaixo estão os produtos e comentários relacionados.

O layout do produto 6 tem um fundo mais escuro e apresenta a foto do produto à esquerda e as informações do produto à direita, com o botão adicionar ao carrinho. Abaixo estão a descrição, comentários e produtos relacionados.

O layout do produto 10 possui um layout de cartão com as informações do produto e o botão adicionar ao carrinho à esquerda. À direita está a imagem do produto. Abaixo estão comentários e produtos relacionados.

Aqui está a versão escura do layout do produto 10.

Modelos de Loja Divi Designer

Por fim, também existem 10 modelos de loja que acompanham o Divi Designer Pack. Este é o layout 4, que apresenta um cabeçalho com uma imagem, seguido de uma barra lateral e os produtos. Na parte inferior estão alguns módulos de sinopse com ícones grandes.

O layout da loja 8 apresenta um cabeçalho com texto e uma imagem, produtos abaixo com uma borda, seguidos de alguns módulos de sinopse.

Esta é a versão escura do layout de loja 8.

Por fim, o layout de loja 9 apresenta um cabeçalho com uma imagem, seguido de produtos à esquerda e uma barra lateral à direita, depois alguns módulos de sinopse na parte inferior.

Adquira o pacote Divi Designer

O Divi Designer Pack está disponível no Divi Marketplace. Custa $ 19 para uso ilimitado do site e atualizações vitalícias. O preço também inclui uma garantia de reembolso de 30 dias.

Pensamentos finais

Acabamos de atingir a ponta do iceberg neste artigo, há muito mais layouts para descobrir no Divi Designer Pack, todos com diferentes estilos e usos. Obviamente, cada layout pode ser totalmente personalizado com seu próprio conteúdo e alterado para corresponder ao seu caso de uso específico, e você pode combinar muitos layouts de seção diferentes para criar facilmente layouts de página inteira. Para visualizar todos os diferentes layouts que você obtém com o Divi Designer Pack, dê uma olhada na demonstração ao vivo.

Gostaríamos muito de ouvir de você! Você já experimentou o Divi Designer Pack? Deixe-nos saber o que você pensa sobre isso nos comentários!