tutos pour squarespace
Le coin créa
Un espace abonnĂ© Ă 39⏠- accĂšs Ă vie đïž
(19,50⏠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.
Plus dâune vingtaine de tutos Ă dispo.
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.
Page - Effet au scroll (section entiĂšre)
Explication : cet effet permet de rajouter comme un effet de glisse entre chaque section au fil du scroll et de transformer sa page en expérience pour le lecteur. Cela ajoute un style plus haut de gamme.
Parfait pour : mettre en avant des images en pleine page.
Niveau : intermédiaire
ĂlĂ©ment - Ajouter un bouton flottant
Explication : cet effet permet un rappel discret de lâaction principale de la page, surtout sur une page longue. Il reste visible sans bloquer la lecture.
Parfait pour : mettre en avant un lien.
Niveau : intermédiaire
Page - Effet au scroll
Le site de dĂ©mo â
ModÚle de Squarespace utilisé : Selene
Explication : cet effet permet de rajouter comme des lignes dâun sommaire sâadditionnant au fil du scroll. Il fonctionne bien avec de grandes images comme un portfolio de projets Ă montrer par exemple, et ne demande pas de code.
Parfait pour : présenter joliment des projets.
Niveau : facile
Template - Ajouter un sous-titre
Le site de dĂ©mo â
ModÚle de Squarespace utilisé : Héron
Explication : il peut ĂȘtre judicieux dâafficher un sous-titre au titre de son site notamment pour faciliter la comprĂ©hension de son business et placer des informations clĂ©s.
Parfait pour : ĂȘtre plus clair dans son message.
Niveau : intermédiaire
Template - Ăviter â?â ou â!â seul Ă la ligne
Le site de dĂ©mo â
ModÚle de Squarespace utilisé : Zorayda
Explication : avec ce code, vous allez enfin pouvoir Ă©viter lâaffichage affreux dâun point dâinterrogation, dâexclamation et autre signe de ponctuation tout seul Ă la ligne !
Parfait pour : faire plus pro.
Niveau : facile
ĂlĂ©ment - Effet âLiquid Glassâ Ă la Apple
Le site de dĂ©mo â
ModÚle de Squarespace utilisé : Camdez
Explication : cet effet permet de reproduire un peu lâeffet âLiquid Glassâ, popularisĂ© par Apple et trĂšs Ă la mode dans lâunivers des designers.
Parfait pour : ajouter une touche animĂ© et dans lâair du temps Ă votre site.
Niveau : intermédiaire
Page - Ajouter un sommaire aux billets de blog
Le site de dĂ©mo â
ModÚle de Squarespace utilisé : Brower
Explication : cet effet permet de rajouter un sommaire automatique Ă ses articles de blog. Câest recommandĂ© pour amĂ©liorer la navigation, surtout dans les articles longs ou thĂ©matiques.
Parfait pour : favoriser la lecture et la structure dâun article.
Niveau : facile
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
JâespĂšre que mes crĂ©a vous plaisent.
NâhĂ©sitez pas Ă me partager si vous voyez des choses que vous voudriez avoir !
