Como criar um design de cabeçalho elegante com paralelogramos em Divi

Adicionar um novo design de cabeçalho elegante à sua página é uma maneira eficaz de impressionar seus visitantes. E criar um plano de fundo exclusivo para seu cabeçalho é um ótimo lugar para começar. Neste tutorial, vou mostrar como usar Divi para adicionar paralelogramos ao design do seu cabeçalho usando fundos gradientes de maneiras criativas. Isso adiciona um bom elemento de textura ao design que foge do layout de caixa tradicional.

Vamos começar.

Espiada

Aqui está uma olhada no design que iremos construir.

O que você vai precisar

Para criar este design, você precisará dos seguintes itens:

1. O Tema Divi
2. The Interior Design Company Sobre o layout da página (disponível no Divi Builder)

Configure a página

Para este tutorial, vou usar a empresa de design de interiores sobre layout de página em uma nova página. Vá para o painel do WordPress e navegue até Páginas> Adicionar novo. Em seguida, dê um título à sua página e clique para usar o Divi Builder. Em seguida, clique no botão para implantar o construtor visual. Selecione a opção “Choose a Premade Layout”. Em seguida, localize e selecione o Interior Design Layout Pack. Escolha o layout da página Sobre e, por fim, clique em “Usar este layout”.

Uma vez que a página foi carregada na página, você está pronto para começar a editar.

Retire o acolchoamento superior da seção e substitua a imagem de fundo

Este é um primeiro passo fácil. Tudo o que você precisa fazer é passar o mouse sobre a parte superior da seção do cabeçalho superior da página. Você verá que o preenchimento superior atual está definido para 10%. Basta arrastar o preenchimento para 0%. Ou você sempre pode acessar as configurações da página e definir o preenchimento superior personalizado para 0% também.

Você também pode alterar a imagem de fundo neste ponto, mas não é necessário. Para fazer isso, vá para as configurações da seção e altere a imagem de fundo sob a guia de conteúdo. Em seguida, retire o gradiente de fundo. Isso ajudará a tornar o texto (que será em branco) mais legível no celular, pois haverá algum texto sobreposto à imagem de fundo.

Ajuste o tamanho da linha e o preenchimento

Em seguida, vá para as configurações de linha e na guia Design, atualize o seguinte:

Usar largura personalizada: SIM
Largura personalizada: 100%
Preenchimento personalizado: 0px superior, 10vw inferior

Adicionar fundo gradiente à linha e coluna

Para criar este design elegante, iremos sobrepor fundos gradientes com diferentes posições iniciais e finais. Primeiro, precisamos adicionar um fundo gradiente à linha e depois à coluna.

Vá para as configurações de linha na guia de conteúdo e atualize o seguinte:

Cor do gradiente de fundo à esquerda: # 1a1a1a
Cor do gradiente de fundo à direita: rgba (255,255,255,0)
Direção do gradiente: 45 graus
Posição inicial: 60%
Posição final: 0%

Coluna 1 Gradiente de fundo, cor esquerda: rgba (244,88,63,0,83)
Coluna 1 Gradiente de fundo cor direita: rgba (255,255,255,0)
Direção do gradiente da coluna: 45 graus
Posição inicial da coluna: 66%
Posição final da coluna: 0%

O gradiente laranja que adicionamos à coluna será usado para o primeiro paralelogramo em nosso design de cabeçalho. Para criar o paralelogramo, precisamos encurtar o gradiente laranja com um lado esquerdo que tem um ângulo de 45 graus para coincidir com o lado direito. Faremos isso adicionando um gradiente ao módulo de call to action.

Ajustando o tamanho e o espaçamento do texto do módulo de apelo à ação

Antes de adicionarmos nosso gradiente de fundo ao módulo de call to action, vamos primeiro definir o espaçamento e os estilos de texto.

Acesse as configurações do módulo de call-to-action e atualize o seguinte na guia Design:

