5 designs de módulo Creative Divi Blurb

Publicados: 2018-10-22

Neste post, vamos explorar um dos recursos mais populares do Divi, o Módulo Blurb. Embora pareça simples desde o início, ele tem muitos recursos personalizáveis que podem dar vida aos elementos do seu site. Geralmente, o Módulo Blurb é usado para coisas como serviços, benefícios, informações de contato, etc, mas com Divi, as possibilidades são infinitas.

Vamos nos divertir!

Espiada

Aqui está uma prévia dos 5 estilos de módulo de blurb que estarei criando neste tutorial.

5 designs de módulo Creative Divi Blurb

Inscreva-se no nosso canal no Youtube

Começando

Para começar, você precisará criar uma nova página. No painel do WordPress, navegue até Pages> Add New. Em seguida, dê um título à sua página e implemente o construtor visual. Selecione a opção “Build From Scratch”. Depois que o construtor visual é carregado na página, você está pronto para começar a projetar.

Este tutorial foi desenvolvido para facilitar a criação de cada um desses designs de estilo de propaganda individualmente, então fique à vontade para pular para baixo na postagem do design que deseja construir. Em outras palavras, você não precisa começar com o primeiro.

1. Pop-out Blurbs com listas de recursos

Neste primeiro exemplo, vamos nos divertir um pouco expandindo sinopses fora da linha para criar um efeito pop-out. Então, podemos usar as colunas adjacentes ao lado de cada uma para adicionar alguns sinopses com ícones alinhados à esquerda para servir como itens de lista de destaque.

Para começar, crie uma nova seção e uma linha com uma estrutura de quatro colunas.

Em seguida, atualize as configurações de linha da seguinte forma:

Cor de fundo: # 2e3858
Tornar esta linha com largura total: SIM
Usar largura de calha personalizada: SIM
Largura da calha: 1
Equalize a altura das colunas: SIM
Margem personalizada: 5vw superior, 5vw inferior
Preenchimento personalizado: 0 px superior, 0 px inferior

Salvar configurações.

Então, na primeira coluna, adicione seu primeiro módulo de sinopse.

Retire a última frase da caixa de conteúdo para encurtar um pouco a quantidade de texto. Em seguida, selecione para usar um ícone em vez de uma imagem e escolha um ícone (qualquer pessoa o fará).

Em seguida, atualize o seguinte:

Cor de fundo: # df4570
Cor do ícone: #ffffff
Orientação do Texto: Centro
Fonte do título: Encode Sans Semi Condensed
Estilo da fonte do título: TT
Espaçamento entre letras de título: 2px
Margem personalizada (desktop): -5vw superior, -5vw inferior
Margem personalizada (tablet): 0 px superior, 0 px inferior
Preenchimento personalizado: 5vw superior, 5vw inferior, 3vw esquerdo, 3vw direito
Sombra da caixa: veja a imagem
Força do desfoque da sombra da caixa: 80px

Usando a opção de menu do botão direito ou as teclas de atalho cmd + c e cmd + v, copie o módulo que você acabou de criar e cole-o na coluna 3. Em seguida, atualize as novas configurações do módulo blurb com outra cor de fundo brilhante (mas complementar):

Cor de fundo: # 24c4a3

Agora é hora de adicionar as sinopses do item de lista adjacentes às sinopses pop-out que acabamos de criar.

Para fazer isso, adicione uma nova sinopse na coluna 2. Em seguida, retire o texto simulado na caixa de conteúdo de forma que apenas o texto do título permaneça. Em seguida, adicione um ícone para substituir sua imagem como antes. Em seguida, atualize as configurações de design da seguinte forma:

Cor do ícone: # df4570
Posicionamento de imagem / ícone: esquerda
Fonte do título: Encode Sans Semi Condensed
Preenchimento personalizado: 20 px superior, 20 px inferior, 3vw à esquerda, 3vw à direita

Duplique a sinopse duas vezes para obter três sinopses da lista na coluna. Em seguida, use o recurso Multiselect do Divi para selecionar todas as três sinopses e, a seguir, copie e cole-as na coluna 4.

Você também pode usar multiselect para selecionar todas as três sinopses na coluna 4 e editar em massa as configurações do elemento para alterar a cor do ícone de todas as três para # 24c4a3.

É isso! Criar sinopses pop-out é uma maneira divertida de fazer com que suas sinopses se destaquem e ter listas adjacentes na lateral oferece algumas opções adicionais para designs mais criativos.

Aqui está o resultado final.

2. Blurb promocional com imagem de fundo personalizada.

