Tout nouveau, tout beau
Le coin créa 🧠💭🌝
🪞🎨✨🗃️🌞💬🖱️🖥️🗂️
Un espace abonné à 9,99€/mois 🗝️
(4,99€ pour les membres de la formation → votre code)
Des templates à récupérer, des pages à copier, des codes CSS à essayer et des inspis !
Explorez ci-dessous mes designs préférés.
Florence
Pour pimper son site Squarespace.
Deux nouveautés tous les débuts du mois.
Boîte à idées
Bienvenue dans mon Coin créa 🤓
Vous trouverez dans cet espace des idées de design ! J’en collecte au quotidien, mais si vous avez certaines envies en tête également, vous pouvez me les partager ici.
Template - Liste améliorée
Le site de démo ↗
Modèle de Squarespace utilisé : Sundew
Explication : avec ce code et ces paramètres adaptés aux sections de type “Liste”, on obtient une mise en forme de type “Carte” plus travaillée avec des coins arrondis et un effet de hover (survol) qui apporte une petite touche moderne.
Parfait pour : présenter des éléments de façon visuelle et attractive, tout en restant structurée.
Niveau : intermédiaire
Page - Ajouter un fond aux billets de blog
Le site de démo ↗
Modèle de Squarespace utilisé : Sketchbook
Explication : cet effet permet de rajouter de la structure aux pages de billets de blog qui peuvent manquer de personnalisation dans Squarespace. Le fond coloré amène une petite ambiance visuelle et renforce aussi l’identité de sa marque.
Parfait pour : distinguer visuellement son blog du reste du site.
Niveau : facile
Élément - Flèche “scroll down”
Le site de démo ↗
Modèle de Squarespace utilisé : Looped
Explication : cet effet permet d’éviter de faire croire à vos visiteurs que la page ne va pas plus bas. On l’invite ici au contraire par un léger effet bounce de la flèche à scroller en bas.
Parfait pour : inviter à naviguer sur le reste de la page.
Niveau : facile
Élément - Texte avec émoji
Le site de démo ↗
Modèle de Squarespace utilisé : Achromatic
Explication : avec ce tuto, vous allez pouvoir ajouter un émoji en image à un texte afin de garantir son bon affichage. En effet, si le système d’exploitation ou le navigateur de votre visiteur utilise une version ancienne d’Unicode, les émojis récents ne s’afficheront pas correctement ou afficheront la version liée au système.
Parfait pour : afficher un émoji de modèle Apple, même sur Windows.
Niveau : intermédiaire
Template - Site avec un menu avec émoji
Le site de démo ↗
Modèle de Squarespace utilisé : Nolan
Explication : avec ce tuto, vous allez pouvoir ajouter un émoji en image à un lien (ou plusieurs liens) de votre menu afin de garantir son bon affichage. En effet, si le système d’exploitation ou le navigateur de votre visiteur utilise une version ancienne d’Unicode, les émojis récents ne s’afficheront pas correctement ou afficheront la version liée au système.
Parfait pour : afficher un émoji de modèle Apple, même sur Windows.
Niveau : intermédiaire
Élément - Faire un effet draggable
Le site de démo ↗
Modèle de Squarespace utilisé : Arthur
Explication : cet effet permet de donner la possibilité aux visiteurs de votre site de déplacer des images. Cela les implique et rend la page interactive.
Parfait pour : ajouter une touche très créative à son site.
Niveau : intermédiaire
Template - Site avec un menu à gauche
Le site de démo ↗
Modèle de Squarespace utilisé : Reseda
Explication : avec ce tuto, votre navigation se fera sur une barre latérale fixe à gauche plutôt qu’en haut du site comme cela se fait traditionnellement. Idéal pour les sites avec beaucoup de pages, la navigation sera plus fluide.
Parfait pour : faire un effet de menu “à la Notion”.
Niveau : intermédiaire/avancé
Page - Ouvrir en panneau latéral
Le site de démo ↗
Modèle de Squarespace utilisé : Quinn
Explication : cet effet permet d’afficher une section cachée en panneau latéral. L’idée derrière est d’amener un effet waouh et d’upgrader le niveau de votre site Squarespace. C’est quelque chose qui se voit peu.
Parfait pour : faire un effet mode/design.
Niveau : avancé
Template - Site avec une deuxième police de titre
Le site de démo ↗
Modèle de Squarespace utilisé : Alignflow
Explication : les titres d’un site sont importants et Squarespace permet de mettre une seule police pour ceux-ci. Avec ce tuto, vous pourrez explorer de nombreuses options de customisation.
Parfait pour : faire un effet visuel et mieux mettre en valeur les sujets de vos sections.
Niveau : avancé
Élément - Effet décalé “post-it”
Le site de démo ↗
Modèle de Squarespace utilisé : Cami
Explication : cet effet permet de décaler l’affichage d’un bloc pour ajouter plus de profondeur à ses mises en page. On peut customiser le placement, l’angle, la couleur...
Parfait pour : améliorer la personnalisation et le design.
Niveau : facile
Page - Grille Bento
Le site de démo ↗
Modèle de Squarespace utilisé : Condesa
Explication : un design tendance mais pas si simple à appliquer quand on ne maîtrise pas Squarespace. Récupérez mon modèle ou imprégnez-vous de la démo et du tuto.
Parfait pour : faire des mises en page à la Apple.
Niveau : intermédiaire
Élément - Effet rotate
Le site de démo ↗
Modèle initial de Squarespace utilisé : Rotate
Explication : cet effet permet de rajouter un effet de rotation à un bloc (image ou autre). Cela permet d’attirer l’attention sur une offre spéciale ou une promotion, ou encore un élément interactif, comme une icône ou un logo.
Parfait pour : enrichir l’esthétique et le mouvement sur son site.
Niveau : facile/intermédiaire
Template - Site avec une deuxième police sur le même titre
Le site de démo ↗
Modèle de Squarespace utilisé : Myhra
Explication : souvent vu dans le milieu de la mode ou du design, l’utilisation de deux polices différentes dans un même titre attire l’œil et facilite la compréhension des informations importantes. C’est une bonne technique pour combiner esthétique, lisibilité, et impact émotionnel.
Parfait pour : ajouter une touche design à son site et mettre en avant vos typographies de marque.
Niveau : intermédiaire
Élément - Réduire l’interlignage
Le site de démo ↗
Modèle de Squarespace utilisé : Hart
Explication : cet effet permet de réduire l’espace entre un titre et un paragraphe dans un texte. Un code très simple mais qui manque quand on ne le connaît pas.
Parfait pour : personnaliser plus précisément l’espacement.
Niveau : facile
Élément - Ajouter une bulle d’information
Le site de démo ↗
Modèle de Squarespace utilisé : Pulaski
Explication : cet effet permet d’afficher une bulle d’information au survol dans un texte. Cela apporte une interactivité dynamique à son site, tout en fournissant des explications supplémentaires (indexable par les moteurs de recherche) sans surcharger le contenu.
Parfait pour : améliorer l’ergonomie et l’expérience utilisateur.
Niveau : avancé
Élément - Customiser le curseur de la souris
Le site de démo ↗
Modèle de Squarespace utilisé : Jotterpress
Explication : cet effet permet de customiser la souris affichée sur un site. L’idée derrière est de renforcer son identité de marque avec un curseur en cohérence avec son image, et d’apporter un effet ludique et esthétique. Vous pourrez choisir parmi une bibliothèque de curseurs mise à votre disposition.
Parfait pour : ajouter une touche personnalisée à son site.
Niveau : intermédiaire
Page - Autre image au survol
Le site de démo ↗
Modèle de Squarespace utilisé : Montclaire
Explication : très apprécié des artistes et photographes, cet effet permet de changer l’image affichée lorsqu’un utilisateur passe sa souris dessus. L’idée est de surprendre, de rendre votre site plus dynamique et d’attirer l’attention sur un élément en particulier.
Parfait pour : faire des avant/après, afficher une variante.
Niveau : intermédiaire
Template - Site aux marges larges
Le site de démo ↗
Modèle de Squarespace utilisé : Çimen
Explication : très utilisé dans le milieu de la tech, ce design au contenu central étroit, rappelle la vue mobile des sites sur téléphone. Comme une part toujours plus importante du trafic vient du mobile, c’est une bonne approche à adopter !
Parfait pour : avoir l’air moderne et actuel, mettre en avant son contenu en concentrant le regard du lecteur sur le milieu de l’écran.
Niveau : facile
Orga - Mes inspi de site
Explication : pas de bonne créa sans une bonne orga ! Accédez au recueil des sites que je préfère et qui m'inspire au quotidien, qu'ils soient de Squarespace ou non. De nouveaux ajouts réguliers sont faits au fil de mes trouvailles ! 💎
Parfait pour : vous donner de nouvelles idées, vous débloquer quand vous manquez de créativité.
Niveau : facile
J’espère que mes créa vous plaisent.
N’hésitez pas à me partager si vous voyez des choses que vous voudriez avoir !
