Como estilizar uma imagem no seu módulo de cabeçalho de largura total Divi

O Fullwidth Header Module do Divi inclui muitas opções de estilo de imagem, permitindo que os usuários do Divi criem belas imagens e layouts para seus cabeçalhos. A imagem do cabeçalho pode ser estilizada de várias maneiras para criar layouts e designs interessantes. Fica ainda mais interessante quando combinado com os vários designs de texto e botão. Nesta postagem, veremos como estilizar uma imagem em seu módulo de cabeçalho Divi Fullwidth e compartilhar três exemplos para ajudá-lo a projetar seu módulo de cabeçalho de largura total.

Vamos começar!

Visualizar

Exemplo 1 de imagem de cabeçalho de largura total para desktop

Exemplo de imagem de cabeçalho de largura total de telefone um

Exemplo dois de imagem de cabeçalho de largura total para desktop

Exemplo dois de imagem de cabeçalho de largura total de telefone

Exemplo três de imagem de cabeçalho de largura total para desktop

Exemplo de imagem de cabeçalho de largura total de telefone três

Adicione uma imagem ao seu cabeçalho de largura total

Aqui está o cabeçalho de largura total que usaremos neste exemplo. Primeiro, vamos ver como construí-lo. Estamos usando imagens e filas de design do Flower Farm Layout Pack gratuito que está disponível no Divi.

Para adicionar o módulo Divi Fullwidth Header à sua página, você precisará de um novo contêiner de seção com uma linha de uma coluna. Depois de ter isso, adicione o Fullwidth Header Module à coluna da sua linha.

Texto do cabeçalho de largura total

Em seguida, adicione seu título, legenda, texto do botão um, texto do botão dois e conteúdo.

• Título: Bem-vindo à Fazenda de Flores Divi
• Legenda: Sobre nós
• Botão Um: Mais Informações
• Botão Dois: Loja
• Conteúdo: seu texto

Imagem de cabeçalho

Role para baixo até Imagens , escolha Imagem do cabeçalho e adicione sua imagem.

Fundo

Em seguida, role para baixo até Background , selecione a guia Gradient e adicione quatro Gradient Stops:

• Parada de gradiente 1: 0%, #000000
• Parada 2: 25%, rgba(0,0,0,0,8)
• Gradiente 3: 75%, rgba(0,0,0,0,8)
• Gradiente 4: 100%, #000000

Em seguida, ative Colocar gradiente acima da imagem de fundo . Deixe as outras configurações em seus padrões.

• Colocar gradiente acima da imagem de fundo: sim

Selecione a guia Imagem de fundo e adicione sua imagem. Em seguida, estilizaremos o Módulo de cabeçalho de largura total.

Texto do título

Selecione a guia Design e role para baixo até Texto do título . Selecione H1 e escolha Italiana para a Fonte. Defina o alinhamento para a esquerda e escolha branco para a cor.

• Nível de título: H1
• Fonte: Italiana
• Alinhamento: Esquerda
• Cor: #ffffff

Defina o tamanho da área de trabalho para 80px, o tamanho do tablet para 40px e o tamanho do telefone para 32px.

• Tamanho: Desktop de 80px, Tablet de 40px, Telefone de 32px

Texto de corpo

Em seguida, role para baixo até Corpo de texto . Defina o alinhamento para a esquerda, escolha Roboto para a fonte e altere a cor para branco.

• Alinhamento: Esquerda
• Fonte: Robot
• Cor: #ffffff

Altere o tamanho da área de trabalho para 18px, o tamanho do tablet para 16px e o tamanho do telefone para 14px.

• Tamanho do texto: 18px Desktop, 16px Tablet, 14px Telefone

Texto da legenda

Em seguida, role para baixo até Texto da legenda . Escolha Roboto para a fonte e defina o Peso para Pesado. Escolha TT para o estilo, defina o alinhamento para a esquerda e altere a cor para #b5a68f.

• Fonte: Robot
• Peso: Pesado
• Estilo: TT
• Alinhamento: Esquerda
• Cor: #b5a68f

