Concevoir une mise en page de blog.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

Ici, vous construisez la page qui liste vos articles de blog : un article à la une en haut, une liste depuis une vue Drupal avec une barre latérale, et une bande lettre d’information. Les nouveaux articles y apparaissent sans modifier la page. Pour raconter une histoire client en profondeur, suivez plutôt Rédiger une étude de cas.

La vidéo construit le blog d’un produit de reporting.

Avant de commencer

  • Votre rôle a la permission Edit with DXPR Builder.
  • Votre site a une vue qui liste les articles de blog. DXPR CMS livre une vue Blog avec une liste Blog et un affichage Featured posts.
  • La page est ouverte dans le builder. Pour une nouvelle, accédez à Content > Add content > Landing Page (/node/add/landing_page) et cliquez sur Save.
  • Les nouveaux éléments atterrissent en haut de leur colonne. Ajoutez les éléments d’une colonne dans l’ordre inverse, ou glissez-les en place ensuite.

Étape 1 : ajouter l’article à la une

  1. Cliquez sur Ajouter des éléments sur la page vide et choisissez Section depuis l’onglet Mise en page.
  2. Cliquez sur + sur la section et choisissez Ligne ; elle arrive avec deux colonnes égales. Cliquez sur son icône de grille (Column layout), choisissez le préréglage 2/3 + 1/3 et cliquez sur Save.
  3. Cliquez sur + dans la colonne large et choisissez Image depuis l’onglet Contenu. Cliquez sur Select Image, cochez une photo et cliquez sur Insert selected. Tapez l’Alt attribute dans le panneau SEO et cliquez sur Save.
  4. Cliquez sur + dans la colonne étroite et choisissez Bouton. Réglez Title sur « Read more », Link vers l’article et gardez Type sur Primary, puis cliquez sur Save.
  5. Cliquez à nouveau sur + dans la colonne étroite et choisissez Texte ; il atterrit au-dessus du bouton. Tapez le titre de l’article en Heading 2, ajoutez l’extrait en dessous et cliquez sur Save.

Étape 2 : ajouter la liste et la barre latérale

  1. Survolez la section et cliquez sur Add Section Below. Ajoutez-y une Ligne avec le préréglage 2/3 + 1/3.
  2. Cliquez sur + dans la colonne large et ouvrez l’onglet Drupal Views. Choisissez View: Blog (Blog) et cliquez sur Save ; il affiche vos articles.
  3. Cliquez sur + dans la colonne étroite et ouvrez l’onglet Drupal Views. Choisissez View: Blog (Featured posts) et cliquez sur Save.
  4. Cliquez à nouveau sur + dans la colonne étroite et ouvrez l’onglet Drupal Blocks. Choisissez Block: Forms: Search form et cliquez sur Save ; il atterrit au-dessus des articles à la une.

Étape 3 : ajouter la bande lettre d’information

  1. Ajoutez une troisième section avec Add Section Below. Ouvrez ses Plus > Paramètres, choisissez le Background bleu marine dans le panneau Style et cliquez sur Save.
  2. Cliquez sur + sur la section et choisissez Bouton. Réglez Title sur « Subscribe to the newsletter », Link sur /newsletter et Type sur Light, puis cliquez sur Save.
  3. Cliquez à nouveau sur + et choisissez Texte ; il atterrit au-dessus du bouton. Tapez « Stay updated » en Heading 2 et une ligne sur la lettre d’information en dessous. Réglez Font color sur blanc dans le panneau Style et cliquez sur Save.

Étape 4 : enregistrer et prévisualiser

  1. Cliquez sur Save dans la barre d’outils du builder.
  2. Ouvrez le menu d’affichage (l’icône en forme d’œil) et choisissez Preview.

Aller plus loin

Non montré dans la vidéo :

  • Formulaire d’inscription : ajoutez un bloc de formulaire de lettre d’information depuis l’onglet Drupal Blocks à la place du bouton ; voir Ajouter des formulaires aux pages
  • Catégories : ajoutez une vue de vos catégories de blog à la barre latérale
  • Teinte de barre latérale : ouvrez les réglages de la colonne étroite et donnez-lui un Background gris clair et un peu de remplissage dans le panneau Style

Ce que vous voyez

L’article à la une ouvre la page : une photo large à gauche, son titre, son extrait et son bouton Read more à droite. En dessous, vos articles remplissent la colonne large, avec le formulaire de recherche et les articles à la une dans la barre latérale. Une bande bleu marine ferme la page avec le titre Stay updated et le bouton Subscribe to the newsletter.

Si vous ne voyez pas vos articles

  • La vue Blog manque dans l’onglet Drupal Views. La vue est désactivée, ou votre profil d’utilisateur du builder la cache. Activez-la sous Structure > Views (/admin/structure/views), ou demandez à un administrateur de la cocher sous Views dans votre profil d’utilisateur.
  • La colonne de liste reste vide. La vue n’a aucun article publié à montrer. Publiez un article sous Content > Add content > Blog post, puis rechargez la page.
  • Le formulaire de recherche manque dans l’onglet Drupal Blocks. Le module Search du cœur fournit ce bloc. Activez-le sous Extend (/admin/modules).
  • Vos changements ont disparu après un rechargement. Vous avez quitté la page avant de cliquer sur Save dans la barre d’outils du builder. Si Save affiche une erreur, voir Les modifications ne s’enregistrent pas.

Et ensuite ?