SiteJet Builder : exploration de l’interface

Dans l’article intitulé “SiteJet Builder : Présentation“, nous vous indiquons que les fonctionnalités sont toutes disponibles au même endroit : le tableau de bord.

Pour revenir plus en détail sur le sujet, l’interface comporte 4 zones principales :

• à gauche, la barre latérale de contenu et la navigation,
• en haut, la barre de menu et le menu “Plus” (icône hambuger) avec un menu déroulant,
• au centre, l’éditeur WYSIWYG (ce que vous voyez est ce que vous obtenez) qui fera l’objet d’un article spécifique,
• en bas, le fil d’Arianne et l’accès à la zone de code (plus particulièrement réservée aux développeurs).

Ce sont ces 4 zones que nous allons explorer plus précisément dans cet article.

Navigation principale :

1. Barre de navigation (à gauche de l’écran) :

La première barre située à gauche de la navigation est verticale : elle comprend notamment le “menu hamburger” dont la composition sera détaillée dans la section suivante, ainsi que la navigation répertoriant les “éléments” (eux aussi traités dans une section spécifique).

2. Barre horizontale – 2 flèches sont matérialisées :

• La première flèche pointant vers la gauche sert à annuler une action (raccourci clavier : Ctrl + Z),
• La seconde flèche pointant vers la droite, au contraire, permet de rétablir une action qui aurait été malencontreusement annulée (raccourci clavier : Ctrl + Y).

Ensuite, figure une série de 3 icônes juste à droite des 2 flèches évoquées ci-dessus :

• La première icône a la forme d’un  “oeil” et permet de prévisualiser un site Web directement dans l’éditeur. Vous pouvez ainsi vérifier et tester les modifications que vous aurez réalisées avant de les enregistrer. Il est également possible d’effectuer cette prévisualisation depuis le navigateur dans un nouvel onglet. Pour cela, il suffit de sélectionner l’option “Ouvrir l’aperçu du site Web” :

• Le “Mode Présentation” permet de prévisualiser un site Web sur ordinateur, tablette, téléphone portable. Cette fonctionnalité est bien pratique quant il s’agit de vérifier le bon affichage d’un site Web sur tous les types d’écrans.

• L’option “Partager le lien de présentation” vous permet de partager le lien de prévisualisation avec la ou les personnes de votre choix :

• L’icône en forme de “cercle fléché” vous permet d’actualiser votre site en cours de création. Avant d’utiliser cette fonctionnalité, veillez à enregistrer votre travail afin de ne pas risquer de perdre vos dernières modifications.

• L’icône “disquette“, une fois actionnée, enregistre les dernières modifications effectuées sur un site Web :

• Au centre de la barre de navigation supérieure, 3 icônes matérialisent les différents affichages possibles selon les écrans (ordinateur, tablette et téléphone mobile). Vous pouvez ainsi vérifier que votre site Web s’affiche correctement sur chaque type d’écran et appliquer les corrections éventuellement nécessaires :

• Dans la section « Design » figurent tous les paramètres globaux du site liés à la mise en page, aux couleurs, aux polices de caractères, au design des boutons. Modifier les paramètres existants affectera l’ensemble du site permettant ainsi de garantir une cohérence de style et de design dans l’ensemble du site. Ces paramètres peuvent être personnalisés dans les panneaux de configuration des éléments et des préréglages :

• La section “Page” permet, quant à elle, de naviguer dans les pages et sous-pages créées. C’est également à partir de cette section que vous pouvez ajouter des pages, modifier des URL et les noms de ces dernières, ajouter des métadonnées, protéger le contenu d’une sous-page par mot de passe et choisir si les pages doivent être indexées ou non par les moteurs de recherche :

• La section “Navigateur” permet de vous repérer à l’intérieur d’une page sur laquelle vous êtes en train d’interagir. Par exemple, si vous souhaitez modifier le titre d’une page, celui-ci sera matérialisé en surbrillance. Un bon moyen de vérifier que vous modifiez le bon élément :

• La section “Plus” regroupe d’autres paramètres impactant l’ensemble du site tels que l’insertion d’un logo, la langue du site, les paramètres et l’analyse SEO (référencement naturel), les fichiers médias (photos, vidéos, etc.), l’importation de contenus, etc. :

Menu “Burger” :

Pour développer ce menu, il suffit de cliquer sur l’icône en forme de 3 petites barres horizontales située à gauche de l’écran :

De nouvelles caractéristiques s’affichent alors, que nous vous décrivons ci-dessous. En cliquant sur chacune de ces caractéristiques, vous obtiendrez le détail de chacune d’entre elles :

Sauvegardes : Sont répertoriées ici toutes les sauvegardes effectuées par vous-même ou de façon automatique par le système toutes les 5 à 10 minutes pendant une session active dans l’éditeur de site Web.

Préférences : Ici, vous pouvez configurer vos préférences d’utilisation de l’éditeur de site web. Vous pouvez par exemple modifier la langue de l’éditeur, choisir si les panneaux doivent se fermer lors de l’enregistrement du site ou si seule la page d’accueil ou toutes les sous-pages doivent être créées lors de l’ajout d’une nouvelle langue.

Partager et copier le site : Ici, vous pouvez exporter votre site web en format compressé (ZIP) vers un autre hébergement doté de la plateforme SiteJet Builder. Vous pouvez également copier votre site via un code généré via l’interface.

Changer de modèle : En cliquant sur ce lien, vous décidez de changer complètement de modèle graphique et remplacez celui que vous aviez initialement choisi d’utiliser.

Générer le site Web : à utiliser uniquement en dernier recours. En effet, actionner cette option écrasera définitivement ce que vous aurez déjà élaboré. Cela sera irrémédiablement perdu.

Aide : Dans cette section, vous pouvez trouver l’aide que vous recherchez.

Raccourcis : Utilisez les raccourcis intégrés pour gagner en efficacité lors de la création de votre site web. Vous pouvez utiliser des raccourcis courants comme Ctrl + C et Ctrl + V pour copier et coller des éléments, mais d’autres raccourcis sont également disponibles. Par exemple : par exemple, Ctrl + 2 permet d’ajouter un nouvel élément texte. Pour ouvrir la liste des raccourcis, vous pouvez également utiliser la combinaison de touches Ctrl + K. Sur Mac, ces raccourcis sont accessibles via les touches correspondantes.

Barre latérale de contenu

La barre latérale de contenu située à gauche est divisée en différentes catégories pour faciliter l’ajout de contenu à votre site web. Dans cette barre, figurent les éléments (composants individuels tels que titres, textes ou images) et les modèles (sections prédéfinies composées de différents éléments). Par exemple : accordéons, galeries d’images ou tableaux de prix. Les éléments sont représentés par des icônes et les modèles par des vignettes offrant un aperçu de la section.