Destaque do produto Divi: o melhor kit de interface do usuário do módulo Divi

O Ultimate Divi Module UI Kit é um produto Divi Marketplace que oferece mais de 2.000 layouts pré-fabricados para facilitar o design do seu próximo site Divi. O produto oferece seções sobre nós, estilos de tabela de preços, layouts de formulário de contato, estilos de botão e até alguns layouts de site de uma página que podem ser totalmente personalizados. Neste destaque do produto, veremos mais de perto o kit de interface do usuário do módulo Divi definitivo e ajudaremos você a decidir se é o produto certo para o seu próximo projeto.

Vamos começar!

Instalando o Ultimate Divi Module UI Kit

O Ultimate Divi Module UI Kit vem como um arquivo ZIP contendo arquivos Divi Library .json. Para instalar os layouts, comece descompactando o arquivo. 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 o arquivo de layout 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 seu layout e clique no botão Usar esta seção para carregar o layout.

O kit de interface do usuário do módulo Divi definitivo

O Ultimate Divi Module UI Kit vem com mais de 2.000 layouts, então não poderemos cobrir tudo. Vamos dar uma olhada em alguns designs de cada categoria para que você possa ter uma ideia melhor do que este produto tem a oferecer e se é a compra certa para você.

Módulos de Aba

Existem 400 estilos de módulo de guia diferentes, com 100 estilos de guia inferior, 100 estilos de guia padrão, 100 estilos de guia horizontal e 100 estilos de guia vertical. Todos os módulos de guia apresentam animação flutuante nos títulos das guias e um efeito de transição de guia. Mostrarei alguns exemplos de cada estilo de guias.

Aqui estão os estilos de guia inferior 1 e 79.

Este é o estilo 9 e 38 no layout da guia padrão.

O próximo é o layout vertical direito, com estilos 14 e 52. Esse layout é rotulado como Horizontal nos arquivos do produto.

Finalmente, este é o layout vertical esquerdo, rotulado como Vertical nos arquivos do produto. Este é o estilo 71 e o estilo 95.

Há uma grande variedade de estilos e layouts para escolher, e todas as guias podem ser facilmente personalizadas com seu próprio conteúdo e opções de design.

Módulos do Blurb

Existem 100 estilos de sinopse no total. Cada estilo de sinopse apresenta algum tipo de efeito de foco. Vamos dar uma olhada em alguns em detalhes.

Este é o estilo de sinopse 4. Ao passar o mouse, as duas barras rosa ficam verticais, o plano de fundo do ícone fica rosa e há uma borda de sombra rosa.

Blurb estilo 9 tem duas barras de fundo que mudam de cor e ângulos ao passar o mouse. O plano de fundo do ícone também muda ao passar o mouse.

O Blurb 40 apresenta uma borda verde grossa e um ícone que vira ao passar o mouse.

Por fim, o estilo de sinopse 50 muda para vermelho ao passar o mouse e a guia na parte superior com o ícone muda para a direita.

Módulos Pessoais

Existem 150 estilos diferentes de módulos pessoais.

O estilo 7 do módulo Person tem um esquema de cores verde e ícones de mídia social que se movem para cima em uma formação de grade sobre uma sobreposição verde ao passar o mouse.

O estilo 34 apresenta o nome e a posição com uma borda laranja. Ao passar o mouse, as informações se movem para cima e sobre a foto e os ícones de mídia social são revelados.

Este é o layout 46. Ele apresenta o nome e a posição em uma caixa branca abaixo da foto. Ao passar o mouse, a caixa se expande para revelar ícones de mídia social.

Layout 127 tem um layout de imagem simples. Ao passar o mouse, o nome, a posição e os ícones de mídia social são revelados.

Módulos de blog

Existem 100 módulos de blog no total, com 50 estilos de visualização em grade e 50 estilos de visualização em lista. Vamos dar uma olhada em alguns de cada estilo.

O layout de grade 3 apresenta a imagem da postagem e os detalhes em um cartão com a data em uma guia na parte superior. Ao passar o mouse, um botão leia mais é revelado e uma sobreposição com um ícone aparece sobre a imagem.

O layout de grade 40 apresenta um cartão com informações de postagem e um botão leia mais sobrepondo a imagem em destaque. Ao passar o mouse, uma sobreposição escura aparece sobre a imagem.

O layout de exibição de lista 7 apresenta as informações da postagem e um botão de leitura mais em um cartão com a imagem à esquerda. A data está em uma caixa azul sobre a imagem.

O layout de exibição de lista 18 apresenta um layout mais escuro com uma imagem à esquerda e informações de postagem à direita. Ao passar o mouse, o cartão se move ligeiramente para cima e a imagem se expande.

