Utiliser des thèmes

Un thème est un ensemble de modèles, de modules, de contenus globaux et de paramètres de style utilisables pour créer un site web entier. Vous pouvez modifier les pages et les posts utilisant un thème à l'aide de l'éditeur de contenu et définir des modèles de blog pour utiliser un thème dans vos paramètres de blog.

Tous les comptes ont accès à au moins un thème HubSpot par défaut. Les thèmes peuvent également être téléchargés à partir du marketplace des modèles.

Comprendre les thèmes

Un thème est un ensemble de fichiers pour votre site web qui contient les éléments suivants :

• Modèles codés : un ensemble de modèles pour votre site web, y compris une page d'accueil, une page « À propos », une page de destination et des modèles de blog. Ces modèles sont codés de manière personnalisée par un développeur, mais le contenu et la mise en page peuvent être personnalisés dans l'éditeur de contenu.
• Modules : un ensemble de modules de thèmes uniques que vous pouvez ajouter au contenu en utilisant ce thème.
• Contenu global : contenu répété sur plusieurs pages, tel qu'un en-tête ou un pied de page de site web. Vous pouvez modifier le contenu global directement depuis l’éditeur de page glisser-déposer.
• Paramètres du thème : paramètres de style pour les modèles utilisant un thème, y compris les polices, l’espacement et les couleurs.

Utiliser un thème actif

Vous pouvez définir un thème actif afin d'afficher les pages de thème comme options par défaut pour les pages nouvellement créées. La définition ou la modification d’un thème actif ne changera pas le thème utilisé pour le contenu existant, ce qui nécessite de changer le modèle actuel du contenu. Des thèmes supplémentaires peuvent être achetés sur le marketplace des modèles HubSpot.

1. Accédez à votre contenu :
   • Pages de site web : Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Pages de destination : Dans votre compte HubSpot, accédez à Contenu > Pages de destination.
2. Cliquez sur Créer ou Commencer.
3. Sur la page de sélection de thème, cliquez sur Définir comme thème actif sur la carte de thème souhaitée. Pour prévisualiser le thème, cliquez sur Prévisualiser le thème.
4. Sur la page de sélection de modèle, cliquez sur Sélectionner un modèle sur la carte de modèle souhaitée. Poursuivez ensuite la création d’une page à l’aide de l’éditeur en glisser-déposer de HubSpot

Modifier le thème actif

1. Accédez à votre contenu :

   • Pages de site web : Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Pages de destination : Dans votre compte HubSpot, accédez à Contenu > Pages de destination.
2. Dans l’angle supérieur droit, cliquez sur Créer ou Commencer. 
3. Pour modifier le thème des pages de site web, cliquez sur le menu déroulant Thème et sélectionnez Modifier le thème. Cliquez ensuite sur Définir comme thème actif sur la carte de thème souhaitée.

4. Pour modifier le thème à partir des pages de destination, cliquez sur le nom du thème dans le menu latéral de gauche. Cliquez ensuite sur Définir comme thème actif sur la carte de thème souhaitée.

5. Sur l’écran de sélection de thème, passez le curseur sur un thème, puis cliquez sur Aperçu du thème pour ouvrir un aperçu du thème ou Définir comme thème actif.
6. Vous pouvez ensuite sélectionner un modèle dans le thème pour poursuivre la création d'une page avec l'éditeur glisser-déposer de HubSpot.

Créer une page à l'aide d'un thème

1. Accédez à votre contenu :

   • Pages de site web : Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Pages de destination : Dans votre compte HubSpot, accédez à Contenu > Pages de destination.