Em seguida, altere o Espaçamento para 0,2em e a Altura da Linha para 1,7em. Deixe o tamanho da fonte em seu padrão, 18px.

• Espaçamento: 0,2em
• Altura da linha: 1,7 em

Botão Um

Role para baixo até o botão um e selecione Usar estilos personalizados para o botão um . Defina o tamanho da fonte para 14px, a cor do texto para #aa6a3c e a cor de fundo para #f5f3ef.

• Usar estilos personalizados para o botão um: Sim
• Tamanho da fonte: 14px
• Cor do texto: #aa6a3c
• Cor de fundo: #f5f3ef

Defina a cor da borda para #aa6a3c, o espaçamento entre letras para 0,15em, a fonte para Roboto, a espessura para negrito e o estilo para TT.

• Cor da borda: #aa6a3c
• Espaçamento entre letras: 0,15em
• Fonte: Robot
• Peso: Negrito
• Estilo: TT

Role para baixo até Button One Preenchimento . Altere o preenchimento superior e inferior para 20px e o preenchimento esquerdo e direito para 30px.

• Preenchimento: Superior, Inferior 20px, Esquerda, Direita 30px

Botão Dois

Em seguida, role para baixo até o botão dois . Selecione Usar estilos personalizados para o botão dois . Defina o tamanho da fonte para 14px, a cor do texto para branco e a cor de fundo para rgba(255,255,255,0).

• Usar estilos personalizados para o botão dois: sim
• Tamanho da fonte: 14px
• Cor do texto: #ffffff
• Cor de fundo: rgba(255,255,255,0)

Defina a cor da borda para branco, o espaçamento entre letras para 0,15em, a fonte para Roboto, a espessura para negrito e o estilo para TT.

• Cor da borda: #ffffff
• Espaçamento entre letras: 0,15em
• Fonte: Robot
• Peso: Negrito
• Estilo: TT

Role para baixo até Button Two Preenchimento e defina o preenchimento superior e inferior para 20px e o preenchimento esquerdo e direito para 30px. Isso é tudo para o estilo Fullwidth Header Module. Agora, veremos três maneiras de estilizar a imagem.

• Preenchimento: Superior, Inferior 20px, Esquerda, Direita 30px

Exemplos de estilo de imagem de cabeçalho de largura total

Veja três exemplos usando nosso layout como ponto de partida. Farei alguns ajustes no layout para cada um dos exemplos.

Exemplo 1 de imagem de cabeçalho de largura total

Para nosso primeiro exemplo de imagem de cabeçalho de largura total, criaremos uma parte superior arredondada com uma borda. Vá para a guia Design e role para baixo até Image . Dessincronize os valores e altere a borda superior para 400px.

• Borda superior direita e esquerda: 400px
• Borda inferior direita e esquerda: 0px

Altere a largura da borda para 2px e a cor da borda para branco.

• Largura: 2px
• Cor: #ffffff

Em seguida, ajustaremos o Alinhamento do texto e da imagem para ajustar seu posicionamento na tela. Para este exemplo, deixaremos a imagem e o texto em suas posições atuais, mas alteraremos o alinhamento vertical do texto e dos botões. A seleção de tela cheia abre uma opção para alinhamento vertical de texto nas opções de texto.

Primeiro, vá para a guia Design. Em Layout, defina o alinhamento do texto para a direita e ative Tornar tela cheia.

• Fazer tela cheia: Sim

Por fim, role para baixo até Texto . Agora você verá uma opção chamada Text Vertical Alignment . Defina-o como Inferior. Feche o módulo e salve suas configurações.

• Alinhamento Vertical do Texto: Inferior

Exemplo dois de imagem de cabeçalho de largura total

Para este exemplo, usaremos um texto e uma imagem de botão diferentes. Primeiro, altere o texto do Button One para Information.

• Texto do botão um: informações

Em seguida, role para baixo até Background e escolha uma imagem diferente. Esta imagem terá cerca de 1/3 da largura da tela. Estou usando a mesma imagem como plano de fundo.