Seções sobre nós

Existem 100 designs de seção sobre nós.

Este é o estilo de layout 7. Ele apresenta algum texto à esquerda, junto com alguns recursos marcados com ícones. Há um botão de contato abaixo e uma imagem à direita.

Esta seção de largura total apresenta algum texto na parte superior, um botão CTA, três contadores de números e uma imagem à direita.

Este layout de viagem é estilo 17. Ele apresenta uma imagem grande à esquerda e algum texto e um ícone à direita. Abaixo estão quatro imagens que aumentam ao passar o mouse e se abrem em uma caixa de luz quando selecionadas.

O estilo 61 apresenta algum texto à esquerda, três recursos destacados com um ícone de marca de seleção e uma imagem no centro. À direita, você pode encontrar uma caixa amarela com horas e um botão para marcar um horário.

Módulos de preços

Existem 150 estilos de módulo de precificação no total.

O estilo 3 do módulo de preços usa um esquema de cores preto e verde. Ao passar o mouse, a caixa de preços se expande e o cabeçalho fica verde.

Este é o módulo de precificação 29. Ao passar o mouse, uma seta vermelha aparece à direita do preço e o título da camada é destacado em vermelho.

O estilo de módulo de preços 66 apresenta um cabeçalho que fica roxo ao passar o mouse.

O layout 72 apresenta um plano de fundo gradiente.

Módulos de depoimento

Existem 75 estilos diferentes de módulos de depoimentos que acompanham o UI Kit. Aqui estão alguns.

Este é o layout de depoimento 5. Ele apresenta uma borda laranja e um ícone de citação na parte superior, seguido pela imagem do perfil, depoimento, nome e informações do trabalho.

O Layout 33 apresenta um cartão contendo o depoimento, nome, cargo e uma imagem no lado esquerdo. Ao passar o mouse, o cartão é contornado em verde, a fonte do nome fica verde e a imagem vira.

O Layout 71 apresenta uma imagem à esquerda sobre um fundo de imagem grande. À direita, há um controle deslizante de depoimento dentro de uma caixa de citação.

Seções do formulário de contato

Existem 100 seções de formulário de contato para escolher. Aqui estão apenas alguns.

O layout 1 é um design simples com algum texto à esquerda, informações de contato com alguns ícones, ícones de mídia social e um formulário de contato com um botão azul.

O Layout 29 apresenta um mapa grande na parte superior, seguido pelo endereço, telefone e informações de e-mail à esquerda. À direita está um formulário de contato.

O layout da seção de contato 41 apresenta uma imagem com uma sobreposição amarela. Há um texto à esquerda com um botão CTA listando um número de telefone. O formulário de contato está à direita, sobre uma sobreposição branca.

O Layout 75 apresenta três caixas com informações de contato e ícones amarelos. Abaixo deste está o formulário de contato, com um botão amarelo. Isso está em um fundo de imagem que está desaparecendo em branco.

Seções do boletim informativo

Existem 25 seções de inscrição no boletim informativo.

O estilo 2 apresenta algum texto de cabeçalho e um formulário de inscrição de e-mail em um fundo de imagem parallax.

O Estilo 5 tem uma imagem à esquerda e algum texto de cabeçalho à direita, seguido por um formulário de inscrição.

Este é o layout 15 do boletim informativo. Ele apresenta algum texto de cabeçalho à esquerda, seguido por um formulário de inscrição e alguns links de mídia social. Há uma imagem redonda à direita.

O Layout 20 é um design em estilo de cartão, com duas imagens em estilo de cartão em cada lado e o formulário de inscrição em um cartão no meio. Há um ícone na parte superior, seguido por um texto de título e o formulário. Na parte inferior, há um pequeno texto de isenção de responsabilidade com um ícone.

Módulos Acordeão

Existem 40 estilos de acordeon no total.

O Estilo 2 apresenta um título verde e o conteúdo sanfonado em uma caixa cinza. O botão para cada guia está à direita.

O estilo acordeão 8 usa guias laranja e caixas de conteúdo brancas. Existem setas pretas que apontam para a guia aberta.

O estilo acordeão 14 apresenta uma guia de estilo arredondado com uma seção de conteúdo branca.

Por fim, o estilo 36 apresenta ícones roxos em cada guia e possui uma borda roxa sublinhando a guia ativa.

Módulos deslizantes

O Ultimate Divi Module UI Kit vem com 100 estilos de módulos deslizantes.

O controle deslizante 2 apresenta um grande texto de cabeçalho e um botão CTA sobre uma grande imagem paralaxe com uma sobreposição escura.

O estilo deslizante 31 também apresenta texto de título e um botão CTA em uma imagem com uma sobreposição escura. Há um círculo vermelho atrás do texto do título.

