14 trechos de CSS úteis para Elementor
Publicados: 2022-12-13As opções de estilo integradas oferecidas pelo Elementor são mais do que suficientes para criar páginas profissionais. Caso haja um determinado estilo que você deseja aplicar, mas não esteja disponível no Elementor, você pode obtê-lo por meio de CSS personalizado.
Uma instância mais simples. O Elementor não oferece opções de estilo integradas para alterar a aparência do link leia mais em um tipo de botão - que é adotado por muitos sites. Para alcançá-lo, você precisa adicionar o snippet CSS que transforma o link leia mais em um botão. Para adicionar o próprio CSS personalizado, você pode ir para a guia Avançado no painel de configurações. Você pode adicionar o código CSS ao campo disponível no bloco Custom CSS .
Você pode adicionar CSS personalizado a todos os tipos de elemento Elementor. Da seção, coluna ao widget.
No Elementor, cada widget e seus elementos de suporte (por exemplo, título do post, meta do post e imagem em destaque no widget Posts) tem um seletor de classe (consulte a lista de seletores de widget do Elementor). Para direcionar um widget específico ou elementos do widget, você pode começar digitando selector seguido pelo nome da classe (por exemplo, .elementor-post__read-more ). Em seguida, você pode adicionar o estilo personalizado entre as chaves. Exemplo:
seletor .elementor-post__read-more{
preenchimento: 0,4em 0,8em;
plano de fundo: #33ff41;
transição: todos os 0,5s;
raio da borda: 5px;
} O trecho de código acima transformará o link leia mais em um botão. Primeiro, ele tem como alvo o elemento read more ( selector .elementor-post__read-more ). Em seguida, ele adiciona o estilo personalizado ao elemento leia mais por meio do conteúdo entre as chaves (você pode encontrar o elemento ler mais no widget Postagens e no widget Arquivo). Em CSS, o conteúdo entre as chaves é chamado de declaração.
Recentemente, trabalhamos em alguns projetos que exigiam a adição de snippets de CSS a alguns widgets e os compartilharemos com você neste post. Atualizaremos regularmente esta postagem sempre que recebermos novos snippets de CSS.
Trechos de CSS gratuitos para Elementor
1. Transformando o link Leia mais em um tipo de botão
O código:
seletor .elementor-post__read-more {
preenchimento: 0,3em 0,8em;
cor: #ffffff!importante;
borda: sólido 1px #01B37E;
altura da linha: 2em;
plano de fundo: #01B37E;
transição: todos os 0,5s;
raio da borda: 15px;
peso da fonte: 500;
}
/* ao passar o mouse */
seletor .elementor-post__read-more:hover{
preenchimento: 0,3em 0,8em;
cor: #01B37E!importante;
borda: sólido 1px #01B37E;
altura da linha: 2em;
plano de fundo: #ffffff;
transição: todos os 0,5s;
raio da borda: 15px;
peso da fonte: 500;
}Você pode usar o código acima no widget Posts e no widget Archive Posts, que possuem um elemento leia mais.
2. Adicionando estilo avançado à paginação numerada
O código:
/*Estado normal*/
seletor .elementor-pagination{
margem superior: 50px;
}
selector .page-numbers{
preenchimento: 10px 15px;
cor:#FFFFFF!importante;
plano de fundo: #0161cd;
transição: todos os 0,5s;
raio da borda: 20px;
}
/* estado do hover */
selector .page-numbers:hover{
preenchimento: 10px 15px;
cor:#384958!importante;
plano de fundo: #edf2f7;
transição: todos os 0,5s;
raio da borda: 20px;
}
/* estado ativo */
selector .page-numbers.current{
preenchimento: 10px 15px;
cor:#384958!importante;
plano de fundo: #f0f3f6;
transição: todos os 0,5s;
raio da borda: 20px;
}Você pode usar o código acima no widget Posts e no widget Archive Posts que possuem elemento de paginação. Você pode ler nosso artigo anterior para aprender como adicionar paginação no Elementor.
3. Adicionando efeito de foco a itens de postagem individuais
O código:
seletor .elementor-post:hover{
transição: todos os 0,50s de facilidade de entrada e saída;
transformar: scale(1.01);
cursor: ponteiro;
índice z: 1;
}Você também pode usar o código acima no widget Posts e no widget Archive Posts. Leia nosso artigo anterior para saber mais como adicionar efeito de foco a itens de postagem de blog individuais no Elementor.
4. Adicionando efeito de foco para postar miniatura/imagem em destaque
O código:
seletor .elementor-post__thumbnail:hover{
transição: todos os 0,50s de facilidade de entrada e saída;
transformar: scale(1.05);
cursor: ponteiro;
índice z: 1;
}Você pode usar o código acima no widget Posts e no widget Archive Posts. Certifique-se de mostrar a imagem nas configurações principais da postagem.
5. Adicionando efeito de foco ao título da postagem
O código:
seletor .elementor-post__title{
exibição: em linha;
}
seletor .elementor-post__title:hover{
decoração de texto: nenhum;
box-shadow: inserir 0 -.5em 0 #F8C273;
cor: herdar;
exibição: em linha;
}
Você também pode usar o código acima no widget Posts e Archive Posts que possuem o elemento de título do post.
6. Adicionando efeitos de foco aos links
O código:
seletor .elementor-widget-theme-post-content a:hover{
decoração de texto: nenhum;
box-shadow: inserir 0 -.5em 0 #FD63FD;
cor: #B017B0;
}Você pode usar o acima no widget Post Content ao criar um modelo de postagem único personalizado usando o Elementor Theme Builder. Leia este post para saber mais.
7. Definindo o raio da borda do avatar no widget de informações da postagem
O código:
seletor .elementor-avatar {
borda: sólido de 2px #FFFFFF;
raio da borda: 10px;
}Você pode usar este código no widget Post Info. Para usá-lo, certifique-se de habilitar o Avatar na configuração de metadados. Leia aqui para saber mais.
8. Criando barra de progresso de gradiente
O código:
seletor .elementor-progress-bar
{
plano de fundo: gradiente radial(círculo, rgba(7.149.238,1) 16%, rgba(37.252.255,1) 70%);
}Você pode usar o código acima para criar uma barra de progresso gradiente usando o widget Progress Bar. Leia aqui para saber mais. Para mais opções de gradiente, você pode consultar as seguintes postagens:
- Mais de 70 fundos de gradiente avançados para Elementor
- 18 fundos de gradiente de 3 cores para Elementor
- 17 fundos de gradiente pastel para Elementor
9. Criando texto gradiente
O código:
seletor .elementor-editor-de-texto {
background-image: linear-gradient(à esquerda, #feac5e, #c779d0,#4bc0c8);
-webkit-background-clip: texto;
exibição: bloco em linha;
-webkit-text-fill-color: #00000000;
}Você pode usar o código acima no widget Editor de texto. Para criar texto gradiente em outros widgets (por exemplo, Título), você pode simplesmente substituir o seletor. Leia este post para saber mais.
10. Imagem de rolagem ao passar o mouse
O código:
seletor{
-webkit-transition: facilidade de entrada e saída 4s !importante;
transição: 4s de fácil entrada e saída! importante;
}
seletor: passe o mouse{
posição de fundo: central inferior !importante;
}Você pode usar o código acima para rolar a imagem automaticamente ao passar o mouse. Útil para revelar uma captura de tela longa, como uma captura de tela de uma página inicial, página inicial, página de blog e assim por diante. Leia este post para saber mais.
11. Alteração do cabeçalho ao rolar para baixo
O código:
.cabeçalho-2 {
transform: translatey(-80px);
-moz-transition: todos os .3s facilitam!importante;
-webkit-transition: todos os .3s facilitam!importante;
transição: todos os .3s facilitam!importante;
}
.elementor-sticky--effects.header-2 {
altura: auto!importante;
transform: translatey(0px);
}
.elementor-sticky--effects.header-1 {
display: nenhum!importante;
}Deseja criar um cabeçalho que muda automaticamente ao rolar para baixo? Se sim, você pode usar o código acima. Você pode ler este post para saber mais.
12. Encolhendo o cabeçalho ao rolar para baixo
O código:
header.sticky-header {
--header-height: 90px;
--opacidade: 0,90;
--encolher-me: 0,80;
--sticky-background-color: #0e41e5;
--transição: 0,3s de facilidade de entrada e saída;
transição: background-color var(--transition),
background-image var(--transition),
pano de fundo-filtro var(--transition),
opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
background-color: var(--sticky-background-color) !important;
background-image: nenhum !importante;
opacidade: var(--opacidade) !importante;
-webkit-backdrop-filter: blur(10px);
filtro de pano de fundo: blur(10px);
}
header.sticky-header > .elementor-container {
transição: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
min-height: calc(var(--header-height) * var(--shrink-me))!important;
altura: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
transição: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
padding-bottom: 10px!important;
padding-top: 10px!important;
}
header.sticky-header > .elementor-container .logo img {
transição: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
max-width: calc(100% * var(--shrink-me));
}Você pode usar o acima para criar um comportamento de cabeçalho em que ele encolhe automaticamente ao rolar para baixo e reverte para o tamanho original ao rolar para cima. Você pode ler este post para saber mais.
13. Adicionando imagem de fundo ao texto do título
O código:
seletor .elementor-cabeçalho-título
{
background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") repetição verde 30% 70% ;
-webkit-background-clip:texto;
-webkit-text-fill-color:transparent;
}Você pode usar o código acima para adicionar uma imagem de fundo ao widget Heading. Simplesmente substitua o URL da imagem para usar sua própria imagem. Leia este post para saber mais.
Conclusão
O Elementor já possui muitas opções integradas para estilizar cada elemento. Seja seção, coluna ou widget. Caso eles não sejam suficientes para você, você pode aplicar seu próprio estilo personalizado usando trechos de CSS — desde que tenha conhecimento de CSS. A capacidade de adicionar CSS personalizado em si só está disponível no Elementor Pro, portanto, certifique-se de ter o Elementor Pro instalado e ativado em seu site WordPress antes de adicionar CSS personalizado ( leia: Elementor Free vs Pro).
Você pode usar os trechos de CSS que fornecemos acima se tiver os mesmos casos para seus projetos.