O Elementor é uma ferramenta amplamente utilizada por proprietários de sites do WordPress para criar layouts impressionantes e personalizados sem a necessidade de conhecimentos avançados de codificação.
Com ele, é possível adicionar efeitos de vidro e borda degradê, proporcionando um visual moderno e atraente aos elementos da página.
Neste artigo, exploraremos como você pode incorporar esses efeitos ao seu site usando o Elementor e como eles podem melhorar a experiência do usuário.
Como adicionar o Elementor ao WordPress
Antes de mergulharmos nos efeitos de vidro e borda degradê, é essencial ter o Elementor instalado em seu site do WordPress. Felizmente, o processo é simples. Basta acessar a área de plugins do WordPress, procurar pelo “Elementor” e instalá-lo. Após a instalação, você encontrará um novo botão “Editar com o Elementor” ao editar qualquer página ou postagem do seu site.
Criando um efeito de vidro no Elementor
Comandos usados:
selector{ backdrop-filter: blur(5px); border-top: 1px solid; border-image: linear-gradient(to right, transparent, #f22982, transparent)1; } - Selecione a seção ou contêiner, vai em avançado nomeie NAME CLASS para qualquer coisa.
- Vá em custom class e digite o .NOMEDACLASSE
- Fazendo isso você não precisa usar SELECTOR
O efeito de vidro é uma maneira elegante de tornar elementos, como imagens e caixas de texto, semitransparentes, permitindo que o conteúdo em segundo plano seja levemente visível. Para começar, abra o Elementor no modo de edição e adicione um novo elemento à sua página. Em seguida, navegue até as configurações de estilo e ajuste a opacidade do elemento de acordo com suas preferências. Você também pode personalizar a intensidade do efeito para garantir que ele se adapte perfeitamente ao design do seu site.
Adicionando uma borda degradê ao Elementor
A borda degradê é uma ótima maneira de adicionar um toque de sofisticação aos elementos do seu site. Para criar esse efeito, selecione o elemento desejado e acesse as configurações de estilo no Elementor. Escolha as cores para o degradê e configure a direção na qual as cores devem se fundir. Você pode experimentar diferentes combinações de cores para alcançar o efeito desejado. Além disso, o Elementor permite que você ajuste a intensidade do degradê para obter resultados mais sutis ou mais marcantes.
Dicas para um design atraente
Ao trabalhar com efeitos de vidro e borda degradê, é importante considerar a harmonia visual do seu site. Escolha cores que complementem o restante do design e garantam que os efeitos não prejudiquem a legibilidade do conteúdo. Utilize esses efeitos com parcimônia, concentrando-se nos elementos mais importantes da página para evitar uma aparência excessivamente poluída.
Conclusão
Com a popularidade crescente do Elementor como ferramenta de criação de sites, a adição de efeitos de vidro e borda degradê pode elevar a estética do seu site a um novo patamar. Ao seguir as dicas e práticas recomendadas neste artigo, você poderá criar um design visualmente atraente, mantendo um bom desempenho de SEO. Experimente diferentes combinações de cores e intensidades para encontrar o estilo perfeito que se alinhe à identidade
GIPHY App Key not set. Please check settings