Documentation

Pour le site : G'Eco Habitat

Si vous avez des question, n'hésitez pas à nous envoyer directement un mail ou à nous contacter par téléphone.
Mail : hugo@square-com.fr Tél : 06.25.14.14.01

Connexion

Suivez les étapes ci-dessous pour vous connecter à votre espace :

1. Dans un premier temps, veuillez vous rendre sur la page de connexion afin d'accèder au formulaire de connexion.
2. Une fois connecté, vous êtes sur l'écran d'administration principal également appelé Tableau de bord.
3. Pour avoir un aperçu du site, en haut de l'écran se trouve la zone appelée barre d'outils. Il suffit de cliquer sur le nom de votre site afin d'y accéder.

Présentation

Cette section vous explique en détails le fonctionnement de chaque rubrique présente sur votre tableau de bord :

1. Médias : Depuis cette section, il est possible d'ajouter des photos, des vidéos, les filtrer et les classer. En un coup d'oeil, on peut voir les photos publiées
2. Pages : C'est dans cette partie que vous allez retrouver l'ensemble des pages que compose votre site. Vous allez pouvoir les modifier rapidement à l'aide de l'element Elementor
3. Dernières réalisations : Cette rubrique regroupe les différents projets que vous avez réalisé. Renseignez les différentes informations concernant un projet dans cette section afin de le voir visible sur le site.

Les autres rubriques permettent le bon fonctionnement du site. Il n'est pas nécessaire de modifier les réglages configurés.

Elementor c'est quoi ?

Avant d’aller plus loin dans la conception de votre site, je vous propose de comprendre comment Elementor fonctionne…

Conception

Créer une mise en page en partant de zéro est un bon exercice pour comprendre comment ça marche.

Le principe : vous ajoutez des sections dans lesquelles vous ajoutez des widgets.

Le reste dépendra de votre créativité et de l’utilisation que vous ferez des options proposées par Elementor.

Voici les étapes :

1. Commencez par cliquer sur l’icône “+” pour ajouter une nouvelle section.
2. Définissez la structure de votre section. C'est le nombre de colonnes : de 1 à 6 colonnes.
3. Cette section va venir se positionner en haut de la page (si aucune autre est présente pour l'instant) ou à la suite des sections déjà présentes.

Vous pourrez commencer à personnaliser le design de cette section grâce aux options disponibles :

1. Sélectionnez la section que vous souhaitez éditer. Elle “s’éclairera en bleu”.
2. Pour être sûr d’agir sur le bon élément, vérifiez le titre du personnaliseur. Pour cet exemple, il y a bien inscrit “Modifier Section”. La section se personnalise en 3 temps :
3. L’onglet Mise en Page : vous trouverez ici des options pour personnaliser le positionnement de la section au sein de votre page.
4. L’onglet Style : vous trouverez ici toutes les options qui touchent au design.
5. L’onglet Avancé : vous trouverez ici des options pour aller plus loin comme la personnalisation des marges, l’ajout d’animation, l’ajout de CSS personnalisé etc.

La gestion des widgets

1. Au sein d’une section, cliquez sur l’icône “+”
2. Le personnaliseur de gauche va vous proposer une liste de modules disponibles depuis l’onglet Eléments.
3. Sélectionnez un widget et glissez-le au sein d’une section.

Une fois que vous aurez inséré votre widget au sein d’une section, le personnaliseur de gauche s’ouvrira afin que vous puissiez paramétrer le module :

1. Sélectionnez le module à paramétrer.
2. Vérifiez le titre du personnaliseur afin d’être sûr d’agir sur le bon élément.
3. Comme pour la section, le personnaliseur est découpé en 3 onglets : Contenu, Style et Avancé.
4. Commencez vos personnalisations.

NoteChaque widget proposera des options différentes.

La gestion du responsive

Le côté responsive de votre page correspond à l'aspect que votre site va avoir sur les différents types d'écrans (ordinateur, tablette, smartphone)

1. En bas à gauche de votre écran, vous verrez une petite “icône d’ordinateur”. Si vous cliquez dessus, vous accèderez à 3 types de vues : Ordinateur, Tablette, Mobile.
2. La vue “Ordinateur” est la vue par défaut,
3. La vue tablette vous permet de voir comment se comporte votre mise en page en version tablette,
4. La vue Mobile vous donne un aperçu de votre layout en version téléphone portable.
5. Pour chaque module (widget) que vous éditez, vous pourrez ouvrir l’onglet Avancé et trouver une option intéressante :
6. Vous pourrez décider de faire apparaître, ou non, ce module sur les différents devices. Par exemple, un bouton d’appel téléphonique pourrait être masqué sur les ordinateurs et les tablettes et ainsi apparaître seulement sur les mobiles.

Modifier une page existante

Cette rubrique va vous permettre de faire des modifications sur des pages existantes.
Note : La démarche est identique qu'importe la page.

Un texte/titre

1. Se rendre dans sur la page ou on souhaite faire une modification. Modifier cette page à l'aide d'Elementor.
2. Cliquer sur le texte/titre que l'on souhaite modifier.
3. Dans le menu à gauche, modifiez le mot dans la partie Titre ou Éditeur de texte

Couleur

Il est possible d'ajouter de la couleur à un texte mais aussi à un arrière plan.

Couleur de texte

1. Toujours à l'aide d'Elementor cliquer sur le texte/titre que l'on souhaite styliser.
2. Dans le menu à gauche, cliquer sur la rubrique Style.
3. Modifier la couleur du texte/titre.

Couleur d'arrière plan

1. Cette fois-ci, il faut sélectionner la colonne en question à l'aide de l'icone qui se situe en haut à gauche sur votre interface.
2. Pour s'assurer qu'on modifier la colonne, le titre du menu qui se trouve à gauche doit s'intituler Modifier Colonne.
3. De la même manière que pour un texte, se rendre dans la rubrique Style.
4. Modifier la couleur de l'arrière plan.

Typographie

Cela concerne la taille de la police, sa police d'écriture, sa graisse ect...

1. Sélectionner le titre/texte à modifier.
2. Se rendre dans le menu Style.
3. Cliquer sur l'icone crayon en face de Typographie.
4. Modifier la police comme vous le souhaitez.

Images

1. Pour modifier une image existante, cliquer sur l'image en question à l'aide d'Elementor.
2. Dans le menu à gauche, modifier l'image dans l'onglet Choisir une image.

Les dernières réalisations

Ce système a été conçu par nos soins pour vous permettre de publier facilement vos derniers projets. Grâce à ce module, pas besoin de s'occuper de designer la page qui présentera le projet tout se fait automatiquement.

Pour chaque création de projet il faut :

1. Sélectionner la catégorie qui convient.
2. Ajouter une galerie d'image si nécessaire.
3. Ajouter un descriptif du projet réalisé.

1. Sélectionner la catégorie qui convient.