Gérer les Bordures et l'Esthétique des Pages sur e-monsite : Un Guide Complet

La présentation visuelle d'un site web est essentielle pour capter l'attention des visiteurs et faciliter la navigation. Sur e-monsite, vous disposez de nombreuses options pour ajouter des styles de design, notamment des bordures, des séparations et des effets de surbrillance, à vos colonnes et vos lignes, améliorant ainsi l'esthétique et la clarté de vos pages. Cet article vous guidera à travers les différentes méthodes pour personnaliser l'apparence de votre contenu, de la gestion des séparations à l'intégration de liens internes et externes, en passant par l'organisation de vos menus.

Introduction aux Styles de Design pour un Agencement Optimal

Pour améliorer la présentation de vos pages, e-monsite offre la possibilité d'ajouter des styles de design à vos colonnes et vos lignes. Initialement, vous pouviez déjà ajouter vos contenus sous forme de colonnes. Ces styles permettent de créer des séparations nettes et plus esthétiques entre vos colonnes, utilisant ainsi l'intégralité de l'espace disponible sur votre page de manière optimale. Cette approche contribue à une meilleure expérience utilisateur, en rendant le contenu plus structuré et agréable à consulter.

Séparations de Colonnes et de Lignes : Améliorer la Lisibilité

L'ajout de séparations entre les éléments de votre page est une méthode efficace pour en améliorer la lisibilité. E-monsite propose des styles prédéfinis pour créer des démarcations claires.

Appliquer une Séparation de Colonnes

Pour insérer une séparation entre vos colonnes, le processus est simple. Il suffit de cliquer sur le bouton "Style prédéfini" situé en bas de chaque ligne de l'éditeur visuel. Choisissez ensuite le style "Séparation de colonnes" dans la liste des options. Cette action permet de délimiter visuellement les blocs de contenu, rendant votre mise en page plus aérée et organisée.

Mettre en Place une Séparation de Ligne

Dans la même veine, vous pouvez appliquer une séparation de ligne pour structurer verticalement votre contenu. Pour cela, cliquez sur le bouton "Style prédéfini" en bas de l'éditeur visuel, puis sélectionnez le style "Séparation de ligne" via le sélecteur affiché en dessous du bouton. Comme vous pouvez le voir, la ligne de séparation s'affichera au-dessous de votre ligne, offrant une rupture visuelle distincte.

Mises en Valeur et Effets Visuels : Captiver l'Attention

Au-delà des simples séparations, e-monsite permet d'appliquer des effets visuels pour mettre en valeur des sections spécifiques de votre page.

Colonnes en Surbrillance : Accentuer le Contenu

Le style "Colonnes en surbrillance" permet d'appliquer une couleur de fond pour le contenu de vos colonnes. Vos contenus, widgets, photos et textes seront ainsi valorisés et délimités plus clairement. Pour ce faire, en bas de la ligne de votre éditeur visuel, cliquez sur le bouton "Style prédéfini" et sélectionnez à l'aide du sélecteur le style "Colonnes en surbrillance".

Lignes en Surbrillance : Une Mise en Évidence Globale

Le principe est le même que pour les colonnes, mais cette fois-ci, la surbrillance s'applique à l'intégralité de votre ligne, et ce, même si votre texte a été conçu en colonnes. Cette fonctionnalité vous offre la possibilité de diversifier le design de vos pages. Cliquez sur le bouton "Style prédéfini" au bas de la ligne de votre éditeur visuel pour accéder à cette option.

Effet de Survol sur les Colonnes : Interactivité Accrue

Pour rendre votre page plus interactive, vous pouvez ajouter un "Effet de survol sur les colonnes". Séléctionnez le style "Effet de survol sur les colonnes" grâce au sélecteur s'affichant en dessous du bouton "Apparence". Cela crée une réaction visuelle lorsque l'utilisateur passe sa souris sur une colonne, ajoutant une touche dynamique à votre design.

Lignes avec Effet "Montrer / Cacher" : Gérer l'Affichage du Contenu