Esse estilo de sinopse é ótimo para apresentar conteúdo e ofertas promocionais, como um livro grátis. A ideia básica é posicionar o conteúdo da sinopse à esquerda do módulo para abrir espaço para a imagem de fundo personalizada. Vamos lá.

Primeiro adicione uma seção regular com uma estrutura de linha de duas colunas. Na coluna da esquerda, adicione um novo módulo de blurb.

Atualize o texto do título e retire a última frase do conteúdo simulado para reduzir a quantidade de texto. Em seguida, atualize sua imagem com uma imagem de livro (ou uma imagem de seu produto). Um ícone de um livro ou algo assim também funcionará.

Estou usando os recursos de imagem do Pacote de Layout do Blog de Viagem, então sinta-se à vontade para começar o design capturando essas imagens.

DICA: você também pode adicionar um URL de link de módulo a este módulo para tornar todo o módulo clicável, pois pode servir como uma promoção.

Em seguida, adicione uma imagem de plano de fundo ao módulo. Certifique-se de que a imagem de fundo seja uma imagem semelhante a um cabeçalho com o ponto focal da imagem no lado direito, de forma que você possa adicionar seu conteúdo à esquerda da imagem com o fundo distraindo do texto.

Em seguida, adicione um gradiente de fundo para servir como uma sobreposição parcial que fica atrás do conteúdo e sobrepõe a imagem de fundo para tornar o texto mais legível. Para adicionar o gradiente de fundo, atualize o seguinte:

Cor do gradiente de fundo à esquerda: rgba (255,255,255,0,8)
Cor do gradiente de fundo à direita: rgba (255,255,255,0)
Direção do gradiente: 90 graus
Posição inicial: 40%
Posição final: 70%
Colocar gradiente acima da imagem de fundo: SIM

Em seguida, atualize o seguinte:

Sombra da caixa de imagem: veja a captura de tela
Fonte do título: Noto Serif
Tamanho do texto do título: 26px
Fonte do corpo: Noto Sans
Tamanho do corpo do texto: 16px
Largura da imagem: 150px
Largura do conteúdo (desktop): 60%
Largura do conteúdo: (smartphone): 80%
Preenchimento personalizado: 2vw inferior, 2vw esquerdo, 2vw direito

A principal técnica de design aqui é dar à imagem e ao conteúdo uma largura personalizada para que o conteúdo possa ser posicionado à esquerda posteriormente.

Agora precisamos adicionar uma sombra de caixa no topo da sinopse para criar a impressão de que a imagem do livro está se estendendo acima do módulo para um bom efeito de sobreposição. Para fazer isso, atualize o seguinte:

Sombra da caixa: Veja a captura de tela
Posição horizontal da sombra da caixa: 0 px
Posição vertical da sombra da caixa: 50 px
Cor da sombra: #ffffff

A última etapa envolve um pequeno snippet de CSS customizado necessário para alinhar o conteúdo da sinopse ao lado esquerdo do módulo. Para fazer isso, vá para a guia avançada e adicione o seguinte CSS personalizado na caixa de entrada Conteúdo do Blurb:

margin-left: 0;

Agora veja o resultado!

DICA: não se esqueça das opções de foco disponíveis. Experimente dar à imagem do livro uma borda ao pairar para dar vida às coisas!

3. Circle Blurb Style usando Background Gradient

Este estilo simples de blurb usa gradientes de fundo para servir como um fundo circular para o conteúdo de sua blurb. Esta é uma alternativa divertida para transformar todo o seu módulo de blurb em um círculo usando CSS personalizado.

Comece adicionando uma nova seção regular com uma estrutura de linha de três colunas.

Em seguida, adicione um módulo de sinopse à coluna da esquerda.

Em seguida, retire a última frase do conteúdo para diminuir a quantidade de texto. É importante para este design manter a quantidade de texto um pouco pequena, porque você o encaixará dentro de um círculo.

Em seguida, adicione um gradiente de fundo para criar o fundo do círculo da seguinte maneira:

Cor do gradiente de fundo à esquerda: # fa7f28
Cor do gradiente de fundo à direita: rgba (255,255,255,0)
Tipo de gradiente: radial
Posição inicial: 60%
Posição final: 0%
Colocar gradiente acima da imagem de fundo: SIM

Em seguida, atualize o resto das configurações de design da seguinte forma:

