Qual é o recurso que deixar o texto na vertical no Elementor é uma dúvida que está sempre aparecendo nos comentários dos vídeos do Youtube e na comunidade da aEscoladeSites.
Por esse motivo, eu resolvi finalmente criar um post mostrando como você pode deixar seus textos na vertical de duas maneiras diferentes sem muita dor de cabeça.
Inclusive, vou ensinar como você pode usar partes de códigos CSS para deixar as escritas na vertical apenas copiando e colando o código no lugar correto.
Esse recurso vai te abrir muitas possibilidades de deixar seus trabalhos ainda mais profissionais e com certeza irá trazer um diferencial nas suas criações de sites.
Além disso, eu vou deixar pra você um super bônus no final desse artigo, que com certeza irá te ajudar na hora de fazer todas as modificações nos textos verticais.
E também quero te dar a chance de mudar de vida e entrar nas nossas turmas de 2022 que estão por vir e faturar mais de R$ 10000 reais por mês com desenvolvimento de sites.
Mas, antes de entrar, é preciso que você participe dos nossos eventos em que explicamos tudo o que você precisa fazer para ter acesso e o que você pode esperar do nosso curso.
Para fazer a inscrição você não paga absolutamente nada, porém abrimos o nosso carrinho de compra poucas vezes no ano.
Então, não deixe de se inscrever na nossa lista de espera, que com certeza estaremos te avisando quando abrirmos novamente as portas do nosso curso.
Antes de tudo: Um aviso importante
Neste post eu vou te ensinar todo o passo a passo com imagens mostrando de forma bem clara onde você irá colocar o código CSS que vou passar para você no próximo tópico.
Por isso fique tranquilo em relação aos códigos, são extremamente fáceis de mexer, será basicamente um copiar e colar nos lugares certos.
Lembrando que tudo o que nós da aEscoladeSites ensinamos a você, são maneiras muito simples de colocar elementos novos que vão deixar seus trabalhos cada vez melhores.
E que você não precisa saber linguagem de códigos para criar sites profissionais que estão valendo muito dinheiro nesse mundo digital que a pandemia criou.
Sem mais delongas siga para os próximos tópicos para conseguir sua cópia do código CSS.
O código CSS para seu texto na vertical
Neste tópico estará o código CSS que vamos usar no nosso passo a passo.
Portanto, não esqueça de usar um CTRL+C nele para continuarmos:
/* INICIO – Texto Vertical */
selector .elementor-widget-container{
transform: rotate(-90deg);
}
/* FIM */
Texto vertical sem códigos
Aqui eu vou te ensinar como você pode deixar os textos na vertical sem precisar usar nenhum tipo de código, apenas utilizando recursos próprios do Elementor.
Essa função vai te abrir as opções de deixar seus textos em formato de ondas, arcos, na diagonal e outras formas que podem em algum momento ser útil pra você.
1º Passo
Como nosso primeiro passo depois de estar com o plugin do Elementor aberto, preciso que você procure por “ Caminho do Texto “ na aba que está no lado esquerdo do painel do Elementor.
E em seguida, você precisa arrastar esse bloco em qualquer lugar da página do site que está construindo.
2º Passo
Depois de arrastar o bloco do “ Caminho do Texto “, abra as configurações desta seção, escreva o que você deseja que o usuário leia onde está indicado em amarelo.
E no quadrado vermelho “ Tipo de Caminho “, coloque a opção “ Linha “.
Caso você queira colocar um link para mandar o cliente para outra página, você precisa somente colocar na parte de URL, que está sendo apontado pela flecha na imagem.
3º Passo
Agora vamos deixar o texto na vertical usando a opção de “ Rotacionar “, na aba de estilo.
Dessa maneira, você consegue deixar o trecho que você escreveu na direção que encaixar melhor com o modelo do site que você está desenvolvendo.
4º Passo
Nesse 4º passo, vamos usar uma ferramenta do Elementor que vai possibilitar nós arrastarmos nosso trecho escrito no lugar que ficar melhor no nosso projeto.
Primeiramente, você precisa ir na aba “ Avançado “, e depois procurar pela opção de “ Posicionamento “.
Assim que você encontrar essa opção, procure por “ Posição “ e em seguida coloque como “ Absoluto “, como mostrado na imagem abaixo:
Logo após você ter feito todo esse passo a passo, o seu texto vertical já está pronto e pode ser arrastado para o lugar ideal.
Dica Extra
Assim como você, eu também sou um web designer que usa muito o Elementor para prestar meus serviços para clientes, que no caso, é você !
Então, eu sei como é difícil às vezes manusear todo o layout de um site por causa da quantidade de blocos que estão sobrepostos uns aos outros em uma página.
Por isso, para facilitar a sua vida na hora de fazer todo esse processo de deixar trechos na vertical e ocupar o menor espaço possível, coloque a opção “ Em linha (Auto) “ na parte de “ Largura “.
Dessa maneira, você não terá problemas com os cliques errados que acabam atrasando seus serviços.
Assim, o resultado que tivemos com todo esses 4 passos que te mostrei até agora foi o da imagem a seguir:
Texto na vertical e com ícone usando CSS
Agora chegamos no tópico em que você vai aprender como inserir códigos CSS nos seus trabalhos do Elementor de uma maneira muito simples.
E como eu disse anteriormente, você precisará apenas copiar e colar o código que eu passei nos primeiros tópicos.
Mas, aí você me pergunta: “ Porque eu preciso colocar o código CSS se você já me ensinou como deixa o texto na vertical ? “
Bom… sim eu te mostrei qual o processo para deixar seus textos na vertical sem precisar usar nenhum trecho de códigos.
Porém se você quiser por exemplo colocar um ícone do Whatsapp junto com a escrita, essa função que te mostrei não vai ser o suficiente.
Você vai precisar usar outra função que o Elementor tem disponível no seu painel que vou te mostrar agora.
1º Passo
Procure no painel de funções do Elementor por “ Lista de Ícones “.
E em seguida arraste o bloco da lista de ícones para a página que você está construindo.
2º Passo
Continuando, depois de ter feito o primeiro passo, escreva e coloque quantos textos achar necessário para seu projeto.
Em seguida, escolha o ícone que desejar. Se você optar por colocar um link para uma conversa de Whatsapp ou até outra página, você só precisa inserir no lugar apontado com a seta na imagem:
3º Passo
Agora é o momento em que vamos usar o código que deixei no segundo tópico deste post, portanto esteja com ele em mãos.
Primeiramente, preciso que você vá em “ Avançado “ e procure pela aba de CSS personalizada, e assim que encontrar o espaço vazio, você deve colar o código nele.
Posteriormente, pode acontecer de seu texto com o ícone desaparecer da sua tela, mas fique tranquilo.
Você precisa somente fazer os mesmos passos que nós passamos na parte do texto vertical sem código.
Ou seja, você precisa procurar pela aba de “ Posicionamento “ e em “ Largura “ coloque a opção de “ Em linha (Auto) “.
Um pouco abaixo, você encontrará a opção “ Posição “. Quando encontrar, coloque em “ Absoluto “.
Dessa maneira, o seu texto já estará na vertical e pronto para ser arrastado para o local que você desejar, como o resultado da imagem:
Ajuste nas posições do Texto Vertical
Depois de ter feito todo o passo a passo seguindo todas as etapas, pode ser que o texto esteja invertido e não está combinando com o lugar que você quer colocá-lo.
Para isso, você precisa seguir mais algumas instruções que irei te passar para finalmente poder concluir nosso texto verticalizado.
Acesse o código CSS
O segredo para deixar o texto na direção correta é acessar o código CSS que colocamos na parte “ CSS Personalizado “.
Em que você precisará fazer um pequena modificação para mudar a direção da escrita, como na imagem abaixo:
Nesse caso, eu mudei de -90deg para -270deg, que acabou mudando o direcionamento do nosso texto vertical, tendo como resultado:
Dessa maneira, você pode colocar o número que corresponde com a direção que você achar melhor no site que você está produzindo.
Use esse código para outras funções
Uma dica extra que quero que você saiba, é que esse código você pode utilizar em outras funções do Elementor, como botões, textos e outros.
Por que esse é um código CSS padrão que funciona em diversas situações e com certeza pode dar uma refinada em algum projeto futuro que possa surgir.
Então guarde esse código em algum bloco de notas para que ele esteja em um lugar fácil de você acessar para usá-lo novamente.
Conclusão
Agora que você sabe como deixar seus textos na vertical e ainda com ícones, você precisa somente colocar em prática tudo o que aprendeu.
Tenho certeza que isso vai trazer muitos pontos positivos para seus serviços e ainda te dará o diferencial de saber utilizar códigos CSS junto com o Elementor.
E acho importante reforçar, que você pôde ver que não é necessário ser um especialista em linguagem de programação para integrar códigos com o Elementor para fazer trabalhos sensacionais !
Que inclusive, você pode se tornar membro das turmas que estão por vir para o nosso curso de web designer que faturam R$ 10000 reais mensais trabalhando duas vezes na semana.
Além do mais, não esqueça de dar uma olhada no bônus que deixei pra você que está no próximo tópico, ele vai facilitar todo o processo que você leu até agora.
Se você gostou desse conteúdo e quer mais como esse, não deixe de compartilhá-lo e fazer um comentário sobre o que você achou, críticas construtivas são bem vindas!
Também não deixe de nos seguir no Instagram, Youtube e no Telegram, porque estamos toda semana postando conteúdos que vão enriquecer seu conhecimento no desenvolvimento do seu site !
Super Bônus: Passo a Passo como deixar Textos na Vertical
Primeiramente, gostaria de te parabenizar por ter lido esse post até aqui e também pela iniciativa de querer melhorar o seu serviço de criação de sites
Tenho certeza que esse conteúdo vai te ajudar muito e trazer resultados excelentes com o que estou te entregando de graça. Agora, aproveite esse tutorial incrível que preparei para você:
