créer un effet de superposition pour son site Squarespace, avec Canva

Dans ce tutoriel, nous allons voir ensemble comment un effet de superposition d’image sur votre site Internet Squarespace, et ce avec l’outil le plus simple du monde, j’ai nommé : Canva.

[L’article qui suit est une transcription de la vidéo associée !]

premier tutoriel : créer un effet d’ombre avec Canva

1. Créer le visuel dans Canva (taille 2000x1500 px)

La première étape va être de créer un design aux bonnes dimensions. Donc je vais aller en haut à droite dans Canva, cliquer sur “Créer un design” et ici je vais sélectionner les dimensions personnalisées. En largeur, pour votre site Squarespace, vous allez vouloir partir sur 2000 pixels, et en hauteur, ça va dépendre de la hauteur de votre section. Pour cet exemple, on va partir sur 1500 mais ça pourrait être 1000, 1200. Ce n'est pas une science exacte et que la hauteur de votre visuel va dépendre de la hauteur de votre section sur votre site.

2. Ajouter un fond coloré

On va venir choisir un fond de couleur, et je vais venir sélectionner une couleur que j'ai déjà choisie. Je clique sur l’arrière-plan de l’image, puis sur “Couleur d'arrière-plan”. Je viens cliquer sur le bouton “Ajouter une nouvelle couleur” et je vais simplement coller le code HEX. Vous pouvez choisir la couleur que vous voulez, mais je vous conseille quand même de choisir une couleur claire pour que cet effet d'ombrage ressorte correctement. 

3. Ajouter un élément d’ombre

 Dans “Eléments”, vous allez rechercher et choisir les effets d'ombrage. Je vous conseille d'utiliser les termes anglais, "shadow" par exemple, pour de meilleurs résultats. Vous avez énormément d'exemples avec des effets d'ombres, en fonction de ce que vous recherchez. Vous pouvez déplacer l’image et changer la taille pour créer votre effet d'ombre. Vous pouvez également cliquer sur "Retourner" et cliquer sur "Retourner horizontalement" pour inverser le style de l’image.

4. Télécharger au format JPG : attention au poids !

Pour télécharger l’image, cliquez sur Partager puis Télécharger. L'information à garder en tête : vous ne voulez pas que votre fond de section soit trop lourd. Pourquoi ? Parce que vous ne voulez pas que cela vienne “plomber” le temps de chargement de votre page web. Donc faites attention au format que vous choisissez. Je vous conseille de partir sur un format JPEG pour que ce soit plus léger. On conserve la taille initiale, et en qualité 80. Dans les fichiers "Téléchargements", je retrouve mon image et quand je passe la souris dessus, je vois que la taille est de 67 ko. C'est parfait !

5. Importer et intégrer l’effet de superposition dans Squarespace

Dans Squarespace, je vais cliquer sur "Modifier" pour ouvrir l'éditeur du site. Par souci de rapidité et de simplicité, j’ai déjà créé les sections. On va simplement venir importer l'image dans notre section : je vais cliquer sur le petit stylo, “modifier la section” et dans “Arrière-plan”, j'ai la possibilité d'importer une image en le sélectionnant ici dans nos fichiers "Téléchargements". Notre image s'est chargée ! Attention, en fonction du template, vous allez peut-être vouloir réduire ou augmenter l'opacité de superposition. J'ai tendance à l'enlever parce que je n'aime pas trop ces effets blancs ou rose : je préfère quand ce sont les vraies couleurs de l’image importée. On valide et enregistre. Et nous avons créé un effet de superposition avec notre ombrage !

Ddeuxième tutoriel : créer un effet de script avec Canva

1. Créer le visuel dans Canva (taille 2000x1300 px)

On va maintenant venir créer un effet de script, en créant à nouveau un design aux dimensions personnalisées. On va rester sur 2000 pixels de largeur, mais cette fois, en hauteur, vu que ce n'est pas une section section héros, on va choisir 1300 pixels.

 2. Ajouter un fond coloré et un élément de texte

Cette fois ci, je vais venir choisir un gris très léger, comme le gris de mon identité visuelle, pour intégrer un élément de texte : je vais dans “Texte”, “Ajouter un titre” pour indiquer "Sur le blog." Une fois que vous avez choisi votre police, vous allez venir agrandir votre élément de façon à ce qu'il recouvre l'intégralité de la largeur de votre visuel. On va également changer la couleur : choisissez ce qui fonctionne le mieux pour vous sur votre site et avec votre identité visuelle. Une fois que vous avez choisi votre couleur, vous allez venir ajuster le bloc de texte pour qu'il vienne se caler sur le bord, la bordure basse de votre visuel. Une fois que vous avez fait ce travail, vous avez préparé votre fond dans Canva !

3. Télécharger au format JPG : attention au poids !

On va télécharger notre image : encore une fois, on va venir choisir le format JPEG pour éviter que notre image pèse trop lourd, et cliquer sur “Télécharger”. Et cette fois, je vois que dans les fichiers téléchargés, l'image est bien à 54 ko.

 4. Importer et intégrer l’effet de superposition dans Squarespace

Dans Squarespace, j'ouvre à nouveau l'éditeur en cliquant sur "Modifier". Je vais cliquer sur "Modifier" la section, puis "Arrière-plan", ajouter une image, charger le fichier et je vais le sélectionner dans mes fichiers téléchargés. On voit que la taille du fichier est un petit peu trop haute, et que le bord de l'image est un petit peu mangé : par défaut, Squarespace va centrer l'image. Je veux donc ajuster le visuel : je glisse le petit curseur pour bien le mettre tout en bas, et pour éviter que l'image soit rognée en bas. L'image est désormais bien ajustée sur les côtés.

Il est très important, quand vous créez des fonds de section, de toujours vous assurer que côté mobile, ça marche correctement. C'est vraiment un gros point négatif : on voit beaucoup de sites qui ne sont pas optimisés pour la version mobile. Quand je clique sur "Vue sur appareil mobile", j'ai bien ma section avec les articles de blog. On voit que là ça ne ressemble strictement à rien : la moitié du texte est cachée. Je vais cliquer sur "Modifier", puis "Arrière-plan". Je vais venir ajuster avec ce même outil pour faire en sorte que ce soit un peu plus ajusté. Et je vais le centrer sur le mot "Blog". Avec Squarespace, on voit directement à l'écran ce que ça donne ! Quand on bascule en affichage classique, on voit que ça ne change pas la version bureau : par contre sur la version mobile, c'est nickel. On enregistre et cette fois, c'est bien ajusté comme il faut.

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 !