Como ser criativo com o fundo do ícone do Blurb no Divi

Os módulos do Blurb são alguns dos elementos mais versáteis que você pode encontrar no Divi. Nesta postagem, mostraremos como dar um passo adiante e ser criativo com o fundo do ícone blurb. Estaremos usando uma combinação de módulos de blurb, módulos de texto e módulos de call to action. Esses designs exclusivos são perfeitos para páginas de serviços e páginas de categorias de produtos. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado de todos os três exemplos em diferentes tamanhos de tela.

Exemplo 1

Área de Trabalho

Móvel

Exemplo # 2

Área de Trabalho

Móvel

Exemplo # 3

Área de Trabalho

Móvel

Baixe os exemplos de plano de fundo do ícone do Blurb GRATUITAMENTE

Para colocar suas mãos nos exemplos de fundo de ícones de blurb gratuitos, primeiro você precisará baixá-los usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Inscreva-se no nosso canal no Youtube

Passos Gerais

Adicionar nova seção

Fundo

Para recriar esses designs de plano de fundo de blurb criativo, abra uma nova página ou adicione uma nova seção a uma página existente. Antes de adicionar uma linha, adicione uma cor de fundo à sua seção.

• Cor de fundo: # f7f7f7

Espaçamento

Adicione um pouco de preenchimento personalizado superior e inferior à seção também.

• Preenchimento superior e inferior: 120 px

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Antes de adicionar qualquer módulo, ajuste o tamanho da linha.

• Largura: 100%
• Largura máxima: 100%

Espaçamento

Em seguida, ajuste o preenchimento nas configurações de espaçamento.

• Acolchoamento superior: 8vw
• Preenchimento inferior: 15vw
• Preenchimento esquerdo e direito: 12vw

Coluna 1

Quando terminar de modificar as configurações de linha, faça algumas alterações na primeira coluna.

Fundo

Primeiro, adicione um fundo branco.

• Cor de fundo: branco #ffffff

Fronteira

Em seguida, adicione algum raio de borda.

• Cantos arredondados: 2vw todos os quatro cantos

Sombra da caixa

Finalmente, adicione uma sombra de caixa.

• Box-Shadow: primeira opção
• Força do desfoque da sombra da caixa: 47 px

Clonar linha duas vezes

Resta uma última etapa antes de começarmos a adicionar módulos. Clone a linha duas vezes.

Recriar o Exemplo # 1

Adicionar Módulo Blurb à Coluna 1

Apagar conteúdo padrão

Agora que configuramos nossas linhas e colunas, podemos começar a adicionar módulos à coluna 1 da primeira linha. Primeiro, adicione um módulo de sinopse e apague todo o título padrão e o texto do corpo.

Escolha o ícone

Em seguida, escolha um ícone em vez de uma imagem.

• Ícone: Link

Fundo

Adicione uma cor de fundo preta ao módulo blurb.

• Cor de fundo: Preto # 000000

Configurações de ícone

Em seguida, altere as configurações do ícone.

• Cor do ícone: Amarelo # edf000
• Posicionamento do ícone: topo
• Tamanho da fonte do ícone:
  • Desktop: 3vw
  • Tablet: 11vw
  • Telefone: 13vw

Dimensionamento

Continue ajustando o tamanho do módulo.

• Largura do conteúdo: 100%
• Largura:
  • Desktop: 11vw
  • Tablet: 19vw
  • Telefone: 22vw

Espaçamento

Adicione alguns valores de espaçamento também.

• Margem superior: -5vw
• Margem inferior: 0vw
• Margem esquerda: -1vw
• Acolchoamento superior e acolchoamento inferior: 4vw

Fronteira

Para dar ao ícone uma forma única, adicione algum raio de borda a cada um dos cantos, exceto para o canto inferior esquerdo.

• Cantos arredondados: 50vw, 0vw no canto inferior esquerdo.

Sombra da caixa

Finalmente, adicione uma sombra de caixa.

• Box-Shadow: primeira opção
• Força do desfoque da sombra da caixa: 50 px

CSS customizado

O ícone tem, por padrão, alguma margem inferior anexada a ele. Para nos livrarmos disso, adicionaremos uma única linha de código CSS à caixa CSS personalizada da imagem blurb.

• Imagem do Blurb: margin-bottom: 0px;

margin-bottom: 0px;

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo H3

