Avertissement : cet article est le résultat de la traduction automatique, l'exactitude et la fidélité de la traduction ne sont donc pas garanties. Pour consulter la version originale de cet article, en anglais, cliquez ici.
Landing Pages

Créez et modifiez des pages avec l'éditeur glisser-déposer (BÊTA)

Dernière mise à jour: novembre 5, 2019

En version bêta

Disponible avec :

Hub Marketing Starter

Avec l'éditeur glisser-déposer, vous pouvez configurer et personnaliser la mise en page et le style de vos pages HubSpot sans passer par les feuilles de style ou les modèles. Pour héberger votre page sur un domaine spécifique, connectez votre domaine à HubSpot.

  • Dans votre compte HubSpot, accédez à Marketing Pages de destination.
  • Cliquez sur Créer dans l'angle supérieur droit.
  • Passez le curseur de votre souris sur un modèle et cliquez sur Aperçu.
  • Pour sélectionner un modèle pour votre page, cliquez sur Utiliser ce modèle ou cliquez sur Retour pour voir plus d'options.
  • Saisissez le nom de la page puis cliquez sur Créer la page.

Contenu

Les modèles glisser-déposer sont composés de modules qui peuvent être regroupés en lignes horizontales ou en colonnes verticales. Ces modules, lignes ou colonnes peuvent être regroupés en sections d'éléments. Dans l'onglet Contenu, vous pouvez personnaliser le contenu, l'espacement et la mise en page des éléments sur votre page.

  • Pour ajouter un module à votre page, cliquez sur Ajouter et faites glisser le curseur vers le panneau de gauche. Une ligne bleue apparaîtra sur le futur emplacement du module.

add%20module%20to%20dnd%20template

  • Pour déplacer un module, une ligne, une colonne ou une section, faites glisser l'élément vers l'emplacement souhaité.
  • Pour régler la largeur des éléments dans une colonne dans la même section, cliquez sur le séparateur vertical et faites glisser le curseur entre ces modules.
  • Vous pouvez annuler et rétablir une action en cliquant sur les icônes de flèche dans le coin supérieur gauche.

edit%20layout%20of%20dnd%20template2

  • Pour personnaliser, dupliquer ou supprimer un module, passez votre curseur sur l'aperçu de droite.
    • Pour modifier le contenu du module, cliquez sur edit l'icône Crayon. Dans le panneau de gauche, modifiez le contenu, les images, et bien plus encore. Les modules de texte enrichi peuvent également être modifiés dans l'aperçu de la page à droite de l'écran.
    • Pour modifier la position et le style d'un module, cliquez sur l'icône Pinceau styles.
    • Dans le panneau de gauche, personnalisez la couleur d'arrière-plan du module, sa forme et les styles de bordure. Les options de styles disponibles dépendent du type de module
    • Pour créer une copie du module dans la même colonne, cliquez sur l'icône duplicate Copier.
    • Cliquez sur delete l'icône de la corbeille pour supprimer un module de votre page.
  • Pour modifier le style d'un groupe d'éléments, passez votre curseur sur la ligne, la colonne ou la section, puis cliquez sur le menu déroulant et sélectionnez Style [de l'élément]. 
    • Sur l'onglet Arrière-plan, sélectionnez un Type d'arrière-plan et personnalisez les paramètres de ce dernier. L'aperçu sera mis à jour pour refléter vos changements.
      • Aucun : sélectionnez cette option pour supprimer les couleurs ou les images d'arrière-plan.
      • Couleur : sélectionnez cette option pour configurer une couleur unie en tant qu'arrière-plan. Saisissez une valeur de couleur ou un taux de transparence pour votre arrière-plan.
      • Image : sélectionnez cette option pour configurer une image en tant qu'arrière-plan. Si une image est présente dans le modèle par défaut, cliquez sur Remplacer pour la changer. Cliquez sur Charger pour ajouter une image de votre ordinateur, ou cliquez sur Parcourir les images pour sélectionner une image dans vos fichiers.
      • Dégradé : sélectionnez cette option pour définir deux couleurs de dégradé pour votre arrière-plan. Définissez l'orientation du dégradé. Saisissez une valeur hex et configurez la transparence pour chaque couleur.
    • Cliquez sur l'onglet Espacement pour modifier la taille et l'espacement de votre ligne, colonne ou section. 
      • Saisissez une largeur maximale d'affichage pour le contenu de cet élément sur votre page.
      • Cliquez sur les onglets Remplissage et Marge pour modifier l'espacement autour de votre contenu. Le remplissage permet de régler l'espace qui entoure l'élément sur la page. Les marges permettent de régler l'espace qui sépare votre contenu et la bordure de l'élément.
  • Pour copier un élément existant, passez votre curseur sur l'élément souhaité et cliquez sur le menu déroulant, puis sélectionnez Cloner [l'élément].
  • Pour supprimer un élément de votre page, passez votre curseur sur l'élément souhaité et cliquez sur le menu déroulant, puis sélectionnez Supprimer [l'élément].

Pendant l'édition de la page, vos modifications seront enregistrées automatiquement. Si vous souhaitez restaurer une révision précédente :

  • Dans l'angle supérieur gauche, passez votre curseur sur Enregistrement automatique
  • Dans le message d'avertissement qui s'affiche, cliquez sur Révisions pour afficher les versions antérieures de votre page.
  • Dans le panneau de gauche, sélectionnez la révision que vous souhaitez restaurer à l'aide de la date et de l'horodatage. Un aperçu de la révision s'affichera à droite de l'écran.
  • Pour restaurer la version sélectionnée, cliquez sur Restaurer cette version. Pour revenir à la version la plus récente, cliquez sur Retour.

