Destaque do produto Divi: DiviCity

DiviCity é um layout Divi de uma página disponível no Divi Marketplace. Possui um design versátil que pode ser usado para diversos tipos de sites e é totalmente responsivo e personalizável. Neste destaque de produto, vamos dar uma olhada no layout DiviCity e ajudá-lo a decidir se é o layout certo para você.

Vamos começar!

Instalando o DiviCity

DiviCity vem como um arquivo ZIP contendo arquivos .json do Divi Visual Builder. Para instalar o layout, comece descompactando o arquivo. Em seguida, abra sua página no Divi Builder.

Clique na opção de portabilidade na parte inferior da página e selecione a guia de importação. Em seguida, selecione o arquivo .json para o layout DiviCity e comece a importar o layout. Depois que o layout for importado, tudo o que você precisa fazer é substituir o conteúdo pelo seu e seu site está completo!

DiviCity

DiviCity consiste em um layout Divi Builder de uma página. Ele vem sem nenhuma das imagens de demonstração, então adicionei minhas próprias para o propósito deste artigo. Vamos dar uma olhada nas seções que vêm com este layout!

Seção de Cabeçalho DiviCity

O cabeçalho consiste em uma imagem grande com um divisor angular na parte inferior. O cabeçalho possui recursos de subtítulo e texto de cabeçalho, bem como um botão. O texto apresenta um efeito de animação de carregamento. Duas caixas se sobrepõem na parte inferior da seção do cabeçalho. Cada caixa contém algum texto de título, uma linha divisória, texto do corpo e um botão. Essas caixas também têm uma animação de carregamento e se expandem ao passar o mouse. Por fim, há quatro módulos de sinopse abaixo com um ícone, texto de título e texto do corpo. Os módulos da sinopse são revelados um de cada vez conforme a página é carregada. Esse layout de cabeçalho pode ser facilmente personalizado com suas próprias fotos e conteúdo para criar uma seção de cabeçalho atraente e atraente que fornece aos visitantes informações importantes sobre sua empresa em um piscar de olhos.

DiviCity Sobre Seção

A seção sobre tem algum texto de introdução, um cabeçalho à esquerda e uma imagem à direita. Ambos os elementos têm uma animação fade-in e se movem para o centro. Abaixo estão três seções de largura total que apresentam uma imagem e um bloco de texto com um cabeçalho e algum texto do corpo. Cada uma dessas seções também possui um efeito de animação de carregamento.

Seção do blog DiviCity

Por padrão, a seção do blog apresenta um módulo simples de postagens recentes listando três postagens recentes com a imagem em destaque e as informações da postagem. Há também algum texto de cabeçalho e corpo de texto nesta seção. Esta seção apresenta animação fade-in.

Como alternativa, você pode obter o design apresentado na demonstração de layout instalando o plug-in gratuito Divi Article Cards. Depois que o plug-in estiver instalado e ativado em seu site, abra as configurações do Divi 100 no menu do painel do WordPress. Ative o cartão do artigo e clique em salvar.

Agora, os módulos do blog na página DiviCity devem se parecer com o layout acima.

Seção de Números DiviCity

A seção de números apresenta quatro contadores de barras em um fundo de imagem - os contadores de números são carregados conforme a página é carregada.

DiviCity Seção O que fazer

Esta seção apresenta um título e algum corpo de texto. Existem duas subseções abaixo, cada uma com uma imagem, um cabeçalho e um corpo de texto. Esta seção é um layout muito versátil que pode ser usado para demonstrar recursos, serviços ou outros aspectos do seu negócio.

DiviCity Seção Onde Fazer

Esta seção também é versátil e apresenta um título, corpo do texto e três sinopses com uma imagem, algum texto, algum texto de descrição curta e uma borda que aparece ao passar o mouse. A imagem também aumenta ao passar o mouse. Você pode usar essas sinopses para vincular a outra página ou seção em seu site ou simplesmente exibir alguns recursos ou informações.

DiviCity Seção Visite-nos

Em seguida, a seção Visite-nos apresenta seis módulos de sinopse, cada um com um ícone, texto de título e texto do corpo. Você pode personalizar esta seção para destacar mais recursos ou aspectos de seus serviços ou para dividir o texto denso com cabeçalhos e ícones separados. Todos os módulos da sinopse apresentam uma animação com zoom.

Seção de contato da DiviCity

Por fim, a seção de contato começa com uma faixa laranja com três ícones de mídia social. Abaixo está a seção do formulário de contato com o texto do cabeçalho grande à esquerda e o formulário à direita. A seção de contato tem um fundo de imagem grande com uma sobreposição escura. Esta seção também apresenta um efeito de animação flip-loading e os ícones de mídia social aparecem gradualmente.

Disposição móvel de DiviCity

DiviCity é totalmente compatível com tablets e dispositivos móveis. Vamos dar uma olhada na versão móvel de algumas seções.

A primeira é a seção de cabeçalho, com uma grande imagem de fundo, texto de cabeçalho e botão. A primeira caixa de texto sobrepõe o cabeçalho e o restante do conteúdo da seção do cabeçalho segue abaixo.

Isso faz parte da seção móvel sobre com imagens separadas por algumas seções com texto.

Esta é a versão móvel da seção “Onde Fazer”. Ele tem uma imagem grande na parte superior, texto de título, texto do corpo e três imagens com um rótulo em cada uma.

E, finalmente, este é o rodapé móvel. Como a versão para desktop, ele apresenta uma barra laranja com ícones de mídia social, seguida pela seção de rodapé com uma imagem de fundo, texto e o formulário de contato.

Comprar DiviCity

DiviCity 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

DiviCity é um layout de site simples e bonito que é incrivelmente versátil. Por ser construído com Divi, o layout é fácil e intuitivo de personalizar para seu próprio uso. As animações de carregamento e os efeitos de foco em todo o layout parecem agradáveis ​​e coesos e não distraem muito o conteúdo da página ou a usabilidade. Também gosto do uso de imagens grandes em todo o design, bem como da tipografia usada no layout. Se você está procurando um layout de site simples de uma página para o seu próximo projeto Divi, este pode ser o produto certo para você.

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