Documentation Hestia Pro

Installez et configurez votre nouveau thème

Après avoir acheté un plan, récupérez votre thème dans l’historique des achats. Si vous avez besoin d’instructions détaillées, vous pouvez trouver ici Comment activer la version premium de Hestia.

Plugins requis

Vous devez installer les plugins suivants pour activer diverses fonctionnalités du thème:

• Jetpack: ajoute une section Portfolio à votre site.
• WooCommerce: ajoute une page Boutique à votre site.

• WPForms Lite: WPForms vous permet de créer de magnifiques formulaires de contact, des formulaires d’abonnement, des formulaires de paiement et d’autres types de formulaires pour votre site en quelques minutes, et non en quelques heures!

Tailles d’image recommandées

• Glissière – 1920px × 1080px
• Logo – 150 px x 100 px
• Entête – 1920px x1080px
• Vignettes du blog – 360 px x 240 px

Configuration de la page d’accueil et du blog

Pour configurer la page d’accueil et le blog avec Hestia, vous devez créer de nouvelles pages dans votre tableau de bord WordPress. Le premier sera une page nommée “Accueil” (ou un autre nom par choix). La seconde sera une page de blog, qui n’aura besoin que d’un titre de page.

Après avoir créé les pages susmentionnées, vous devez accéder à Apparence> Personnaliser> Paramètres de la page d’accueil

et choisissez “Une page statique“option dans Page d’accueil

afficher champ. Sélectionnez les pages appropriées et enregistrez les paramètres. Maintenant, visitez votre site Web pour voir la magie en direct. En outre, le modèle de page par défaut affiche toujours la page d’accueil lorsque vous le définissez comme votre page d’accueil statique.

Paramètres d’apparence

réglages généraux

• Désactiver les sections de la première page – Utilisez-vous Hestia Pro pour votre blog? Vous n’avez pas besoin de la page d’accueil personnalisée? Cochez simplement cette option pour désactiver complètement la page d’accueil, afin de pouvoir facilement travailler sur votre site.
• Disposition en boîte?: Il est activé par défaut. S’il est activé, le thème utilisera une disposition encadrée, sinon utilisera une disposition pleine largeur.
• Disposition de la barre latérale de la page – Cette option contrôle la position de la barre latérale sur les pages internes (pages de modèle par défaut et page de boutique WooCommerce). Il peut être soit pleine largeur, barre latérale gauche ou barre latérale droite.
• Disposition de la barre latérale du blog – Cette option contrôle la position de la barre latérale sur les pages liées au blog (blog, archives et pages de messages uniques). Il peut être soit pleine largeur, barre latérale gauche ou barre latérale droite.

Ce sont des contrôles généraux, ce qui signifie qu’ils s’appliquent à toutes les pages. Si vous souhaitez qu’une page / publication spécifique ait une mise en page différente, vous pouvez la choisir sur chaque page / publication individuelle dans la métabox Paramètres Hestia Pro.

• Largeur de la barre latérale – Option pour contrôler la largeur (en pixels) de la barre latérale.
• Largeur du conteneur – Option pour contrôler la largeur (en pixels) de toutes les pages du site.

En ajustant les curseurs, vous pouvez augmenter ou diminuer la largeur des conteneurs selon vos préférences.

• Activer les icônes de partage – Choisissez d’activer ou de désactiver les options de partage sur les pages de publication unique. Les options sont Facebook, Twitter et e-mail.
• Activer le défilement vers le haut – Choisissez d’activer ou de désactiver l’option pour ajouter un bouton de défilement vers le haut au bas de chaque page, ce qui permet à l’utilisateur de revenir facilement en haut de la page.

Typographie

Si les polices par défaut ne répondent pas à vos besoins, vous pouvez les modifier facilement depuis Customizer -> Paramètres d’apparence -> Typographie. Le thème propose un grand nombre de belles polices parmi lesquelles vous pouvez choisir.

Image de fond

Il est temps de sélectionner l’arrière-plan de votre site Web. Il n’apparaîtra sur la page d’accueil que si le Disposition en boîte est autorisé. Une fois que vous sélectionnez l’image d’arrière-plan, vous obtenez un ensemble de paramètres supplémentaires pour l’adapter à votre goût.

Paramètres des boutons

Sections de la première page

