Destaque do produto Divi: Divi Den Pro – Biblioteca de Layout

Divi Den Pro – Layout Library é um plug-in de terceiros com uma enorme biblioteca de elementos Divi pré-projetados para ajudá-lo a criar sites mais rapidamente. Ele inclui uma interface de usuário exclusiva que pode ser pesquisada e classificada, facilitando a localização dos layouts. Neste post, vamos dar uma olhada no Divi Den Pro – Layout Library para ajudá-lo a decidir se é o produto certo para sua caixa de ferramentas de design Divi.

Instalando o Divi Den Pro – Biblioteca de layouts

A instalação do Divi Den Pro – Layout Library foi simples. Funciona da mesma forma que carregar qualquer plug-in, mas você precisará estar conectado à sua conta do Divi Marketplace para que ele esteja disponível no Divi. Primeiro, para instalar, acesse:

1. Plugins
2. Adicionar novo
3. Carregar plug-ins
4. Escolher arquivo
5. instale agora

Em seguida, uma vez instalado o plug-in, ative-o como de costume e você verá um novo menu adicionado ao seu painel.

1. Ativar plug-in

Conteúdo da biblioteca de layouts

O Divi Den Pro – Layout Library vem com 2.615 itens de biblioteca. Isso inclui 1.988 seções e módulos, 631 layouts, 39 menus e 18 designs completos de sites. Todos os itens são pré-estilizados. Os layouts são rotulados, testados e otimizados para diferentes tamanhos de tela.

Existem várias maneiras de usá-los em seus layouts Divi. Você encontrará os layouts no menu Divi Den Pro DM e no Divi Theme Builder. O menu Divi Den Pro DM é a maneira mais fácil de usá-los. Você pode pesquisá-los por palavra-chave e categoria e importá-los para sua Biblioteca Divi.

Divi Den Pro DM Menu

Você encontrará um novo item de menu no painel do WordPress chamado Divi Den Pro DM. O menu inclui muitos links, que você também encontrará como guias dentro do próprio menu.

Localizador de layout

A primeira guia é o Localizador de layout. Isso inclui uma caixa de pesquisa com filtros à esquerda e os resultados à direita. Ele também inclui guias para que você possa visualizar todos os layouts, apenas os layouts gratuitos ou apenas os layouts profissionais. Os filtros mostram o número de layouts desse tipo. Eles são divididos em layouts, seções, módulos, categorias, coleções, Divi Theme Builder e Plugin Theme Builder.

A área de resultados mostra uma miniatura do layout. A miniatura rolará ao passar o mouse se o layout for maior que o contêiner. Você pode visualizar o layout em outra guia, salvar o layout em sua Biblioteca Divi ou fazer o download do layout em seu computador como um arquivo JSON.

Selecionar um filtro o abre para mostrar as opções. Abri Coleções, que mostra os nomes dos layouts do Divi Den. Selecionar um mostra os layouts dessa coleção na área à direita.

Cliquei para ver um layout e abriu a demonstração na página Divi Den em outra guia. A página mostra vários layouts, seções, etc. Estou passando o mouse sobre a imagem na parte superior central para mostrar seus efeitos de foco.

Mais recente

A guia Latest mostra as postagens mais recentes do blog Divi Den. Esta é uma boa maneira de aprender o que há de novo na Biblioteca de Layout.

Tutoriais

A guia Tutoriais inclui todos os tutoriais que ensinam como usar o Divi Den Pro – Biblioteca de Layout. Eles incluem vídeos incorporados que mostram quando você clica em um tutorial, para que você possa aprender diretamente no painel do Divi Den sem sair do WordPress. Isso ajuda na usabilidade, portanto, se precisar de ajuda com algo, você o encontrará aqui.

Construtor de temas

A guia Theme Builder divide os layouts em Divi Theme Builder e Plugin Theme Builder. Ele mostra as coleções, tipos de página, etc. Eles também são adicionados ao Divi Theme Builder. Você também pode iniciar o Theme Builder a partir daqui.

O Plugin Theme Builder tem um link para abrir o Theme Customizer.

O Theme Customizer adiciona três novas guias do customizador para página, blog e configurações globais. Isso inclui recursos adicionais, como um personalizador pop-up, uma barra adesiva, mais ícones, o botão voltar ao topo, uma página em breve, personalizações de modelos e muito mais.

Arquivos CSS personalizados

A guia Custom CSS Files fornece o CSS personalizado dos layouts Divi Den que você pode copiar e modificar. Clicar em um abre o CSS em outra guia. Um vídeo incorporado mostra como usar o CSS personalizado.

Avançado

A guia Avançado inclui a guia White Label e a guia Mais opções. O White Label permite renomear o plug-in para corresponder à sua marca.

A guia Mais opções permite mover a guia Divi Den Pro dentro dos elementos do Divi Builder. Isso é ativado por padrão.

Biblioteca de layout Divi Den Pro no Divi Builder

Uma guia para o Divi Den Pro – Biblioteca de Layout é adicionada ao modal Módulos.

Selecionar a guia abre o menu onde você pode escolher o layout desejado. Os layouts são baixados como arquivos JSON, portanto, você precisará carregá-los em páginas e postagens se quiser usá-los.

Biblioteca de layouts Divi Den Pro no Divi Theme Builder

A interface Divi Den Pro – Layout Library também foi adicionada à parte inferior da tela do Divi Theme Builder. Funciona da mesma forma que no painel do WordPress.

Funciona da mesma forma no Theme Builder e nas páginas e posts.

Exemplos de biblioteca de layout Divi Den Pro

Agora que vimos como usar a interface Divi Den Pro – Layout Library, vamos ver alguns exemplos. Veremos alguns de cada tipo.

Disposições

