Você provavelmente já navegou em blogs que oferecem layouts com texto invertido. Geralmente este design é usado em blogs do tipo revista e é um efeito bastante interessante que se pode adicionar Divi. Neste tutorial, sugiro que você descubra como adicionar texto invertido em seu layout em Divi.
Deve ser dito que com Divi, é possível girar qualquer elemento da sua página usando as opções de transformação incorporadas na atualização 3.2. Então, vamos criar um layout de três partes incorporando exemplos de texto girado.
Visão geral do resultado final
Use o pacote disponível
Para conseguir este layout, você deve baixar o projeto salvo em um arquivo ZIP. Depois de fazer o download, tudo o que você precisa fazer é importá-lo para o Divi Builder. Você pode baixar este arquivo diretamente clicando no seguinte link de download.
Téléchager
Como adicionar texto girado ao Divi
Para iniciantes, criaremos um cabeçalho com texto vertical. Para fazer isso, giraremos um módulo de sinopse usando as opções de transformação. Você deve criar uma seção regular com uma linha de duas colunas.
Antes de adicionar o módulo, você deve remover as margens interna e inferior da seção, atualizando as configurações de preenchimento interno da seguinte maneira: rgravação personalizada: 0px na parte superior, 0px na parte inferior.
Então você também precisa alterar os parâmetros da linha:
- Imagem de fundo: [adicione uma imagem de sua escolha com pelo menos 1920 pixels de largura]
- Coluna 1 Cor de fundo: #121212
- Largura personalizada: 100%
- Largura da calha: 1
- Equalizar as alturas das colunas: SIM
- Preenchimento personalizado (área de trabalho): 0px na parte superior, 0px na parte inferior
- Preenchimento personalizado (tablet): 40% à direita
- Preenchimento personalizado (telefone): 30% à direita
- Coluna 1 Preenchimento personalizado (área de trabalho): 200px na parte superior, 200px na parte inferior
- Coluna 1 Preenchimento personalizado (tablet): 150px na parte superior, 150px na parte inferior
- Sombra da caixa: como na imagem
- Posição horizontal da sombra da caixa: 0px
- Posição da sombra da caixa vertical: -100px
- Cor da Sombra: #f6454e
Adicionar módulo de resumo (Blurb)
A próxima etapa agora é adicionar um módulo para o cabeçalho. Para fazer isso, adicione um módulo de resumo na coluna esquerda da mesma linha.
Atualize o módulo da seguinte maneira:
- Título: BLOG DESIGN
- Conteúdo: Você pode escrever qualquer coisa.
- Use o ícone: SIM
- Ícone: coração
- Cor do ícone: # f6454e
- Tamanho da fonte do ícone: 32px
- Orientação do texto: centro
- Título Título Nível: H1 (porque é o título principal da página)
- Fonte do título: Muli
- Estilo da fonte do título: TT
- Cor do título de texto: #ffffff
- Tamanho do título do texto: 70px (computador), 50px (tablet), 36px (telefone)
- Cor do texto do corpo: #cccccc
- Espaçamento das letras do corpo: 4px
- Largura: 500px
- Alinhamento do módulo: centro
Observe que, como vamos rotacionar o módulo de apresentação para que ele fique na vertical, a largura personalizada de 500 px corresponderá à altura do módulo de apresentação vertical. É portanto importante que o conteúdo cabe neste módulo. Neste exemplo, usamos uma pequena quantidade de texto e redimensionamos a fonte do título em diferentes dispositivos, para que o texto não seja quebrado e não perturbe o design.
Como rodar o módulo
Para girar o módulo de resumo (e todos os seus conteúdo), atualize as opções de transformação da seguinte maneira:
- Transformar a rotação do eixo X: -90deg
Você precisará inserir o valor -90deg manualmente. Isso fornecerá o alinhamento vertical do conteúdo de baixo para cima.
Adicione um botão vertical
Agora vamos adicionar um botão na parte inferior do nosso cabeçalho para lembrar o usuário de rolar a página para baixo. Em seguida, podemos girar o botão usando as opções de transformação, como fizemos para o módulo de resumo.
Crie uma nova linha com uma estrutura de uma coluna.
Antes de adicionar nosso módulo de botão, atualize as configurações de linha da seguinte forma:
- Cor de fundo: #f6454e
- Largura personalizada: 100%
- Largura da calha: 1
Em seguida, adicione um módulo de botão à linha e atualize as seguintes opções de botão:
- Alinhamento dos botões: centro
- Use estilos personalizados para o botão: Sim
- Tamanho do texto do botão: 16px
- Cor do texto do botão: #ffffff
- Largura da borda do botão: 0px
- Espaço das letras dos botões: 9 pixels
- Peso da fonte: luz
- Estilo da Fonte: TT
- Ícone de botão: seta para a direita
Rotação e posicionamento dos botões
Para girar e posicionar o botão, usaremos uma combinação de margens e transformaremos a rotação da seguinte forma:
- Margem personalizada (área de trabalho): -50px na parte superior, 50px na parte inferior, -50px na esquerda
- Margem personalizada (tablet): 0px à esquerda
- Transformar Rotação do Eixo X: 90deg
Desta vez, o botão giratório é girado 90 graus para obter uma exibição vertical de cima para baixo para o texto. Isso parece bom, pois queremos que o usuário role para baixo.
