Comment ajouter du code personnalisé à votre site web

Avec ses règles et ses concepts abstraits, le codage 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. Sachez cependant qu’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 web designers professionnels. J’ai commencé ma carrière comme web designer. 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é.

Remarque : ce contenu a été créé par un membre de Squarespace Circle et ne constitue pas une recommandation officielle de Squarespace. Le produit Squarespace évoluant fréquemment, le code Squarespace est susceptible d’être modifié à tout moment et Squarespace ne peut garantir que les exemples de code ci-dessous fonctionneront perpétuellement. Les équipes d’assistance client ne sont pas en mesure de résoudre les problèmes liés au code personnalisé ajouté aux sites web Squarespace.

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. Vous pouvez bénéficier de fonctionnalités fluides dès le départ. Cela dit, il est utile d'utiliser le codage comme outil pour ajouter des fonctionnalités ou des exigences au site qui ne sont pas déjà intégrées.

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.

1. 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.

2. 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.

3. 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.

1. 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.

2. Cliquez sur le bouton Ajouter un bloc en haut à gauche de la section et sélectionnez Bloc Forme.

3. Ouvrez les paramètres du bloc Forme en double-cliquant sur le bloc.

4. Ouvrez le menu déroulant des formes et sélectionnez la dernière forme proposée (Trapèze).

5. 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.

6. 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.

7. 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.

1. Ajoutez un bloc Image ou choisissez-en un.

2. Dans les paramètres du bloc Image, sélectionnez Effets d’image et choisissez un effet.

3. 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 ?