Toutes les collections
Commencer avec EngagementHQ
Étape 9 : Comprendre l'éditeur d'apparence
Étape 9 : Comprendre l'éditeur d'apparence

La personnalisation de divers éléments de la page d'accueil, à l'aide de l'éditeur de page d'accueil

Yugandhar Gokhale avatar
Écrit par Yugandhar Gokhale
Mis à jour il y a plus d’une semaine

Dans la section « Apparence », l'Éditeur de page d'accueil est la deuxième partie (après Styles globaux), où vous pouvez personnaliser davantage l'aspect et la convivialité de votre site.

L'éditeur de page d'accueil se compose de deux parties, les Modèles et les Sections.

Les Modèles vous permettent de choisir un des six thèmes de conception par défaut, selon vos besoins. Les Sections se composent en outre de 4 autres parties par défaut. Examinons-les une par une.

Les Modèles

Cliquez sur le bouton Modèles, comme indiqué dans l'image ci-dessus. Vous verrez qu'un modèle a déjà été sélectionné par défaut. En dessous, vous verrez également le titre de ce modèle sous le texte « Modèle actuel », qui dans cet exemple est Bondi.

Cliquez sur le bouton « Modifier le modèle » pour voir les six modèles – Bondi, Whitehaven, Cottesloe, Burleigh, Côte d’Or et Crestview. Ici, si vous aimez le modèle Bondi et si vous cliquez dessus, vous serez ramené à la section précédente des modèles et vous verrez que le modèle actuel est maintenant Bondi.

Cliquez ici pour en savoir plus sur les différents modèles disponibles.

Les Sections

Dans la partie Sections, il y a 4 éléments par défaut pour le modèle Whitehaven. Le nombre et les types de sections sélectionnées par défaut, changeront en fonction du modèle sélectionné. Parmi ces quatre sections, l'En-Tête et le Pied de Page sont permanents, pour tout modèle. Ils ne peuvent pas être supprimés.

Comme vous pouvez le voir, il y a deux sections entre les deux, toutes deux intitulées « Projets ». Ces deux sections qui apparaissent par défaut, ainsi que toutes les autres sections que vous pourriez ajouter ici, peuvent être supprimées.

L'En-Tête

La première des sections est l'En-tête. Cet onglet propose trois paramètres principaux. Le logo, les couleurs et la barre de navigation.

Comme son nom l'indique, l'onglet Logo vous permet d'ajouter un logo à votre site. Il vous suffit de cliquer sur « Mise à jour », pour choisir une image pour votre logo. La partie située sous le paramètre Logo vous permet de personnaliser le texte des liens pour se connecter et pour s’inscrire.

L'onglet Couleur vous permet de sélectionner la couleur du fond et du texte de la barre de navigation.

Enfin, en cliquant sur l'icône des liens, vous ouvrirez la section Liens de navigation. En cliquant sur le bouton Modifier les liens, vous ouvrirez la page qui vous permet de définir ce qui suit.

  • En-tête : Les liens de navigation, qui apparaîtront dans l'en-tête du site.

  • Fil d’Ariane : Qui vous permettent de définir une hiérarchie parents-enfants des pages de votre projet.

  • Pied de page : Les liens de navigation qui apparaîtront dans la zone de bas de page.

Pour modifier l’hyperlien, cliquez sur le stylo.

3. Entrez un titre dans la boîte Titre personnalisé (sous Entête), puis indiquez l’URL dans l’espace prévu à cette fin et choisissez le lien du menu parent dans le menu déroulant. Cliquez sur Enregistrer.

4. Pour créer un nouveau lien dans le menu d’entête, cliquez sur le bouton Ajouter un lien au menu.

L’onglet d’ajout s’affiche alors. Vous pouvez choisir le type de liens que vous souhaitez ajouter. Les différentes options sont décrites ci-dessous.

  • Projet – Lien pointant directement à la page d’un projet. Il suffit de choisir votre projet et son titre (il apparaîtra dans le menu déroulant) pour créer un nouveau lien.

Une fois la sauvegarde effectuée, le lien sera listé sous Entête, comme le montre l’exemple ci-dessous.

  • Tous les projets — Fournir un lien vers une page contenant tous les projets. Si vous n'avez pas mis en place votre page « tous les projets », lisez l'article Utiliser la page « tous les projets » pour présenter l'historique de votre projet.

  • Page statique — Lien vers une page que vous créez. Pour en savoir plus sur la configuration d’une page statique, voir l’article de pages statiques.

  • Lien externe — Lien pointant vers des ressources qui se trouvent sur un autre site Web, par exemple celui de votre organisation ou un site de référence.

  • Page d’accueil — Lien qui permet de revenir à la page d’accueil de votre site. Pour en savoir plus sur la page d’accueil de votre site, lire cet article sur l’éditeur de page d’accueil.

  • Portail — Un lien vers la page d'accueil de votre portail vous permettra de présenter les projets sur un portail. Lisez l'article sur la configuration de la page d'accueil de votre portail pour comprendre comment créer une page d'accueil de portail.

  • Parent — Pour créer un lien parent, il suffit de sélectionner le symbole « / » dans la liste déroulante « Nid sous le lien parent » et de s'assurer de sélectionner un lien externe avec le symbole # comme URL.

Vous pouvez également ajouter des sous-éléments à un lien parent existant. Vous devez les ajouter en tant que nouveaux liens en choisissant le lien parent correct.

