sobreposição de fundoAo aplicar uma sobreposição semi-transparente sobre uma imagem ou cor de fundo, os designers podem melhorar subtilmente o impacto visual de uma página, garantir a legibilidade do conteúdo e criar um sentido de hierarquia. O Elementor, um editor visual do WordPress, oferece um conjunto rico de sobreposições de fundo, facilitando aos utilizadores a adição de contraste a partes ou elementos de uma página.
Neste artigo, vamos explorar em pormenor todos os aspectos da utilização de sobreposições de fundo no Elementor, desde as operações básicas às técnicas avançadas, e dar exemplos de como estas técnicas podem ser aplicadas em diferentes contextos para melhorar o design das páginas Web.
Configurar a estrutura da página
Aceder ao editor do Elementor: Em primeiro lugar, certifique-se de que tem sessão iniciada no seu painel de controlo do WordPress. Em seguida, navegue para a página que pretende editar ou crie uma nova página. No ecrã de edição da página, clique em "Utilizar o Editor Elementor" para aceder ao editor visual do Elementor.
2. preparar a estrutura da páginaAo entrar no editor Elementor, verá a disposição do conteúdo da página atual. Se a página ainda não tiver uma estrutura de secções, verá um pedido para adicionar uma nova secção. SeA página já tem conteúdoque pode ser modificado a partir da apresentação atual.
3. preparar a utilização de widgetsNo painel esquerdo do editor, pode selecionar oVários widgets, tais como caixas de texto, botões, imagens, etc.. Certifique-se de que tem um plano para a secção que está prestes a editar ou criar, de modo a escolher os widgets e layouts corretos.
Aplicar uma sobreposição de fundo no Elementor
1. adicionar sobreposições de fundo às secções
Adicionar ou editar elementos
Em primeiro lugar, é necessário adicionar um novo elemento ou editar um elemento existente. No editor Elementor, pode adicionar um novo elemento ou editar um já existente clicando no botão "+" para adicionar um novoelementar, ou optar por terpermanecerelementos para edição.
Definições de acesso
Selecione a sobreposição de fundo que pretende aplicarSecção,Secção interior talvez WidgetsPode encontrá-lo na barra lateral esquerda em "tipo" e, em seguida, vamos para o separador específicoDefinições de fundo.
Definir a imagem ou a cor de fundo
Em "tipo"No separador, verá "contextos"Opções. Encontrar "Tipo de fundo"
Existem 2 tipos principais de fundos aqui:"escrituras"e"mudança gradual".
- escriturasPara imagens de fundo de uma só cor ou estáticas. Quando esta opção está selecionada, pode carregar uma imagem de fundo da biblioteca multimédia ou selecionar diretamente uma cor de fundo.
- mudança gradual:: Pretende que o fundo seja apresentadoEfeito gradiente de corpode selecionar Gradiente como o tipo de fundo. Nesta opção, as duas cores do gradiente podem ser selecionadas, bem como o seu ângulo e transição.
Adicionar uma sobreposição de fundo
No mesmo "tipo"No separador, encontrará "cobertura de fundo". Quando esta opção está activada, o fundo atual pode serAdicionar uma sobreposição.
Selecionando a cor da sobreposição eControlo deslizante Ajustar opacidadeA transparência da sobreposição pode ser controlada. Desta forma, a imagem de fundo permanece visível, mas é colorida para aumentar a hierarquia visual e garantir a legibilidade do conteúdo do primeiro plano.
dar um exemplo: Digamos que tem uma cena de praia como pano de fundo.Secção HeróisSe o texto for aplicado a azul escuro, o impacto visual da imagem é reduzido, fazendo com que o texto branco acima sobressaia e seja mais claro.
2. sobreposição de fundos em elementos específicos
Para além de secções inteiras, o Elementor também permite aplicar sobreposições de fundo a elementos ou widgets individuais específicos, tais comoBotões, blocos de texto ou imagens. Esta flexibilidade permite-lhe acrescentar interesse visual a um design localizado sem comprometer o estilo de design geral da página.
Seleção de um elemento específico
Selecione o widget que pretende manipular na página, como um botão ou um bloco de imagens. Depois de clicar no elemento, o botão "tipo"O separador pode ser encontrado na secção correspondente "cobertura de fundo" (desde que oelementar(Suporta a função de sobreposição de fundo).
Definir a sobreposição de fundo
À semelhança da adição de uma sobreposição a uma secção, a cor e a transparência da sobreposição podem ser selecionadas aqui. Ao ajustar a opacidade, pode garantir que a sobreposição não oculta o conteúdo do elemento, ao mesmo tempo que melhora o efeito visual.
dar um exemploNum ficheiro com umcláusula de apelo à açãoA aplicação de uma sobreposição de gradiente a um botão pode tornar o botão mais visível na página, chamando a atenção do utilizador e incitando-o a clicar.
Melhores práticas para utilizar sobreposições de fundo
1. manutenção de melhorias subtis
O objetivo de uma sobreposição de fundo é realçar, não dominar, pelo que a nuance da sobreposição deve ser mantida. Uma sobreposição demasiado forte pode sobrepor-se ao design ou imagem original, fazendo com que a página pareça pesada e incómoda. Certifique-se de que a sobreposição complementa, em vez de entrar em conflito, com o conteúdo de fundo.
2. assegurar o contraste e a legibilidade
Um equívoco comum é concentrar-se demasiado nos efeitos de design em detrimento da legibilidade. Por muito apelativo que seja o design do fundo, o mais importante é garantir que o texto ou ícone em primeiro plano é claramente visível. Para o efeito, ajuste a opacidade da sobreposição do fundo de forma sensata, para que o conteúdo do primeiro plano tenha contraste suficiente com o fundo.
3. manter a coerência da conceção
O estilo da sobreposição de fundo deve ser consistente em todo o design do sítio Web. Isto não só ajuda a criar uma experiência visual unificada, como também melhora a experiência geral do utilizador. Quer se trate de uma sobreposição de gradiente, de uma sobreposição de cor sólida ou de qualquer outro efeito, deve seguir as cores principais e a linguagem de design do sítio Web.
Técnicas avançadas para melhorar as sobreposições de fundo
1. efeito de sobreposição de gradiente
Para além das sobreposições de uma só cor, as sobreposições de gradiente podem dar uma sensação mais rica de camadas e movimento a uma página. Ao selecionar duas ou mais cores e ajustar os respectivos ângulos e proporções de gradiente, pode criar um efeito visualmente apelativo.
exemplo típicoUma sobreposição de gradiente de uma cor mais clara com maior transparência para uma cor mais escura com menor transparência pode ajudar a direcionar o olhar do utilizador para uma parte específica da página.
2) Animação e interatividade
O Elementor suporta a utilização deefeito de movimentoou animações CSS personalizadas para adicionar interatividade à sobreposição de fundo. Por exemplo, a cor ou a opacidade da sobreposição de fundo pode ser definida para mudar ao passar o rato, para proporcionar aos utilizadores uma experiência mais envolvente.
exemplo típicoNuma biblioteca de imagens, defina a sobreposição de fundo para passar de claro a escuro quando o utilizador passa o rato sobre uma imagem, realçando os detalhes dessa imagem enquanto o resto da imagem permanece estático.
3. efeitos de estratificação
Para criar efeitos visuais mais complexos, experimente empilhar várias sobreposições. Com diferentes combinações de cores e transparência, pode criar uma experiência visual única.
exemplo típicoUma página com uma sobreposição de fundo gradiente e um padrão de grelha translúcido sobreposto pode dar um toque tecnológico e moderno à página.
chegar a um veredito
A funcionalidade de sobreposição de fundo no Elementor fornece aos designers uma ferramenta poderosa e flexível para tornar os designs de páginas mais estratificados, contrastados e legíveis. Quer esteja a adicionar sobreposições a secções inteiras ou a elementos individuais, esta é uma excelente forma de obter um design visualmente mais equilibrado, melhorando simultaneamente a experiência de navegação do utilizador. Depois de dominar as definições básicas de sobreposição, podem também ser utilizadas técnicas avançadas, como gradientes, animações e camadas, para oferecer mais possibilidades ao design do sítio Web.