Dans les styles prédéfinis, vous avez la possibilité de créer une ligne avec un effet "Montrer / Cacher". Cette fonctionnalité est particulièrement utile pour condenser l'information et permettre aux visiteurs de révéler du contenu supplémentaire uniquement s'ils le souhaitent, contribuant ainsi à une navigation plus fluide sur les pages longues.

Personnalisation des Couleurs et de l'Apparence Générale

Les couleurs et l'apparence des lignes en général sont définies automatiquement à partir des couleurs du thème que vous utilisez. Cependant, vous avez la possibilité de personnaliser certains aspects. Pour cela, rendez-vous dans "Configuration > Apparence > Personnaliser > Contenu". Choisissez ensuite la couleur de surbrillance et de survol dans le champ "Fond alternatif". Cela vous permet d'harmoniser l'esthétique de vos éléments avec la charte graphique de votre site.

L'Importance des Bordures et des Encadrés

Les bordures sont des éléments cruciaux dans le design web, car elles apportent une structure et une esthétique agréable. Elles permettent de délimiter clairement les éléments, améliorant ainsi la perception du contenu. Il est également possible d'ajouter un encadré de couleur autour d'un texte pour faire ressortir de l'information importante. Pour cela, il est conseillé de consulter le tutoriel "Ajouter une class Alert", qui explique comment mettre en place ce type de mise en forme.

Lors de la création d'éléments, que ce soit des formes, des boîtes ou d'autres composants web, la possibilité de définir des bordures (largeur et hauteur) est un atout majeur. La procédure est simple : sélectionnez l'élément, accédez au panneau des propriétés et cliquez sur les options des icônes. Vous pouvez également ajuster la largeur de la bordure et modifier son rayon pour obtenir des coins arrondis, offrant ainsi une touche de modernité à vos créations.

Il est important de noter la distinction entre une bordure et une ombre. La définition d'une bordure pour un élément repousse les autres sections de la page, tandis qu'une ombre se comporte comme une ombre portée qui encercle l'élément sans le déplacer. Cette différence est fondamentale pour comprendre l'impact de chaque style sur la mise en page globale.

Gestion du Contenu et de la Structure des Pages

Une bonne gestion du contenu implique également l'utilisation efficace des outils de structuration de page, tels que les lignes et les colonnes.

Optimisation de la Création de Contenu avec Blocs et Colonnes

Optimisez votre création de contenu en apprenant à créer et ajouter des blocs de contenu sur votre site. Économisez du temps en utilisant des lignes et des colonnes pour une intégration rapide. Ces éléments modulaires vous permettent de construire des mises en page complexes avec facilité, en organisant vos textes, images et widgets de manière cohérente.

Navigation et Liens : Faciliter l'Accès à l'Information

La navigation sur votre site est un aspect fondamental de l'expérience utilisateur. E-monsite offre des outils robustes pour gérer les liens et les menus.

Le Menu Horizontal : Texte et Liens

Le menu horizontal du haut est généralement situé juste en dessous du titre de votre site et au-dessus des contenus. Pour gérer votre menu horizontal, cliquez sur "Modifier" au niveau du menu horizontal. Sur la gauche, vous pouvez lire les titres des liens dans votre menu. Vous aurez la possibilité de modifier et supprimer un lien.

Ajouter des Liens au Menu : Interne, Externe et Ancre

Cliquez sur "Ajouter un lien au menu" pour explorer les différentes options :