Les sections de la première page sont celles qui distinguent Hestia Pro des autres thèmes de conception de matériaux. Vous pouvez personnaliser à peu près tout sur la première page, et voici comment:

Commande de section

Nous avons utilisé de nombreuses mises en page pour les commandes de sections dans le passé, mais cette fois-ci, nous avons tout fait et rendu le WordPress Customizer triable, ce qui est l’une des choses les plus impressionnantes que vous trouverez dans Hestia Pro. Vous pouvez faire glisser et déposer des sections pour les organiser comme vous le souhaitez.

Section du grand titre

Pour ajouter un curseur sur la page d’accueil, vous devez aller sur Apparence> Personnaliser> Sections Frontpage> Section Big Title et ajoutez autant de diapositives que vous le souhaitez. Sur chaque diapositive, vous pouvez ajouter une image d’arrière-plan et le contenu souhaité (copie).

Options supplémentaires pour la section Big Title:

Effet de parallaxe avec deux couches d’images. Sélectionnez une image comme Première couche et un comme Deuxième couche pour permettre un effet de parallaxe entre les deux images. Assurez-vous que l’une des images comporte des parties transparentes pour pouvoir voir l’effet de parallaxe complet.

En-tête vidéo: Vous avez la possibilité de télécharger une vidéo ou d’entrer un lien Youtube ici.

Remarque: Sur les écrans plus petits, l’image de secours (Image d’en-tête) s’affichera à la place de la vidéo. (pour garder à l’esprit la bande passante)

Choisir la disposition de la section Big Title, alignée à gauche, au centre ou à droite.

Section Caractéristiques

Dans la section des fonctionnalités, vous pouvez présenter un nombre illimité de fonctionnalités ou de services sous la forme d’une boîte répétitive, contenant une icône avec une couleur de votre choix, un en-tête et le texte principal.

Utilisez la page d’accueil personnalisée de Hestia avec n’importe quel générateur de page

Afin de pouvoir modifier la page d’accueil personnalisée de Hestia avec Elementor ou tout autre constructeur de page, assurez-vous d’avoir À propos de l’activation de la section. Ceci est requis, car sinon, cela provoquera cette erreur: “Désolé, la zone de contenu est introuvable sur votre page. Vous devez appeler la fonction de contenu dans le modèle actuel, pour qu’Elementor fonctionne sur cette page.“

À propos de la section

Réglages:

• Désactiver la section – Option pour désactiver la section. (Cette option est également synchronisée avec l’option Activer / Désactiver mentionnée précédemment.)
• À propos du contenu – Contenu principal de la section À propos. Le contrôle prend en charge le texte, les éléments HTML et les pièces jointes multimédias.
• À propos du contexte – Image d’arrière-plan de la section À propos.

Remarque: Le contrôle À propos du contenu est synchronisé avec la page configurée comme Frontpage. Cela signifie que le contrôle sera également mis à jour si cette page subit des modifications de contenu.

Section Boutique

La section Boutique de la page d’accueil a été conçue pour présenter vos meilleurs produits. Pour que cette section fonctionne, vous devez installer le plugin WooCommerce, puis ajouter les produits.

Section Portfolio

Hestia Pro est livré avec une section Portfolio sur la page d’accueil. Pour que cette section fonctionne, vous devez installer le plugin Jetpack, activer le type de publication personnalisé du portefeuille et créer votre propre portefeuille.

Après avoir activé le plugin Jetpack, vous pouvez trouver le Portefeuille type de publication personnalisé dans le tableau de bord de votre site, à partir duquel vous pouvez également ajouter du contenu à cette section. Vous devez ajouter une image en vedette pour faire apparaître l’élément du portfolio sur la première page.

Deux options de mise en page sont disponibles pour la section portfolio. Vous pouvez choisir votre préféré via le personnalisateur sous Paramètres de la page d’accueil> Portfolio> Activer les grandes cases. Vous devez avoir au moins 4 ou 5 éléments de portfolio affichés sur la première page pour pouvoir utiliser la disposition des grandes cases.

Il existe également un Ouvrir dans Lightbox option disponible pour la section portfolio. Lorsqu’il est activé, cela ouvrira chacun des portefeuilles dans une lightbox, contrairement au comportement normal où la page de portefeuille unique est ouverte.

Section d’équipe

