Et si vous profitiez du calme plat de l'été pour donner un coup de neuf à votre site ? Pendant que les enfants planchent sur leur cahier de vacances, voici quelques pistes pour enjoliver vos pages. Ce billet est le résumé d'une conversation que nous avons eu avec un webmaster inscrit à la version BETA du support téléphonique. Nous aurions pu aussi l'intituler "Comment utiliser l'outil de création de page" ou "Réaliser de jolies pages qui s'adaptent à tous les supports" ! Découvrez comment créer des pages bien structurées, dynamiques et faciles à mettre à jour.
- Créer un site
- Blog sur la création de site
- Aide à la création de site
- Créer de belles pages, sans prise de tête
Quand vous ajoutez une page sur votre site, par défaut un éditeur visuel vous invite à ajouter du texte ou des images.
Automatiquement, quand vous voyez cet éditeur par défaut, vous pensez que cela fonctionne comme sur Word ou Writer. Cela y ressemble beaucoup, en effet ! Mais idéalement, il ne faut pas mettre tout votre contenu à la suite dans cet éditeur visuel. Préférez la création de page par blocs, et cela pour plusieurs raisons
Des pages bien structurées
Si vous créez des pages en mettant tout le contenu dans un seul éditeur visuel, vous aurez inévitablement un souci pour gérer la mise en page. Vous avez déjà remarqué qu'il est difficile de positionner une image à coté d'un paragraphe, ou un texte à coté d'une vidéo ? Après avoir enregistré la page, le rendu coté site n'est pas forcément le même que celui que vous avez dans le manager. C'est normal, le web ne fonctionne pas comme le logiciel Word. Pour vous aider à structurer vos pages, nous vous proposons un système de lignes et de colonnes, pratique par exemple pour mettre 3 images côte à côte ou un texte à coté d'une image.
Facile à mettre à jour
Si vos pages sont bien structurées, elles sont plus simples à mettre à jour. Au moment d'enregister, vous n'allez plus suer à grosses gouttes en vous demandant si votre site va ressembler à ce que vous espérez. Chaque élément à une place et la conserve, les images ne flotteront plus au dessus des paragraphes et ne déborderont plus sur les menus. Si vous avez trois images alignées, vous pourrez les modifier en un clic, ou tout simplement inverser des blocs en les plaçant à l'endroit de votre choix.
Des contenus qui s'adaptent à tous les supports
Il ne s'agit pas simplement d'appliquer un thème responsive pour que tout le contenu s'adapte correctement. Il faut faire attention aussi à la façon dont vous allez construire vos pages. Avec l'outil de création de page par blocs, en ajoutant des lignes et des colonnes, vous prenez peu de risque. Si un internaute arrive sur votre site avec une tablette, les cellules s'ajustent automatiquement. A un smartphone, les blocs passent les uns au dessus des autres, c'est prévu avec tous les thèmes responsive.
Des pages plus aérées, faciles à redimensionner!
Si vous appuyez sur la touche 'Entrée" ou "Espace" pour aérer votre contenu, vous risquez de tout décaler ! Sans vouloir paraître trop alarmiste, après quelques enregistrements, vous allez chambouler votre éditeur visuel et vos pages seront désorganisées. Utiliser des lignes et des colonnes, ça permet de conserver les mêmes marges entre vos blocs. Ajoutez du contenu sans vous soucier du résultat final ! Chaque ligne peut comporter jusque 6 colonnes, et vous pouvez les redimensionner à votre guise en pourcentage.
Des pages plus rapides à charger, donc mieux référencées ?
On peut dire ça en quelque sorte. Le contenu c'est vous, mais la structure et le code, c'est nous (e-monsite) ! Sans le savoir, en créant des lignes et des colonnes dans vos pages, vous allez créer des pages en DIV (maintenant vous le savez). Le fait d'utiliser ce système est beaucoup plus "propre" que de faire des tableaux, c'est aussi moins lourd en terme de code dans la page et c'est compatible W3C ! Notez que la vitesse de chargement d'un site est un facteur important pour le référencement, et elle dépend du poids des pages, mais aussi des serveurs de votre hébergeur et du code généré par le CMS. Pour ça, pas de souci vous pouvez compter sur les serveurs d'e-monsite, réputés comme étant ceux qui répondent le mieux (testé par websitetoolstester parmi de nombreux CMS).
Des pages personnalisables
Nous allons maintenant parler de l'apparence de vos pages. Attention, il n'est pas question de gérer le design dans chaque page mais plutôt d'utiliser des styles et des effets, en ajoutant des class sur les lignes et les colonnes. Cette option permet par exemple d'ajouter des effets de survol ou de surbrillance, comme dans l'exemple ci-dessous. Découvrirez comment ajouter des styles dans des pages. Pour les webmasters plus aguérris, vous pouvez aussi créer des class personnalisées.
Du contenu dynamique !
Chaque module sur votre site permet de présenter des contenus spécifiques. Pour diffuser de l'actualité par exemple, nous vous proposons un module Blog, qui permet d'afficher une listes d'articles, du plus récent au plus ancien. Chaque module dispose de widget, pour afficher les contenus de ces modules dans vos pages ou vos menus. Avec l'outil de création de page, vous pouvez ainsi imaginer afficher la liste des derniers billets du blog dans une page, ou les produits de votre boutique en promotion ou encore les vidéos les plus vues de votre galerie, un player MP3 etc... Des centaines de widgets peuvent être ajoutées dans vos pages et menus, et cela n'est possible qu'en utilisant les lignes et les colonnes.
Conclusion : vous allez tout simplement être plus efficace !
Que ce soit pour mettre à jour vos pages ou pour les créer, vous serez gagnant à utiliser ce système de lignes et de colonnes. Avec le webmaster du site http://www.slprovence.com/fr/, nous avons vu en quelques minutes que cela peut contribuer à améliorer nettement le rendu visuel d'une page, en peu de temps. Nous sommes à votre disposition en commentaire pour répondre à toutes vos interrogations à ce sujet.
Tout le contenu dans un seul éditeur visuel
Avec les lignes et les colonnes
Articles similaires

Les nouveautés de notre outil de création de pages web
Le mercredi, 10 juin 2020
Vous êtes au courant des dernières nouveautés de notre outil de création de pages web ? Nous avons modernisé notre éditeur de pages web pour configurer facilement les lignes et colonnes de vos pages web. De façon à disposer et personnaliser vos contenus comme vous le souhaitez, le plus simplement possible.
Nous avons ainsi repensé le design de notre éditeur de pages web, en simplifiant son affichage. Et ajouté de nouvelles fonctionnalités pour créer des pages web en toute simplicité. Vous disposez dorénavant de nouvelles options de ligne et colonnes pour personnaliser les contenus de vos pages web ou articles de blog.
Découvrez les nouveautés de notre outil de création de pages web pour améliorer l'apparence des pages et articles de blog de votre site Internet.