Orientação do Texto: Centro
Fonte do título: Oswald
Estilo da fonte do título: TT
Espaçamento entre letras de título: 1px
Fonte do corpo: Robot
Peso da fonte do corpo: leve
Tamanho do corpo do texto: 16px
Largura (tablet): 80%
Alinhamento do Módulo: Centro
Preenchimento personalizado (desktop): 20% superior, 25% inferior, 20% esquerdo, 20% direito
Preenchimento personalizado (smartphone): 20% superior, 25% inferior, 10% esquerdo, 10% direito

A chave aqui é fazer com que o preenchimento personalizado seja ajustado corretamente para que o círculo de fundo fique alinhado com o conteúdo no centro. Pode ser necessário ajustar essas configurações dependendo da quantidade de conteúdo que você possui.

Agora você pode copiar e colar o módulo nas colunas restantes.

Em seguida, atualize as configurações de linha para que tenha uma largura personalizada de 80% e uma largura de medianiz de 1.

Para completar o design, você pode adicionar uma imagem de fundo e gradiente à sua seção da seguinte maneira:

Adicionar imagem de fundo
Cor do gradiente de fundo à esquerda: rgba (2,0,76,0.51)
Cor direita do gradiente de fundo: rgba (2,0,76,0,84)
Colocar gradiente acima da imagem de fundo: SIM

É isso! Confira o design final!

Para obter espaço adicional, você sempre pode diminuir o tamanho do ícone de sinopse para algo como 50 px, a fim de evitar que os círculos colidam em larguras menores do navegador. Ao fazer ajustes, não se esqueça de aproveitar as vantagens do recurso Multiselect do Divi para fazer edições em massa em todos os módulos de uma vez.

Dica bônus: tornando todo o módulo do Blurb um círculo com CSS personalizado

Se você deseja transformar todo o módulo em um círculo (em vez de usar o gradiente de fundo), substitua o gradiente por uma cor de fundo regular e adicione este CSS personalizado na guia Avançado das configurações do módulo de sinopse:

Na caixa Elemento Principal:

height: 300px;
width: 300px;
border-radius: 100%;
border: 5px solid #ffffff;
padding: 5% !important;
display: flex;

Na caixa Conteúdo do Blurb:

margin: auto;

Este CSS customizado substitui o preenchimento definido nas configurações do módulo blurb, então você pode precisar retirar esse snippet se quiser recuperar o controle dessas configurações. Além disso, este css usa flex para centralizar o conteúdo da sinopse dentro do círculo. Isto virá a calhar.

Será algo parecido com isto se aplicado a todos os três módulos.

4. Resumo emoldurado com bordas e sombras de caixa

Um dos meus recursos de design Divi favoritos de todos os tempos para me divertir são as sombras da caixa. Já apresentamos um uso criativo para sombras de caixa em nosso design de anúncio promocional anteriormente, onde criamos o efeito de sobreposição. Mas você também pode usar sombras de caixa como uma forma criativa de enquadrar seu conteúdo com designs de grade quebrados. Neste projeto, mostrarei como combinar bordas e sombras de caixa de uma maneira única.

Para começar, adicione uma nova seção regular com uma estrutura de linha de três colunas. Em seguida, adicione o módulo sinopse à primeira coluna.

Adicione uma imagem à sinopse. Em seguida, dê à imagem de sinopse uma borda e uma sombra de caixa, atualizando as configurações de design da seguinte maneira:

Largura da borda superior da imagem: 8 px
Cor da borda superior da imagem: # 2f3854
Largura da borda esquerda da imagem: 8 px
Cor da borda esquerda da imagem: # 2f3854

Sombra da caixa de imagem: veja a captura de tela
Posição horizontal da sombra da caixa: -20 px
Posição vertical da sombra da caixa: -30px
Cor da sombra: # f89da9

Em seguida, atualize o título e a fonte do corpo e o espaçamento da seguinte forma:

Fonte do título: Yeseva One
Fonte do corpo: Montserrat
Margem personalizada: 50px inferior
Preenchimento personalizado: 2vw inferior

Por fim, dê ao seu módulo de sinopse uma borda personalizada e uma sombra de caixa para equilibrar o design da moldura da seguinte maneira:

Largura da borda direita: 15px
Cor da borda direita: # 2f3854
Largura da borda inferior: 15 px
Cor da borda inferior: # 2f3854

Sombra da caixa de imagem: veja a captura de tela
Posição horizontal da sombra da caixa: 20 px
Posição vertical da sombra da caixa: 35px
Cor da sombra: #dddddd

Agora copie e cole o módulo nas colunas 2 e 3 e atualize as imagens do blurb para finalizar o design.

Aqui está o resultado final.

5. Styling Blurbs como lista curva

