Como estilizar ícones do Blurb como destaques de design para conteúdo na Divi
Publicados: 2019-03-25Usar ícones de propaganda como acentos de design pode dar ao layout de sua página um design único que você pode nunca ter pensado antes. Além de posicionar o ícone de um módulo de blurb para sobrepor um módulo de texto, você pode usar o plano de fundo e a borda do módulo de texto para estilizar o ícone. Isso cria um toque de design agradável que enquadra o conteúdo, ao mesmo tempo que dá aos seus ícones um design totalmente exclusivo.
Neste tutorial, vou mostrar como estilizar ícones blurb como acentos de design para seu conteúdo no Divi.
Vamos mergulhar!
Espiada
Aqui estão alguns exemplos do design que construiremos neste tutorial.
Baixe os layouts de exemplo para este tutorial
Para colocar suas mãos no layout de designs de acento do módulo de blurb gratuito, primeiro você precisa fazer o download 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.
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.
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!
Primeiros passos com a construção do design do zero
Para começar, crie uma nova página e dê um título a ela. Em seguida, implante o construtor Divi no front-end. Adicione uma seção regular com uma linha de uma coluna. Antes de adicionar seu primeiro módulo, atualize as configurações de linha com o seguinte:
Usar largura de calha personalizada: SIM
Largura de calha personalizada: 1
Isso eliminará quaisquer margens personalizadas entre os módulos.
Criando o Módulo de Texto
Em seguida, adicione um módulo de texto dentro da linha.
Atualize o módulo de texto com o seguinte texto de preenchimento:
<h2>Our Services</h2> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. </p>
Estilizando o Módulo de Texto
Agora atualize o resto da configuração do módulo de texto da seguinte maneira:
Cor de fundo: #ffffff
- Fonte do título 2: Nunito
- Peso da fonte do cabeçalho 2: negrito
- Estilo da fonte do título 2: TT
- Cor do texto do título 2: # f24a5b
- Tamanho do texto do título 2: 42 px (desktop), 32 px (tablet), 22 px (telefone)
- Título 2 Letra Sp [acing: 16px
- Altura da linha do título 2: 1,3em
- Largura: 500 px (desktop), 490 px (tablet)
- Alinhamento do Módulo: centro
- Preenchimento personalizado (desktop): 40px superior, 40px inferior, 50px à esquerda, 50px à direita
- Preenchimento personalizado (telefone): 20 px à esquerda, 20 px à direita
- Largura da borda: 10px
- Cor da borda: #ffffff
Uma vez que iremos sobrepor o módulo de texto com ícones de blurb, precisamos ter certeza de que o módulo de texto fica acima dos ícones na ordem do espaço z. Para fazer isso, devemos primeiro adicionar o seguinte snippet de CSS à caixa CSS do elemento principal do módulo de texto:
position: relative;
Em seguida, defina o valor do índice z para 1.
Agora, este módulo de texto ficará acima de quaisquer outros módulos sobrepostos que sejam importantes para o design.
Criando o ícone do Blurb
Agora estamos prontos para criar o primeiro ícone de sinopse. Para fazer isso, devemos primeiro adicionar um módulo de sinopse e arrastá-lo para o topo do módulo de texto. Em seguida, exclua o conteúdo simulado (o texto do título e o texto do corpo) e clique para usar um ícone em vez de uma imagem para a sinopse.
Em seguida, atualize as seguintes configurações de design:
- Cor do ícone: # 2ea3f2
- Use o tamanho da fonte do ícone: SIM
- Tamanho da fonte do ícone: 100px
- Margem personalizada: 0 px inferior (remove a margem inferior padrão entre os módulos; não é necessária se você estiver usando uma largura de medianiz de linha de 1)
Em seguida, como não estamos usando nenhum texto com o módulo (apenas o ícone), podemos nos livrar da margem inferior padrão sob o ícone de sinopse. Para fazer isso, adicione o seguinte CSS personalizado à caixa CSS da imagem do Blurb:
CSS da imagem do Blurb:
margin-bottom: 0px
Duplique o ícone do Blurb
Antes de começarmos a posicionar a sinopse, vamos duplicar o módulo da sinopse e arrastar a duplicata para baixo do módulo de texto. Agora você deve ter um ícone de sinopse acima e abaixo do módulo de texto.
Posicionando os ícones do Blurb usando Transform Translate
Para posicionar os ícones da sinopse, usaremos as opções de transformação do Divi, que nos permitem colocar o módulo da sinopse com o ícone em qualquer lugar que quisermos na página.
Posicionando o ícone do Blurb nº 1
Para posicionar o ícone de sinopse superior, abra as configurações do módulo de sinopse e atualize o seguinte:
- Transform Translate X-axis (desktop): -242 px
- Transform Translate eixo Y (desktop): 50 px
- Transform Translate X-axis (phone): -170px
Posicionando o ícone do Blurb nº 2
Antes de posicionar este ícone de sinopse, vamos aumentá-lo um pouco. Para fazer isso, abra as configurações do módulo blurb e altere o tamanho da fonte do ícone para 150px.
Em seguida, posicione o ícone de sinopse atualizando as seguintes opções de transformação:
- Transform Translate X-axis (desktop): 242px
- Transform Translate eixo Y (desktop): -100px
- Transformar traduzir eixo X (telefone): 190px
Criando a Linha de Duas Colunas
Para criar a próxima coluna, duplique a linha existente e altere o layout da coluna da linha para um layout de duas colunas (1/2 1/2). 
Em seguida, use o recurso multiselect do Divi para selecionar todos os três módulos na coluna da esquerda e, em seguida, copie e cole-os na segunda coluna.
Em seguida, exclua o ícone de sinopse inferior na coluna um.
Alinhando os ícones do Blurb na coluna 2
Para os ícones do Blurb na coluna 2, precisamos deslocar o ícone superior para a esquerda e o ícone inferior para a direita. Podemos fazer isso simplesmente alterando o valor do eixo X do Transform Translate.
Abra as configurações do módulo blurb para o módulo blurb superior na coluna 2 e atualize o seguinte:
- Transform Translate X-axis (desktop): 242px
- Transform Translate X-axis (phone): 170px
Basicamente, tudo o que você está fazendo é alterar esses valores de negativo para positivo para deslocá-los na direção oposta ao longo do eixo x.
Em seguida, atualize o valor de conversão de transformação para o módulo de anúncio publicitário inferior na coluna 2 da seguinte maneira:
- Transform Translate X-axis (desktop): -242 px
- Transform Translate X-axis (phone): -190 px
Atualizar estilos de módulo de texto na segunda linha
A segunda linha de conteúdo serve como um subconjunto de serviços apresentados. Portanto, queremos que o tamanho da fonte do título seja diferente e menor do que o nosso cabeçalho. Para atualizar os dois módulos de texto ao mesmo tempo, use multiselect para selecionar os dois módulos de texto. Em seguida, atualize o seguinte:
Altere o conteúdo do título h2 para “Serviço”.
- Tamanho do texto do título 2: 28 px (desktop), 22 px (tablet), 18 px (telefone)
Salvar configurações.
Agora abra o modal de configurações para o módulo de texto na coluna 2 e atualize o seguinte:
- Orientação do texto: direita
Ajustando o espaçamento do layout
No momento, provavelmente há muito espaço em branco (ou negativo) entre as duas linhas de conteúdo. Para tirar um pouco desse espaço, podemos adicionar uma margem inferior negativa ao módulo de anúncio publicitário inferior na linha superior da seguinte maneira:
- Margem personalizada: -100px inferior
Resultado final
Agora vamos dar uma olhada no resultado final.
Experimentando outros ícones
Para experimentar ícones diferentes para o seu layout, você pode usar o recurso localizar e substituir. Abra as configurações de sinopses para uma das sinopses contendo seu ícone. Em seguida, clique com o botão direito do mouse no ícone no modal de configurações e selecione Localizar e substituir.
No pop-up Localizar e substituir, atualize o seguinte:
- Dentro de: Esta seção
- Substituir por: [selecionar novo ícone]
Depois disso, clique no botão substituir.
Isso mudará todas as sinopses em sua seção por uma nova.
Aqui estão alguns exemplos de layout usando ícones diferentes.
Pensamentos finais
Adicionar ícones de propaganda como acentos de design ao seu conteúdo é um exemplo de como dois módulos podem ser combinados para criar um design totalmente exclusivo. Nesse caso, o fundo e a borda do módulo de texto estão servindo como uma sobreposição parcial para os ícones ao redor. O resultado é único e abre a porta para explorar mais variações de design. Sinta-se à vontade para explorar diferentes ícones e combinações de cores para criar algo que atenda às suas necessidades.
Estou ansioso para ouvir de você nos comentários.
Saúde!