Abaixo do ícone, adicione um módulo de texto com algum conteúdo H3 de sua escolha.

Fundo

Vá para as configurações de fundo e adicione um fundo gradiente.

• Fundo: Gradiente
• Cor Um: Transparente
• Cor dois: amarelo # edf000
• Direção do gradiente: 180 graus
• Posição inicial e final: 74%

Texto do Título

Em seguida, defina o estilo do texto H3.

• Nível do título do texto do título: H3
• Fonte H3: Josefin Sans
• Alinhamento H3: Centro
• Cor da fonte H3: Preto #oooooo
• Tamanho do texto H3:
  • Desktop: 2.4vw
  • Tablet: 3.4vw
  • Telefone: 4.8vw
• Espaçamento entre letras H3: 0em

Dimensionamento

Nas configurações de dimensionamento, ajuste a largura do tablet e do telefone.

• Largura:
  • Tablet: 50%
  • Telefone: 60%

Espaçamento

Continue acessando as configurações de espaçamento e ajustando os valores das margens.

• Margem esquerda e direita: 5vw
• Enchimento superior: 1vw

Transformar

Finalmente, gire o módulo com as opções de transformação.

• Transform Translate:
  • eixo x: -20vw
  • eixo y: 13vw
• Transformar girar: primeira opção, 280 graus

Adicionar Módulo de Chamada à Ação à Coluna 1

Remover conteúdo do título padrão, adicionar botão e conteúdo de texto

O próximo e último módulo de que precisamos na coluna 1 é um módulo de call to action. Adicione algum conteúdo de sua escolha e remova a cópia do título.

Adicionar Link

Adicione um link relevante para o botão.

Fundo

Certifique-se de que o fundo não tenha cor.

Texto de corpo

Em seguida, vá para a guia de design e altere as configurações do corpo do texto.

• Fonte do corpo: texto carmesim
• Alinhamento do corpo do texto: esquerda
• Cor do corpo do texto: cinza escuro # 666666
• Tamanho do corpo do texto:
  • Desktop: 1.2vw
  • Tablet: 2.6vw
  • Telefone: 3.1vw
• Altura da linha corporal: 1,8em

Botão

Modifique os estilos dos botões também.

• Tamanho do texto do botão:
  • Desktop: 1vw
  • Tablet: 2vw
  • Telefone: 3vw
• Cor do texto do botão: cinza muito escuro # 3f3f3f
• Cor da borda do botão: cinza muito escuro # 3f3f3f
• Fonte do botão: Josefin Sans
• Margem do botão: 3vw
• Padding superior e inferior do botão: 1vw
• Preenchimento do botão esquerdo e direito: 3vw

Espaçamento

Conclua as configurações do módulo adicionando algum preenchimento esquerdo e direito.

• Preenchimento esquerdo e direito: 7vw

Excluir a coluna dois e clonar a coluna 1

Ajuste as configurações na coluna 2

Agora, volte para as configurações de linha e exclua a segunda coluna. Imediatamente depois, clone a primeira coluna. Nas próximas etapas, ajustaremos algumas configurações na coluna duplicada.

Módulo Blurb

Comece alterando a cor do ícone do módulo blurb.

• Cor do ícone: Aqua # 00ffd4

Módulo de Texto

Altere o fundo gradiente e copie o módulo de texto a seguir.

• Cor de fundo: Aqua # 00ffd4
• Mudar o Conteúdo

Recriar o Exemplo # 2

Adicionar Módulo Blurb à Coluna 1

Excluir conteúdo padrão

Passemos ao segundo exemplo! Adicione um módulo blurb à coluna 1 e exclua todo o conteúdo padrão.

Escolha o ícone

Em seguida, escolha um ícone.

Fundo

Agora, adicione uma cor de fundo amarela.

• Cor de fundo: Amarelo # edf000

Ícone

Continue modificando as configurações do ícone na guia de design.

• Cor do ícone: Branco #ffffff
• Posicionamento do ícone: topo
• Tamanho da fonte do ícone:
  • Desktop: 3vw
  • Tablet: 11vw
  • Telefone: 12vw

Dimensionamento

Depois de definir o estilo da cor e do plano de fundo, ajuste o tamanho do módulo.

• Largura do conteúdo: 100%

Espaçamento

Modifique as configurações de espaçamento também.

• Margem inferior: 0vw
• Margem esquerda e direita: 3vw
• Preenchimento superior e inferior: 2vw