Conception

Vous pouvez effectuer une modification globale du format du texte par défaut, du style des formulaires et des boutons de votre page :

  • Cliquez sur l'onglet Conception pour ouvrir le panneau de gauche.
    • Dans la section Typographie, modifiez les polices et les styles de polices utilisés dans le corps et les titres de votre page. Toutes les polices Google sont prises en charge.
      • Corps du texte : personnalisez le style, la taille et la couleur de la police pour le corps de texte sur votre page :
        • Cliquez sur le menu déroulant Corps du texte pour sélectionner une police.
        • Cliquez sur les touches de direction pour choisir la taille de la police.
        • Cliquez sur le cercle coloré pour choisir la couleur de la police. Pour choisir une couleur personnalisée, cliquez sur l'onglet Avancé et saisissez une valeur hex.
      • En-têtes : personnalisez le style et la couleur de la police pour tout élément de texte dans vos modules comportant une balise de titre.
        • Cliquez sur le menu déroulant Titres pour sélectionner une police.
        • Cliquez sur le cercle coloré pour choisir la couleur de la police.
      • Texte du lien : personnalisez les polices et couleurs des liens sur votre page.
        • Cliquez sur le menu déroulant Texte du lien pour sélectionner une police.
        • Cliquez sur le cercle coloré pour choisir la couleur de la police.
        • Cliquez sur les boutons de styles ou le menu déroulant pour sélectionner les styles et l'éventuel sous-lignage du texte des liens sur votre page.
        • Pour personnaliser l'affichage du lien lorsque vos visiteurs interagissent avec votre page, vous pouvez modifier la couleur des liens et leur transparence.
          • Couleur du lien survolé : personnalisez la couleur et la transparence du texte de lien lorsqu'un visiteur passe son curseur sur les liens de votre page.
          • Couleur du lien actif : personnalisez la couleur et la transparence du texte du lien par défaut, avant que ce lien ne soit cliqué.
          • Couleur du lien visité : personnalisez la couleur et la transparence du texte du lien après qu'un visiteur a cliqué sur ce dernier.
    • Dans la section Boutons, personnalisez le style d'affichage des boutons de modules et de formulaires sur la page.
      • Couleur d'arrière-plan du bouton : personnalisez la couleur d'arrière-plan des boutons sur votre page.
        • Saisissez une valeur hex ou cliquez sur le cercle coloré pour choisir une couleur.
        • Saisissez un pourcentage ou cliquez sur les touches de direction pour régler la transparence de la couleur d'arrière-plan de votre bouton.
      • Couleur du texte du bouton : la couleur du texte sur les boutons de votre page.
        • Saisissez une valeur hex ou cliquez sur le cercle coloré pour choisir la couleur du texte.
        • Saisissez un pourcentage ou cliquez sur les touches de direction pour régler la transparence de la couleur du texte des boutons.
      • Angle des boutons : saisissez une valeur ou utilisez le curseur pour personnaliser la forme de vos boutons. Les boutons qui s'afficheront sur votre page auront une forme plus ronde si vous appliquez une valeur supérieure. Vos boutons seront de forme rectangulaire si la valeur est égale à zéro.

Paramètres

Personnalisez les paramètres pour modifier les détails de votre page qui s'afficheront en interne et dans le navigateur de vos visiteurs.

  • Cliquez sur l'onglet Paramètres pour personnaliser les détails de votre page :
    • Nom interne de la page : le nom de votre page pour référence interne. Ce nom apparaît sur le tableau de bord de votre page.
    • Titre de la page : le titre de votre page apparaît dans la barre de titre du navigateur et dans les résultats de recherche.
    • URL de la page : personnalisez l'adresse URL de votre page. Découvrez comment connecter le domaine de votre site web à HubSpot.
    • Méta-description : ajoutez une méta-description afin que les utilisateurs puissent avoir des informations sur votre page dans les résultats de recherche.
    • Image en vignette : ajoutez une image en vignette qui s'affichera dans les aperçus lorsque votre page sera partagée sur les réseaux sociaux.

Optimisation

Cliquez sur l'onglet Optimisation pour voir les recommandations qui vous permettront d'améliorer le SEO de votre page (optimisation pour les moteurs de recherche). En savoir plus sur les meilleures pratiques de SEO et leur influence sur le trafic organique qui arrive vers votre site.

Aperçu

Pour afficher un aperçu de votre page telle qu'elle s'affichera pour vos visiteurs :

  • Cliquez sur Aperçu dans l'angle supérieur droit pour ouvrir le Mode Aperçu. Sur la partie droite, vous verrez un aperçu mis à jour de votre contenu.
    • Type d'appareil : sélectionnez un type d'appareil pour voir comment votre page s'affiche sur un ordinateur, ou voir les différentes orientations de votre page sur mobile ou tablette. 
    • Afficher en tant que contact spécifique : pour tester la personnalisation, cliquez sur le menu déroulant Afficher en tant que contact spécifique et sélectionnez un contact dans votre CRM.
    • Aperçu partageable : cliquez sur Ouvrir dans une nouvelle fenêtre pour afficher une version partageable de votre e-mail dans une fenêtre de navigateur, ou cliquez sur Copier pour copier le lien de l'aperçu dans votre presse-papiers pour le partager.
  • Pour retourner à l'éditeur de contenu, cliquez sur Quitter le Mode Aperçu dans l'angle supérieur droit.

Publier

Cliquez sur Publier dans l'angle supérieur droit de l'écran pour publier votre page.

/fr/cms-general/create-and-edit-pages-with-the-drag-and-drop-editor