Create a card layout for posts (Themer)

The Custom Layout Editor in the Post module is an option available when Beaver Themer is installed. You can use it to customize the HTML or tweak the CSS for more fine-tuned control over how posts are displayed. 

This article covers how to customize the layout structure using HTML, field connections, and a bit of CSS to crease a card layout.

Card Layout

This procedure shows how to create a basic card layout, such as the one shown in this screenshot. This layout requires that Beaver Themer is installed but works both in Themer layouts and in regular Page Builder layouts for pages and posts.

  1. Add a Posts module to your layout.
  2. In the Layout field, select Columns

Tip: For best results, we recommend three columns of equal heights and 30px on post spacing options.

  1. For Post Layout, select Custom.
  2. Click Edit Custom Post Layout. This opens the custom post layout HTML editor.
  3. Replace the existing HTML with the following code to create a card layout.
  1. Cick the CSS tab and replace the existing CSS with the following rules.
  1. Click Save to close the module, then click Done > Publish to publish the page. Your Post module should now display using a card layout.
  2. If you want to make style changes, open the page for editing again and modify the custom post layout CSS as necessary.