Avec Hestia Pro, vous pouvez présenter les membres de votre équipe sur la page d’accueil du site, en utilisant la section Équipe. Ici, vous pouvez ajouter des détails sur chaque membre de l’équipe, tels que l’image, le nom, la position dans l’entreprise et les liens sociaux.

Section des prix

Hestia Pro est livré avec un bel ensemble de tableaux de prix. Il vous permet d’ajouter des options illimitées à vos tables en les séparant par un \ n, comme le montre l’image ci-dessus.

NOUVELLE FONCTIONNALITÉ: Pour chaque tableau de prix, vous avez maintenant la possibilité d’ajouter également une icône géniale.

Section du ruban

Réglages:

• Désactiver la section – Option pour désactiver la section. (Cette option est également synchronisée avec l’option Activer / Désactiver mentionnée précédemment.)
• Image de fond – Image de fond pour la section du ruban.
• Texte – Texte du contenu principal de la section du ruban.
• Texte du bouton – Étiquette de bouton pour la section du ruban.
• Lien – Lien de bouton pour la section du ruban.

Section Témoignages

Avec un site Web aussi attrayant, vos clients auront sûrement de belles choses à vous dire. Vous pouvez magnifiquement afficher leurs mots dans votre section Témoignages via Apparence> Personnaliser> Sections de la page d’accueil> Témoignages.

Section d’abonnement

Hestia Pro est livré avec une section S’abonner sur la page d’accueil. Pour que cette section fonctionne, vous devez installer le plugin SendinBlue, accédez à Sendinblue> Accueil et suivez la documentation sur cette page. Tout d’abord, vous devez créer un compte SendinBlue. Si vous avez déjà un compte, vous devez vous connecter avec votre clé d’accès. La clé d’accès se trouve dans votre compte.

Par défaut, le widget d’abonnement ressemble à l’image ci-dessus. Si vous voulez qu’il ressemble à notre site de démonstration, vous devez vous rendre sur votre Tableau de bord> SendinBlue> Formulaires et modifiez le formulaire par défaut ou créez-en un nouveau.

Assurez-vous d’ajouter le code suivant dans l’éditeur de formulaire d’abonnement, puis faites défiler vers le bas et cliquez sur le sauver bouton.

Après avoir enregistré le formulaire, vous devez vous rendre sur Apparence> Personnaliser> Sections de la page d’accueil> S’abonner, clique sur le Plugin SendinBlue onglet et y ajouter SendinBlue Widget. Assurez-vous de choisir le formulaire par défaut pour le widget SendinBlue, ou si vous avez créé un nouveau formulaire, assurez-vous que ce formulaire est sélectionné comme Formulaire à utiliser dans votre widget.

Section Blog

La section Blog de la première page est assez simple à utiliser. Il affichera toujours les articles les plus récents de votre blog. Vous pouvez choisir le nombre de publications à afficher ici via le Customizer.

Section du barreau des clients

Réglages:

• Désactiver la section – Option pour désactiver la section (cette option est également synchronisée avec l’option Activer / Désactiver mentionnée précédemment).
• Contenu de la barre des clients – Dans cette zone, vous pouvez ajouter autant Boîtes clients comme tu veux. Chaque boîte Clients a les options suivantes:
  • Image – Image pour la boîte Clients.
  • Lien – Lien vers la zone Clients.

Section de contact

La section contact fonctionne avec le plugin WPForms. Tout d’abord, vous devez installer et activer le plugin WPForms dans Dashboard-> Plugins, Add new, WPForms Lite.

Après avoir créé le formulaire souhaité, vous pouvez ajouter son shortcode dans le champ de la section contact.

Pour un tutoriel étape par étape, veuillez consulter ce guide.

Paramètres du blog

Outre la page d’accueil, il existe de nombreuses autres options que vous pouvez utiliser pour personnaliser les pages du blog, comme suit:

Paramètres du blog

Section des auteurs

La section Auteur vous permet de transférer les auteurs de votre section Équipe vers les pages de votre blog. Vous pouvez choisir les auteurs de votre équipe et les mettre ici, ainsi que changer l’image d’arrière-plan.

Section d’abonnement

Hestia PRO permet également un widget S’abonner sur la page Blog, en utilisant les mêmes widgets Sendinblue.

Le contenu principal de cette section est personnalisable via Apparence> Personnaliser> Widgets> Section d’abonnement au blog (ou apparence> Widgets> Section d’abonnement au blog). Là, vous devez ajouter le “SendinBlue Widget“. Pour plus de détails sur la configuration du widget SendinBlue, suivez la section S’abonner en première page.