2. Dans l’angle supérieur droit, cliquez sur Créer ou Commencer.
3. Si vous n’avez pas encore sélectionné de thème, accédez à l’écran de sélection de thème. Sur la carte de thème souhaité, cliquez sur Définir comme thème actif. Pour prévisualiser le thème, cliquez sur Prévisualiser le thème.
4. Sur l'écran de sélection des modèles, les modèles de votre thème actif s'afficheront dans la section Modèles de thèmes. Pour afficher les modèles qui ne font pas partie de votre thème actif, cliquez sur Autres modèles.
5. Pour sélectionner un modèle dans le thème, cliquez sur Sélectionner un modèle ou Utiliser.
6. Dans l'éditeur de contenu, modifiez le contenu de la page à l'aide de l'éditeur en glisser-déposer.

7. Pour appliquer vos modifications, cliquez sur Publier ou Mettre à jour dans l’angle supérieur droit.

Appliquer un modèle de thème à votre blog

Vous pouvez définir un blog afin qu'il utilise le même thème que vos pages dans ses paramètres. Les modèles d'article et de page de listing de blog sont sélectionnés séparément.

1. Dans votre compte HubSpot, cliquez sur l'icône Paramètres settings dans la barre de navigation principale.
2. Dans le menu latéral de gauche, accédez à Contenu > Blog.
3. Si vous avez plusieurs blogs, cliquez sur le menu déroulant Sélectionner un blog à modifier et sélectionnez un blog.
4. Cliquez sur l'onglet Modèles.
5. Dans les sections Modèle d'article de blog et Page de listing de blog, cliquez sur le menu déroulant Actions et sélectionnez Modifier le modèle.

6. Sur l’écran de sélection de thème, cliquez sur la carte de thème souhaitée, puis cliquez sur la carte de modèle . Dans l'angle inférieur droit, cliquez sur Terminé.

Remarque : Pour les pages de listing de blog qui peuvent être modifiées dans l'éditeur de contenu, ces étapes redirigeront vers l'éditeur de contenu au lieu de l'écran de sélection de thème.

Modifier les paramètres de thème

Vous pouvez personnaliser le style de votre thème, y compris la police, les couleurs et l’espacement dans vos paramètres de thème. Les styles modifiés à partir de cette section s'appliquent à l'ensemble des pages et modules de thème inclus dans ce thème. Découvrez-en davantage sur la gestion des paramètres de thème.

Gérer les thèmes

Dans le gestionnaire de conception, vous pouvez modifier, cloner ou copier un thème dans un autre compte HubSpot. Vous pouvez également supprimer les thèmes clonés, les thèmes personnalisés et créer des thèmes enfants.

Vous pouvez modifier les paramètres d'un thème enfant sans affecter le thème parent, mais cela ne créera pas de copies supplémentaires des ressources du thème. Pour copier les ressources d'un thème parent, il est recommandé de cloner le thème.

Cloner un thème

Pour modifier les fichiers codés des thèmes par défaut dans le gestionnaire de conception, ils doivent d'abord être clonés.

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l'outil de recherche, cliquez sur le dossier @hubspot. Ce dossier contient tous les thèmes et modules par défaut, y compris les modules d’e-mail glisser-déposer.
3. Cliquez sur un dossier de thèmes .
4. Cliquez sur le menu déroulant Fichier et sélectionnez Cloner le thème.
5. Dans la boîte de dialogue, saisissez un nom pour le thème.
6. Pour modifier l’emplacement du fichier du thème cloné, cliquez sur Modifier dans le champ Emplacement du fichier . Sélectionnez ensuite un emplacement. Par défaut, le dossier racine sera sélectionné.
7. Lorsque vous avez terminé, cliquez sur Créer.

Créer un thème enfant

Dans le gestionnaire de conception, vous pouvez créer un thème enfant basé sur un thème du marketplace des modèles acheté ou un thème HubSpot par défaut. Vous pouvez modifier les paramètres d'un thème enfant sans affecter le thème parent.

