Como girar o texto para designs de layout exclusivos em Divi (tutorial + download de layout GRATUITO)

A maioria de nós está acostumada a ler texto da direita para a esquerda e de cima para baixo. Mas quando se trata de web design, pode ser uma boa ideia romper com a norma. Uma maneira de fazer isso é com a rotação do texto. Girar o texto em seu site pode parecer impraticável, mas parece que tem um lugar. Na verdade, a orientação vertical do texto parece ser comum no web design moderno. E, embora a maioria gire o texto apenas para fins de design, pode-se argumentar que o texto girado (ou vertical) (embora mais difícil de ler) pode ser uma técnica eficaz para chamar a atenção.

Com Divi, você pode girar qualquer elemento em sua página usando as opções de transformação integradas. Portanto, neste tutorial, vou mostrar como girar texto com sucesso para criar designs de layout exclusivos no Divi. Para fazer isso, estarei projetando um layout de três partes que incorpora exemplos de texto girado.

Vamos começar.

Espiada

Aqui está uma prévia de todo o layout que iremos construir no tutorial. Observe que há exemplos de texto girado em três seções diferentes do layout.

Baixe o Layout Completo deste Tutorial GRATUITAMENTE

Para colocar suas mãos no layout de Desenhos de Texto Girado grátis, primeiro você precisa baixá-lo usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe o Layout

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.

Agora vamos voltar ao tutorial.

Coisas a ter em mente ao girar o texto

Em qual direção você deve girar o texto?

Se você deseja girar o texto para uma exibição vertical, pode não ter certeza de qual direção girar o texto. Você pode girar o texto no sentido anti-horário para que o texto seja lido de baixo para cima. Ou você pode girar o texto no sentido horário para que ele seja lido de cima para baixo. Se você está se perguntando qual é mais fácil de ler, não tenho certeza se há uma resposta. Você pode tentar obter uma pista da orientação dos títulos dos livros em uma estante. Mas países diferentes fazem isso de maneira diferente (o padrão nos EUA é no sentido horário, de cima para baixo).

Neste tutorial, irei girar o texto no sentido anti-horário na maioria dos casos, principalmente porque gosto da aparência dele no lado esquerdo da página (talvez eu prefira inclinar minha cabeça para a esquerda). Mas sinta-se à vontade para experimentar direções diferentes.

O problema do borrão

Em alguns navegadores (como Chrome e Safari), o texto fica um pouco embaçado ao usar a propriedade transform rotate. Para corrigir o problema, você pode adicionar um valor de origem de transformação de 51% ou 52% ao longo do eixo X. Isso deve resolver o problema.

Parte 1: Construindo o Cabeçalho com Texto Vertical

Para esta primeira parte do layout, vamos criar um cabeçalho com texto vertical. Para fazer isso, estaremos girando um módulo de blurb usando as opções de transformação.

Para começar, crie uma seção regular com uma linha de duas colunas.

Antes de adicionar um módulo, retire o preenchimento superior e inferior da seção, atualizando as seguintes configurações de seção:

Preenchimento personalizado: 0 px superior, 0 px inferior

Em seguida, atualize as configurações de linha da seguinte forma:

• Imagem de fundo: [adicionar imagem com largura de pelo menos 1920 px]
• Cor de fundo da coluna 1: # 121212

• Largura personalizada: 100%
• Largura da calha: 1
• Equalize a altura das colunas: SIM
• Preenchimento personalizado (desktop): 0 px superior, 0 px inferior
• Preenchimento personalizado (tablet): 40% certo
• Preenchimento personalizado (telefone): 30% certo
• Coluna 1 Preenchimento personalizado (desktop): 200px superior, 200px inferior
• Coluna 1 Preenchimento personalizado (tablet): 150px superior, 150px inferior

• Sombra da caixa: veja a imagem
• Posição horizontal da sombra da caixa: 0 px
• Posição vertical da sombra da caixa: -100 px
• Cor da sombra: # f6454e

Criando o Módulo Blurb

Agora estamos prontos para adicionar nosso conteúdo de cabeçalho. Para fazer isso, adicione um módulo de sinopse à coluna esquerda da linha.

Atualize o seguinte conteúdo:

• Título: Divi Design
• Conteúdo: Seu conteúdo vai aqui.
• Ícone de uso: SIM
• Ícone: lâmpada

• Cor do ícone: # f6454e
• Tamanho da fonte do ícone: 32px
• Orientação do texto: centro
• Nível do título do título: H1 (porque é o título principal da página)
• Fonte do título: Muli
• Estilo da fonte do título: TT
• Cor do texto do título: #ffffff
• Tamanho do texto do título: 70 px (desktop), 50 px (tablet), 36 px (telefone)
• Cor do corpo do texto: #cccccc
• Espaçamento entre letras do corpo: 4px
• Largura: 500px
• Alinhamento do Módulo: centro

