Donnez du relief à vos blocs Groupe sans JavaScript
Un simple box-shadow animé au :hover, crée un effet élégant et moderne. Ajoutez une transition douce pour respecter les utilisateurs sensibles aux animations.
Créer un lien externe sur le bloc Groupe
Résultat : un bloc qui se détache visuellement au passage de la souris, améliore la hiérarchie visuelle et reste parfaitement léger et compatible WordPress.
Ombre sur un Bloc Groupe
/* ==============================
Ombre sur bloc Groupe CSS Only
============================== */
.wp-block-group.shadow-only {
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.wp-block-group.shadow-only:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
Étape 1 :
– Ajouter la classe CSS au bloc
– Sélectionnez le groupe dans l’éditeur.
– Cliquez sur la roue crantée située à droite.
– Dans le panneau qui s’ouvre, cliquez sur Avancé.
– Dans le champ Classe(s) CSS additionnelle(s), ajoutez : shadow-only
Étape 2 :
– Ajouter le code CSS personnalisé
– Dans l’admin WordPress, allez dans Apparence > Éditeur.
– En haut du menu, cliquez sur la loupe (recherche).
– Tapez « CSS » dans la barre de recherche.
– Dans la liste, sélectionnez Personnaliser le CSS.
– Collez le code CSS correspondant à la classe shadow-only.
Ajouter un lien externe sur un bloc Groupe
Étape 1 : Encadrer le bloc Groupe avec du code HTML
Avant le bloc Groupe, insère un bloc HTML personnalisé.
Coller le code suivant en remplaçant l’URL https://www.google.com/
<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">⚠️ Important : Ne pas supprimer l’attribut rel=“noopener noreferrer” Il protège le site quand on ouvres un lien externe dans un nouvel onglet.
Étape 2 : Fermer la balise après le bloc Groupe, insère un autre bloc HTML personnalisé. Coller simplement le code de fermeture :
</a>
Voir le tutoriel sur YouTube.