personnaliser ses articles de blog Squarespace

D’expérience - et pas seulement parce que c’est mon métier ! 😂 Squarespace est l’une des plateformes les plus intéressantes pour créer son blog, et de loin.

L’interface ultra intuitive me fait gagner un temps incroyable lorsque j’intègre mes articles. Toutes les options SEO sont à ma dispo pour permettre à mes articles de performer dans les moteurs de recherche. 

J’ai déjà préparé pour ce blog et YouTube quelques vidéos consacrées au SEO, à l’optimisation, etc… mais jamais réellement de vidéo autour des articles en eux-mêmes. Je voulais vraiment remédier à ça. Pourquoi ? Parce que la plupart des blogs rédigés sous Squarespace sont… vraiment basiques (ce blog y compris !), et mériteraient d’être pimpé et d’être plus agréable à lire.

En blogging, la forme est presque aussi importante que le fond. Lorsque vous personnalisez vos articles de blog, vous ajoutez une touche personnelle à votre contenu qui reflète votre identité, votre style et votre message. En d’autres termes, il s'agit de créer une expérience unique pour vos lecteurs, de rendre votre contenu plus engageant et de le faire ressortir dans la multitude de blogs qui existent aujourd’hui.

Dans cette vidéo, je vous guide pas à pas dans la personnalisation des articles de blog avec Squarespace. D’abord en no-code, avec les outils natifs proposés par Squarespace ; puis en allant plus loin avec le CSS. 

AVANT DE DÉMARRER… RÉCUPÈRE TES 5 CODES CSS Squarespace À COPIER-COLLER

Tu as créé ton site Squarespace en autonomie, mais tu sens qu’il y manque un petit quelque chose pour le rendre vraiment unique ? Ce guide offert, simple et facile à utiliser, te permettra de personnaliser en quelques clics et copier-coller ton site Squarespace.

ACCÉDER À TON GUIDE NOTION OFFERT

le code CSS à utiliser :

Pour personnaliser la police du titre de l’article de blog et le titre de la pagination :

.blog-item-title h1 {
  font-family: Ahsing !important;
}

.item-pagination-title {
 font-family: Ahsing !important;
 margin-top: -15px !important;
}

Pour ajouter un espace (padding) entre les catégories et la date :

.blog-meta-item--categories {
    padding-bottom: 10px;
}

Pour ajouter un effet de hover aux catégories :

.blog-item-category:hover {
  background-color: pink;
}

.blog-item-category:hover {
  font-style: italic !important;
}

Pour ajouter une bordure de type pilule (pill border) aux catégories :

.blog-item-category {
  border: grey 1px solid;
  padding: 2px 12px 2px 12px;
  border-radius: 20px;
}

Pour ajouter un effet surligné aux catégories :

.blog-item-category {
  background: linear-gradient (transparent 60%, pink 60%) !important;
  padding-left: 2px;
  padding-right: 2px;
}