14 extraits CSS utiles pour Elementor
Publié: 2022-12-13Les options de style intégrées offertes par Elementor sont plus que suffisantes pour créer des pages professionnelles. Si vous souhaitez appliquer un certain style, mais qu'il n'est pas disponible dans Elementor, vous pouvez l'obtenir via un CSS personnalisé.
Un exemple le plus simple. Elementor n'offre pas d'options de style intégrées pour changer l'apparence du lien Lire la suite en un bouton, qui est adopté par de nombreux sites Web. Pour y parvenir, vous devez ajouter un extrait CSS qui transforme le lien Lire la suite en un bouton. Pour ajouter du CSS personnalisé lui-même, vous pouvez accéder à l'onglet Avancé du panneau des paramètres. Vous pouvez ajouter le code CSS au champ disponible sur le bloc CSS personnalisé .
Vous pouvez ajouter du CSS personnalisé à tous les types d'éléments Elementor. De la section, de la colonne au widget.
Dans Elementor, chaque widget et ses éléments de support (par exemple, le titre de l'article, la méta de l'article et l'image en vedette sur le widget Articles) ont un sélecteur de classe (voir la liste des sélecteurs de widget Elementor). Pour cibler un widget spécifique ou des éléments de widget, vous pouvez commencer par taper selector suivi du nom de la classe (par exemple .elementor-post__read-more ). Ensuite, vous pouvez ajouter le style personnalisé entre les accolades. Exemple:
sélecteur .elementor-post__read-more{
rembourrage : 0,4 em 0,8 em ;
arrière-plan : #33ff41 ;
transition : toutes les 0,5 s ;
rayon de bordure : 5 px ;
} L'extrait de code ci-dessus transformera le lien Lire la suite en un bouton. Tout d'abord, il cible l'élément read more ( selector .elementor-post__read-more ). Ensuite, il ajoute le style personnalisé à l'élément en savoir plus via le contenu entre les accolades (vous pouvez trouver l'élément en savoir plus sur le widget Messages et le widget Archive). En CSS, le contenu entre les accolades est appelé déclaration.
Récemment, nous avons travaillé sur des projets qui nous obligeaient à ajouter des extraits CSS à certains widgets, et nous les partagerons avec vous dans cet article. Nous mettrons régulièrement à jour ce message chaque fois que nous aurons de nouveaux extraits CSS.
Extraits CSS gratuits pour Elementor
1. Transformer le lien Lire la suite en un bouton
Le code:
sélecteur .elementor-post__read-more {
rembourrage : 0,3 em 0,8 em ;
couleur : #ffffff!important;
bordure : solide 1px #01B37E ;
hauteur de ligne : 2 em ;
arrière-plan : #01B37E ;
transition : toutes les 0,5 s ;
rayon de bordure : 15 px ;
poids de la police : 500 ;
}
/* En vol stationnaire */
sélecteur .elementor-post__read-more:hover{
rembourrage : 0,3 em 0,8 em ;
couleur : #01B37E!important ;
bordure : solide 1px #01B37E ;
hauteur de ligne : 2 em ;
arrière-plan : #ffffff ;
transition : toutes les 0,5 s ;
rayon de bordure : 15 px ;
poids de la police : 500 ;
}Vous pouvez utiliser le code ci-dessus sur le widget Posts et le widget Archive Posts qui ont un élément en savoir plus.
2. Ajout d'un style avancé à la pagination numérotée
Le code:
/*état normal*/
sélecteur .elementor-pagination{
marge supérieure : 50px ;
}
sélecteur .numéros de page{
rembourrage : 10px 15px ;
color:#FFFFFF!important;
arrière-plan : #0161cd ;
transition : toutes les 0,5 s ;
rayon de bordure : 20 px ;
}
/* état de survol */
sélecteur .numéros de page :hover{
rembourrage : 10px 15px ;
couleur:#384958!important;
arrière-plan : #edf2f7 ;
transition : toutes les 0,5 s ;
rayon de bordure : 20 px ;
}
/* état actif */
sélecteur .numéros de page.current{
rembourrage : 10px 15px ;
couleur:#384958!important;
arrière-plan : #f0f3f6 ;
transition : toutes les 0,5 s ;
rayon de bordure : 20 px ;
}Vous pouvez utiliser le code ci-dessus sur le widget Posts et le widget Archive Posts qui ont un élément de pagination. Vous pouvez lire notre article précédent pour savoir comment ajouter une pagination dans Elementor.
3. Ajout d'un effet de survol à des éléments de publication individuels
Le code:
sélecteur .elementor-post:hover{
transition : tous les .50 s d'entrée et de sortie ;
transformer : échelle (1.01);
curseur : pointeur ;
indice z : 1 ;
}Vous pouvez également utiliser le code ci-dessus sur le widget Messages et le widget Archiver les messages. Lisez notre article précédent pour en savoir plus sur l'ajout d'un effet de survol à des articles de blog individuels dans Elementor.
4. Ajout d'un effet de survol à la vignette de la publication / à l'image en vedette
Le code:
sélecteur .elementor-post__thumbnail:hover{
transition : tous les .50 s d'entrée et de sortie ;
transformer : échelle (1,05) ;
curseur : pointeur ;
indice z : 1 ;
}Vous pouvez utiliser le code ci-dessus sur le widget Messages et le widget Archiver les messages. Assurez-vous d'afficher l'image sur les principaux paramètres de publication.
5. Ajout d'un effet de survol au titre du message
Le code:
sélecteur .elementor-post__title{
affichage : en ligne ;
}
sélecteur .elementor-post__title:hover{
décoration de texte : aucune ;
boîte-ombre : encart 0 -.5em 0 #F8C273 ;
couleur : hériter ;
affichage : en ligne ;
}
Vous pouvez également utiliser le code ci-dessus sur le widget Messages et Archiver les messages qui ont un élément de titre de message.
6. Ajouter des effets de survol aux liens
Le code:
sélecteur .elementor-widget-theme-post-content a:hover{
décoration de texte : aucune ;
boîte-ombre : encart 0 -.5em 0 #FD63FD ;
couleur : #B017B0 ;
}Vous pouvez utiliser ce qui précède sur le widget de contenu de publication lors de la création d'un modèle de publication unique personnalisé à l'aide d'Elementor Theme Builder. Lisez cet article pour en savoir plus.
7. Définition du rayon de la bordure de l'avatar sur le widget d'informations de publication
Le code:
sélecteur .elementor-avatar {
bordure : 2px solide #FFFFFF ;
rayon de bordure : 10 px ;
}Vous pouvez utiliser ce code sur le widget Post Info. Pour l'utiliser, assurez-vous d'activer l'Avatar sur le paramètre de métadonnées. Lisez ici pour en savoir plus.
8. Création d'une barre de progression dégradée
Le code:
sélecteur .elementor-progress-bar
{
arrière-plan : dégradé radial (cercle, rgba (7 149 238,1) 16 %, rgba (37 252 255, 1) 70 % );
}Vous pouvez utiliser le code ci-dessus pour créer une barre de progression dégradée à l'aide du widget Barre de progression. Lisez ici pour en savoir plus. Pour plus d'options de dégradé, vous pouvez vous référer aux articles suivants :
- Plus de 70 arrière-plans dégradés avancés pour Elementor
- 18 arrière-plans dégradés de 3 couleurs pour Elementor
- 17 arrière-plans dégradés pastel pour Elementor
9. Création de texte dégradé
Le code:
sélecteur .elementor-text-editor {
image de fond : gradient linéaire (à gauche, #feac5e, #c779d0,#4bc0c8) ;
-webkit-background-clip : texte ;
affichage : bloc en ligne ;
-webkit-text-fill-color : #00000000 ;
}Vous pouvez utiliser le code ci-dessus sur le widget Éditeur de texte. Pour créer du texte dégradé sur d'autres widgets (par exemple, Titre), vous pouvez simplement remplacer le sélecteur. Lisez cet article pour en savoir plus.
10. Défilement de l'image au survol
Le code:
sélecteur{
-webkit-transition : facilité d'entrée-sortie 4 s ! important ;
transition : entrée-sortie 4s !important ;
}
sélecteur : survol{
background-position : centre bas !important ;
}Vous pouvez utiliser le code ci-dessus pour faire défiler automatiquement l'image au survol. Utile pour révéler une longue capture d'écran telle qu'une capture d'écran d'une page de destination, d'une page d'accueil, d'une page de blog, etc. Lisez cet article pour en savoir plus.
11. Modification de l'en-tête lors du défilement vers le bas
Le code:
.header-2 {
transformer : translation (-80px) ;
-moz-transition : tous les .3s sont faciles !important ;
-webkit-transition : tous les .3s sont faciles !important ;
transition : tous les 0,3 s'assouplissent ! important ;
}
.elementor-sticky--effects.header-2 {
hauteur : auto!important;
transformer : translatey(0px);
}
.elementor-sticky--effects.header-1 {
affichage : aucun ! important ;
}Vous voulez créer un en-tête qui change automatiquement lors du défilement vers le bas ? Si oui, vous pouvez utiliser le code ci-dessus. Vous pouvez lire cet article pour en savoir plus.
12. Réduire l'en-tête lors du défilement vers le bas
Le code:
header.sticky-header {
--header-height : 90 px ;
--opacité : 0,90 ;
--shrink-me : 0,80 ;
--sticky-background-color : #0e41e5 ;
--transition : 0,3 s entrée-sortie ;
transition : couleur de fond var(--transition),
image de fond var(--transition),
background-filter var(--transition),
opacité var(--transition);
}
header.sticky-header.elementor-sticky--effects {
couleur d'arrière-plan : var(--couleur-d'arrière-plan collante) !important ;
image d'arrière-plan : aucune !important ;
opacité : var(--opacité) !important ;
-webkit-backdrop-filter : flou (10px) ;
filtre de fond : flou (10 px );
}
header.sticky-header > .elementor-container {
transition : hauteur-min var(--transition) ;
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
min-height : calc(var(--header-height) * var(--shrink-me)) !important ;
hauteur : calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
transition : rembourrage var(--transition) ;
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
rembourrage en bas : 10px ! important ;
padding-top : 10px ! important ;
}
header.sticky-header > .elementor-container .logo img {
transition : largeur maximale var(--transition) ;
}
header.sticky-header.elementor-sticky--effects .logo img {
max-width : calc(100 % * var(--shrink-me) );
}Vous pouvez utiliser ce qui précède pour créer un comportement d'en-tête dans lequel il se rétrécit automatiquement lors du défilement vers le bas et revient à sa taille d'origine lors du défilement vers le haut. Vous pouvez lire cet article pour en savoir plus.
13. Ajout d'un arrière-plan d'image au texte d'en-tête
Le code:
sélecteur .elementor-heading-title
{
arrière-plan : url ("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") répétition verte 30 % 70 % ;
-webkit-background-clip:texte;
-webkit-text-fill-color : transparent ;
}Vous pouvez utiliser le code ci-dessus pour ajouter un arrière-plan d'image au widget Titre. Remplacez simplement l'URL de l'image pour utiliser votre propre image. Lisez cet article pour en savoir plus.
L'essentiel
Elementor dispose déjà de nombreuses options intégrées pour styliser chaque élément. Que ce soit une section, une colonne ou un widget. Au cas où ils ne vous suffiraient pas, vous pouvez appliquer votre propre style personnalisé à l'aide d'extraits CSS, à condition que vous ayez des connaissances en CSS. La possibilité d'ajouter du CSS personnalisé lui-même n'est disponible que sur Elementor Pro, alors assurez-vous que Elementor Pro est installé et activé sur votre site Web WordPress avant d'ajouter du CSS personnalisé ( lire : Elementor Free vs Pro).
Vous pouvez utiliser les extraits CSS que nous avons fournis ci-dessus si vous avez les mêmes cas pour vos projets.