• Ajouter un lien interne : Ce choix vous permet de créer un lien sur votre menu horizontal vers une page de votre site. C'est ce choix qui sera détaillé dans la partie suivante. Faire un lien interne consiste à ajouter un lien vers une page existante de votre site. Par exemple, si vous avez un site dont le sujet est le vin, vous allez pouvoir faire un lien directement vers la catégorie "Vin blanc" que vous avez créée. Puis un autre lien vers "Vin rouge", etc. Il s’agit des catégories de "pages" mais aussi des autres modules comme "blog" par exemple. Donc, si nous gardons le même exemple, vous pourriez ainsi faire un lien vers une page dédiée au vin de Bordeaux qui appartient à la catégorie "Vin rouge". Vous pourriez aussi faire un lien vers un billet bien spécifique du blog.
• Ajouter un lien externe : Cette option permet de créer un lien vers un autre site (par exemple le site d’un partenaire). La fenêtre va changer selon les choix que l'on fait. La première chose est le type de lien, comme c'est indiqué, un lien externe est un lien vers un autre site.
• Ajouter une ancre : Il est possible via cette option d'ajouter un lien vers une partie de la page. Les pages de plus en plus longues, voire les sites en "one-page", sont une tendance actuelle, où l'intégralité du contenu est présentée sur une seule page. Cependant, l'expérience utilisateur peut en pâtir : les visiteurs ne vont-ils pas se lasser de devoir "scroller" à l'infini sans pouvoir accéder rapidement aux différentes sections d'une page ? Utiliser une ancre signifie que vous allez ajouter un lien qui va permettre aux visiteurs de se rendre directement sur une partie précise de votre site web. Le fonctionnement des ancres est assez simple à comprendre : chaque section d'une page va être identifiée par un mot-clé qui sera repris dans le lien créé dans le menu et précédé du symbole "#".

Créer un Menu Déroulant

Vous pouvez créer un menu déroulant dans votre menu horizontal du haut. Cela permet d'organiser un grand nombre de liens de manière compacte, améliorant ainsi la clarté de votre navigation.

Gérer les Catégories et les Options d'Affichage

Les catégories sont les dossiers qui vont ensuite contenir vos pages. E-monsite n'est pas toujours très clair dans sa manière de nommer les choses, donc les catégories se gèrent depuis le menu "Page > Gérer les pages". Cette page sert à gérer les catégories mais aussi les pages.

• Bouton pour ajouter une page
• Bouton pour ajouter une catégorie
• Modification de l'affichage : vous pouvez choisir entre l'affichage en liste ou en forme d'icône. Seul l'affichage en liste vous permet d'avoir le détail des informations.
• Visualisation de l'arborescence de votre site
• Visualisation des informations des pages : dans la partie supérieure s'affichent également les catégories. Pour modifier un élément, vous devez au préalable cocher la case. Dans les actions, vous avez des fonctions de partage sur les réseaux sociaux. À droite d'action, une icône vous permet de modifier l'ordre des éléments en les faisant glisser.
• Récapitulatif du nombre de pages et catégories
• Bouton d'action : ici, on n'a que "modifier", mais c'est également là qu'apparaît le bouton pour supprimer.

Lors de la création d'une catégorie, plusieurs options influencent son affichage :

• Nom de la catégorie : le nom que vous lui donnez.
• Masquer la catégorie : si vous cochez, la catégorie n'apparaîtra pas dans la partie "Menu". L'intérêt de masquer une catégorie dans le menu latéral est d'éviter qu'un menu n'apparaisse à de multiples endroits, ce qui a tendance à perdre l'internaute. On va pouvoir ainsi décider de faire apparaître la catégorie dans le menu du haut. C'est aussi masquer une catégorie et la rendre accessible uniquement via un lien que vous pouvez mettre dans votre texte.
• Ajouter dans le menu vertical du site : si vous cochez, cela créera un menu en son nom.

Il est important de noter qu'autant pour le fait de masquer la catégorie on peut revenir en arrière quand on modifie la catégorie, autant on ne peut pas décocher le fait qu'il y ait un menu dans la partie latérale, ce qui représente une incohérence d'e-monsite. Cependant, pas de panique, vous pourrez toujours le supprimer via le menu "Configuration > Menu".

Placer ses Catégories dans la Navigation Haute

