Ir para o conteúdo principal

Como personalizar o módulo de anúncios para se concentrar no conteúdo Divi

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

O uso de ícones de apresentação como toques estéticos pode dar ao seu layout um design exclusivo que você nunca imaginou. Além de posicionar um ícone do módulo de apresentação 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 belo sotaque de design que enquadra o conteúdo, dando 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 entender o layout dos padrões de acentuação do módulo de publicidade livre, você deve primeiro fazer o download usando o botão abaixo. Para acessar o download, você deve se inscrever na nossa lista de correspondência Divi Daily usando o formulário abaixo. Como novo assinante, você receberá todas as segundas-feiras ainda mais itens Divi e um pacote Divi Layout grátis! Se você já está na lista, basta digitar seu endereço de e-mail abaixo e clicar em Download. Você não será "registrado novamente" ou receberá e-mails adicionais.

Descarregar

Comece com o design do zero

Para começar, crie uma nova página e dê um título à sua página. Em seguida, implante o construtor Divi no sistema de peças públicas. Adicione uma seção regular com uma linha de uma coluna. Antes de adicionar seu primeiro módulo, atualize os parâmetros 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:

<h2> Nossos serviços </ h2> <p> Esta seção lista os diferentes serviços que oferecemos aos nossos clientes. </ p>

Estilize o módulo de texto

Agora, atualize o restante do parâmetro do módulo de texto da seguinte maneira:

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

  • 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

Como vamos sobrepor o módulo de texto aos ícones de apresentação, devemos garantir que o módulo de texto fique acima dos ícones na ordem do espaço z. Para fazer isso, primeiro devemos adicionar o seguinte snippet CSS à área CSS do elemento principal do módulo Text:

position: relative;

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 de texto da apresentação. Para fazer isso, primeiro precisamos adicionar um módulo Blurb e arrastá-lo para a parte superior do módulo de texto. Em seguida, exclua o conteúdo fictício (o texto do título e o corpo do texto) e clique para usar um ícone em vez de uma imagem para o texto da apresentação.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

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 abaixo do ícone da apresentação. Para fazer isso, adicione o seguinte código CSS personalizado à caixa Imagem do Blurb CSS:

CSS de imagem do Blurb:

margem inferior: 0px

Duplicar ícone do Blurb

Antes de começar a posicionar o Blurb, vamos em frente, duplique o módulo do Blurb e arraste-o para o 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 o Transform Translate

Para posicionar os ícones de apresentação, usaremos 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 traduzir o eixo Y (área de trabalho): 50px
  • Transformação traduzir eixo X (telefone): -170px

No entanto, você pode adicionar isso de acordo com as configurações que você fez.

ícones de apresentação

Ícone de Blocalização de Posicionamento # 2

Antes de posicionar este ícone de apresentação, vamos ampliá-lo um pouco. Para fazer isso, abra as configurações do módulo Blurb e altere o tamanho da fonte do ícone para 150px.

Posicione o ícone da apresentação atualizando as seguintes opções de transformação:

  • Transformar traduzir eixo X (área de trabalho): 242px
  • Transformar traduzir o eixo Y (área de trabalho): -100px
  • Transformação traduzir eixo X (telefone): 190px

Criando outra seção

A partir de agora, podemos nos inspirar no que fizemos, para criar outra área com um arranjo diferente. Tudo que você precisa fazer é criar uma nova coluna e copiar os módulos anteriores. Para fazer uma cópia múltipla, passe o mouse sobre cada módulo mantendo pressionada a tecla CTRL no teclado.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

Resultado final

Agora vamos ver o resultado final.

Considerações finais

Adicionar ícones de apresentação 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 plano de fundo e a borda do módulo de texto servem como uma sobreposição parcial para os ícones ao redor. O resultado é único e abre a porta para explorar várias variantes de design. Sinta-se livre para explorar diferentes ícones e combinações de cores para criar algo para suas próprias necessidades.

Espero ouvir de você nos comentários.

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
5 ações
ação5
chilrear
Enregistrer