Como Criar Desenhos de Texto Curvo em Divi

Se você está procurando uma maneira única de exibir texto em uma página da web, saber como criar designs de texto curvos no Divi pode ser útil. Esse tipo de design funcionaria para criar gráficos personalizados ou designs de cabeçalhos criativos no Divi sem a necessidade de usar um editor de fotos. Normalmente, isso envolve html e css mais completos para realizar, mas com Divi, o CSS personalizado no mínimo e você tem muito mais opções integradas para projetar facilmente seu texto de maneiras exclusivas.

Neste tutorial, mostraremos como criar alguns designs de letras curvas que podem ser usados ​​como um modelo útil para seus próprios propósitos. Se houver alguma coisa, você pode adicionar algo novo à sua caixa de ferramentas de design para o futuro.

Vamos começar.

Espiada

Aqui está uma prévia dos designs de texto curvos que construiremos neste tutorial.

Baixe o Layout de exemplos de design de carta de animação GRATUITAMENTE

Para colocar suas mãos nos designs de texto curvos deste tutorial, você primeiro precisará 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 os arquivos

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.

Vamos para o tutorial, vamos?

A ideia básica por trás da criação de texto curvo em Divi

Para criar um texto curvo usando o método neste tutorial, você precisa adicionar cada letra do seu texto em um módulo de texto separado (você vai querer usar uma fonte monoespaçada para melhores resultados). Dê ao módulo de texto uma altura definida. Em seguida, você precisa dar a cada módulo de texto uma posição absoluta centralizada de modo que todos eles sejam empilhados uns sobre os outros.

Isso é importante porque queremos que cada letra gire a partir do mesmo ponto central. Depois disso, você pode usar as opções de transformação do Divi para girar cada letra ao longo do eixo z para criar o texto curvo (pense em usar uma bússola na aula de matemática para desenhar um círculo). Além disso, observe que a altura de cada módulo de texto determina o raio do círculo, que também aumentará a circunferência do círculo e, como resultado, mais espaço entre as letras.

Aqui está um exemplo de 8 módulos de texto sendo girados em incrementos de 45 graus para criar um layout de círculo perfeito para o texto. Eu adicionei uma borda branca ao redor de cada módulo para que você possa ver facilmente a rotação.

E, aqui está um exemplo dos mesmos módulos de texto sendo girados em incrementos de 20 graus.

Começando

Inscreva-se no nosso canal no Youtube

Para começar, crie uma nova página no Divi. Em seguida, dê a você um título para a página e implante o construtor Divi no front end. Selecione a opção “construir do zero”. Agora você está pronto para ir!

Criando o Design de Texto Curvo

Criando a Seção e Linha

Primeiro crie uma seção regular com uma linha de uma coluna.

Antes de adicionar nossos módulos, vá em frente e atualize as configurações da seção da seguinte forma:

• Cor do gradiente de fundo à esquerda: # 1e003d
• Cor certa do gradiente de fundo: # 121212
• Tipo de gradiente: radial

• Imagem de fundo: [inserir imagem do logotipo em torno de 100 x 100 pixels]
• Tamanho da imagem de fundo: tamanho real

Salve as configurações e vá para as configurações de linha e atualize o seguinte:

• Largura da calha: 1
• Largura: 100%
• Altura mínima: 400px
• Altura: 40vw
• Altura máxima: 600px
• Preenchimento personalizado: 0 px superior, 0 px inferior

Em seguida, adicione o seguinte CSS personalizado ao elemento principal da coluna para garantir que todos os módulos de texto permanecerão centralizados horizontalmente:

CSS do elemento principal da coluna:

display:flex;
justify-content:center;

Criando os Módulos de Texto para Cada Letra

Agora estamos prontos para adicionar nosso primeiro módulo de texto com nossa primeira letra. Para fazer isso, adicione um novo módulo de texto à coluna da linha e atualize o seguinte:

• Conteúdo: d (apenas uma letra)
• Fonte de texto: Ubuntu Mono (qualquer fonte monoespaçada servirá)
• Cor do texto do texto: #ffffff
• Tamanho do texto do texto: 5vw (desktop), 40px (telefone)
• Orientação do texto: centro
• Altura mínima: 200px
• Altura: 20vw
• Altura máxima: 300px

Em seguida, atualize a origem da transformação para baixo. Isso será importante para determinar onde ocorre a rotação do texto. Queremos que o módulo de texto gire no ponto inferior do módulo. Mesmo que este primeiro módulo de texto não precise ser girado, é importante adicioná-lo aqui para que possamos carregar esta opção sempre que duplicarmos o módulo de texto para as letras adicionais.

• Origem da transformação: 100% (ou inferior)

Em seguida, adicione o seguinte CSS personalizado ao elemento principal para dar ao módulo de texto uma posição absoluta.

position: absolute !important;

Criação e rotação de outros módulos de texto

Para criar o restante das letras, estaremos duplicando o módulo de texto. Depois de duplicar o módulo de texto, tudo o que precisamos fazer é atualizar a letra e, em seguida, aumentar a rotação em 45 graus a cada novo módulo.