O próximo design é uma maneira divertida de criar listas usando blurbs. Usando algumas margens personalizadas, você pode curvar os itens da lista de sinopses para envolver os elementos da página. Neste exemplo, vou curvar a lista para envolver o lado direito de um grande ícone de sinopse. E você pode ser um pouco criativo

Primeiro, adicione uma nova seção regular com uma estrutura de linha de duas colunas.

Antes de adicionar qualquer módulo de blurb, dê à sua linha uma largura e largura de medianiz personalizadas, atualizando suas configurações de linha da seguinte maneira:

Largura personalizada: 700 px
Largura da calha: 2

Agora vamos criar o ícone grande de sinopse adicionando o módulo de sinopse na coluna à esquerda. Em seguida, retire o Texto do Título e o conteúdo. Em seguida, escolha o ícone da lâmpada. Agora, apenas o ícone deve estar visível. Em seguida, atualize a cor e o tamanho do ícone da seguinte forma:

Cor do ícone: # 96a6bd
Tamanho da fonte do ícone (desktop): 400px
Tamanho da fonte do ícone (smartphone): 200 px

Na coluna da direita, adicione um novo módulo de blurb. Esta será a primeira de cinco sinopses totais que farão parte de nossa lista. Em seguida, abra as configurações do módulo e retire o conteúdo, deixando apenas o texto do título. Em seguida, escolha o ícone de seta para a direita para a sinopse.

Em seguida, atualize as configurações de design da seguinte forma:

Cor de fundo: # bb7860
Cor do ícone: #ffffff
Posicionamento de imagem / ícone: esquerda
Use o tamanho da fonte do ícone: SIM
Tamanho da fonte do ícone: 30px
Fonte do título: Raleway
Cor do texto do título: #ffffff
Tamanho do texto do título: 20px
Altura da linha de título: 1,5em
Margem personalizada: 5% inferior
Preenchimento personalizado: 3% superior, 10% esquerdo, 2% direito

Duplique o módulo quatro vezes até obter um total de cinco sinopses empilhadas na coluna certa.

Em seguida, dê à segunda sinopse uma nova cor, margens personalizadas para empurrá-la para a direita e cantos arredondados criativos da seguinte maneira:

Cor de fundo: # 393e56
Margem personalizada (desktop): 10% à esquerda, -10% à direita
Margem personalizada (tablet): 0% à esquerda, 0% à direita
Cantos arredondados: 50px superior direito, 50px inferior esquerdo

Antes de sair deste módulo, copie os cantos arredondados clicando com o botão direito na opção nas configurações de sinopse.

Em seguida, salve as configurações do blurb e clique com o botão direito no primeiro módulo (superior) que você criou e cole os cantos arredondados ao estilo do módulo.

Agora vamos continuar a atualizar os últimos três módulos com cores, espaçamento e designs de cantos arredondados adequados.

Para a terceira sinopse na coluna, atualize o seguinte:

Cor de fundo: # 96a6bd
Margem personalizada (desktop): 20% à esquerda, -20% à direita
Margem personalizada (tablet): 0% à esquerda, 0% à direita
Cantos arredondados: 50px superior direito, 50px inferior direito

Para a quarta sinopse, atualize o seguinte:

Para a quinta sinopse, basta copiar os cantos arredondados na quarta sinopse e colá-los.

É isso! Vamos dar uma olhada no design final.

Mais inspiração para o estilo do Blurb

Se você estiver interessado em explorar designs de módulo de blurb mais divertidos, verifique os links abaixo:

Você pode usar planos de fundo curvos assimetricamente para sinopses.
Você pode enquadrar seus módulos de blurb com designs criativos usando divisores de seção.
Você pode criar sua própria forma de imagem de fundo para construir um layout de grade geométrica.
Aprenda como combinar ícones do blurb para criar um elemento gráfico centralizado para sua seção na postagem em sombras de caixa de um lado.
E não se esqueça de explorar nossos layouts pré-fabricados Divi gratuitos disponíveis no Divi Builder para estilos de divulgação ainda mais inspiradores

Bem, espero que esses exemplos tenham inspirado você a ver o que é possível com o Módulo Divi Blurb! O céu é o limite aqui. Este módulo é extremamente popular e provavelmente será usado em quase todos os sites que você construir, então é bom ter um conjunto versátil de ideias para que os designs não comecem a ter a mesma aparência. Às vezes, apenas alterar as cores e fontes pode dar a eles um visual totalmente novo, então fique à vontade para pegar essas idéias e torná-las suas!

Estou ansioso para ouvir de você nos comentários.

Saúde!