Les blocs de contenu vous permettent de structurer les diff\u00e9rentes zones de votre site web Kopage. Au lieu de devoir concevoir ou programmer une page enti\u00e8re de z\u00e9ro, vous pouvez utiliser des structures de contenu pr\u00e9par\u00e9es et les remplir avec vos propres textes, images et autres \u00e9l\u00e9ments.<\/p>\n\n\n\n
Les blocs de contenu font donc partie des outils les plus importants du cr\u00e9ateur de sites web classique Kopage. Ils vous permettent de construire une page section par section et de modifier \u00e0 tout moment le contenu existant par la suite.<\/p>\n\n\n\n
Dans ce guide, nous vous montrons le fonctionnement fondamental des blocs de contenu, comment modifier des textes et des images, et \u00e0 quoi vous devez faire attention lors de la cr\u00e9ation d'un site web clair et structur\u00e9.<\/p>\n\n\n\n
\nEn bref :<\/strong> Une page Kopage se compose de diff\u00e9rentes zones de contenu. Les blocs de contenu vous fournissent pour cela des structures pr\u00e9par\u00e9es que vous pouvez s\u00e9lectionner, organiser et concevoir avec vos propres contenus.<\/p>\n<\/blockquote>\n\n\n\n
Qu'est-ce qu'un bloc de contenu ?<\/h2>\n\n\n\n
Un bloc de contenu est une zone de contenu pr\u00e9par\u00e9e au sein d'une page.<\/p>\n\n\n\n
Un tel bloc peut par exemple offrir de l'espace pour un titre, un texte et une image. D'autres blocs de contenu peuvent contenir plusieurs colonnes, des zones d'image plus grandes ou d'autres dispositions de contenu.<\/p>\n\n\n\n
Cela vous \u00e9vite d'avoir \u00e0 programmer vous-m\u00eame la mise en page d'une section en HTML et CSS.<\/p>\n\n\n\n
Une page simple pourrait par exemple se composer des sections suivantes :<\/p>\n\n\n\n
Introduction\n \u2193\nServices\n \u2193\nImage et description\n \u2193\nAvantages\n \u2193\nContact<\/code><\/pre>\n\n\n\nChacune de ces zones peut \u00eatre mise en \u0153uvre avec un bloc de contenu adapt\u00e9.<\/p>\n\n\n\n
Quelle est la diff\u00e9rence entre une page et un bloc de contenu ?<\/h2>\n\n\n\n
Une page est la section principale de votre site Web. Des exemples incluent la page d'accueil, une page \u00c0 propos de nous ou une page de contact.<\/p>\n\n\n\n
\u00c0 l'int\u00e9rieur de cette page se trouvent les v\u00e9ritables sections de contenu.<\/p>\n\n\n\n
Pour faire simple :<\/p>\n\n\n\n
Site web\n\u2514\u2500\u2500 Page\n \u251c\u2500\u2500 Bloc de contenu\n \u251c\u2500\u2500 Bloc de contenu\n \u251c\u2500\u2500 Bloc de contenu\n \u2514\u2500\u2500 Bloc de contenu<\/code><\/pre>\n\n\n\nAinsi, lorsque vous avez besoin d'une nouvelle sous-page pour un service, vous cr\u00e9ez d'abord la page correspondante. Ensuite, vous construisez son contenu avec des blocs de contenu adapt\u00e9s.<\/p>\n\n\n\n
Nous traitons la cr\u00e9ation et l'organisation des pages s\u00e9par\u00e9ment sous G\u00e9rer les pages, la navigation et les sous-menus dans Kopage<\/a>.<\/p>\n\n\n\n
Ajouter un bloc de contenu \u00e0 une page<\/h2>\n\n\n\n
Ouvrez d'abord la page que vous souhaitez modifier dans l'\u00e9diteur Kopage.<\/p>\n\n\n\n
Gr\u00e2ce \u00e0 la fonction d'ajout de contenu, vous pouvez ensuite s\u00e9lectionner une zone de contenu appropri\u00e9e.<\/p>\n\n\n\n
Kopage met \u00e0 disposition des blocs de contenu pr\u00e9par\u00e9s \u00e0 cet effet avec diff\u00e9rentes structures. Ne choisis pas simplement le bloc le plus voyant visuellement, mais une structure qui correspond \u00e0 ton contenu r\u00e9el.<\/p>\n\n\n\n
Par exemple, si tu souhaites afficher un court texte \u00e0 c\u00f4t\u00e9 d'une image, une structure texte-image correspondante est plus judicieuse qu'un bloc complexe comportant de nombreux \u00e9l\u00e9ments dont tu n'as finalement pas besoin.<\/p>\n\n\n\n
\nConseil pratique :<\/strong> Choisissez un bloc de contenu en fonction de la structure de vos contenus, et non des exemples de texte ou d'images qu'il contient. Vous les remplacerez de toute fa\u00e7on par vos propres contenus par la suite.<\/p>\n<\/blockquote>\n\n\n\n
Le contenu pr\u00e9fabriqu\u00e9 n'est qu'un point de d\u00e9part<\/h2>\n\n\n\n
Selon le bloc s\u00e9lectionn\u00e9, il peut d\u00e9j\u00e0 y avoir des exemples de textes, des images ou d'autres espaces r\u00e9serv\u00e9s.<\/p>\n\n\n\n
Ces contenus servent principalement \u00e0 vous montrer la structure pr\u00e9vue.<\/p>\n\n\n\n
N'int\u00e8gre pas de tels contenus d'exemple sans les v\u00e9rifier sur ton site web termin\u00e9. Remplace-les par tes propres textes, des images adapt\u00e9es et des informations qui correspondent r\u00e9ellement \u00e0 ton entreprise, ton association ou ton projet.<\/p>\n\n\n\n
V\u00e9rifiez avant la publication, en particulier, s'il reste des exemples de texte ou des espaces r\u00e9serv\u00e9s inutilis\u00e9s.<\/p>\n\n\n\n
Modifier le texte dans Kopage<\/h2>\n\n\n\n
Vous pouvez remplacer les textes existants dans une zone de contenu par vos propres contenus \u00e0 l'aide des fonctions d'\u00e9dition de l'\u00e9diteur.<\/p>\n\n\n\n
En \u00e9crivant, tu dois veiller \u00e0 ce que les textes soient non seulement esth\u00e9tiques, mais aussi faciles \u00e0 comprendre et clairement structur\u00e9s.<\/p>\n\n\n\n
Les murs de texte longs sont particuli\u00e8rement fatigants \u00e0 lire sur les smartphones. C'est pourquoi il est judicieux de diviser les contenus plus importants en paragraphes et en intertitres.<\/p>\n\n\n\n
Utiliser correctement les titres<\/h2>\n\n\n\n
Les titres ne servent pas seulement \u00e0 la mise en page. Ils structurent le contenu d'une page.<\/p>\n\n\n\n
Le titre principal d\u00e9crit le th\u00e8me central de la page. Au-dessous, d'autres titres peuvent structurer des domaines th\u00e9matiques individuels.<\/p>\n\n\n\n
Une structure judicieuse pourrait par exemple ressembler \u00e0 ceci :<\/p>\n\n\n\n
Sujet principal de la page\n\u2502\n\u251c\u2500\u2500 Prestation 1\n\u2502\n\u251c\u2500\u2500 Prestation 2\n\u2502\n\u2514\u2500\u2500 Contact et informations compl\u00e9mentaires<\/code><\/pre>\n\n\n\nUtilisez par cons\u00e9quent les formats de titre pr\u00e9vus \u00e0 cet effet et non simplement un paragraphe normal avec une police tr\u00e8s grande ou en gras pour imiter un titre.<\/p>\n\n\n\n
\nImportant :<\/strong> Une structure de titres claire am\u00e9liore la lisibilit\u00e9 de votre site web et aide \u00e9galement les moteurs de recherche \u00e0 comprendre le contenu de la page.<\/p>\n<\/blockquote>\n\n\n\n
Formater le texte<\/h2>\n\n\n\n
Dans les textes, vous pouvez mettre en valeur des informations importantes gr\u00e2ce aux fonctions de mise en forme disponibles.<\/p>\n\n\n\n
Utilisez toutefois les mises en valeur avec parcimonie. Si presque une phrase sur deux est en gras, en grand ou mise en valeur d'une autre mani\u00e8re, la mise en valeur perd son effet.<\/p>\n\n\n\n
Pour les contenus normaux, la lisibilit\u00e9 devrait \u00eatre prioritaire.<\/p>\n\n\n\n
Surtout pour les textes plus longs, de courts paragraphes sont g\u00e9n\u00e9ralement plus agr\u00e9ables qu'un seul bloc de texte tr\u00e8s long.<\/p>\n\n\n\n
Utiliser des liens dans les textes<\/h2>\n\n\n\n
Les liens relient un contenu \u00e0 une autre page ou \u00e0 une destination externe.<\/p>\n\n\n\n
Un lien doit d\u00e9crire le plus clairement possible pour le visiteur o\u00f9 il m\u00e8ne.<\/p>\n\n\n\n
Par exemple, au lieu de simplement :<\/p>\n\n\n\n
Cliquez ici<\/code><\/p>\n\n\n\nest un texte de lien explicite tel que :<\/p>\n\n\n\n
Voir nos services<\/code><\/p>\n\n\n\nle plus utile.<\/p>\n\n\n\n
V\u00e9rifiez apr\u00e8s l'insertion d'un lien si la destination s'ouvre correctement et si les liens internes m\u00e8nent bien vers la page souhait\u00e9e de votre site Web.<\/p>\n\n\n\n
Remplacer les images dans un bloc de contenu<\/h2>\n\n\n\n
Si un bloc de contenu contient d\u00e9j\u00e0 une image d'exemple, vous pouvez la remplacer par votre propre image.<\/p>\n\n\n\n
Choisissez une image qui correspond au contenu de chaque section. Une image doit soutenir le texte et ne pas \u00eatre utilis\u00e9e simplement parce qu'un emplacement d'image est pr\u00e9vu \u00e0 cet endroit dans le mod\u00e8le.<\/p>\n\n\n\n
Si une image n'apporte pas de valeur ajout\u00e9e, un bloc de contenu plus simple sans image peut \u00eatre un meilleur choix.<\/p>\n\n\n\n
Faire attention \u00e0 la qualit\u00e9 de l'image<\/h2>\n\n\n\n
Les images doivent \u00eatre suffisamment nettes, mais ne pas avoir des dimensions de fichier inutilement grandes.<\/p>\n\n\n\n
De tr\u00e8s petites images peuvent para\u00eetre floues lorsqu'elles sont affich\u00e9es en plus grand. Inversement, les fichiers originaux t\u00e9l\u00e9charg\u00e9s directement depuis un appareil photo ou un smartphone g\u00e9n\u00e8rent souvent des volumes de donn\u00e9es inutilement importants.<\/p>\n\n\n\n
Pour un site web, vous devez donc pr\u00e9parer les images de mani\u00e8re \u00e0 ce qu'elles conviennent \u00e0 leur utilisation r\u00e9elle.<\/p>\n\n\n\n
\nConseil pratique :<\/strong> Une image qui n'est affich\u00e9e qu'\u00e0 environ 800 pixels de large sur votre site Web ne doit g\u00e9n\u00e9ralement pas \u00eatre int\u00e9gr\u00e9e sous forme de fichier original de plusieurs milliers de pixels de large.<\/p>\n<\/blockquote>\n\n\n\n
Prendre en compte le format d'image et le cadrage<\/h2>\n\n\n\n
Toutes les images ne conviennent pas \u00e0 tous les blocs de contenu.<\/p>\n\n\n\n
Par exemple, une photo de paysage au format paysage fonctionne diff\u00e9remment d'un portrait vertical ou d'une image de produit carr\u00e9e.<\/p>\n\n\n\n
Si un bloc de contenu est con\u00e7u pour un format d'image sp\u00e9cifique, une image source inadapt\u00e9e peut \u00eatre rogn\u00e9e de mani\u00e8re d\u00e9favorable.<\/p>\n\n\n\n
Par cons\u00e9quent, apr\u00e8s l'insertion, v\u00e9rifiez non seulement l'affichage sur ordinateur, mais aussi l'apparence de l'image sur les \u00e9crans de plus petite taille.<\/p>\n\n\n\n
R\u00e9utiliser des images et des fichiers<\/h2>\n\n\n\n
Kopage dispose de fonctionnalit\u00e9s pour la gestion des fichiers et des images t\u00e9l\u00e9charg\u00e9s.<\/p>\n\n\n\n
Cela permet de r\u00e9utiliser des m\u00e9dias d\u00e9j\u00e0 existants au lieu de t\u00e9l\u00e9charger plusieurs fois le m\u00eame fichier.<\/p>\n\n\n\n
C'est par exemple utile pour les logos, les photos d'\u00e9quipe ou les images qui sont n\u00e9cessaires \u00e0 plusieurs endroits sur votre site web.<\/p>\n\n\n\n
Nous abordons la gestion d'images plus d\u00e9taill\u00e9e, ainsi que les galeries photo et les diaporamas sous Cr\u00e9er des images, des galeries photo et des diaporamas dans Kopage<\/a>.<\/p>\n\n\n\n
Organiser les blocs de contenu<\/h2>\n\n\n\n
L'ordre des zones de contenu d\u00e9termine dans une large mesure la mani\u00e8re dont les visiteurs per\u00e7oivent une page.<\/p>\n\n\n\n
Un bon site guide le visiteur de mani\u00e8re logique \u00e0 travers le contenu.<\/p>\n\n\n\n
Pour une page de services, l'ordre pourrait par exemple \u00eatre le suivant :<\/p>\n\n\n\n
Qu'offrons-nous ?\n \u2193\n\u00c0 qui s'adresse cette prestation ?\n \u2193\nQuels en sont les avantages ?\n \u2193\nComment fonctionne la collaboration ?\n \u2193\nComment puis-je prendre contact ?<\/code><\/pre>\n\n\n\nSi vous constatez qu'une section fonctionne mieux \u00e0 un autre endroit, vous pouvez modifier l'agencement des zones de contenu en cons\u00e9quence.<\/p>\n\n\n\n
Ne pas utiliser trop de blocs de contenu<\/h2>\n\n\n\n
La possibilit\u00e9 d'utiliser de nombreux blocs de contenu diff\u00e9rents ne signifie pas que vous devriez en utiliser le plus possible.<\/p>\n\n\n\n
Chaque section doit avoir un objectif compr\u00e9hensible.<\/p>\n\n\n\n
Si plusieurs blocs cons\u00e9cutifs r\u00e9p\u00e8tent la m\u00eame affirmation, la page devient plus longue sans \u00eatre plus utile pour les visiteurs.<\/p>\n\n\n\n
Par ailleurs, nous appliquons exactement le m\u00eame principe dans cette base de connaissances : les contenus doivent \u00eatre complets, mais ne pas \u00eatre artificiellement gonfl\u00e9s.<\/p>\n\n\n\n
Conception uniforme des zones de contenu<\/h2>\n\n\n\n
M\u00eame si diff\u00e9rents blocs de contenu sont utilis\u00e9s, l'ensemble du site web doit donner une impression d'unit\u00e9.<\/p>\n\n\n\n
Veillez par cons\u00e9quent \u00e0 une utilisation coh\u00e9rente des couleurs, des polices, des espacements et des styles d'images.<\/p>\n\n\n\n
Si chaque section de contenu est con\u00e7ue de mani\u00e8re totalement diff\u00e9rente, m\u00eame un site Web techniquement bien construit peut para\u00eetre d\u00e9cousu.<\/p>\n\n\n\n
Nous traitons les param\u00e8tres de conception globaux sous Personnaliser le mod\u00e8le et le design Kopage : couleurs, polices, en-t\u00eate et pied de page<\/a>.<\/p>\n\n\n\n
Espacement entre les contenus<\/h2>\n\n\n\n
Un espace suffisant est un \u00e9l\u00e9ment important d'une bonne conception.<\/p>\n\n\n\n
Le texte, les titres, les images et les boutons ne doivent pas \u00eatre si proches les uns des autres que les diff\u00e9rents contenus sont \u00e0 peine perceptibles.<\/p>\n\n\n\n
\u00c0 l'inverse, des espaces trop importants peuvent faire en sorte que des contenus associ\u00e9s apparaissent visuellement s\u00e9par\u00e9s.<\/p>\n\n\n\n
\u00c9valuez donc toujours un bloc de contenu en lien avec les sections qui le pr\u00e9c\u00e8dent et le suivent.<\/p>\n\n\n\n
Boutons et appels \u00e0 l'action<\/h2>\n\n\n\n
Les blocs de contenu peuvent \u00e9galement inclure des \u00e9l\u00e9ments qui incitent les visiteurs \u00e0 effectuer une action sp\u00e9cifique.<\/p>\n\n\n\n
Un bouton doit d\u00e9crire aussi clairement que possible ce qui se passe apr\u00e8s qu'on a cliqu\u00e9 dessus.<\/p>\n\n\n\n
Les \u00e9tiquettes appropri\u00e9es d\u00e9pendent de l'objectif respectif, par exemple :<\/p>\n\n\n\n
Contactez-nous\nEn savoir plus\nPrendre rendez-vous\nVoir l'offre\nAller au formulaire de contact<\/code><\/pre>\n\n\n\n\u00c9vitez plusieurs boutons aux libell\u00e9s diff\u00e9rents qui m\u00e8nent tous \u00e0 la m\u00eame destination, \u00e0 moins qu'il n'y ait une raison valable de le faire.<\/p>\n\n\n\n
Quand ai-je besoin d'une application ou d'un module au lieu d'un bloc de contenu ?<\/h2>\n\n\n\n
Un bloc de contenu est principalement adapt\u00e9 \u00e0 la cr\u00e9ation et \u00e0 l'affichage de contenus de pages normaux.<\/p>\n\n\n\n
Si, en revanche, vous avez besoin d'une fonction sp\u00e9cifique, une application ou un module est utilis\u00e9 selon le cas d'utilisation.<\/p>\n\n\n\n
Un exemple simple :<\/p>\n\n\n\n
Titre + Texte + Image\n\u2192 Bloc de contenu\n\nFormulaire de contact\n\u2192 Fonction formulaire\n\nplusieurs images sous forme de galerie\n\u2192 Fonction galerie\n\nArticles de blog\n\u2192 Fonction blog<\/code><\/pre>\n\n\n\nNous abordons l'ensemble des diff\u00e9rentes fonctionnalit\u00e9s suppl\u00e9mentaires sous Utiliser les applications et les modules dans le constructeur de sites Web Kopage<\/a>.<\/p>\n\n\n\n
Bloc de contenu ou nouvelle page ?<\/h2>\n\n\n\n
Tout nouveau contenu n'a pas besoin de sa propre page.<\/p>\n\n\n\n
Si un sujet rel\u00e8ve directement du contenu de la page existante et ne n\u00e9cessite qu'une section suppl\u00e9mentaire, un autre bloc de contenu peut s'av\u00e9rer judicieux.<\/p>\n\n\n\n
S'il s'agit en revanche d'un sujet ind\u00e9pendant comportant des informations plus d\u00e9taill\u00e9es, une page s\u00e9par\u00e9e sera peut-\u00eatre plus claire.<\/p>\n\n\n\n
Par exemple, trois courtes prestations peuvent \u00eatre pr\u00e9sent\u00e9es sur une page commune. Si chaque prestation doit \u00eatre expliqu\u00e9e en d\u00e9tail, des sous-pages distinctes peuvent \u00eatre plus judicieuses.<\/p>\n\n\n\n
Blocs de contenu sur la page d'accueil<\/h2>\n\n\n\n
Sur la page d'accueil, vous ne devriez pas essayer de loger l'int\u00e9gralit\u00e9 des informations de tout votre site Web.<\/p>\n\n\n\n
La page d'accueil doit d'abord permettre aux visiteurs de comprendre en quoi consiste votre site web, quelles sont les offres ou informations importantes qui y figurent et comment acc\u00e9der aux sous-pages pertinentes.<\/p>\n\n\n\n
Les blocs de contenu sont tr\u00e8s pratiques pour organiser ces informations en sections clairement distinctes.<\/p>\n\n\n\n
Des informations d\u00e9taill\u00e9es peuvent ensuite figurer sur les sous-pages correspondantes.<\/p>\n\n\n\n
Contr\u00f4ler les contenus sur les smartphones<\/h2>\n\n\n\n
Les blocs de contenu sont con\u00e7us pour les sites web adaptatifs. N\u00e9anmoins, apr\u00e8s avoir apport\u00e9 des modifications importantes, tu devrais toujours v\u00e9rifier comment ton contenu s'affiche sur un smartphone.<\/p>\n\n\n\n
Les titres particuli\u00e8rement longs, les textes volumineux, certains cadrages d'images ou de nombreux \u00e9l\u00e9ments cons\u00e9cutifs peuvent produire un effet diff\u00e9rent sur un petit \u00e9cran que sur un \u00e9cran d'ordinateur de bureau.<\/p>\n\n\n\n
Nous traitons du contr\u00f4le mobile de mani\u00e8re plus approfondie sous Design adaptatif : Optimiser le site web Kopage pour smartphones et tablettes<\/a>.<\/p>\n\n\n\n
Structurer le contenu pour les moteurs de recherche<\/h2>\n\n\n\n
Les blocs de contenu sont avant tout un outil permettant de construire votre site. Pour les moteurs de recherche, ce qui importe toutefois, c'est le contenu que vous y publiez et la mani\u00e8re dont il est structur\u00e9.<\/p>\n\n\n\n
Utilisez des titres explicites, des textes compr\u00e9hensibles et des liens internes pertinents. R\u00e9digez du contenu pour vos visiteurs et r\u00e9pondez aux questions qu'ils se posent r\u00e9ellement sur votre sujet.<\/p>\n\n\n\n