Fronteira

Adicione um pouco de raio de borda a cada canto a seguir.

• Cantos arredondados: 2vw todos os quatro cantos

Sombra da caixa

Conclua o design do módulo adicionando uma sombra de caixa sutil.

• Box-Shadow: primeira opção

Remova a sombra da caixa e a cor de fundo da coluna 1

Abra as configurações da coluna 1 a seguir e remova a cor de fundo e a sombra da caixa.

CSS customizado

Remova a margem inferior padrão aplicada ao ícone de sinopse adicionando uma única linha de código CSS à guia avançada.

• Imagem do Blurb: margin-bottom: 0px;

margin-bottom: 0px;

Adicionar Módulo de Chamada à Ação à Coluna 1

Adicionar conteúdo de título, conteúdo de corpo e conteúdo de botão

Abaixo do módulo blurb, adicione um módulo de call to action e insira algum conteúdo de sua escolha.

Adicionar Link

Adicione um link ao botão a seguir.

Fundo

Continue adicionando um fundo branco.

• Cor de fundo: branco #ffffff

Texto do Título

Na guia de design, defina o estilo do texto do título H3.

• Nível do título do título: H3
• Fonte H3: Josefin Sans
• Cor da fonte H3: cinza muito escuro # 3f3f3f
• Tamanho H3:
  • Desktop: 2vw
  • Tablet: 4vw
  • Telefone: 6vw
• Altura da linha H3: 2,3em

Texto de corpo

Em seguida, defina o estilo do texto do corpo.

• Fonte do corpo: texto carmesim
• Alinhamento do corpo do texto: esquerda
• Cor do corpo do texto: cinza escuro # 666666
• Tamanho do corpo do texto:
  • Desktop: 1.1vw
  • Tablet: 2.2vw
  • Telefone: 3.1vw
• Altura da linha corporal: 1,8em

Botão

Passe para as configurações do botão e estilize o botão da seguinte maneira:

• Tamanho do texto do botão:
  • Desktop: 1vw
  • Tablet: 2vw
  • Telefone: 3vw
• Cor do texto do botão: cinza muito escuro # 3f3f3f
• Fonte do botão: Josefin Sans
• Largura da borda do botão: 2 x
• Cor da borda do botão: cinza muito escuro # 3f3f3f
• Botão Superior e Margem Inferior: 3vw
• Padding superior e inferior do botão: 1vw
• Preenchimento do botão esquerdo e direito: 3vw

Espaçamento

Agora, ajuste o espaçamento.

• Margem inferior: -1vw
• Acolchoamento superior: 6vw
• Preenchimento esquerdo e direito: 7vw

Fronteira

Em seguida, arredonde os cantos nas configurações de borda.

• Cantos arredondados: 2vw

Sombra da caixa

Finalmente, adicione uma sombra de caixa.

• Box-Shadow: primeira opção
• Força do desfoque da sombra da caixa: 50 px

Excluir a coluna dois e clonar a coluna 1

Ajuste as configurações na coluna 2

Semelhante ao exemplo anterior, vá para as configurações de linha e exclua a segunda coluna. Duplique a primeira coluna e ajuste algumas configurações.

Módulo Blurb

Altere o plano de fundo do módulo de sinopse de amarelo para aqua.

• Cor do ícone de fundo: Aqua # 00ffd4

Módulo de apelo à ação

Altere o conteúdo e o link do módulo de call to action.

• Alterar o conteúdo do título
• Alterar Link

Recriar o Exemplo # 3

Adicionar Módulo Blurb à Coluna 1

Excluir conteúdo padrão

Vamos para o próximo e último exemplo! Adicione um módulo blurb à coluna 1 e apague o conteúdo padrão.

Escolha o ícone

Escolha um ícone.

Fundo

Adicione um fundo amarelo brilhante ao módulo.

• Cor de fundo: amarelo # f7f426

Ícone

Torne o ícone preto e ajuste seu posicionamento

• Cor do ícone: Preto # 000000
• Posicionamento do ícone: Esquerda
• Tamanho da fonte do ícone:
  • Desktop: 3vw
  • Tablet + telefone: 8vw

Dimensionamento

Continue modificando a largura e a altura do módulo.

• Largura do conteúdo: 100%
• Altura: 23vw

Espaçamento

Além disso, ajuste as configurações de espaçamento.

