Usar ícones de apresentação como toques estéticos pode dar ao seu layout um design exclusivo que você talvez não tenha pensado antes. Além de posicionar o ícone de um módulo de apresentação para cobrir 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 destaque de design agradável que enquadra o conteúdo, enquanto dá aos seus ícones um design totalmente exclusivo.
Neste tutorial, mostrarei como estilizar ícones de apresentação como acentos de design para o seu conteúdo no Divi.
Visão geral
Aqui estão alguns exemplos do design que iremos construir neste tutorial.
Faça o download dos layouts de amostra para este tutorial
Para obter o layout dos padrões de destaque do módulo de sinopse livre, você precisa baixá-lo primeiro usando o botão abaixo. Para obter acesso ao download, você deve se inscrever em nossa lista de discussão Divi Daily usando o formulário abaixo. Como novo assinante, você receberá ainda mais benefícios do Divi e um pacote Divi Layout todas as segundas-feiras livre ! 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 adicionais.
Descarregar
Comece com o 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 sistema de parte pública. 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:
Use a largura da calha personalizada: SIM
Largura da calha personalizada: 1
Isso eliminará as 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:
Nossos serviços esta seção exibe a lista dos diferentes serviços que oferecemos aos nossos clientes.
Estilize o módulo de texto
Agora, atualize o restante do parâmetro do módulo de texto da seguinte maneira:
- Cor de fundo: #ffffff
- Heading 2 Fonte: Nunito
- Título 2 Peso da fonte: Negrito
- Título 2 Font Style: TT
- Título 2 Cor do texto: #f24a5b
- Título Tamanho do texto 2: pixels 42 (desktop), pixels 32 (tablet), pixels 22 (telefone)
- Espaçamento entre letras 2: 16px
- Título 2 Altura da linha: 1.3em
- Largura: 500px (área de trabalho), 490px (tablet)
- Alinhamento do módulo: centro
- Preenchimento personalizado (área de trabalho): 40px na parte superior, 40px na parte inferior, 50px na esquerda, 50px na direita
- Preenchimento personalizado (telefone): 20px à esquerda, 20px à direita
- Largura da borda: 10px
- Cor da borda: #ffffff
Visto que iremos sobrepor o módulo de texto com ícones de apresentação, precisamos ter certeza de que o módulo de texto fica acima dos ícones na ordem do espaço z. Para fazer isso, primeiro precisamos adicionar o seguinte snippet CSS na área CSS do elemento principal do módulo Texto:
posição: relativa;
Em seguida, defina o valor do índice z como 1.
Agora, este módulo de texto será colocado sobre qualquer outro módulo que se sobreponha, o que é importante para o design.
Crie o ícone do Blurb
Agora estamos prontos para criar o primeiro ícone da sinopse. Para fazer isso, primeiro precisamos adicionar um módulo Blurb e arrastá-lo para o topo do módulo de texto. Em seguida, exclua o conteúdo espaço reservado (o texto do título e o texto do corpo) e clique para usar um ícone em vez de uma imagem para o texto da sinopse.
Atualize os seguintes parâmetros de design:
- Cor do ícone: # 2ea3f2
- Use o tamanho da fonte do ícone: SIM
- Tamanho da fonte do ícone: 100px
- Margem personalizada: 0px na parte inferior (isso remove a margem inferior padrão entre os módulos, não necessária se você estiver usando a largura da calha 1)
Então, como não usamos nenhum texto com o módulo (apenas o ícone), podemos remover a margem inferior padrão sob o ícone de layout. Para fazer isso, adicione o seguinte código CSS personalizado à área CSS da imagem do Blurb:
CSS de imagem do Blurb:
margin-bottom: 0px
Duplique o ícone do Blurb
Antes de começarmos a posicionar a sinopse, vamos seguir em frente, duplicar o módulo da sinopse e arrastá-lo para baixo do módulo de texto. Agora você deve ter um ícone de apresentação acima e abaixo do módulo de texto.
Posicionando ícones de apresentação usando Transform Translate
Para posicionar os ícones de apresentação, vamos usar as opções de transformação Divi, que nos permitem colocar o módulo de apresentação com o ícone em qualquer lugar da página.
Ícone de Blocalização de Posicionamento # 1
Para posicionar o ícone do Blurb superior, abra as configurações do módulo do Blurb e atualize o seguinte:
- Transformar traduzir eixo X (desktop): -242px
- Transformar transladar eixo Y (desktop): 50px
- Transformação traduzir eixo X (telefone): -170px
No entanto, você pode adicionar isso de acordo com as configurações que você fez.
Ícone de Blocalização de Posicionamento # 2
Antes de posicionar este ícone de apresentação, vamos aumentá-lo. 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 apresentação atualizando as seguintes opções de transformação:
- Transformar traduzir eixo X (área de trabalho): 242px
- Transformar translação do eixo Y (desktop): -100px
- Transformação traduzir eixo X (telefone): 190px
Criação de outra seção
A partir de agora, podemos nos inspirar no que fizemos, para criar outra zona com um arranjo diferente. Tudo que você precisa fazer é criar uma nova coluna e copiar os módulos anteriores. Para realizar uma cópia múltipla, passe o mouse sobre cada módulo enquanto mantém pressionada a tecla CTRL no teclado.
Resultado final
Agora vamos ver o resultado final.
Considerações finais
Adicionar ícones de apresentação como detalhes de design ao seu conteúdo é um exemplo de como dois módulos podem ser combinados para criar um design completamente único. Neste caso, o fundo e a borda do módulo de texto servem como uma sobreposição parcial para os ícones circundantes. O resultado é único e abre a porta para explorar diversas variações de design. Sinta-se à vontade para explorar diferentes ícones e combinações de cores para criar algo de acordo com suas próprias necessidades.
Espero ouvir de você nos comentários.
