O CSS personalizado permite-lhe adicionar código personalizado ao seu sítio Web para lhe dar um aspeto e uma sensação únicos.
O que é CSS?
CSS (Cascading Style Sheets) é um método de adicionar estilos a páginas Web, como cores, tipos de letra, espaçamento e posição. Uma das grandes vantagens do editor Elementor é o facto de lhe permitir adicionar muitos destes elementos de estilo sem saber CSS. No entanto, o Elementor Pro também permite que os criadores Web com conhecimentos de CSS adicionem CSS personalizado para dar às suas páginas um aspeto e uma sensação únicos.
Onde posso adicionar CSS personalizadas utilizando o Elementor?
O editor Elementor permite-lhe adicionar CSS personalizadas a três níveis diferentes:
- Nível do sítio: Adicionar CSS personalizadas aqui afectará todo o sítio!
- Nível da página: adicionar CSS personalizadas aqui só afectará páginas específicas
- Nível do elemento: adicionar CSS personalizadas aqui só afectará elementos específicos
Exemplos de CSS personalizados
| Onde introduzir o código | Inserir este código | O efeito que o CSS terá |
| Definições do sítiotábua de amassar | corpo { | Fornecer um fundo vermelho para todas as páginas do sítio |
| Configuração da páginatábua de amassar | corpo { | Fundo da página azul. tomar nota deEsta CSS ao nível da página sobrepõe-se a quaisquer definições de CSS ao nível do site, por isso, mesmo que utilize a CSS do site acima, esta página continuará a ter um fundo azul! |
| elementarSeparador avançado | #meu-elemento { | Baseia-se emID CSS "my-element" é o elemento específico que é visado e é fornecido com um fundo verde. Atenção:Este CSS substitui qualquer CSS ao nível do site ou da página para fornecer um fundo verde aos elementos, por isso, mesmo que utilize o CSS do site e/ou da página acima, esta página continuará a ter um fundo azul. |
Como adicionar CSS personalizado
Adicionar CSS personalizadas ao Elementor
1. clicando em ou a partir donavegador (no ecrã de um computador)para o selecionar, escolhendo um elemento no
2) No painel, clique em"Avançado"Tab.
3) Desloque-se para baixo e expanda CSS personalizado.
4) Introduza o código CSS na caixa de texto aberta.
Adicionar CSS personalizado a uma página
1. aceda ao painel Configurar página.
2. clicar emnível elevadoTab.
3) Introduza o código CSS na caixa de texto aberta.
Adicionar CSS personalizado a um sítio Web
1. aceda ao painel Definições do sítio.
2) Selecionar a partir da listaCSS personalizado.
3) Introduza o código CSS na caixa de texto aberta.
Como adicionar CSS personalizadas com o Elementor AI
O Elementor AI não só o ajuda a escrever o conteúdo do sítio Web, como também permite aos utilizadores Pro adicionar estilos CSS personalizados a páginas e elementos. Os utilizadores Pro também podem adicionar código personalizado aos sítios Web. Todos os utilizadores podem utilizar o Elementor AI para adicionar código HTML às páginas através do widget HTML.
Ao adicionar CSS ou código personalizado com o Elementor AI, siga estas recomendações:
- Certifique-se de que guarda e faz uma cópia de segurança da sua página antes de adicionar CSS personalizadas, para o caso de alterar acidentalmente o esquema da página.
- Quando adicionar CSS a um elemento específico, certifique-se de que utiliza um "seletor" para que o código não afecte o resto da página.
- Se regenerar o código utilizando o Elementor AI, o código anterior será substituído. Por conseguinte, é uma boa ideia fazer uma cópia de segurança do código original noutro documento.
- Ao inserir vários trechos de código, alguns códigos podem entrar em conflito uns com os outros.
- Estamos constantemente a melhorar as capacidades de codificação do Elementor AI, mas o código gerado pode exigir que o ajuste manualmente para satisfazer necessidades específicas.
- Tenha em atenção que a Elementor não fornece suporte técnico oficial para código CSS personalizado, os utilizadores têm de verificar e depurar o código eles próprios.
Adicionar código personalizado ao Elementor com o Elementor AI
O exemplo seguinte adiciona código de personalização CSS ao título desta página inicial:
- Selecionar Widget de cabeçalho
- No widget "Título"."Avançado"e selecionar"CSS personalizado".
- opçãoCodificação com IA.
Nota: Depois de utilizar o Elementor AI pela primeira vez, oCom a IAO código do texto será substituído pelo ícone do Elementor AI.
- Na caixa de texto, digite "Fazer com que este cabeçalho fique vermelho ao passar o rato".
- clicar (utilizando um rato ou outro dispositivo apontador)Gerar código.
Isto irá adicionar o seguinte código de personalização CSS:
Clique em Pré-visualizar para ver como funciona o CSS personalizado.
Título da animação
Agora vamos adicionar alguma animação ao título.
- Regresse às CSS personalizadas e selecioneCodificar com IA.
- Na caixa de texto, escreva "Neste título, o texto aparece ao passar o rato".
- clicar (utilizando um rato ou outro dispositivo apontador)Gerar código.
- clicar (utilizando um rato ou outro dispositivo apontador)"Inserir".
Vá para Pré-visualização e veja os resultados. Quando passar o rato sobre o texto, este deve aparecer e ficar vermelho.
Tornar o Elementor autocolante
Uma técnica comum utilizada por um designer consiste em tornar certos elementos de uma página sempre visíveis, mesmo quando o visitante percorre a página. Este efeito é designado por "Sticky Elementor", normalmente utilizado na secção de cabeçalho de uma página Web. O objetivo é tornar o menu facilmente acessível ao visitante quando este navega em qualquer parte da página.
Eis um exemplo que mostra como manter o título de uma página Web fixo e garantir que é sempre apresentado na parte superior do ecrã:
- opçãoEditar título.
- Selecionar o contentor no cabeçalho
- opçãoCSS personalizado.
- opçãoCodificação com IA.
- Escreva "Tornar este contentor autocolante" na caixa de texto.
- clicar (utilizando um rato ou outro dispositivo apontador)Gerar código. O código gerado será parecido com o seguinte:
O Elementor AI fornece-lhe o código gerado e, na área abaixo da caixa de código, explica-lhe para que serve o código em inglês simples. - opçãoInserir código.
Utilize a pré-visualização para ver os resultados e o título permanecerá na parte superior do ecrã quando percorrer a página.
Resumo:
O conceito básico de CSS (Cascading Style Sheets), uma ferramenta poderosa para adicionar e ajustar o estilo das páginas Web, como cores, tipos de letra, espaçamento e disposição. Em particular, o Elementor oferece a possibilidade de adicionar CSS personalizadas a diferentes níveis (nível do sítio, da página e do elemento), permitindo aos utilizadores ajustá-las a necessidades específicas.
O artigo também fornece instruções específicas passo a passo sobre como adicionar código CSS a diferentes partes do Elementor, incluindo ajuda com a geração e gestão de código através da tecnologia Elementor AI. As questões a ter em conta ao utilizar CSS personalizado, como cópias de segurança de código, utilização de selectores e resolução de conflitos de código, são destacadas para garantir que o design do sítio é esteticamente agradável e poderoso.
