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 de módulo de apresentação para sobrepor um módulo de texto, você pode usar o fundo e a borda do módulo de texto para estilizar o ícone. Isso cria um sotaque de design agradável 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 em Divi.

exame

Aqui estão alguns exemplos do design que iremos construir neste tutorial.

Faça o download dos layouts de amostra para este tutorial

Para colocar as mãos no layout dos padrões de acentuação do módulo livre, você deve primeiro baixá-lo usando o botão abaixo. Para acessar o download, você deve se inscrever em nossa lista de discussão Divi Daily usando o formulário abaixo. Como novo assinante, você receberá toda segunda-feira ainda mais Divi bondade e um pacote Divi Layout grátis! Se você já estiver na lista, basta digitar seu endereço de e-mail abaixo e clicar em Download. Você não será "re-registrado" ou receberá e-mails adicionais.

Download

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 medianiz 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.

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 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 Text 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 2 Tamanho do texto: 42 pixels (área de trabalho), 32 pixels (tablet), 22 pixels (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 (desktop): 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 com os ícones de apresentação, devemos nos certificar 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 trecho de CSS à área CSS do elemento principal do módulo Texto:

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 de apresentação. Para fazer isso, devemos primeiro adicionar um módulo Blurb e arrastá-lo para o topo 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.

Em seguida, 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ário se você estiver usando a largura da medianiz 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 de apresentação. Para fazer isso, adicione o seguinte código CSS personalizado à caixa CSS Blurb Image:

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. [FREE]

CSS de imagem do Blurb:

margem inferior: 0px

Ícone do Blurb duplicado

Antes de começar a posicionar a sinopse, vamos em frente, duplicar o módulo da sinopse e arrastá-lo sob 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 da mensagem superior, abra as configurações do módulo de anúncios e atualize o seguinte:

  • Transformar traduzir eixo X (desktop): -242px
  • Transformar traduzir o eixo Y (área de trabalho): 50px
  • Transformar traduzir eixo X (telefone): -170px

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

í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.

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 traduzir o eixo Y (área de trabalho): -100px
  • Transformar 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 o 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.

Resultado final

Agora vamos ver o resultado final.

Crie facilmente seu blog com o SiteGround

SiteGround permite que você crie seu blog WordPress em apenas alguns cliques. Nome de domínio grátis, hospedagem segura, SSL, transferência e muito mais ... [Recomendado]

Últimos pensamentos

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 à vontade para explorar diferentes ícones e combinações de cores para criar algo para suas próprias necessidades.

Espero ouvir de você nos comentários.

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.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

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