Orientação do Texto: Esquerda
Cor do Texto: Claro
Tamanho do texto do título: 4.5vw (desktop), 42px (tablet)
Cor do texto do botão: # 1a1a1a
Cor de fundo do botão: #ffffff
Largura: 100%
Redefinir Margens
Preenchimento personalizado (desktop): 10vw superior, 5% à esquerda, 45% à direita
Preenchimento personalizado (tablet): 38% certo
Preenchimento personalizado (smartphone): 5% certo

Agora podemos adicionar nosso gradiente de fundo ao nosso módulo. Para acelerar este processo, vá até as configurações de linha e clique com o botão direito e copie o gradiente de fundo da linha.

Em seguida, vá para as configurações do módulo de call to action, na guia de conteúdo, clique com o botão direito e cole o gradiente de fundo no módulo. Em seguida, ajuste a posição inicial para 47%.

Como você pode ver, isso cria o efeito de um retângulo longo em ângulo sobreposto ao fundo gradiente escuro para um elemento de design exclusivo.

Este seria um ótimo design como está agora, mas vamos prosseguir e ser ainda mais criativos adicionando um paralelogramo adicional sobrepondo a parte inferior de nossa linha.

Criação de um paralelogramo adicional usando módulos de texto vazios

O conceito para esta fase final do design do cabeçalho envolve a criação de dois módulos de texto lado a lado, cada um com um gradiente personalizado que, quando combinados, mostram uma única “caixa” com lados igualmente angulados à direita e à esquerda. Para fazer isso, devemos primeiro criar uma linha de uma coluna para conter nossos módulos de texto. Então podemos dimensionar e posicionar nossos módulos para que fiquem lado a lado.

Adicione uma linha de uma coluna diretamente sob a seção que contém nosso módulo de call to action dentro da mesma seção.

Em seguida, adicione um módulo de texto à coluna esquerda e atualize o módulo de texto da seguinte forma:

Apague todo o conteúdo da caixa de conteúdo (usaremos um módulo de texto vazio)
Cor do gradiente de fundo à esquerda: rgba (255,255,255,0)
Cor direita do gradiente de fundo: rgba (58,80,107,0,83)
Direção do gradiente: 45 graus
Posição inicial: 50%
Posição final: 0%

Agora pule a guia de design e atualize o seguinte:

Altura da linha de texto: 0em (isso eliminará qualquer espaçamento indesejado)
Largura: 50%
Margem personalizada: -8vw superior, 0px inferior
Preenchimento personalizado: 8vw superior, 8vw inferior

Salvar configurações.

No construtor visual, duplique o módulo e atualize as configurações do módulo de texto para o novo módulo da seguinte forma:

Passe o mouse sobre a visualização do gradiente de fundo e clique no ícone “Alternar gradiente” para alternar as cores do gradiente da esquerda para a direita.

Alinhamento do Módulo: Direito
Margem personalizada: -16vw superior, 0px inferior

Salvar configurações.

Agora que temos nossos módulos alinhados, podemos ajustar as configurações de linha para posicionar nossos módulos e redimensioná-los para caber no design. Abra as configurações de linha e atualize o seguinte:

Alinhamento de linha: esquerda
Usar largura personalizada: SIM
Largura personalizada: 45%
Margem personalizada: 30% restantes
Preenchimento personalizado: 0 px superior, 0 px inferior

Isso é suficiente! Confira os resultados finais.

Aqui está no tablet e smartphone.

Pensamentos finais

Espero que esta técnica de design lhe dê um pouco de inspiração sobre como você pode usar as opções de fundo gradiente do Divi para incorporar alguns paralelogramos elegantes em seu próprio design de cabeçalho. E, é claro, esse design não se limita aos cabeçalhos. Sinta-se à vontade para explorar novas áreas onde este design funcionará para você. Para obter mais inspiração, verifique alguns segredos de design de grade quebrados que podem ajudá-lo ao longo do caminho.

Estou ansioso para ouvir de você nos comentários.

Saúde!