Precisa descobrir como adicionar uma imagem em um texto em Elementor ?
Elementor tornou possível que todos se tornassem um web designer sem a necessidade de ter habilidades avançadas de CSS. Seu editor visual permite que você crie uma bela página da web sem escrever uma única linha de código CSS. Você pode simplesmente adicionar quaisquer elementos de design (widgets) que desejar e personalizá-los no painel de configurações.
Mesmo assim, ter algumas habilidades de CSS seria um grande bônus no usoElementor. Você poderá aplicar estilos únicos à sua página da web usando a função CSS customizado d 'Elementor. Neste artigo, mostraremos como adicionar uma imagem ao texto no Elementor usando o recurso CSS personalizado do Elementor.
Dans certos ferramentas designs como GIMP e Photoshop, você geralmente precisa adicionar um marcador de camada para adicionar uma imagem no texto. No Elementor, você pode fazer o mesmo adicionando o código CSS que o widget Elementor Title e o widget Text não têm opção de configuração para adicionar imagem como plano de fundo.
Adicionar uma imagem a um texto Elementor
Antes de começar, certifique-se de ter atualizado sua versão do Elementor para a versão pro, caso ainda não tenha feito, uma vez que a funcionalidade CSS personalizada está disponível apenas no Elementor Pro. Quando estiver pronto, crie uma nova página ou modelo e edite-o com o Elementor. Claro, você também pode editar uma página ou modelo existente.
Veja também: Elementor: Como adicionar um índice
Adicione o widget Título à caixa de edição.
Vá para o painel de configurações para substituir o texto padrão na guia Conteúdo.
Leia também o nosso guia sobre: Elementor: Como usar o seletor de cores
Vá para a guia Style para personalizar o texto. Você pode definir o tamanho do texto, estilo da fonte, etc ... clicando no ícone de lápis em Opção de tipografia sob o bloco Título. Como você deseja usar uma imagem como plano de fundo para o seu texto, não há necessidade de definir a cor do texto.
Em seguida, vá para a guia avançado e abra o bloco Personalizadas APF e cole o seguinte código CSS. Substitua o URL da imagem pelo seu próprio URL de imagem.
selector .elementor-heading-title
{
background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") green repeat 30% 70% ;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}Aqui está o exemplo.
Obtenha o Elementor Pro agora!
Conclusão
Aqui está ! É isso neste artigo que mostra como adicionar imagem ao texto no Elementor. Se você tiver alguma dúvida sobre como chegar lá fdeixe-nos saber no Comentários.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