Après avoir créé nos catégories qui se sont placées dans la navigation latérale (si l'on n'a pas spécifié que l'on ne le voulait pas), le site crée automatiquement un menu déroulant quand on passe la souris sur la catégorie. Nous, ce que l'on veut, c'est que cela fasse cela, mais que ce soit dans la barre de navigation du haut. Pour l'exemple, nous allons utiliser une catégorie que nous avons cachée lors de la création. Vous connaissez déjà l'endroit : "Configuration > Menu", et ce qui nous intéresse est la navigation haute.

Changer l'Intitulé des Menus sur la Navigation Haute

Nous avons ajouté des modules qui sont allés directement s'installer sur la navigation horizontale, située en haut du site, à côté de l'habituelle "Page d'accueil". En y repensant, "Accueil" serait amplement suffisant, c'est d'ailleurs ce que nous allons faire en la renommant, et nous allons voir cela ensemble pour l'album photo !

Donc, au niveau du menu "Configuration > Menu", on arrive sur le visuel de votre site qui vous permet de voir comment sont agencées les parties. Cette fois-ci, ce qui nous intéresse, c'est le "Menu horizontal du haut".

Une fois que l'on a cliqué sur "Modifier", un écran s'affiche avec plusieurs options :

• Un lien direct pour ajouter un nouveau lien.
• Le nom de la page.
• Vous pouvez modifier l'ordre des liens en cliquant directement sur les flèches.
• Les boutons pour modifier ou supprimer.
• Mode avancé : pour modifier votre menu en saisissant directement du code en HTML. Si vous commencez, vous devrez continuer ainsi pour ajouter des menus par la suite.

Nous, ce qui nous intéresse, c'est de modifier, donc on clique sur le bouton ! Pour ce point, on ne va que modifier le titre, on verra le reste par la suite. Si vous essayez de taper du texte dans la partie "titre du lien", rien ne se passe. C'est parce que le champ est verrouillé, donc on clique sur le cadenas. Il faut préciser de ne pas re-cliquer sur le cadenas après avoir modifié le titre, sinon cela remet le titre automatique. À présent, vous pouvez le nommer comme vous le voulez ! Une fois que c'est fait, vous devez enregistrer ce que vous avez fait à chaque fenêtre : la fenêtre où vous avez changé le titre, la fenêtre où vous pouvez modifier le menu du haut, et la fenêtre où vous modifiez la structure du site.

Ajouter des Modules : Enrichir les Fonctionnalités du Site

E-monsite propose une série de modules prêts à l'emploi, dont une galerie d'images, des vidéos, un agenda, un livre d'or, etc. Nous allons voir comment ajouter ces modules et décider de l'endroit où ils apparaissent. La démarche est la même pour l'installation des différents modules, donc on va prendre l'exemple de la galerie.

Donc, dans le menu "Module > Gérer les modules", on a ici un aperçu de tous les modules. En haut, ceux qui sont installés. Vous pourrez ultérieurement les désinstaller en cliquant sur un lien qui apparaît en dessous. Ici, on ne le voit pas car "Page" est le module de base d'e-monsite et ne peut en aucun cas être supprimé. Ce qui nous intéresse le plus, ce sont les modules que l'on peut installer.

Nous allons cliquer au niveau de l'album photo sur "Activer". Une fois dans les options du module, il vous sera demandé de choisir l'endroit où vous voulez que les choses s'affichent.

1. On demande si on veut que le lien apparaisse au niveau de la barre de navigation haute.
2. On demande ce que l'on veut faire au niveau des widgets.

Il est important de savoir que les possibilités varient d'un module à l'autre ; prenez le temps de lire ce qui vous est proposé. Les widgets sont des fonctionnalités qui vont s'installer au niveau de la barre latérale ; elles permettent de montrer par exemple la dernière photo ou alors les catégories, etc.

Attention : une fois que vous avez décidé de mettre en place les widgets, vous ne pouvez pas les ajouter après coup. Vous devrez désactiver et ensuite à nouveau activer le module pour faire ces modifications. Donc, faites des essais de visualisation des widgets avant de mettre des choses dedans. Une fois que vous êtes sûr, vous pouvez cliquer sur "Activer". Procédez ainsi pour tous les modules qui vous intéressent. Ensuite, quand vous voudrez ajouter ou modifier ces éléments, vous les trouverez ici dans "Module".

Page et Mise en Forme du Texte : Créer un Contenu Attrayant

Voici un élément qui s'est agréablement amélioré sur e-monsite. Au niveau du menu, on est au même endroit que pour les catégories, et on clique sur le bouton "Ajouter une page".

Voici ce sur quoi on arrive, avec plusieurs options :

1. Le titre de la page tel qu'il apparaîtra au niveau de l'URL : ces termes sont importants pour le référencement sur les moteurs de recherche. Quand vous allez saisir du texte ici, cela va se mettre automatiquement dans la ligne du dessous ; mais vous pouvez changer après coup.
2. Le titre tel qu'il est affiché au niveau de la navigation.
3. La catégorie dans laquelle la page doit être rangée.
4. Un bouton pour rajouter une catégorie au cas où vous ne seriez pas satisfait de celles que vous avez créées et qu'il vous en manque une.
5. Ajouter un raccourci vers votre page depuis une autre catégorie sans pour autant que la page ne soient associées à cette dernière.
6. État de la page : publié ou non publié.
7. Le titre de la ligne : comprendre "ligne" au sens de section de votre page. Vous allez voir qu'on peut la structurer avec différentes sections qui auront leurs mises en page spécifiques.
8. La barre d'outils de l'éditeur visuel : elle apparaît lorsque vous cliquez dans la partie dédiée à la rédaction.
9. La partie réservée à la rédaction de votre contenu : par défaut, c'est une colonne pour contenir du texte.
10. Ajouter une colonne : cela va vous permettre de modifier la mise en page de votre section.
11. Ajouter une ligne : donc ajouter une section. Optez directement via les boutons sur le nombre de colonnes désirées.

Ce qu'ils appellent "ligne" est en fait une section, composée d'un titre (titre de section) et de contenu qui dépend de ce que vous mettez dans les colonnes. Pour que ce soit plus clair, une fois que l'on a cliqué sur "ajouter une colonne", une colonne apparaît, où l'on vous propose un choix de widgets pour composer votre colonne. Afin de modifier la dimension des colonnes, vous pouvez placer votre souris au niveau de la séparation. Vous pouvez changer d'avis en supprimant la colonne avec la croix, ou l'inverser en la passant d'un côté à l'autre avec les flèches, et pour finir, saisir à la main le pourcentage de l'espace occupé.

Vous pouvez ensuite créer une nouvelle section en utilisant "Ajouter une ligne" et en cliquant directement sur deux colonnes. Pour les widgets, vous pouvez choisir "Éditeur visuel" pour ajouter du texte.

Vous pourrez ensuite changer l'ordre de vos sections. En revanche, ce qui manque cruellement, c'est de visualiser le rendu. Donc, pas d'autre choix que de visualiser sur votre site et de modifier la page pour ajuster les dimensions des colonnes.

Outils Avancés et Intégration

Nicepage, à l'instar de WordPress page builder, offre différentes options de design et de page pour améliorer la conception de votre mise en page. Comme les plugins de champs personnalisés avancés des constructeurs de pages, vous pouvez ajouter l'effet d'ombre sur votre élément. Vous pouvez créer de nouveaux éléments à partir des éléments habituels en utilisant les options du menu. Les possibilités de design avancées de Nicepage sont encore étendues, vous offrant plus de flexibilité et de contrôle sur les mises en page de vos "Post Type" et vous donnant la liberté de créer du contenu personnalisé pour vous et vos clients. En utilisant le constructeur de pages, vous pouvez travailler avec les éléments "Post Type" et les recréer avec Nicepage en utilisant les options du site.

E-monsite et des solutions comme Nicepage offrent des possibilités vastes pour la création et la personnalisation de sites web, allant de la simple gestion de contenu à des options de design avancées pour les bordures, les mises en page en colonnes et les effets visuels. L'apprentissage de ces outils est essentiel pour créer des sites attrayants et fonctionnels.

tags: #ajouter #des #bordures #que #sur #une