Guide des atouts du site

Notes

Suivez les étapes 1 à 7, dans l'ordre, pour créer un thème adapté à vos besoins.

Assurez-vous que Hello Elementor est défini comme thème actif.

Vous devez désactiver les couleurs et polices par défaut d'Elementor. Dans le tableau de bord de l'administrateur, regardez sous Elementor - Paramètres - Général et assurez-vous que les deux éléments suivants sont désactivés Désactiver les couleurs par défaut et Désactiver les polices par défaut sont tous deux Vérifié, puis cliquez sur Enregistrer les modifications. En les désactivant, vous empêcherez également le chargement d'un fichier CSS redondant dans la partie frontale.

Cliquez sur [ dans le coin supérieur gauche, puis [ Paramètres du site ], [ Mise en page ]. Sous Paramètres de mise en page, trouvez l'option Mise en page par défaut et réglez-la sur Elementor Full Width. Une fois terminé, cliquez sur en bas à gauche.

1. Logo du site

Cliquez sur [ dans le coin supérieur gauche, puis [ Paramètres du site ], [ Identité du site ]. Sous "Logo du site", cliquez sur [ et téléchargez le logo de l'entreprise fourni. Une fois l'opération terminée, cliquez sur en bas à gauche, puis cliquez sur [ RETOUR À LA RÉDACTION dans la fenêtre contextuelle ou cliquez sur le bouton [ dans le coin supérieur droit des paramètres du site. L'image ci-dessous devrait maintenant afficher automatiquement le logo du site.

2. Favicon du site

Cliquez sur [ dans le coin supérieur gauche, puis [ Paramètres du site ], [ Identité du site ]. Sous "Favicon du site", cliquez sur [ et téléchargez le Favicon fourni. Une fois terminé, cliquez sur en bas à gauche, puis rafraîchissez la page. Le Favicon devrait maintenant s'afficher dans l'onglet du navigateur.

3. Couleurs globales

Cliquez sur [ dans le coin supérieur gauche, puis [ Paramètres du site ], [ Couleurs globales ]. Cliquez sur les cases de couleur à droite des codes de couleur HEX pour faire apparaître le sélecteur de couleurs. Vous pouvez modifier le code HEX ou la transparence. Vous pouvez également cliquer sur les noms comme "Default 3" pour les renommer. Veillez à supprimer toutes les couleurs personnalisées qui ne sont pas nécessaires. Une fois l'opération terminée, cliquez sur en bas à gauche. (Les cases ci-dessous afficheront tous les changements en temps réel, à l'exception des noms. Vous pouvez cliquer sur chaque case et l'étiqueter correctement si vous le souhaitez. Il n'est pas nécessaire de supprimer les cases ci-dessous si toutes les couleurs personnalisées ne sont pas utilisées).

Défaut 1

Défaut 2

Défaut 3

Défaut 4

Personnalisé 1

Personnalisé 2

Personnalisé 3

Personnalisé 4

Personnalisé 5

Personnalisé 6

Personnalisé 7

Personnalisé 8

4. Contexte

Cliquez sur [ dans le coin supérieur gauche, puis [ Paramètres du site ], [ Arrière-plan ] pour apporter des modifications. Les modifications s'affichent en temps réel sur cette page. Une fois les modifications terminées, cliquez sur en bas à gauche.

5. Typographie (par défaut)

Cliquez sur [ dans le coin supérieur gauche, puis [ Paramètres du site ], [ Typographie ] pour apporter des modifications. Les modifications s'affichent en temps réel sur cette page. Une fois les modifications terminées, cliquez sur en bas à gauche. (Tous les titres n'ont pas besoin d'être définis et peuvent être laissés par défaut. Si vous modifiez les styles de lien, sachez que cela peut perturber les menus, les boutons, etc. Veillez à définir les couleurs des liens en fonction des besoins dans tous les widgets concernés. En général, je ne modifie la couleur des liens que par colonne lors de la construction, en sélectionnant la colonne et en la définissant sous l'onglet Style).

Titre H1

Titre H2

Titre H3

H4 Intitulé

H5 Intitulé
H6 Intitulé

Lien couleur et type dans le texte.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

5.1 Typographie (Alt ou Dark BG)

Si nécessaire, après avoir ajusté les paramètres de typographie, utilisez le widget HTML ci-dessous pour créer des classes ALT. Sauvegardez les styles dans le code personnalisé d'Elementor appelé "Custom Styles" sous la ligne /*Custom Typography Styles*/. Assurez-vous d'ajouter "alt-h1", "alt-p", etc, comme nécessaire pour chaque widget sous Avancé - Classe de widgets au fur et à mesure que vous construisez des pages et des modèles.

Titre H1

Titre H2

Titre H3

H4 Intitulé

H5 Intitulé
H6 Intitulé

Lien alt couleur et type dans le texte.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

6. Bouton (par défaut)

Cliquez sur [ dans le coin supérieur gauche, puis [ Paramètres du site ], [ Boutons ] pour effectuer des modifications. Les modifications s'affichent en temps réel sur cette page. Une fois les modifications effectuées, cliquez sur en bas à gauche.

6.1 Bouton (Alt ou Dark BG)

Si nécessaire, après avoir ajusté les paramètres du bouton, utilisez le widget HTML ci-dessous pour créer des classes ALT. Sauvegardez les styles dans le code personnalisé d'Elementor appelé "Custom Styles" sous la ligne /*Custom Button Styles*/. Assurez-vous d'ajouter "alt-btn" à chaque widget de bouton sous Advanced - Class lorsque vous créez des pages et des modèles. Cela fonctionnera avec tous les Widgets Elementor qui ont un bouton, comme le Widget Formulaire par exemple.

7. Champs du formulaire

Cliquez sur [ dans le coin supérieur gauche, puis [ Paramètres du site ], [ Champs du formulaire ]. Les modifications apportées s'affichent en temps réel sur cette page. Une fois les modifications effectuées, cliquez sur en bas à gauche. (Veuillez noter que certains paramètres ne peuvent être modifiés pour chaque formulaire que dans le widget de formulaire lui-même).