O controle deslizante 72 tem mais conteúdo, com um controle deslizante que altera o conteúdo do texto na parte superior e um botão CTA abaixo. Existem três caixas de conteúdo abaixo com um ícone e algum texto descritivo.

Por fim, o layout do slide 86 apresenta algum conteúdo de texto à esquerda que muda a cada slide, bem como dois botões CTA. Há um vídeo à direita, seguido por outro botão CTA.

Seções da linha do tempo

Existem 100 estilos diferentes de linha do tempo para escolher.

O estilo 4 da linha do tempo apresenta cartões com um ícone e texto para cada etapa da linha do tempo.

Em seguida, a linha do tempo 12 tem o ícone da linha do tempo de um lado e o texto de descrição da linha do tempo do outro lado.

O estilo 32 da linha do tempo apresenta uma linha pontilhada com ícones para cada etapa. O texto da descrição está contido em uma caixa que aponta para o ícone correspondente.

Timeline 91 é um layout simples com ícones no centro e texto de descrição da linha de tempo em cada lado.

Layouts de uma página

O UI Kit também vem com 42 layouts de site de uma página diferentes que abrangem uma ampla variedade de setores e casos de uso. Vamos apenas dar uma olhada em alguns deles.

Este é o layout de viagens e turismo. Ele começa com uma barra de menu secundária listando o logotipo, endereço, horário e informações de contato. A barra de menu principal possui itens de menu e um botão para fazer login ou registrar-se. O título é uma imagem grande com algum texto e um botão CTA. Isso é seguido por algumas seções numeradas com imagens e textos que descrevem destinos de viagem. Existem alguns módulos contadores de números na seção com fundo amarelo, e a próxima seção apresenta alguns módulos com ícones.

Abaixo está um controle deslizante de depoimento, seguido por uma tabela de preços. Em seguida, há uma seção de equipe com links de mídia social, seguida por uma seção com logotipos de texto e empresa e, em seguida, outra seção com alguns textos e ícones. O rodapé apresenta alguns textos, informações de contato e um formulário de contato.

Este é o layout da agência de inicialização. Possui uma barra de menu com um logotipo, itens de menu e um botão CTA. O cabeçalho apresenta algum texto, uma ilustração à direita e dois botões CTA. Abaixo estão alguns logotipos de empresas e três recursos destacados com alguns ícones. Uma seção CTA segue com dois botões, depois uma seção de equipe com fotos e ícones de mídia social. Depois disso, há duas seções com algum texto, ilustrações e alguns recursos diferenciados com marcas de seleção.

Em seguida, estão algumas análises de clientes e, em seguida, outra seção de recursos com ícones e texto descritivo. Há uma tabela de preços, uma seção de perguntas frequentes, outra seção de CTA com uma ilustração e algumas postagens recentes.

Por fim, há um formulário de contato e outra caixa com informações de contato e links de mídia social em um mapa grande, seguido pelo rodapé com um logotipo, links de mídia social, itens de menu e informações de contato.

Módulos de Portfólio

Há um total de 120 estilos de portfólio – 40 estilos de módulo de portfólio padrão, 40 estilos de portfólio filtráveis ​​e 40 estilos de portfólio de carrossel. Vamos dar uma olhada em alguns de cada estilo.

O primeiro módulo de portfólio padrão apresenta um layout de grade simples e uma sobreposição que aparece sobre as imagens que apresentam duas barras de borda verdes, o título e o ano.

O layout de portfólio 29 usa um layout de grade semelhante e apresenta uma sobreposição que aparece ao passar o mouse com uma seta rosa e o título e o ano do projeto.

O layout de portfólio filtrável 2 apresenta uma barra de filtro laranja na parte superior, bem como uma barra de navegação preta na parte inferior. Ao passar o mouse, uma sobreposição escura aparece com o título e o ano do projeto.

O layout de portfólio filtrável 14 apresenta uma barra de filtro com botões azuis e uma barra de navegação preta na parte inferior. Ao passar o mouse, uma sobreposição azul é revelada e o título e a data estão contidos em uma borda branca.

O layout de portfólio carrossel 7 apresenta duas setas azuis em cada lado para navegar. Ao passar o mouse, há uma sobreposição em forma de azul e as informações do projeto.

O layout do carrossel 11 apresenta setas laranja para navegação e um slide laranja contendo as informações do projeto que são reveladas ao passar o mouse.

Seções de Rodapé

Existem 100 seções de rodapé que acompanham o kit de interface do usuário.

O layout de rodapé 3 apresenta as informações de contato no topo com alguns ícones grandes. Você pode encontrar alguns sobre texto, ícones de mídia social, links de menu e horas. Há uma barra de rodapé secundária na parte inferior contendo informações de direitos autorais e um link para os termos e condições.