À noter, ce type de lien n’a pas d’URL. Après sa sauvegarde, il apparaît dans le menu du site, comme on peut le voir ci-dessous.

5. Sélectionnez l'onglet Fil d'Ariane pour définir la hiérarchie des projets parents et enfants. Pour ce faire, sélectionnez, faites glisser et déposez les projets enfants sous les projets parents. Veuillez noter que seuls les projets publiés seront affichés ici.

6. Cliquez sur l’onglet Pied de page. Les liens listés apparaissent dans le pied (section inférieure) de votre site.

Vous pouvez sélectionner le type de lien, les détails à afficher sur votre page et les titres qui seront affichés.

Vous pouvez supprimer l’un ou l’autre de ces liens au moyen du bouton « Supprimer » qui se trouve à côté.

7. Ajoutez des liens au moyen du bouton Ajouter un lien et créez une nouvelle page au moyen du bouton Créer une page statique (voir l’article sur ce sujet).

Remarque : Pour prévisualiser l’entête ou le pied de votre site, vous pouvez à n’importe quel moment choisir votre projet dans la liste de projets et cliquer Prévisualiser ou simplement consulter la page d'accueil.

Vous pouvez également ajouter Google Translate dans l'en-tête de votre site via la Place du marché et choisir de l'aligner soit à gauche, soit à droite.

Note : Veuillez noter que seuls les projets publiés et les projets qui ne sont pas déjà regroupés dans un hub seront affichés ici.

Le Project

C'est la deuxième section (dans le contexte du modèle Whitehaven) qui vous permet de configurer les détails du projet sur la page d'accueil, tels que le Contenu, la Couleur, la Police et la Disposition. Cette section comporte quatre icônes, chacune correspondant aux caractéristiques mentionnées ci-dessus.

Contenu : Cet onglet vous montre les paramètres d'apparence de la carte de projet et le contenu qu'elle affiche, comme le nom du projet source, l'image du projet, le titre du projet, le permalien et la description du projet. Vous trouverez également des icônes pour ajouter d'autres projets.

Couleur : Dans l'onglet couleur, vous pouvez changer les couleurs des différents éléments de la page, comme le montre l'image ci-dessous.

Font : La section des polices vous permet de définir différents styles de police pour les titres et le corps du texte. Vous pouvez également modifier la taille de la police des différentes parties du texte.

Disposition : La disposition vous permet de choisir différents styles de mise en page pour votre page.

À tout moment, vous pouvez cliquer sur le signe +, qui indique Ajouter une section, pour ajouter l'un des divers choix de sections disponibles. Cliquez ici pour en savoir plus sur les sections.

Ajout de widgets

Cette interface vous permet d'ajouter une variété de widgets à votre page d'accueil. À titre d'exemple, nous pouvons voir comment le widget Dates clés peut être ajouté. Il suffit de cliquer sur le signe + qui indique Ajouter une section.

Sur la page qui s'ouvre, faites défiler le bas de la page pour trouver le widget Dates clés par exemple. Cliquez sur le lien Dates clés pour choisir une mise en page.

Une fois que vous avez sélectionné la mise en page, vous revenez à l'écran précédent, où vous voyez la section du widget ajouté (à droite) et ses paramètres ouverts (à gauche).

Sur cette page, dans la section de gauche, vous verrez et pourrez modifier les éléments suivants.

  • Titre de la section

  • Icône pour le widget

  • Type d'événement : Événement d'un jour ou de plusieurs jours

  • Date de début

  • Le nom de l'événement

  • Description de l'événement - Ajout d'un lien vers le texte de l'événement par hyperlien

Les modifications que vous effectuez sur cette page dans la section des paramètres s'affichent immédiatement sur le côté droit. Vous pouvez effectuer des réglages spécifiques pour des instances individuelles de dates clés, en cliquant sur les onglets 1, 2 et 3 (mis en évidence dans l'image ci-dessous).

D'autres dates clés peuvent être ajoutées en cliquant sur le signe rond bleu + à droite. L'icône du widget peut également être modifiée en cliquant sur Modifier l'image.

En haut, vous verrez trois autres onglets.

  1. Couleur : pour modifier les couleurs du titre, du texte, de l'arrière-plan de la section et de l'arrière-plan de la zone du widget (comme indiqué ci-dessous)

2. Polices : Pour modifier la police et le style de police du titre, du sous-titre et du contenu.

3. Disposition : Pour sélectionner une mise en page appropriée pour le widget

De cette façon, vous pouvez ajouter n'importe quel widget à partir de la page Sections. Tous les widgets auront le même modèle d'onglet, le premier pour les paramètres spécifiques du widget et trois autres onglets pour la couleur, la police et la mise en page.

Cliquez ici pour en savoir plus sur les sections.

Pied de la page

Enfin, au bas de la page, vous trouverez la section Pied de page. Cette section comporte également trois onglets. Le premier onglet vous permet d'ajouter des liens pour Facebook, Twitter, Google, Instagram, Linked In et YouTube. L'icône de média social du pied de page sera liée à l'URL ajoutée dans le panneau de gauche.

Les deux autres onglets, Couleur et Liens, fonctionnent exactement de la même manière que dans l'en-tête.

Contactez notre équipe d'assistance si vous avez besoin d'une aide supplémentaire via le chat ou le courriel support@engagementhq.com.

Avez-vous trouvé la réponse à votre question ?