A seguir, veremos alguns layouts. Vou carregá-los no Divi Theme Builder. Depois de salvar os layouts em sua Biblioteca Divi, eles estarão disponíveis em seus layouts. Pesquise-os e selecione as categorias à esquerda.

Página de destino da loja V3 Ragnar

Esta é a parte superior da Shop Landing Page V3 Ragnar. Inclui uma seção de heróis com um CTA de e-mail. Uma seção de loja mostra produtos em destaque e inclui uma sobreposição animada que rola uma mensagem em texto grande ao passar o mouse.

Aqui está a parte inferior da Shop Landing Page V3 Ragnar. Imagens extragrandes criam CTAs de loja e incluem botões animados. Uma seção exclusiva do blog exibe a imagem em destaque por trás do texto que aparece em um lado.

Página de Carreiras V1 Tina

Esta é a parte superior da página de carreiras V1 Tina. Ele inclui uma imagem principal com um título sobreposto, uma introdução com uma legenda e duas colunas de texto. A seguir, há uma seção de posições abertas exibidas como cartões.

Esta é a parte inferior da página de carreiras V1 Tina. Blurbs com animações flutuantes fornecem informações seguidas por um CTA para enviar um currículo e uma seção de vantagens da empresa.

Página do blog dos velhos tempos

Este exemplo é a parte superior da página do blog Old Times. Inclui uma seção de herói com uma mensagem sobre uma imagem de fundo e um botão com uma animação flutuante. Uma seção de blog mostra uma postagem de blog com uma grande imagem em destaque à esquerda e postagens com uma imagem em destaque menor como uma barra lateral à direita. Uma linha amarela separa a seção do blog da seção do herói. Todos os cartões do blog incluem animações de inclinação.

Esta é a parte inferior da página do blog Old Times. Ele também usa linhas amarelas para separação e inclui duas seções de blog de três colunas, um grande formulário de e-mail e um rodapé.

Layout da página do menu Jamie

Aqui está a parte superior do layout da página do menu Jamie. Ele inclui uma seção de heróis com ícones vinculados às várias categorias de menu de comida. Eles incluem animações de foco. Um menu de comida de duas colunas segue com uma imagem à esquerda e uma descrição à direita. A comida é dividida em categorias.

Layout da página do menu Jamie

Esta é a metade inferior do Layout de página do menu Jamie. Ele continua o menu de comida e inclui informações de contato com um mapa de largura total.

Layout da Página Inicial do Showreel

Esta é a parte superior do layout da página inicial do Showreel. A seção do herói inclui um botão que reproduz um vídeo incorporado e várias sinopses sobre uma imagem de fundo em tela cheia. Em seguida, há um conjunto de guias para exibir informações. Imagens grandes com sobreposições animadas vinculam-se aos serviços.

Esta é a parte inferior do layout da página inicial do Showreel. Ele continua as imagens grandes e inclui outra seção de imagens para serviços com animações de sobreposição inclinada. Ele também inclui contadores de números estilizados, um formulário de e-mail e um rodapé.

Página da barra de progresso visual Freddie

Este é o Visual Progress Bar Page Freddie. Tem um layout elegante, mas o principal elemento que quero mostrar é a barra de progresso. Esta é a seção principal do layout. Um menu fica na parte inferior da tela. Quando você rola, o menu é anexado à parte superior da tela e mostra o andamento do layout.

A seção neste exemplo é estudos de caso. A barra de progresso mostra amarelo para cada seção que passei. As imagens desta seção incluem efeitos de inclinação.

Seções

Se você tiver as seções Divi Den Pro – Layout Library salvas em sua Divi Library, uma guia Divi Den Pro DM será adicionada ao seu modal Section.

Módulo de Música de Maiores Sucessos Freddie

Greatest Hits Music Module Freddie fornece uma seção de reprodutor de áudio estilizada com um fundo preto e efeitos de foco amarelos.

Demonstração da Galeria de Estilo

Styling Gallery Demo fornece uma interessante galeria de imagens com diferentes formas de borda e um bloco de cor para separar as imagens.

Graça do Processo Lintang

A Demonstração da Galeria de Estilo fornece uma lista de etapas. Eles são colocados horizontalmente e incluem imagens ou cores em forma e efeitos de foco.

Produto Thunderbolt Freddie

Thunderbolt Product Freddie é uma seção de produto que exibe um controle deslizante de produto de um lado e informações estilizadas do outro.

Alula Timeline Grace

Alula Timeline Grace cria uma linha do tempo vertical alternativa com imagens de um lado e informações do outro.

Módulos

A opção Módulos no painel mostra botões. Aqui estão alguns que baixei.

Adicionei todos os botões que baixei a uma única página. Cada um dos botões inclui animações envolventes.

Onde comprar a biblioteca de layout Divi Den Pro

Divi Den Pro – Layout Library está disponível no Divi Marketplace por $ 189. Inclui uso ilimitado do site, um ano de suporte e atualizações e garantia de reembolso de 30 dias.

Considerações finais sobre a biblioteca de layout Divi Den Pro

Essa é a nossa visão do Divi Den Pro – Biblioteca de layouts. Há muitos layouts nesta biblioteca. A interface do usuário é simples. Pesquisar, classificar, importar e baixar os layouts é intuitivo. Achei o link nas seções e módulos mais limitado do que no painel, uma vez que os layouts estão na biblioteca, eles estão disponíveis selecionando as opções Adicionar da biblioteca. Se você estiver interessado em adicionar vários milhares de layouts projetados profissionalmente à sua biblioteca Divi, vale a pena dar uma olhada no Divi Den Pro - Layout Library.

Nós queremos ouvir de você. Você já experimentou o Divi Den Pro – Biblioteca de layouts? Deixe-nos saber o que você pensa sobre isso nos comentários.