Você gostaria de descobrir como criar um título de gradiente com Elementor?
Ao criar uma página da web ou um modelo com Elementor, você pode fazer uma pequena experiência com o elemento de título para destacar a página que você criou. Um dos experimentos que você pode tentar é adicionar um efeito de gradiente ao elemento de título.
Este artigo mostrará como chegar lá.
Você também pode ler: Como criar um título de duas cores no Elementor
O bloco de título nativo do Elementor não oferece nenhuma opção para definir um efeito de gradiente. Você só pode usar cores sólidas para o texto do título. Mas você pode adicionar CSS personalizado para adicionar efeito de gradiente ao elemento de título no Elementor usando CSS personalizado que está disponível apenas no Elementor pro.
Para fazer isso, oferecemos dois métodos: Se você tem a versão pro e se sente confortável com CSS, use o primeiro método. Mas se você gosta de usar WordPress plugins o segundo método será perfeito.
Método 1: adicionar efeito de gradiente no elemento de título com CSS personalizado
Assumindo que você atualizou seu Elementor para a versão profissional, crie uma nova página / modelo e edite-o com o Elementor. Você também pode editar uma página ou modelo existente.
Adicione o widget Título à área da tela arrastando e soltando o elemento Título.
No bloco Título sob a guia Contente, selecione um nível de título na opção Tag HTML. Você pode usar qualquer nível de título. Você precisará disso como um seletor de CSS.
Vá para a guia avançado e abra o bloco CSS personalizado e cole o seguinte código CSS.
seletor h2 {imagem de fundo: gradiente linear (para a direita, # 463f64, # 463f64, # e2285c, # e2285c); -webkit-background-clip: texto; display: bloco embutido; preenchimento: 14px; -webkit-text-fill-color: # 00000000; }
Certifique-se de combinar o seletor com o nível do título selecionado na etapa anterior.
Você pode alterar as cores colando o código hexadecimal das cores que você gosta na propriedade imagem de fundo.
Ou você também pode usar o código a seguir para criar um título de gradiente com mais cores no gradiente.
seletor .elementor-header-title {background: linear-gradient (90deg, red, blue, black); -webkit-background-clip: texto; -webkit-text-fill-color: transparente; }
Método 2: Crie um título de gradiente no Elementor com um plugin
Se adicionar CSS parece assustador para você, há uma maneira mais fácil de criar um título de gradiente no Elementor: instalando uma extensão complementar. Uma extensão que permite criar um título gradiente é Complementos felizes.
Discover Como instalar (adicionar) um plugin no WordPress
Happy Addons é um plugin freemium e o elemento para criar um título de gradiente (chamado Gradient Heading) está disponível na versão gratuita. Você pode definir o tipo de gradiente (radial ou linear), a posição do gradiente e a localização.
O elemento Title também oferece as mesmas opções de ajuste de gradiente que Happy Addons.
Aqui está! Você acabou de criar um título de gradiente no Elementor.
Obtenha o Elementor Pro agora!
Descubra também alguns plugins premium do WordPress
Você pode usar outro WordPress plugins para dar uma aparência moderna e otimizar o manuseio do seu blog ou site.
Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.
1. Redirecionamento de página de erro 404 para página inicial ou página personalizada
Aqui está uma das melhores maneiras de adicionar facilmente uma página de erro 404 que redirecionará o visitante para a página inicial ou página personalizada, depois de habilitar isso WordPress Plugin.
Todas as páginas de erro 404 serão redirecionadas para a página inicial ou um URL personalizado. Ao usar este WordPress Plugin, você permitirá que o Google reduza o pagerank do seu site se ele tiver muitas páginas de erro 404.
Descubra também Como corrigir erro 413 no WordPress
Ce WordPress Plugin não apenas redireciona, mas também pode ser uma solução adequada para melhorar a classificação do seu site nos resultados dos buscadores.
Descarregar | Demo | hospedagem na web
2. WOOF
WOOF é um poderoso plugin premium de filtragem de produtos WooCommerce que estende sua funcionalidade para permitir que os usuários de sua loja online pesquisem por categorias, atributos de produtos personalizados, por palavra chave e por preços personalizados.
Ele oferece muitos recursos profissionais e premium e, sem dúvida, este será o que mais irá impressionar você, se você experimentar todos. Vai melhorar o pesquisa de produtos na sua loja online, com excepcional facilidade de uso.
Descarregar | Demo | hospedagem na web
3. Formulário de contato 7 Success Redirect
O Formulário de Contato 7 Success Redirect é uma extensão do plugin Formulário de Contato 7 do WordPress que permite redirecionar um visitante ou usuário para uma página após o envio do contato.
Ele foi projetado para tornar o formulário mais amigável quando o processo de envio do formulário acaba redirecionando para a página escolhida pelo administrador. É extremamente fácil de configurar. Você pode fazer isso selecionando uma página das páginas existentes do seu painel ou fornecendo um URL personalizado redirecionamento.
Descubra nossos 8 WordPress plugins para melhorar o SEO do seu blog
Cada formulário terá sua própria configuração. Assim, cada redirecionamento bem-sucedido pode ser definido de uma maneira única.
Descarregar | Demo | hospedagem na web
Recursos Recomendados
Descubra outros recursos recomendados para ajudá-lo a criar e gerenciar seu site.
- Testemunhos: Como aumentar a confiança dos seus visitantes
- Como consertar um site que não atualiza instantaneamente
- 7 WordPress plugins para incorporar um Google Maps no seu site
- 10 WooCommerce plugins para criar uma dinâmica de preços
Conclusão
Então ! É isso para este artigo. Agora você saberá como criar um título degradado no WordPress com o Plugin Elementor. Deixe-nos o seu Comentários e observa se você tiver alguma dificuldade em fazê-lo.
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 em Criação de blog WordPress.
Não hesite em compartilhe com seus amigos em suas redes sociais favoritas.
...