Les développeurs peuvent également créer des thèmes enfants basés sur des thèmes personnalisés et créer des thèmes enfants à l’aide de l’ILC en utilisant la documentation pour les développeurs. Découvrez-en davantage sur l’utilisation de thèmes enfants.

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l'outil de recherche, cliquez sur le dossier @marketplace pour les thèmes du marketplace des modèles ou sur le dossier @hubspot pour les thèmes par défaut.
3. Effectuez un clic droit sur un dossier de thèmes, puis sélectionnez Créer un thème enfant.
4. Dans la boîte de dialogue, saisissez le nom du thème enfant.
5. Pour modifier l'endroit où le thème enfant sera enregistré, cliquez sur Modifier dans la section Emplacement du fichier. Cliquez sur un dossier, puis cliquez sur Sélectionner.
6. Pour personnaliser les noms des fichiers de thème CSS et JS, cliquez sur Options avancées, puis saisissez de nouveaux noms de fichiers dans les champs CSS et JS .
7. Pour terminer le processus, cliquez sur Créer un thème enfant. Vous pouvez modifier le style du thème enfant dans l’éditeur de contenu.

Copier un thème vers un autre compte

Vous pouvez copier un dossier de thème d'un compte à un autre. Vous devez être un utilisateur disposant d’autorisations Outils de conception dans les deux comptes.

Remarque : Les dossiers de thème dans les annuaires @hubspot ou @marketplace ne peuvent pas être copiés entre deux comptes.

Pour copier un thème vers un compte :

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans la recherche, placez le curseur sur le dossier de thème que vous souhaitez copier, puis cliquez avec le bouton droit sur le dossier et sélectionnez Copier sur un autre compte.
3. Dans la boîte de dialogue, cliquez sur le menu déroulant Compte de destination et sélectionnez un compte. Cliquez ensuite sur Copier la ressource. Le dossier apparaîtra dans le compte de destination dès que le processus de copie sera terminé.
   
   

Charger un thème

Les utilisateurs de comptes Content Hub peuvent télécharger des thèmes HubSpot depuis le marketplace ThemeForest d'Envato, puis les charger dans HubSpot depuis l'écran de sélection de thème :

1. Accédez à la section HubSpot CMS Hub du marketplace ThemeForest d'Envato.
2. Achetez un thème sur le marketplace.
3. Vous recevrez un e-mail contenant un code d’achat pour votre thème acheté. Copiez le code d’achat.
4. Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
5. Dans l'angle supérieur droit, cliquez sur Créer.
6. Sur la page Choisir un modèle , cliquez sur le menu déroulant Thème puis sur Modifier le thème.

7. Sur la page Choisir un thème , cliquez sur Installer un thème de ThemeForest en bas de la page.
8. Dans la boîte de dialogue, collez le code d'achat figurant dans l'e-mail, puis cliquez sur Installer le thème.
9. Dans le nouvel onglet, connectez-vous au marketplace ThemeForest d’Envato pour terminer le processus d’installation.
10. Lorsque vous êtes connecté, une bannière s’affiche dans HubSpot. Cela peut prendre quelques minutes pour que votre thème soit disponible dans HubSpot.

Supprimer un thème

Les thèmes clonés et les thèmes chargés peuvent être supprimés depuis le gestionnaire de conception :

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez sur le dossier contenant les éléments du thème.
3. Cliquez sur le menu déroulant Fichier et sélectionnez Supprimer [nom du dossier].
4. Dans la boîte de dialogue, cochez la case pour confirmer que vous avez examiné les dépendances, puis cliquez sur Supprimer ce dossier.

Les thèmes achetés doivent être désinstallés depuis le marketplace des modèles :

1. Dans votre compte HubSpot, cliquez sur l'icône Marketplace marketplace dans la barre de navigation principale, puis sélectionnez Téléchargements du marketplace.
2. Dans l’onglet Thèmes, cliquez sur le menu déroulant Actions et sélectionnez Désinstaller pour le thème applicable. 
3. Avant de procéder à la désinstallation, vous devrez peut-être modifier le modèle d’un article de blog ou d’une page. Découvrez-en davantage sur la modification d’un modèle de page ou d’article. 
4. Dans la boîte de dialogue, cliquez sur Désinstaller.