Téléchargez un manuel gratuit, qui vous aidera à concevoir votre site en toute confiance.
L’adresse e-mail saisie n’est pas valide.
Nous vous remercions de vous être abonné(e).
En saisissant votre adresse e-mail, vous reconnaissez avoir lu et compris notre Politique de confidentialité et acceptez de recevoir des communications marketing de la part de Squarespace.
La programmation et ses règles et concepts abstraits peut en intimider plus d’un. Créer un site web de A à Z tout en corrigeant les bugs paraît insurmontable pour de nombreux entrepreneurs. C’est d’ailleurs probablement la raison pour laquelle vous avez créé votre site sur Squarespace. Mais il existe des moyens plus simples d’ajouter un peu de code à votre site web pour passer à la vitesse supérieure.
Je m’appelle Rache et je suis membre de Circle, le programme de partenariat de Squarespace pour les webdesigners professionnels. J’ai commencé ma carrière comme webdesigner. J’ai toujours voulu pousser les projets de mes clients le plus loin possible. Quand je me suis rendu compte que la programmation pouvait m’aider, j’ai créé Squarestylist, une bibliothèque de ressources de création qui aide les utilisateurs à intégrer le design et le code à des sites web qui inspirent admiration et émerveillement dans un océan de monotonie. Voici quelques conseils et astuces pour rendre votre site unique grâce à du code personnalisé.
Pourquoi ajouter du code personnalisé à votre site web ?
Les recherches montrent que la première impression d’un site web est liée à son design chez 94 % des visiteurs. Cela vaut donc la peine de passer du temps sur l’apparence de votre espace numérique.
Entendons-nous bien : le code personnalisé n’est pas obligatoire sur Squarespace. De très nombreuses fonctionnalités sont disponibles immédiatement. Ceci étant dit, du code vous permet d’ajouter à votre site des fonctionnalités qui ne sont pas incluses.
Bonnes pratiques en matière de code personnalisé
En tant que webdesigneuse et développeuse autodidacte, j’ai appris à programmer un extrait de code à la fois, en trouvant moi-même une solution à chaque problème et chaque situation. Lorsque je suis confrontée à un problème technique nouveau, je fouille sur les forums et les groupes en ligne avant de mettre immédiatement en pratique mes nouvelles connaissances.
Ayant suivi cette démarche de nombreuses fois, j’ai pris quelques bonnes habitudes qui m’ont aidée à développer mes compétences.
1. Optimiser les fonctionnalités intégrées
Explorez l’éditeur Squarespace et n’hésitez pas à essayer chacune des options que vous trouvez. L’outil de création propose plus de fonctions que vous ne le pensez. La moitié du temps, il suffit de savoir où chercher ce dont vous avez besoin dans les paramètres par défaut. Le reste du temps, vous devez vous familiariser avec son fonctionnement pour savoir quoi taper dans votre barre de recherche.
2. Comprendre ce que vous ajoutez
Une fois que vous avez trouvé sur internet un extrait de code qui pourrait être utile pour votre site web, ne vous contentez pas de le copier-coller dans le panneau CSS personnalisé ou Injection de code. Analysez-le ligne par ligne pour comprendre comment il affecte votre site. Notez les mots-clés et les schémas. Quelle est leur signification pour vous ?
J’ai appris le langage des différents navigateurs par moi-même, alors que je n’avais suivi aucune formation dans ce domaine. Cultivez votre curiosité et appréciez l’expérience plutôt que de la redouter. Vous n’en reviendrez pas de la quantité d’informations que vous pouvez assimiler.
Si vous souhaitez suivre une approche plus guidée de l’apprentissage de la programmation, vous pouvez commencer par mon cours gratuit sur les notions de base du CSS.
3. Faire attention à la qualité
Le webdesign ne se limite évidemment pas à une question de goût visuel. Si vous voulez vous débrouiller seul(e), vous devez vous poser les questions suivantes :
Votre code affecte-t-il involontairement d’autres éléments du site web ?
Comment votre site réagit-il aux changements de taille et d’orientation des écrans ?
Comment s’affiche-t-il dans les différents navigateurs ?
La fonctionnalité supplémentaire va-t-elle ralentir le site ?
Quel est l’impact de votre personnalisation sur l’accessibilité ?
Gardez ces aspects à l’esprit et vous prêterez davantage attention à l’impact de votre code au-delà de l’aperçu par défaut du site web. Vous devez avant tout vous assurer de proposer une expérience utilisateur attrayante à tous les niveaux.
Extraits de code à essayer
Votre première incursion dans le langage CSS n’a pas besoin d’être complexe. Je me rappelle avoir commencé par ajouter des détails ici et là et m’appuyer ensuite de plus en plus sur mon référentiel de code.
Accédez au panneau CSS dans lequel vous pouvez ajouter du code personnalisé dans votre compte Squarespace en cliquant sur Site web > Outils pour site web en bas de la barre latérale, puis sur CSS personnalisé. Vous pouvez commencer à peaufiner votre site à l’aide de quelques-uns de ces extraits.
1. Définir une police d’accent
Vous pouvez mettre en valeur certains mots ou certaines phrases de votre site web autrement qu’en les mettant en italique. Cette fonctionnalité vous permet de désigner une police d’affichage comme police d’accent, c’est-à-dire une police que vous utiliserez avec parcimonie pour vraiment attirer l’attention des visiteurs.
Assignez le style de votre police Divers, qui vous servira de police d’accent. Pour ce faire, accédez à Styles du site > Polices > Divers. Choisissez la famille de polices de votre choix et ajustez les propriétés de police.
Ajoutez votre ligne de code en accédant à Site web > Outils pour site web > CSS personnalisé. Copiez-collez le code ci-dessous. Si un code existe déjà, attention à ne pas le supprimer. Collez simplement le code supplémentaire à la ligne disponible suivante.
Ajoutez un bloc Texte dans l’une des sections de votre site web avec l’élément Titre 1, Titre 2 ou Titre 3. Sélectionnez un mot ou un groupe de mots et attribuez-lui le format italique en cliquant sur le bouton I dans la fenêtre pop-up du panneau de texte. Le style de la police d’accent sera appliqué aux mots en italique.
Code CSS
Ajoutez à Site web > Outils pour site web > CSS personnalisé
h1 em, h2 em, h3 em {
font-family:var( --meta-font-font-family);}
Regardez la présentation de Rache sur le code personnalisé lors du Squarespace Circle Day
2. Ajouter des décors de ligne
Des traits fins utilisés comme motif visuel peuvent apporter une touche de finesse à un site minimaliste. Vous utilisez peut-être déjà le bloc Ligne intégré pour des traits horizontaux dans l’éditeur Squarespace. Pour ajouter des lignes verticales, il vous suffit d’ajouter quelques lignes de code dans le panneau CSS.
Ajoutez une section vierge. Pour faciliter le placement des éléments, affichez la grille de l’Éditeur intuitif en appuyant sur la touche G de votre clavier.
Cliquez sur le bouton Ajouter un bloc en haut à gauche de la section et sélectionnez Bloc Forme.
Ouvrez les paramètres du bloc Forme en double-cliquant sur le bloc.
Ouvrez le menu déroulant des formes et sélectionnez la dernière forme proposée (Trapèze).
Accédez à Site web > Outils pour site web > CSS personnalisé. Copiez le code ci-dessous et collez-le à la dernière ligne vide du panneau.
Après avoir collé le code CSS, le bloc Forme de type Trapèze se transforme en ligne verticale. Vous pouvez changer sa couleur en activant l’option Trait dans les paramètres du bloc Forme et en choisissant une couleur dans le sélecteur de couleurs.
Sur un appareil mobile, la ligne verticale se transforme en ligne horizontale. Modifiez la position du bloc en conséquence. Cela n’affectera pas l’affichage sur ordinateur.
Code CSS
.website-component-block .sqs-shape-block-container[data-shape-name="keystone"] {
&::before {
width: 1px;
content: ''; height: 100%; background-color: var(--shape-block-stroke-color); position: absolute;} svg {display: none !important;}.sqs-shape > * {stroke-width: 0 !important;}
}
@media screen and (max-width: 767px) {
.website-component-block .sqs-shape-block-container[data-shape-name="keystone"]::before {
height:1px;
width: 100%;
}
}
3. Afficher les effets d’image en cas de survol
Le mouvement dynamique peut également ajouter un intérêt visuel aux dispositions de votre site web. Dans cet exemple, des effets d’image 3D sont activés chaque fois que le curseur est placé sur une image sélectionnée. Cet exemple illustre parfaitement comment profiter des fonctionnalités intégrées. Vous utilisez simplement le code pour réduire le niveau de distraction et améliorer l’interactivité de votre site web.
Ajoutez un bloc Image ou choisissez-en un.
Dans les paramètres du bloc Image, sélectionnez Effets d’image et choisissez un effet.
Par défaut, l’effet d’image est visible lors du chargement de la page. Pour qu’il apparaisse uniquement en cas de survol, accédez à Site web > Outils pour site web > CSS personnalisé et collez le code ci-dessous.
Code CSS
.sqs-block-image .design-layout-fluid .fluid-image-container {img {visibility: visible !important;}}.imageEffectContainer {opacity: 0;transition:0.5s;}.sqs-block-image:hover .imageEffectContainer {opacity: 1;}
J’espère que cet article vous encouragera à sortir de votre zone de confort et à faire des expériences dans le sandbox de votre éditeur de code, si ce n’est déjà fait. Bonne programmation !
Vous vous sentez prêt(e) à créer et à personnaliser votre site web ?