Paramètres de la boutique

Page boutique

Choisissez parmi deux différents mises en page pour le style des produits: En boîte ou large.

La couleur de dégradé d’en-tête est utilisée comme arrière-plan d’en-tête de page s’il n’y a pas d’image définie. Il existe 3 façons de définir une image au lieu de la couleur du dégradé. Ci-dessous sont listés de la priorité la plus élevée à la priorité la plus faible.

• L’image de la page en vedette.
• L’image d’en-tête qui peut être modifiée à partir du personnaliseur en accédant à Apparence– > Personnaliser– > Options d’en-tête -> Image d’en-tête
• L’image d’arrière-plan qui peut également être modifiée à partir du personnaliseur en accédant à Apparence -> Personnaliser -> Paramètres d’apparence -> Image de fond.

Dégradé d’en-tête la couleur peut être modifiée à partir du personnalisateur Couleurs panneau.

Couleurs

Hestia Pro vous permet de changer les couleurs principales du thème. Vous pouvez le faire depuis Apparence> Personnaliser> Couleurs. Là, vous pouvez sélectionner les couleurs d’arrière-plan et d’accentuation principales, les en-têtes et les couleurs de texte principales.

Options d’en-tête

La section Options d’en-tête vous permet de modifier la section Barre supérieure et la position de la navigation.

Paramètres d’en-tête

Voici les options de personnalisation de la zone d’en-tête (qui a cette couleur rose par défaut).

Il existe deux contrôles pour la disposition de la zone d’en-tête: un pour les publications et les pages et un pour les produits WooCommerce.

le Messages / Pages disposition d’en-tête s’appliquera à tous les articles et pages et propose trois options (titre dans l’en-tête, titre hors de l’en-tête, pas d’en-tête).

le Disposition de l’en-tête des produits s’appliquera sur tous les produits WooCommerce et dispose de deux options (avec en-tête, sans en-tête) parmi lesquelles choisir.

Section de barre très supérieure

Hestia est livré avec une section Very Top Bar, qui apparaît en haut du site. Vous pouvez trouver plus de détails sur la façon d’activer cette section et quelques exemples vraiment sympas avec elle ici .

La navigation

Voici où vous avez la possibilité de modifier la disposition de
la zone de navigation. Modifier l’alignement des trois composants.

Ici aussi, vous avez la possibilité d’ajouter un chercher icône dans le menu principal.

Options de pied de page

Vous pouvez facilement choisir le nombre de widgets et la position directement depuis Customizer -> Option de pied de page.

• Crédits de pied de page: Ici, vous pouvez mettre les crédits que vous souhaitez voir apparaître dans le pied de page. Il n’y a pas de restrictions, ça peut être n’importe quoi.

Paramètres de votre menu

Le thème Hestia a été construit avec une conception de parallaxe d’une page à l’esprit. Pour ajouter cette fonctionnalité, nous avons divisé la première page de notre thème en plusieurs sections. La liaison à ces sections du menu est très simple, tout ce que vous avez à faire est d’assigner l’ancre de section au menu. Voici comment:

Aller vers Apparence> Menus dans ton Tableau de bord WordPress. Créez des ancrages aux sections, comme indiqué ci-dessous.

Voici la liste de toutes les sections pour le thème Hestia Pro:

• Section Slider – # carrousel-hestia-generic
• À propos de la section – #about
• Section Fonctionnalités – #features
• Section d’équipe – #team
• Section Boutique – #produits
• Section d’abonnement – #subscribe
• Section Portfolio – #portfolio
• Section Témoignages – #testimonials
• Section des prix – # prix
• Section Blog – #blog
• Section contact – #contact
• Section du ruban – #ruban
• Section du barreau des clients – #clients

Si vous avez plusieurs pages sur votre site, vous devez vous assurer que vous utilisez le lien complet de votre site avant l’ID, pour pouvoir naviguer d’une page à l’autre. Quelque chose comme ça: https://www.sitename.com/#features

Ajout d’icônes au menu Hestia

Nous aimons Font Awesome! Nous l’aimons tellement que nous l’avons regroupé avec notre thème, vous pouvez donc l’utiliser avec vos éléments de menu.