Observação importante: como iremos girar o módulo de sinopses para que fique verticalmente, a largura personalizada de 500 px se tornará a altura do módulo de sinopses verticais. Portanto, é importante que o conteúdo se encaixe neste módulo. Para este exemplo, estou usando uma pequena quantidade de texto e redimensionando a fonte do título em diferentes dispositivos para que o texto não se quebre em uma nova linha e bagunce o design.

Girando o módulo Blurb usando opções de transformação

Para girar o módulo blurb (e todo o seu conteúdo), atualize as seguintes opções de transformação:

• Transformar, girar, eixo X: -90deg

Você terá que inserir o valor -90deg manualmente. Isso fornecerá um alinhamento vertical de baixo para cima do conteúdo.

Você pode notar que o texto está um pouco borrado se estiver usando o Chrome ou Safari. Isso às vezes pode acontecer ao usar a propriedade transform: rotate. Para corrigir isso, você pode ajustar ligeiramente a origem de transformação da seguinte maneira:

• Transformar Origem do eixo Y: 51%

Você pode ter que ajustar este valor um pouco até que o texto esteja claro. Por exemplo, 52% podem parecer claros em alguns projetos.

Criação de um botão vertical

A seguir, 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, assim como fizemos com o módulo blurb.

Crie uma nova linha com uma estrutura de uma coluna.

Antes de adicionarmos nosso módulo de botão, atualize as configurações de linha da seguinte maneira:

• 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 do botão: centro
• Use estilos personalizados para botão: SIM
• Tamanho do texto do botão: 16 px
• Cor do texto do botão: #ffffff
• Largura da borda do botão: 0 px
• Espaçamento entre letras dos botões: 9 px
• Peso da fonte: leve
• Estilo da fonte: TT
• Ícone do botão: seta para a direita

Girando e posicionando o botão

Para girar e posicionar o botão, usaremos uma combinação de margens e transformar a rotação da seguinte maneira:

• Margem personalizada (desktop): -50px superior, 50px inferior, -50px à esquerda
• Margem personalizada (tablet): 0 px restante
• Transformar, girar, eixo X: 90 graus

Desta vez, o botão é girado 90 graus (sentido horário) para obter uma exibição vertical de cima para baixo para o texto. Isso parece adequado, pois queremos que o usuário role para baixo.

Parte 2: Módulos de texto rotativos para criar etiquetas diagonais

Nesta próxima seção do layout, vamos criar três sinopses com módulos de texto girados usados ​​como rótulos. Esta é uma ótima maneira de exibir itens em destaque em sua página.

Veja como fazer.

Crie uma nova seção regular com uma linha de três colunas. Em seguida, adicione um módulo de sinopse à primeira coluna.

Escolha usar o ícone de lâmpada em vez da imagem padrão.

Em seguida, atualize o módulo blurb da seguinte maneira:

• Cor do ícone: # f6454e
• Tamanho da fonte do ícone: 32px
• Preenchimento personalizado: 3vw inferior, 3vw esquerdo, 3vw direito

Em seguida, atualize as configurações de linha da seguinte maneira:

• Cor de fundo da coluna 1: #eeeeee
• Cor de fundo da coluna 2: #eeeeee
• Cor de fundo da coluna 3: #eeeeee
• Equalize a altura das colunas: SIM

Esta próxima etapa é crucial para quando adicionarmos nosso design de etiqueta de módulo de texto girado. Queremos que o estouro do módulo de texto fique oculto fora da coluna. Para garantir que isso aconteça, precisamos adicionar a propriedade “overflow: hidden” a cada uma das colunas como CSS personalizado.

Na guia avançada, adicione o seguinte CSS personalizado:

CSS do elemento principal da coluna 1:

overflow: hidden;

Coluna 2 CSS do elemento principal:

overflow: hidden;

Coluna 3 CSS do elemento principal:

overflow: hidden;

Adicionando e girando o módulo de texto como um rótulo

Em seguida, adicione um módulo de texto logo acima do módulo blurb na coluna 1.

Atualize o Conteúdo do Texto com a palavra “Destaque”.

Em seguida, defina o estilo do módulo de texto da seguinte maneira:

• Cor de fundo: # f6454e
• Fonte do Texto: Muli
• Peso da Fonte do Texto: Semi Negrito
• Cor do texto do texto: #ffffff
• Espaçamento entre letras do texto: 3px
• Altura da linha de texto: 2,5em
• Orientação do texto: centro

Agora dê ao módulo de texto uma largura personalizada da seguinte maneira:

• Largura: 180px
• Alinhamento do Módulo: esquerda

Em seguida, posicione o módulo de texto no canto superior esquerdo da coluna usando as seguintes opções de transformação:

• Transformar Traduzir eixo X: -25%
• Transformar traduzir eixo Y: 70%

É importante usar valores percentuais aqui para tornar o design mais responsivo, então você precisará inseri-los manualmente.

