4 exemplos impressionantes de módulo de título de postagem da Divi e como alcançá-los
Publicados: 2019-01-13Para todos os blogueiros Divi que procuram novas maneiras de envolver as pessoas com suas postagens, o Divi Post Title Module é um ótimo lugar para começar. O Módulo de Título de Postagem permite que você estilize o título do post (e a imagem em destaque) de várias maneiras para criar inúmeros designs impressionantes. Isso permite que você crie alguns artigos bonitos que prendem seus leitores em potencial desde o primeiro vislumbre. Hoje, vou mostrar quatro maneiras incríveis de estilizar o Divi Post Title Module para ajudar a atrair seus leitores.
Vamos começar!
Espiada
Aqui está uma olhada rápida nos designs de módulo de título de postagem apresentados neste tutorial.
# 1 Abstract Framing
Comece a construir # 1
# 2 Texto sobreposto e imagem em destaque
Comece a construir # 2
# 3 Fundos de conteúdo exclusivos para legibilidade
Comece a construir # 3
Efeito de empilhamento nº 4 com imagens duplas
Comece a construir # 4
Começando
Inscreva-se no nosso canal no Youtube
Tudo que você realmente precisa para este tutorial é Divi. Estaremos criando novos posts e usando o Divi Builder para criar os designs dos títulos dos posts. Você também precisará de algumas imagens para servir como imagens de destaque.
A configuração para novas postagens
Para este tutorial, usarei o Divi Builder para criar exemplos de designs de título de postagem em uma nova postagem. Para obter a configuração das compilações neste tutorial, você precisará fazer o seguinte:
- Crie uma nova postagem.
- Adicione um título à sua postagem.
- Adicione uma imagem em destaque à sua postagem.
- Implante o Divi Builder.
- Escolha construir do zero
- em Configurações da página Divi, selecione o layout da página Sem barra lateral e selecione Ocultar o título do post.
- Em seguida, clique em Build no Front End ou implante o modo de exibição Desktop no backend para que você possa projetar a página visualmente.
Você decide se deseja ou não criar uma nova postagem para cada design ou simplesmente adicionar vários designs de título de postagem a uma postagem. Apenas tenha em mente que se você adicionar vários títulos de postagem em uma postagem, eles herdarão o mesmo título de página e imagem em destaque.
# 1 Abstract Framing
Este design de título de postagem limpo tem elementos de enquadramento abstratos sutis que funcionarão bem com sua imagem em destaque e título de postagem. O efeito de enquadramento é criado usando algum estilo de borda personalizada e sombra de caixa.
Veja como fazer.
Certifique-se de configurar a nova postagem conforme descrito no início deste artigo (Adicionar Título, Imagem em Destaque, Sem layout de página da barra lateral, ocultar o título padrão da postagem). Adicione uma nova seção com uma linha de uma coluna à sua postagem. Em seguida, adicione o módulo de título da postagem à linha.
Nas configurações de título da postagem, defina o posicionamento da imagem em destaque da seguinte maneira:
Posicionamento da imagem em destaque: acima do título
Em seguida, atualize e adicione um gradiente de fundo para adicionar um pequeno elemento de design abstrato no canto inferior direito do módulo.
Cor do gradiente de fundo à esquerda: rgba (0,0,0,0.06)
Cor direita do gradiente de fundo: rgba (0,0,0,0)
Tipo de gradiente: radial
Direção radial: inferior direito
Posição inicial: 10%
Posição final: 0%
Continue atualizando o resto do design da seguinte maneira:
Fonte do título: Josefin Sans
Alinhamento do texto do título: à direita
Tamanho do texto do título: 36px
Altura da linha de título: 1.7em (desktop), 1.3em (tablet e smartphone)
Meta Font: Josefin Sans
Estilo da fonte meta: TT
Alinhamento de Meta Texto: à esquerda
Meta espaçamento entre letras: 2px
Altura da linha meta: 2em
Margem personalizada: -5vw superior
Preenchimento personalizado: 5vw superior, 5vw inferior, 5vw esquerdo, 5vw direito
Largura da borda direita: 4px
A margem de -5vw puxa o módulo para fora da linha para que a borda direita fique acima da borda esquerda que iremos adicionar à linha.
Agora vamos adicionar um elemento de design abstrato usando a sombra da caixa:
Sombra da caixa: veja a imagem
Posição horizontal da sombra da caixa: 112px
Posição vertical da sombra da caixa: 85 px
Força de propagação da sombra da caixa: -80px
Cor da sombra: rgba (224,43,32,0.3)
Salvar configurações.
Agora abra as configurações de linha para redimensioná-la e crie o lado esquerdo do design da moldura usando uma borda e uma sombra de caixa.
Largura personalizada: 700 px
Largura da borda direita: 4px
Sombra da caixa: veja a imagem
Posição horizontal da sombra da caixa: 112px
Posição vertical da sombra da caixa: 85 px
Força de propagação da sombra da caixa: -80px
Cor da sombra: rgba (224,43,32,0.3)
Agora vamos verificar o design final.
# 2 Texto sobreposto e imagem em destaque
Crie uma nova seção com uma linha de duas colunas. Em seguida, adicione um módulo de imagem na coluna da esquerda.
Isso vai servir como nossa imagem em destaque usando conteúdo dinâmico. Abra as configurações da imagem, exclua a imagem simulada e clique no ícone de conteúdo dinâmico no canto superior direito da caixa de visualização da imagem. Em seguida, selecione Imagem em destaque na lista para adicionar a imagem em destaque à página.
Agora adicione um módulo de título de postagem na coluna da direita. Abra as configurações e oculte a imagem destacada configurando a opção Mostrar imagem destacada como NÃO.
Em seguida, adicione um gradiente de fundo ao módulo de título da postagem.
Cor do gradiente de fundo à esquerda: #ffffff
Cor do gradiente de fundo à direita: rgba (255,255,255,0)
Isso se tornará visível assim que adicionarmos alguma margem negativa para sobrepor a imagem.
Atualize o resto do design da seguinte forma:
Fonte do título: Fira Sans Condensed
Peso da fonte do título: ultraleve
Tamanho do texto do título: 80 px (desktop), 70 px (tablet), 45 px (smartphone)
Meta Font: Fira Sans Condensed
Estilo da fonte meta: TT
Meta Alinhamento de Texto: certo
Meta Cor do Texto: #cccccc
Meta espaçamento entre letras: 2px
Margem personalizada: -20% à esquerda (desktop), 0% (tablet e smartphone)
Preenchimento personalizado: 5vw superior, 5vw inferior, 30px à esquerda
Agora vamos dar a ele uma sombra de caixa para criar uma linha sob o título.
Sombra da caixa: veja a imagem
Posição horizontal da sombra da caixa: 80px
Posição vertical da sombra da caixa: 82 px
Força de propagação da sombra da caixa: -80px
Salve a configuração e abra as configurações da linha para ajustar a largura da medianiz.
Largura da calha: 1
Equalize a altura das colunas: SIM
Agora verifique o design final.
Design alternativo de imagem arredondada
Com apenas alguns pequenos ajustes, você pode tornar a imagem em destaque circular e ajustar o ladrilho do post para ser centralizado verticalmente. Para fazer isso, abra as configurações de imagem e atualize o seguinte:
Cantos arredondados: 50%
Em seguida, abra as configurações de linha e adicione o seguinte CSS personalizado no elemento principal:
align-items: center;
Isso funciona apenas se você tiver Equalize Column Heights definido como YES, o que ativa a propriedade flex, permitindo-nos alinhar os itens verticalmente. 
Aqui está o design final.
# 3 Fundos de conteúdo exclusivos para legibilidade
O design do título da postagem incorpora gradientes de fundo para tornar o título e o metatexto mais legíveis com uma imagem de fundo em destaque.
Aqui está como fazer.
Crie uma nova seção com uma linha de uma coluna. Em seguida, adicione o módulo de título da postagem à linha.
Em seguida, atualize as configurações do módulo de título da postagem para ocultar a imagem em destaque.
Fonte do Título: Abril Fatface
Cor do texto do título: # 121212
Tamanho do texto do título: 75 px (desktop), 50 px (tablet), 30 px (smartphone)
Espaçamento entre letras de título: 2px
Altura da linha de título: 1.1em
Meta Font: Roboto condensado
Meta Cor do Texto: #ffffff
Tamanho do metatexto: 16px
Meta espaçamento entre letras: 2px
Altura da linha meta: 2em
Largura: 60% (desktop), 90% (tablet), 100% (smartphone)
Preenchimento personalizado: 3vw restante
Agora vamos adicionar uma sombra de caixa para servir de plano de fundo ao meta texto e torná-lo legível.
Sombra da caixa: veja a imagem
Posição horizontal da sombra da caixa: 0 px
Posição vertical da sombra da caixa: -32 px
Cor da sombra da caixa: # 121212
Agora vamos adicionar nossa imagem em destaque ao plano de fundo da seção usando conteúdo dinâmico. Abra as configurações da seção e clique no ícone de conteúdo dinâmico no canto superior direito da caixa de visualização da imagem de fundo. Em seguida, selecione a imagem em destaque na lista para adicionar a imagem em destaque à seção.
Agora vamos adicionar nosso elemento de fundo gradiente para tornar o texto do título da postagem mais legível. Basta clicar na guia gradiente e atualizar o seguinte:
Cor do gradiente de fundo à esquerda: rgba (255,255,255,0,76)
Cor do gradiente de fundo à direita: rgba (255,255,255,0)
Tipo de gradiente: radial
Direção radial: canto superior esquerdo
Posição inicial: 40%
Posição final: 0%
Colocar gradiente acima da imagem de fundo: SIM
Agora vamos ver o design final.
Efeito de empilhamento nº 4 com imagens duplas
Este design incorpora algumas sombras de caixa para dar o efeito de empilhar os elementos que compõem o módulo do título da postagem e o fundo da seção. Ele também usa duas versões da imagem em destaque (dinamicamente) para um elemento de design exclusivo.
Veja como fazer.
Crie uma nova seção com uma linha de uma coluna. Em seguida, adicione o módulo de postagem à linha e atualize o posicionamento da imagem em destaque para Título / Imagem de fundo meta.
Em seguida, atualize as configurações de design da seguinte forma:
Cor do texto: claro
Cor de fundo do texto: rgba (1,59,104,0,79)
Orientação do texto: centro
Fonte do título: Roboto condensado
Peso da fonte do título: leve
Tamanho do texto do título 70px (desktop), 50px (tablet), 30px (smartphone)
Altura da linha do título: 1,3em
Meta Font Weight: Light
Estilo da fonte meta: TT
Meta Cor do Texto: #cccccc
Meta espaçamento entre letras: 1px
Preenchimento personalizado: 10vw superior, 0px inferior
Agora vamos adicionar nossa primeira sombra de caixa para criar nossa primeira camada de empilhamento.
Sombra da caixa: veja a imagem
Posição horizontal da sombra da caixa: 0 px
Posição vertical da sombra da caixa: -46px
Cor da sombra: #ffffff
Você pode ver que isso também serve como uma forma criativa de dividir o título e o metatexto.
Agora salve suas configurações e abra as configurações da seção. Adicione a imagem em destaque ao seu plano de fundo como conteúdo dinâmico. Em seguida, adicione um gradiente da seguinte forma:
Cor do gradiente de fundo à esquerda: rgba (1,59,104,0,79)
Cor certa do gradiente de fundo: rgba (1,59,104,0,79)
Colocar gradiente acima da imagem de fundo: SIM
Esse design de fundo de imagem em destaque adicional é uma maneira única de dar ao título da sua postagem um design exclusivo que mudará dinamicamente a cada nova imagem em destaque.
Em seguida, adicione algum preenchimento personalizado.
Preenchimento personalizado (desktop): 10vw superior, 0px inferior
Preenchimento personalizado (smartphone): 0vw superior, 0px inferior
Em seguida, adicione outra sombra de caixa para continuar o efeito de empilhamento.
Sombra da caixa: veja a imagem
Posição horizontal da sombra da caixa: 0 px
Posição vertical da sombra da caixa: -92px
Cor da sombra: #ffffff
Para finalizar o design, abra as configurações de linha e atualize o seguinte:
Faça esta linha com largura total: SIM
Largura da calha: 1
Preenchimento personalizado (desktop): 0 px superior, 0 px inferior, 6% à esquerda, 6% à direita
Preenchimento personalizado (smartphone: 0px superior, 0px inferior, 0% à esquerda, 0% à direita
Agora verifique o design final.
Pensamentos finais
Com esses designs de título de postagem, você deve ter uma boa compreensão do que é possível com o módulo de título de postagem Divi e o Divi Builder. Com apenas alguns ajustes de design, combinados com o poder do conteúdo dinâmico para imagens em destaque, você pode criar incontáveis estilos de título de postagem exclusivos para suas postagens de blog. Espero que isso o inspire a criar alguns títulos de post impressionantes por conta própria.
Para obter mais inspiração de design relacionado, verifique nossa postagem de blog sobre seções de heróis de postagens de blog dinâmicas bonitas e envolventes e o segredo para projetar layouts de grade quebrados em Divi.
Estou ansioso para ouvir de você nos comentários.
Saúde!