Bonjour à tous,
Il arrive régulièrement, avec Elementor, que l’on souhaite faire des choses relativement simples mais qui ne font pas parties d’Elementor ou de sa version Pro.
Je vois, très régulièrement, le même résultat sur le site de clients : vous êtes nombreux à installer plusieurs extensions à Elementor pour arriver à vos fins et cela résulte souvent dans des conflits ou problèmes futures
Je partage donc ici une autre astuce pour Elementor. Cella ci permet d’ajouter un ombre à une section contenant plusieurs colonnes. Comme ceci :
Parfois, dans une section, vous avez plusieurs colonnes mais vous ne pouvez gérer que la section ou les colonnes une par une. Cela peut être un problème si vous souhaitez avoir un design spécifique pour cette section mais pas en pleine largeur.
Dans cet exemple, nous voulons seulement avoir un box-shadow (terme en CSS pour avoir une ombre) pour les deux colonnes ensemble.
C’est très simple, mais souvent impossible nativement avec les builders comme c’est le cas avec Elementor. Vous pouvez mettre une ombre pour chaque colonne mais si vous faites cela vous aurez une ombre au milieu et ce n’est pas ce que vous voulez.
Voici comment faire :
- Dans votre SECTION, allez dans Avancé et définissez un nom dans la classe CSS. Nous l’utiliserons pour afficher les ombres uniquement pour les colonnes de cette section. Sinon, il s’appliquera à toute votre page.
Vous pouvez utiliser cette classe CSS pour toute la section où vous souhaitez que cela se produise. Pas besoin de mettre le code partout.
Pour cet exemple nous utiliserons la classe CSS « shadowbox » - Dans cette section, créez 2 colonnes (ou plus, ça marche aussi !) et mettez du contenu.
Vous pouvez mettre une couleur de fond différente dans votre section et dans vos colonnes pour rendre votre ombre encore plus efficace. - Dans votre section ou une de vos colonnes mettez le code suivant dans le champ « CSS personnalisé » :
.shadowbox .elementor-row{
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 20px
}Vous pouvez mettre tout votre CSS ici. Dans cet exemple, je viens d’ajouter une ombre et un rayon de bordure
Une page très utile pour les ombres CSS :
https://getcssscan.com/css-box-shadow-examples