Colonnes Sticky, effet de cartes qui s’empilent
Le principe : 2 Colonnes horizontales, la première ‘sticky’ , la deuxième ce sont les sections dedans, à la verticale qui seront ‘sticky’.
Pour donner un effet carte, il suffit ensuite d’habiller les sections verticales, cadre, rotation, marge interne…
L’effet sous Kadence est rapide à obtenir, une rangée kadence à deux sections, la première sticky et vous lui définissez sa marge, la deuxième vous insérez des sections internes elle aussi sticky avec la même marge, le paramétrage est rapide et sans css puisque vous pouvez aussi définir le sens de la rangée pour tablette et mobile …
Mais avec les seuls blocs Gutenberg le jeu est plus ardu et demande l’ajout de CSS.
L’effet en Gutenberg simple est possible mais il faut rajouter du css manuellement:
<style>
.cap-sticky30 {position:sticky; top: 30%!important;}
</style>La class est à ajouter à la première colonne et à chaque carte
La structure rangée horizontale, colonnes verticales. Les cartes, sont elles des empilements verticaux, stickées individuellement.
Bien évidemment il va falloir gérer les modifications en version mobile. La rangée devant devenir verticale, et les cartes un peu moins penchées.
Mais cela va se faire en css, les blocks Gutenberg ne permettant pas pour le moment cette adaptation via le paramétrage.
@media screen and (max-width:782px) {
.cap-rangee {flex-direction:column}
.cap-sticky30 {top: 20vw!important;
}
.cap-penche5 {transform: rotate(3deg); }
.cap-penche-5 {transform: rotate(-3deg); }
}Bien sur vous pouvez empilez autant de cartes que nécessaires.
Et mettre tous les éléments que vous désirez dans ses cartes.
CSS Sticky et Blocks Kadence
Ce que l’on peut faire avec ce type de CSS sticky et les blocks Kadence, avec très peu de css ajouté à la main
Notre Team avec effet polaroidL’effet polaroid est rajouté à la main sur l’ensemble des images de la section.
Chaque image est dans une section qui défini sa position (par du margin) et sa rotation par du css ajouté.
On peut décaler le top des dernières sections d’image pour un effet deuxième rangée… Les sections peuvent être empilées à l’infini …
Des blocs grid, avec effet hover qui découvrent titre et lien
En mobile, cliquez sur les images pour faire apparaitre les textes
Image 1
Image 2
Image 3
Le mieux c’est qu’avec Kadence ou les nouveaux blocks cela peut être utilisé dans une boucle d’articles ou de produits.
Du rajout de css encore nécessaire mais cela fonctionne :
Site WordPress sécurisé mais piraté
Nouveau départ pour votre site WordPress : 5 points à auditer en ce début d’année
Accompagnement ou formation WordPress : quelle est la vraie différence ?
Comment un accompagnement personnalisé transforme votre expérience WordPress
Créer un site WordPress professionnel sans devenir développeur
Pourquoi une adresse e-mail professionnelle ne doit jamais être @gmail.com
Besoin d’un coup de pouce pour réaliser le design de votre site?
Même si des outils existent, rien ne vaut l’expérience… Gagnez du temps et ne perdez plus vos cheveux, confiez moi la création de votre site Web.