Tout d’abord, vous devez activer l’attribut de titre pour vos éléments de menu. Après l’avoir activé, vous pouvez ajouter les classes Font Awesome à vos éléments de menu. Cela peut être fait à partir de Apparence> Menus, ainsi que du Customizer. Vous devez mettre deux classes dans ce domaine: FA et classe d’icônes (fa-home par exemple). Vous pouvez trouver la liste de toutes les icônes ici.

Ajout de styles de bouton au menu

Tout comme les icônes, vous pouvez styliser chaque élément de menu en utilisant différentes classes. Vous devez ajouter le btn classe au champ Classes CSS, suivi de btn-primary. Celui-ci prend la couleur que vous définissez dans le Customizer sous le Couleurs> Couleur accentuée option. Si vous ajoutez le btn-round classe, le bouton obtiendra une bordure arrondie.

Si le champ Classes CSS n’apparaît pas dans les éléments de menu, il peut être activé dans les options de l’écran.

Marque blanche

L’étiquetage blanc est principalement utilisé par les agences et les développeurs qui créent des sites Web pour leurs propres clients et veulent prouver qu’ils sont les développeurs du thème. En utilisant le Marque blanche options fournies par Hestia Pro, vous pouvez facilement renommer et présenter le thème comme le vôtre.

Pour activer la fonction White Label, accédez simplement à Apparence> Personnaliser> White Label. Vous y trouverez un lien vers le Paramètres de marque blanche.

Vous pouvez y ajouter vos propres éléments de marque: nom et lien de l’auteur, nom du thème, description et capture d’écran personnalisée.

En cliquant sur Enregistrer les modifications, nous remplacerons automatiquement les références Hestia Pro et ThemeIsle du thème par vos propres noms personnalisés.

De plus, si vous souhaitez également masquer ces paramètres à vos clients / utilisateurs qui pourraient avoir accès au back-end de votre site, vous pouvez cliquer sur le Activer la marque blanche basculer. Après avoir enregistré les modifications, les options disparaissent de Apparence > Personnaliser. Pour réactiver les options à l’avenir, il vous suffirait de désactiver Hestia Pro et de le réactiver.

Mises en page personnalisées

Ce module vous permet de créer une section personnalisée qui peut être placée à divers endroits du thème en fonction des crochets, par exemple, une nouvelle section peut être ajoutée entre les sections de la première page du thème.

Une autre caractéristique importante de ce module est que vous pouvez créer votre propre en-tête / pied de page et remplacer celui du thème. Consultez ce guide pour commencer avec vos propres mises en page.

Traduire Hestia

Langue unique:

Hestia fonctionne avec des plugins de traduction comme Loco Translate.

Nous avons également des traductions disponibles pour de nombreuses langues populaires ici. Vous pouvez simplement télécharger et utiliser les fichiers .po et .mo traduits.

Plusieurs langues:

Pour traduire Hestia Pro dans plusieurs langues, vous pouvez utiliser les plugins comme Polylang, TranslatePress ou WPML. Les liens suivants expliquent en détail comment cela fonctionne:

• Comment traduire Hestia Pro avec Polylang
• Comment traduire Hestia Pro avec WPML
• Comment traduire Hestia Pro avec TranslatePress

Comment utiliser les shortcodes dans le thème Hestia Pro

Accédez à l’apparence de votre tableau de bord -> Personnaliser -> Section Frontpage et survolez la section souhaitée jusqu’à ce que son shortcode apparaisse.

Voici les shortcodes que vous pouvez utiliser sur d’autres pages:

• Caractéristiques: [hestia_features]
• Ruban: [hestia_ribbon]
• Bar des clients: [hestia_clients_bar]
• Boutique: [hestia_shop]
• Portefeuille: [hestia_portfolio]
• Équipe: [hestia_team]
• Tarification: [hestia_pricing]
• Témoignages: [hestia_testimonials]
• Souscrire: [hestia_subscribe]
• Blog: [hestia_blog]
• Contact: [hestia_contact]

Ensuite, vous devez installer le plugin Elementor https://wordpress.org/plugins/elementor/

Ajoutez le shortcode à l’aide du plugin Elementor.

Cela peut être fait facilement avec des options de glisser-déposer. Ici, vous devez coller le shortcode de la section souhaitée.

Hestia Pro est basé sur le kit de matériel créé par Creative Tim.

Jeffrey Wilson Administrator

Sorry! The Author has not filled his profile.

follow me