• Margem esquerda: 3vw
• Margem direita: 25vw
• Preenchimento superior: 2vw
• Preenchimento esquerdo: 1vw

Fronteira

Adicione algum raio de borda também.

• Cantos arredondados: 2vw em todos os cantos

Sombra da caixa

Em seguida, adicione uma sombra de caixa.

• Box-Shadow: primeira opção

Transformar

Por fim, reposicione o módulo usando valores de conversão de transformação personalizados.

• eixo x: -6vw
• eixo y: 1vw

Remova a cor de fundo e a sombra da caixa da coluna 1

Vá para as configurações da coluna 1 e remova a cor de fundo e a sombra da caixa.

Adicionar Módulo de Chamada à Ação à Coluna 1

Adicionar título, corpo e conteúdo do botão

Abaixo do módulo sinopse, adicione um módulo de apelo à ação. Adicione algum conteúdo de sua escolha.

Adicionar Link

Em seguida, adicione um link ao botão.

Fundo

Para definir o estilo do módulo de call to action, comece adicionando uma cor de fundo preta.

• Cor de fundo: Preto #oooooo

Texto do Título

Ajuste as configurações de texto H3 a seguir.

• Nível do título do título: H3
• Fonte H3: Josefin Sans
• Cor da fonte H3: amarelo brilhante # f7f426
• Tamanho da fonte H3:
  • Desktop: 2vw
  • Tablet: 4vw
  • Telefone: 6vw
• Altura da linha H3: 2,3em

Texto de corpo

Altere as configurações do corpo do texto também.

• Fonte do corpo: texto carmesim
• Alinhamento do corpo do texto: esquerda
• Cor do corpo do texto: branco # 000000
• Tamanho do corpo do texto:
  • Desktop: 1.2vw
  • Tablet: 2.2vw
  • Telefone: 3.1vw
• Altura da linha corporal: 1,8em

Botão

Em seguida, defina o estilo do botão da seguinte maneira.

• Tamanho do texto do botão:
  • Desktop: 1vw
  • Tablet: 2vw
  • Telefone: 3vw
• Cor do texto do botão: Aqua # 00ffd4
• Cor da borda do botão: Aqua # 00ffd4
• Fonte do botão: Josefin Sans
• Margem superior e inferior do botão: 3vw
• Padding superior e inferior do botão: 1vw
• Preenchimento do botão esquerdo e direito: 3vw

Dimensionamento

Passe para as configurações de dimensionamento e faça algumas alterações.

• Largura: 90%
• Alinhamento do Módulo: Centro

Espaçamento

Modifique as configurações de espaçamento também.

• Margem superior: -9vw
• Preenchimento superior: 5vw
• Preenchimento esquerdo e direito: 7vw

Fronteira

Abra as configurações de borda a seguir e adicione algum raio de borda a cada um dos cantos.

• Cantos arredondados: 2vw

Sombra da caixa

Também estamos usando uma sombra de caixa sutil.

• Sombra da caixa: primeira opção

Transformar Traduzir

Finalmente, reposicione o módulo de call to action modificando as configurações de conversão de conversão.

• eixo y: -18vw

Excluir a coluna dois e clonar a coluna 1

Ajuste as configurações na coluna 2

Agora que a primeira coluna está pronta, excluiremos a segunda e duplicaremos a primeira. Posteriormente, ajustaremos alguns dos detalhes de conteúdo e cores.

Módulo Blurb

Nas configurações do módulo blurb, altere o fundo de amarelo para aqua.

• Cor do ícone de fundo: Aqua # 00ffd4

Módulo de apelo à ação

Nas configurações do módulo de call to action, altere o conteúdo do título, a cor do título e a cor do botão. Não se esqueça de alterar o link do botão também e pronto!

• Cor do texto do título: Aqua # 00ffd4
• Contente
• Cor do botão: # 00ffd4

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Exemplo 1

Área de Trabalho

Móvel

Exemplo # 2

Área de Trabalho

Móvel

Exemplo # 3

Área de Trabalho

Móvel

Conclusão

Como você viu neste post, os planos de fundo dos ícones do blurb podem tornar seus designs do blurb muito mais interessantes. Ao usar os módulos do blurb emparelhados com uma chamada à ação e módulos de texto, existem muitas possibilidades criativas. Esse estilo de design é perfeito para vitrines de serviços ou seções de produtos. O que você acha? Conte-nos nos comentários.