• Imagem do cabeçalho: Imagem grande

Em seguida, vá para a guia Avançado e role para baixo até o campo Imagem do cabeçalho. Adicione CSS para definir a largura como 150% e a Altura como automática. Feche o módulo e salve suas configurações.

CSS da imagem de cabeçalho:

max-width: 150%;
height: auto;

Agora, com a imagem e o texto do botão no lugar, faremos nossos ajustes. Podemos ajustar o Alinhamento do texto e da imagem para ajustar seu posicionamento na tela. Primeiro, vá para a guia Design . Em Layout, deixe o Text Alignment to Left e ative Make Fullscreen .

• Fazer tela cheia: Sim

Em seguida, role até Texto do título e defina o Alinhamento ao Centro.

• Alinhamento do Texto do Título: Centro

Em seguida, role para baixo até Corpo de texto . Altere o alinhamento do texto para o centro.

• Alinhamento: Centro

Em seguida, role até Texto da legenda e defina o Alinhamento ao Centro.

• Alinhamento do Texto da Legenda: Centro

Role para baixo até Button One Margin e altere a margem esquerda para 29% para desktops, 18% para tablets e 19% para telefones.

• Botão Um Margem Esquerda: 29% desktop, 18% tablet, 19% telefone

Role para baixo até a margem do botão dois e altere a margem esquerda para 30% para tablets e 31% para telefones.

• Botão Dois Margem Esquerda: 30% tablet, 31% telefone

Role para baixo até Dimensionamento e defina a largura para 104% para telefones. Isso centraliza o conteúdo corretamente para telas estreitas.

• Largura: 104% telefone

Exemplo três de imagem de cabeçalho de largura total

Primeiro, vá para a guia Design . Em Layout , defina o alinhamento do texto para a direita. No meu caso, o texto está alinhado à esquerda, mas o seu pode estar centralizado se você não tiver especificado o alinhamento.

• Alinhamento de texto e logotipo: centro

Role para baixo até Imagem . Altere a largura da borda para 4px e a cor da borda para #b5a68f.

• Largura da borda: 4px
• Cor da borda: #b5a68f

Em seguida, role até Texto do título e altere o Alinhamento para Centralizado.

• Alinhamento do texto do título: centralizado

Role até o corpo do texto e altere o alinhamento para centralizado.

• Alinhamento do corpo do texto: centralizado

Em seguida, role até Texto da legenda e altere o Alinhamento para Centralizado.

• Alinhamento do texto da legenda: centralizado

Em seguida, vá para a guia Conteúdo e altere o texto do Botão Um para Informações apenas para telefones.

• Conteúdo do botão um para telefones: informações

Volte para a guia Design e adicione uma margem direita de 5% à guia do telefone do botão dois.

• Margem direita: 5% telefone

Por fim, role para baixo até Dimensionamento e defina a largura do conteúdo para 52% para desktops e 100% para tablets e telefones. Feche o módulo e salve suas configurações.

• Largura do conteúdo: 52% desktop, 100% tablet e telefone

Resultados

Exemplo 1 de imagem de cabeçalho de largura total para desktop

Exemplo de imagem de cabeçalho de largura total de telefone um

Exemplo dois de imagem de cabeçalho de largura total para desktop

Exemplo dois de imagem de cabeçalho de largura total de telefone

Exemplo três de imagem de cabeçalho de largura total para desktop

Exemplo de imagem de cabeçalho de largura total de telefone três

Pensamentos finais

Essa é a nossa visão de como estilizar seu Divi Fullwidth Header Module. A imagem é fácil de estilizar e pode ser colocada em vários locais dentro do módulo. As várias opções de layout do módulo oferecem muitas possibilidades de design. Certifique-se de testar seus designs em todos os tamanhos de tela para garantir a melhor experiência do usuário.

Nós queremos ouvir de você. Você estilizou suas imagens no Fullwidth Header Module do Divi? Deixe-nos saber sobre sua experiência nos comentários.