Skip to content

Design a blog listing layout

Here you build the page that lists your blog posts: a featured post at the top, a listing from a Drupal view with a sidebar, and a newsletter band. New posts appear on it without editing the page. To tell one customer story in depth, follow Write up a case study instead.

The video builds the blog of a reporting product.

Before you start

  • Your role has the Edit with DXPR Builder permission.
  • Your site has a view that lists blog posts. DXPR CMS ships a Blog view with a Blog listing and a Featured posts display.
  • The page is open in the builder. For a new one, go to Content > Add content > Landing Page (/node/add/landing_page) and click Save.
  • New elements land at the top of their column. Add the elements of a column in reverse order, or drag them into place afterwards.

Step 1: add the featured post

  1. Click Add Elements on the empty page and pick Section from the Layout tab.
  2. Click + on the section and pick Row; it arrives with two equal columns. Click its grid icon (Column layout), pick the 2/3 + 1/3 preset and click Save.
  3. Click + in the wide column and pick Image from the Content tab. Click Select Image, tick a photo and click Insert selected. Type the Alt attribute in the SEO panel and click Save.
  4. Click + in the narrow column and pick Button. Set Title to "Read more", Link to the post and keep Type on Primary, then click Save.
  5. Click + in the narrow column again and pick Text; it lands above the button. Type the post title as Heading 2, add the excerpt below it and click Save.

Step 2: add the listing and sidebar

  1. Hover the section and click Add Section Below. Add a Row to it with the 2/3 + 1/3 preset.
  2. Click + in the wide column and open the Drupal Views tab. Pick View: Blog (Blog) and click Save; it renders your posts.
  3. Click + in the narrow column and open the Drupal Views tab. Pick View: Blog (Featured posts) and click Save.
  4. Click + in the narrow column again and open the Drupal Blocks tab. Pick Block: Forms: Search form and click Save; it lands above the featured posts.

Step 3: add the newsletter band

  1. Add a third section with Add Section Below. Open its More > Settings, pick the navy Background in the Style panel and click Save.
  2. Click + on the section and pick Button. Set Title to "Subscribe to the newsletter", Link to /newsletter and Type to Light, then click Save.
  3. Click + again and pick Text; it lands above the button. Type "Stay updated" as Heading 2 and one line about the newsletter below it. Set Font color to white in the Style panel and click Save.

Step 4: save and preview

  1. Click Save on the builder toolbar.
  2. Open the view menu (the eye icon) and choose Preview.

Go further

Not shown in the video:

  • Signup form: add a newsletter form block from the Drupal Blocks tab in place of the button; see Add forms to pages
  • Categories: add a view of your blog categories to the sidebar
  • Sidebar tint: open the narrow column's settings and give it a light grey Background and some padding in the Style panel

What you see

The featured post opens the page: a wide photo on the left, its title, excerpt and Read more button on the right. Below it your posts fill the wide column, with the search form and featured posts in the sidebar. A navy band closes the page with the Stay updated heading and the Subscribe to the newsletter button.

If you don't see your posts

  • The Blog view is not in the Drupal Views tab. The view is disabled, or your builder user profile hides it. Enable it at Structure > Views (/admin/structure/views), or ask an administrator to tick it under Views in your user profile.
  • The listing column stays empty. The view has no published posts to show. Publish a post at Content > Add content > Blog post, then reload the page.
  • The search form is not in the Drupal Blocks tab. The core Search module provides that block. Turn it on at Extend (/admin/modules).
  • Your changes are gone after a reload. You left the page before clicking Save on the builder toolbar. If Save shows an error, see Changes do not save.

What's next?

Something wrong or missing on this page? Report it or edit the page.