Uma vez que os módulos de texto serão empilhados em cima de cada um no front end, é melhor usar o modo de visualização de wireframe para fazer essas atualizações.

Vá em frente e duplique o módulo de texto e, em seguida, atualize o seguinte:

• Conteúdo: i
• Eixo z de rotação de transformação: 45deg

Continue o processo de duplicação do módulo de texto e, em seguida, atualize o módulo de texto com uma nova letra e aumente a rotação de transformação em 45 graus. Aqui está uma análise das 6 atualizações restantes do módulo de texto:

Módulo de Texto 3

• conteúdo: v
• Eixo z de rotação de transformação: 90 graus

Módulo de Texto 4

• conteúdo: i
• Eixo z de rotação de transformação: 135deg

Módulo de Texto 5

• conteúdo: d
• Eixo z de rotação de transformação: 180 graus

Módulo de Texto 6

• conteúdo: i
• Eixo z de rotação de transformação: 225deg

Módulo de Texto 7

• conteúdo: v
• Eixo z de rotação de transformação: 270deg

Módulo de Texto 8

• conteúdo: i
• Eixo z de rotação de transformação: 315deg

É isso! Agora confira o resultado final.

Resultado final

Ajustando o tamanho do texto e o grau de rotação para texto mais longo

Se desejar ajustar o texto curvo para opções de design de texto maiores, você pode alterar o tamanho do texto e transformar a rotação de cada módulo de texto.

Implante o modo de visualização de wireframe e use o recurso multiselect do Divi para selecionar todos os módulos de texto que contêm as letras curvas. Em seguida, clique para abrir as configurações de um dos módulos de texto selecionados para abrir o modal de configuração do elemento que atualizará todos os módulos selecionados de uma vez.

Nas configurações do elemento, altere o tamanho do texto do texto para 40px na área de trabalho.

Salve as configurações e abra as configurações de cada um dos módulos de texto e atualize as letras e a rotação de cada um. Deixe o primeiro módulo de texto com uma rotação de 0 graus e aumente a rotação do eixo z em 10 graus para cada módulo de texto que se segue. Em seguida, duplique o módulo de texto para ainda mais letras, conforme necessário. Neste exemplo, vou soletrar “elegant.themes”.

Aqui está o detalhamento da carta de conteúdo e rotação necessária para cada módulo de texto.

• Módulo de Texto 1
  • conteúdo: e
  • Transformar rotação do eixo z: 0deg
• Módulo de Texto 2
  • conteúdo: l
  • Eixo z de rotação de transformação: 10deg
• Módulo de Texto 3
  • conteúdo: e
  • Transformar rotação do eixo z: 20deg
• Módulo de Texto 4
  • conteúdo: g
  • Transformar rotação de eixo z: 30deg
• Módulo de Texto 5
  • conteúdo: a
  • Eixo z de rotação de transformação: 40deg
• Módulo de Texto 6
  • conteúdo: n
  • Eixo z de rotação de transformação: 50deg
• Módulo de Texto 7
  • conteúdo: t
  • Eixo z de rotação de transformação: 60deg
• Módulo de Texto 8
  • contente: .
  • Eixo z de rotação de transformação: 70deg
• Módulo de Texto 9
  • conteúdo: t
  • Eixo z de rotação de transformação: 80deg
• Módulo de Texto 10
  • conteúdo: h
  • Eixo z de rotação de transformação: 90 graus
• Módulo de Texto 10
  • conteúdo: e
  • Eixo z de rotação de transformação: 100deg
• Módulo de Texto 11
  • conteúdo: m
  • Eixo z de rotação de transformação: 110deg
• Módulo de Texto 12
  • conteúdo: e
  • Eixo z de rotação de transformação: 120deg
• Módulo de Texto 13
  • conteúdo: s
  • Eixo z de rotação de transformação: 130deg

Aqui está o resultado até agora.

Uma maneira fácil de ajustar a rotação de todo o texto é aplicar uma rotação de transformação à linha. Abra as configurações de linha e use o botão de controle z-index para posicionar o texto curvo onde quiser.

Aqui está o design final.

Sinta-se à vontade para adicionar mais texto e ajustar o grau de rotação para obter o espaçamento correto entre as letras. Você também pode ajustar a altura dos módulos de texto para diminuir ou aumentar o raio.

Pensamentos finais

Criar designs de texto curvos no Divi é um processo bastante simples, uma vez que você entenda como funciona. Este artigo deve ajudá-lo a entender a geometria envolvida na configuração dos módulos de texto para que eles girem em uma curva. E depois de fazer a configuração certa, além de alguns trechos de CSS personalizado, você pode usar as configurações de design integradas do Divi para ser bastante criativo. Esperamos que isso lhe dê um pouco de inspiração para fazer seus próprios designs de texto curvos exclusivos.

E, se você quiser adicionar alguma animação às suas letras curvas, verifique nosso artigo sobre como animar letras.

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

Saúde!