How to set up Grid Layout in the Readable theme like on medium.com

For maximum flexibility, the front page of the Readable theme is put together using Page Builder and the custom widgets we’ve developed specifically for this Medium-like theme. You have two options to set up this front page when building your own website and below are the steps you should follow if you want the front page of your Readable theme to look like the front page of the demo.

Import demo content

If you import the demo content using our One-Click Demo Import solution, the front page will be imported and Page Builder will be pre-configured. There is no extra work needed in this case.

However, sometimes you don’t want to import the demo content. Because of this, we have an alternative.

Manually set up the front page

Instead of using our One-Click Demo Import, you can manually set up the front page. Page Builder gives you all the flexibility you need here. However, if you want to start with the layout we’ve prepared in our demo, you can also import only this page. Here’s how:

  1. Install and activate all the plugins the theme recommends (including Page Builder).
  2. Create a new page and enter the Page Builder mode.
  3. Click Layouts at the top:
  4. Click the Import/Export tab on the side:
  5. Upload and import this JSON file (right click on the link and choose Save as…).

This will give you the same starting point as you can see on our Readable demo and you can customize it further based on your needs.