Personnaliser le design de votre blog

Dans la barre latérale gauche, cliquez sur Design pour commencer à personnaliser l'apparence et le style de votre blog.

Dans la barre latérale gauche, cliquez sur Design pour commencer à personnaliser l'apparence et le style de votre blog.

Header

• Logo

  • Téléversez votre logo et définissez une URL de destination pour les clics sur le logo.
  • Taille recommandée : 250×150 ou 400×200

• Bouton d'en-tête

  • Choisissez parmi deux types de boutons :
    • Subscribe Form
      • « Affichez un formulaire de capture de leads lorsque l'utilisateur clique sur le bouton. »
      • Le contenu et les paramètres du formulaire se configurent dans l'onglet Form.
    • Aller vers l'URL saisie
      • Liez le bouton à n'importe quelle URL interne ou externe.

• Barre de navigation

  • Navigation principale
    • Définissez une barre de menu fixe en haut de votre blog.
  • Menu déroulant
    • Configurez les éléments du menu déroulant qui apparaissent lorsqu'un utilisateur clique sur un élément de menu.

• Code personnalisé

  • Vous pouvez également injecter du CSS ou du HTML personnalisé pour respecter parfaitement la charte graphique de votre site.

Bannière

• Titre et description du blog

  • Personnalisez le titre et le texte de description affichés sur la page d'accueil de votre blog.

• Couleur du texte

  • Définissez la couleur du texte de votre bannière.

• Disposition de la bannière

  • Choisissez l'alignement du texte : aligné à gauche ou centré.

• Arrière-plan (couleur ou image)

  • Personnalisez l'arrière-plan de la bannière :
    • Définissez une couleur d'arrière-plan unie
    • Ou téléversez une image d'arrière-plan
      • Tailles recommandées : 1680×450 pour le bureau / 390×300 pour le mobile

• Code personnalisé

  • Vous pouvez également injecter du CSS ou du HTML personnalisé pour respecter parfaitement la charte graphique de votre site.

Mise en page

• inblog propose trois mises en page d'articles par défaut au choix.

• Vous pouvez également appliquer une personnalisation visuelle supplémentaire à l'aide de code personnalisé.

  • Code personnalisé : utilisez du HTML/CSS pour des mises en page entièrement sur mesure.

Footer

• Ajoutez les informations de votre entreprise dans la section du pied de page.

• Comme les autres zones, le pied de page peut également être personnalisé avec du code.

Saisie et enregistrement de code personnalisé

Si les champs de code ne sont pas visibles ou ne peuvent pas être modifiés, vérifiez d'abord le forfait de votre blog. Les paramètres de code personnalisé sont verrouillés sur le forfait Free. Si le code personnalisé est disponible pour votre blog, ouvrez Design → Commun et activez l'interrupteur En-tête personnalisé, Code de bannière personnalisé ou Code de pied de page personnalisé correspondant à la zone que vous souhaitez modifier. Lorsque l'interrupteur est désactivé, la page affiche le message Switch ON to insert custom ... code. à la place de l'éditeur. Pour la mise en page de la liste d'articles, activez son paramètre de code personnalisé dans la section Layout.

Les zones Code personnalisé sous Header, Banner, Layout et Footer utilisent toutes le même éditeur. Il comporte une boîte HTML en haut et une boîte CSS de style en bas. Saisissez les règles CSS directement ou entourez-les de balises <style> comme indiqué ci-dessous. Les règles CSS nouvelles ou modifiées sont automatiquement entourées de balises <style> lorsque vous appliquez le code.

<style>
  h2 {
    font-size: 20px;
  }
</style>

Le CSS enregistré et inchangé est conservé. La modification d'autres paramètres ou du seul HTML ne convertit pas le CSS existant. Pour activer du CSS précédemment enregistré sans balises, vérifiez-le et entourez-le explicitement de balises <style>. Vérifiez le design dans l'aperçu avant d'enregistrer. Les règles CSS ou les blocs <style> incomplets, ainsi que les noms prédéfinis comme cover, génèrent une erreur en texte rouge. N'ajoutez pas de HTML ou de scripts dans le champ CSS. Si un champ existant en contient déjà, vous pouvez modifier son contenu CSS tout en laissant les autres éléments de code, les attributs de style et l'ordre inchangés.

Votre code n'est appliqué au blog qu'après ces deux étapes :

1. Cliquez sur Appliquer le code. Le code est validé et reflété dans l'aperçu au sein de l'éditeur. Il n'est pas encore enregistré.
2. Cliquez sur Enregistrer, épinglé en haut du panneau de configuration. Ce n'est qu'après cette étape que la modification est mise en ligne sur votre blog.

Si vous cliquez sur Appliquer le code puis quittez l'écran Design sans enregistrer, vos modifications seront perdues. Une boîte de dialogue de confirmation s'affiche lorsque vous tentez de quitter avec des modifications non enregistrées.

• Le code personnalisé est conservé par écran et par zone. Les onglets Commun, Accueil / Catégorie, Article, Auteur et 404 en haut de l'écran Design conservent chacun leur propre code, et au sein de Commun, le Header, la Banner et le Footer sont également des encadrés distincts. Saisissez votre code dans l'onglet correspondant à l'écran que vous souhaitez modifier — par exemple, ajustez l'espacement du corps d'un article sous l'onglet Article.
• Les sélecteurs CSS larges tels que a ou button peuvent affecter l'ensemble de votre blog. L'éditeur affiche un avertissement dans ce cas — réduisez la portée du sélecteur si vous souhaitez que la règle ne s'applique qu'à une seule zone.

Page d'erreur 404

• Vous pouvez configurer une page d'erreur 404 personnalisée, affichée lorsqu'un utilisateur arrive sur une URL inexistante.

Prise en charge de l'aperçu mobile

• « Le design de votre blog est entièrement responsive. » Prévisualisez l'apparence de votre blog en affichage bureau et mobile directement depuis l'éditeur.

Dernière mise à jour 2026-10-14