comment ajouter un effet d’ombre portée dans Squarespace

J’aime beaucoup les effets d’ombre portée, car ils permettent de mettre en valeur un contenu ou un bloc sur son site, de façon subtile et minimaliste. Dans le tutoriel associé, nous allons voir comment ajouter un effet d’ombre portée ; d’abord en no-code, comme sur les formes ; puis en appliquant du code CSS, pour ajouter un effet d’ombre à (presque) n’importe quel type de bloc : FAQ, newsletter, etc.

On va reprendre la table de prix réalisée dans ce tutoriel et venir jouer avec les ombres portées pour mettre en avant l’offre centrale - et principale !

Pour réaliser ce tuto, j’utilise l’extension Chrome Squarespace ID Finder, que vous pouvez retrouver et installer ici. 

Le code à utiliser pour appliquer un effet d’ombre portée à un bloc Squarespace :

#block-1234567890 {
  box-shadow: lightgrey 0px 0px 24px;
}

Webdesigner et consultante Squarespace, j’accompagne et je crée pour mes clients des sites intelligents, stratégiques et haut de gamme. On travaille ensemble ?

Personnalisez en quelques clics et copier-coller votre site Squarespace : intégrer votre police, personnaliser les cookies… sans apprendre à coder !