Como adicionar texto curvo em Divi

Todos nós gostamos de nos destacar da concorrência, e isso pode ser feito apresentando nossos site diferentemente. Portanto, pode ser útil saber como criar designs de texto curvos no Divi. Esse tipo de design funcionaria para criar gráficos personalizados ou designs de cabeçalho especiais no Divi sem a necessidade de usar um editor de fotos. Normalmente, isso envolve tarefas mais extensas de HTML e CSS, mas com o Divi, o domínio de CSS não é obrigatório, pois você tem muito mais opções integradas para projetar facilmente seu texto de uma forma única.

Neste tutorial, mostraremos como criar dois modelos de letras curvas que você pode usar como um modelo útil para seus próprios propósitos. Na melhor das hipóteses, você pode adicionar algo novo à sua caixa. ferramentas projeto para o futuro.

Vamos começar.

Visão geral

Aqui está uma visão geral dos designs de texto curvado que projetaremos neste tutorial.

Para importar o layout para a sua página, basta extrair o arquivo zip e arrastá-lo para o Divi Builder.

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

Para criar texto curvo usando o método deste tutorial, você deve adicionar cada letra do seu texto em um módulo de texto separado (você deve usar uma fonte monoespaçada para obter 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 para que eles se empilhem um sobre o outro.

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 (considere usar uma bússola na aula de matemática para desenhar um círculo). Observe também que a altura de cada módulo de texto determina o raio do círculo, o que também aumenta a circunferência do círculo e, portanto, aumenta o espaço entre as letras.

Aqui está um exemplo de 8 módulos de texto 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 girando em incrementos de graus 20.

Commencer

Para começar, crie uma nova página no Divi. Em seguida, dê um título à sua 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 em forma de curva

Criando a seção e a linha

Comece criando uma seção regular com uma linha de uma coluna.

Antes de adicionar nossos módulos, continue e atualize as configurações da seção da seguinte maneira:

• Gradiente de fundo esquerdo: #1e003d
• Fundo gradiente à direita - cor: # 121212
• Tipo de gradiente: Radial

• Imagem de fundo: [inserir imagem do logotipo de aproximadamente 100 pixels por 100 pixels]
• Tamanho da imagem de fundo: tamanho real

Salve as configurações, altere para as configurações da linha e atualize o seguinte:

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

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

Coluna principal do elemento CSS:

exibir cabo flexível; justificar-happy: center;

Criando módulos de texto para cada letra

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

• Conteúdo:d (apenas a letra)
• Fonte de texto: Ubuntu Mono (qualquer fonte monoespaçada servirá)
• Texto cor do texto: #ffffff
• Tamanho do texto: 5vw (área de trabalho), 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 na parte inferior dele. Embora não haja necessidade de girar este primeiro módulo de texto, é importante adicioná-lo aqui para que possamos transportar esta opção sempre que duplicarmos o módulo de texto para letras adicionais.

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

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

Criando e rotacionando outros módulos de texto

Para criar o resto das letras, vamos duplicar o módulo de texto. Depois de duplicar o módulo de texto, tudo o que precisamos é atualizar a letra e aumentar a rotação em 45 graus com cada novo módulo.

Como os módulos de texto serão sobrepostos no início, é melhor usar o modo de exibição com fio para executar essas atualizações.

Continue e duplique o módulo de texto e atualize o seguinte:

• Conteúdo: I
• Transformar eixo de rotaçã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 lista das 6 atualizações restantes para o módulo de texto:

Módulo de texto 3

• conteúdo: v
• Transformar eixo de rotação: 90deg

Módulo de texto 4

• conteúdo: i
• Transformação da rotação do eixo z: 135deg

Módulo de texto 5

• conteúdo: d
• Transformar a rotação do eixo z: 180deg

Módulo de texto 6

• conteúdo: i
• Transformação da rotação do eixo z: 225deg

Módulo de texto 7

• conteúdo: v
• Transformar a rotação do eixo z: 270deg

Módulo de texto 8

• conteúdo: i
• Transformar a rotação do eixo z: 315deg

Isso é tudo! Agora verifique o resultado final.

Resultado final

Considerações finais

A criação de designs de texto curvos no Divi é um processo bastante direto, uma vez que você entenda como funciona. Este artigo deve ajudá-lo a entender a geometria envolvida na configuração de módulos de texto para girar em uma curva. E assim que a configuração estiver concluída, além de alguns trechos de arquivos CSS personalizados, você pode usar as configurações de design integradas do Divi para obter um pouco de criatividade. Espero que isso lhe dê alguma inspiração para criar seus próprios designs de texto curvos.