Este é o layout de rodapé 26. Ele possui dois módulos na parte superior com ícones grandes, seguidos por um formulário de contato e informações de contato. Na parte inferior estão alguns links, seguidos por informações de direitos autorais.

O rodapé 43 tem um formulário de inscrição de e-mail bem no topo. Existem várias colunas para itens de menu, algumas informações de contato, logotipos de pagamento e informações de direitos autorais.

O estilo de rodapé 84 tem uma imagem de fundo com uma sobreposição escura. O logotipo está à esquerda, junto com os ícones das redes sociais. Existem vários itens de menu e, em seguida, um formulário de inscrição no boletim informativo. As informações de contato estão listadas à direita e, finalmente, as informações de direitos autorais estão na parte inferior.

Módulos de contador de barras

Existem 50 estilos diferentes de contadores de barras para escolher.

O estilo 3 apresenta linhas de barra azuis com um indicador de porcentagem preto.

O estilo 13 apresenta um título bem à esquerda e a porcentagem é destacada com um fundo vermelho mais escuro no final da barra.

O contador de barras estilo 32 tem um design arredondado com um título à esquerda e a porcentagem dentro da barra.

Por fim, o layout 37 possui um título acima da barra, extremidades arredondadas e uma seção arredondada no final de cada barra que contém a porcentagem.

Seções de informações da caixa

Existem 50 estilos de informações de caixa.

O layout 2 da seção de informações da caixa apresenta uma imagem com borda branca, texto de cabeçalho azul, texto de descrição e um botão CTA. A sombra ao redor da caixa fica mais forte ao passar o mouse.

O estilo 6 apresenta uma imagem com cantos arredondados, um ícone, dois estilos de texto de título e um botão de ler mais. Ao passar o mouse, a caixa se desloca para cima.

O estilo de caixa 11 apresenta um ícone na parte superior sobre uma imagem grande e um cartão com o cabeçalho e o corpo do texto. Ao passar o mouse, uma sobreposição escura aparece sobre a foto, a cor da borda inferior muda para preto e um botão de mais aparece.

O Layout 47 apresenta uma imagem, um ícone e texto. Ao passar o mouse, uma sobreposição preta e uma borda branca são reveladas sobre a imagem e a imagem é ampliada em um pequeno ângulo. O recipiente do ícone é desativado e o fundo muda para preto. Por fim, o plano de fundo do texto fica laranja.

Seções de habilidade

Há um total de 50 seções de habilidade.

O layout da seção de habilidades 7 apresenta uma imagem grande à direita e algum texto, uma barra de habilidades e contadores de números à esquerda.

A seção de habilidades 17 apresenta texto, uma barra de habilidades e duas seções de sinopse com ícones à esquerda. À direita estão duas imagens.

O layout de habilidade 21 apresenta uma imagem, algum texto e um botão à esquerda. À direita estão mais duas seções de texto, seguidas pela barra de habilidades.

Este é o layout 38. Ele apresenta uma imagem com uma caixa de texto sobreposta à esquerda. À direita, você pode encontrar algum texto de cabeçalho, corpo de texto e barras de habilidade com setas.

Botões

Finalmente, existem 150 estilos de botões no total, com 100 estilos de botões regulares e 25 estilos de botões duplos.

Este é o estilo de botão normal 30. Ao passar o mouse, um fundo rosa aparece e a cor do texto muda para branco.

O estilo de botão regular 116 apresenta uma pequena caixa rosa que se expande ao passar o mouse para preencher o plano de fundo do botão. O texto também muda para rosa ao passar o mouse.

O estilo de botão duplo 3 apresenta uma barra que se move para cima ou para baixo ao passar o mouse.

O estilo de botão duplo 7 apresenta um fundo escuro que se move para baixo ao passar o mouse e se torna uma borda inferior. Um ícone também é revelado ao passar o mouse.

Adquira o kit de interface do usuário do módulo Divi definitivo

O Ultimate Divi Module UI Kit está disponível no Divi Marketplace. Custa $ 49,59 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

O Ultimate Divi Module UI Kit vem com um número impressionante de layouts com uma ampla variedade de estilos e casos de uso. Tudo é personalizável com as opções do Divi, e qualquer um dos layouts pode ser modificado para se adequar ao design do seu próximo projeto. Se você está procurando um pacote de layout extenso que pode ajudá-lo a economizar tempo com seu próximo design, este produto pode ser ideal para você. Gostaríamos muito de ouvir de você! Você já experimentou o Ultimate Divi Module UI Kit? Deixe-nos saber o que você pensa sobre isso nos comentários!