Transformar, girar, eixo X: -45deg

Observe que o estouro do módulo de texto está oculto fora da coluna para completar o design.

Tudo o que nos resta fazer é copiar os módulos da coluna um e colá-los nas colunas 2 e 3.

Aqui está o resultado final.

Parte 3: Criação de títulos verticais para seu conteúdo

A próxima parte do layout usa técnicas semelhantes para girar e posicionar um módulo de texto como um título vertical para seu conteúdo. Este é um layout útil para mostrar coisas como serviços. Também demonstrarei uma maneira criativa de usar listas para criar um título vertical exclusivo.

Veja como fazer.

Crie uma nova seção regular com uma linha de uma coluna.

Em seguida, copie um dos módulos de sinopse na linha de três colunas do layout acima. Isso nos dará uma vantagem inicial no design.

Em seguida, atualize as configurações de sinopse da seguinte maneira:

• Posicionamento da imagem / Blurb: esquerda
• Margem personalizada (desktop): 200 px à esquerda
• Margem personalizada (telefone): 0 px restante
• Preenchimento personalizado: 100 px superior, 100 px inferior

A margem esquerda cria o espaço de que precisaremos para o módulo de texto vertical que adicionaremos.

Em seguida, adicione uma borda ao módulo blurb da seguinte maneira:

• Largura da borda: 2 px
• Cor da borda: #eeeeee

Criando o Módulo de Texto

Com o conteúdo da sinopse no lugar, agora podemos adicionar nosso módulo de texto. Crie um novo módulo de texto e coloque-o diretamente acima do módulo de sinopse.

Depois disso, adicione o seguinte html na caixa de conteúdo (certifique-se de que a guia de texto esteja selecionada):

<ol>
  <li><h5>Design</h5>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
    </ul>
  </li>
</ol>

Este é html está usando uma lista ordenada (ol), uma tag h5 e uma lista não ordenada (ul). Isso nos permite personalizar cada um dos itens da lista e o h5 separadamente, usando as opções de design integradas do Divi no módulo de texto.

Essa técnica pode ser usada para criar alguns designs de lista incríveis.

Em seguida, vá para a guia de design e atualize o seguinte:

• Fonte de lista não ordenada: Muli
• Peso da fonte da lista não ordenada: leve
• Tamanho do texto da lista não ordenada: 15px
• Tipo de estilo de lista não ordenado: Nenhum
• Recuo do item da lista não ordenado: 0,01 px

• Fonte da lista ordenada: Abril Fatface
• Cor do texto da lista ordenada:
• Tamanho do texto da lista ordenada: 40px
• Espaçamento entre letras da lista ordenada: 4px
• Altura da linha da lista ordenada: 1,3em
• Tipo de estilo de lista ordenada: zero à esquerda decimal

• Fonte do título 5: Muli
• Peso da fonte do cabeçalho 5: ultraleve
• Estilo da fonte do título 5: TT
• Tamanho do texto do título 5: 62 px

Dimensionando, girando e posicionando o módulo de texto

Agora que temos o design do texto no lugar, vamos dar a ele uma largura personalizada. Lembre-se de que a largura do módulo se tornará a altura do módulo assim que girarmos para exibi-lo verticalmente.

• Largura personalizada: 300px
• Alinhamento do Módulo: esquerda

Para girar o texto, atualize o seguinte:

• Transformar, girar o eixo X: -90deg (desktop), 0deg (telefone)

Precisamos redefinir a rotação de volta para 0deg para a exibição do telefone.

Em seguida, atualize a opção Transform Translate:

• Transform Translate X-axis: -10% (desktop), 0% (phone)
• Transform Translate eixo Y: 50% (desktop), 0% (telefone)

As configurações de transformação ajustam ligeiramente a posição do módulo de texto. Mas, para acertar nosso espaçamento, precisamos substituir o espaço negativo deixado pelo módulo de texto acima do módulo de sinopse. Para fazer isso, precisamos adicionar alguma margem inferior negativa ao módulo de texto da seguinte maneira:

• Margem personalizada (desktop): -150px inferior
• Margem personalizada (telefone): 0px inferior

Duplique a seção e atualize o número inicial da lista solicitada

Para criar mais seções deste layout, você pode duplicar a seção. O número da lista ordenada ainda será “1”. Para alterar isso, você precisa substituir a tag de lista ordenada (ol) de abertura pelo seguinte:

<ol start="2">

Isso permitirá que a lista comece com o número 2 em vez de 1.

É isso. Terminamos!

Design final do layout com designs de texto girados

Área de Trabalho

Tablet e telefone

Pensamentos finais

Saber como girar o texto (ou qualquer conteúdo) no Divi é uma ótima maneira de chamar a atenção para o seu conteúdo. Além disso, se você fizer isso direito, pode realmente destacar o design. Espero que este tutorial inspire como você pode implementar a rotação de texto para designs ainda mais bonitos.

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

Saúde!