Build with Blocks and Layouts

Layouts divide pages on your site into different columns or regions where content can be placed.

Backdrop comes with ten (10) standard responsive layouts, but if your site requires something more you can easily install additional third-party layouts.

  1. Download the layout. You can find layouts for Backdrop CMS on our website or on GitHub.

  2. Extract the files. When you first get the layout, it will appear in a compressed file format such as 'tar.gz'. On Windows, use a program like 7-Zip to extract it. On the Mac, you can use the built-in extractor. To extract the file using the Unix command line:
    tar -zxvf filename.tar.gz
    You should see a list of files extracted into a folder.
  3. Upload the folder. FTP/Copy/SCP/Git pull this extracted folder into the layouts directory in your site root.
  4. Select the layout. Go to Administer > Structure > Layouts
    • If you would like to use this layout as the default for all pages on your site
      1. Click the 'edit' button for the 'Default Layout'.
      2. Click on the 'settings' tab at the top right of the screen.
      3. Select your new layout from the list provided, and click 'Save layout'.
      4. Place your content into the regions provided by this layout.
      5. Click the 'Save Configuration' button at the bottom.
    • If you would like to use this layout for a new page on your site
      1. Click the '+ Add new layout' link at the top of the layouts listing.
      2. Give your new page layout a name, select the layout from the list provided, and add any additional settings.
      3. Place your content into the regions provided by this layout.
      4. Click the 'Create layout' button at the bottom.
    • If you would like to use this layout to override the layout for an existing page.
      1. Click the '+ Add new layout' link at the top of the layouts listing.
      2. Give your page layout a name, select the layout from the list provided, enter in the existing path.
      3. Add conditions to target only your desired page(s), for example:
        • To show this layout on all user profiles, enter in the path user/% with no conditions.
        • To show this layout on only article nodes, enter in the path node/% and add the condition where Node: Type is Article.
        • To show this layout on only the news page, enter in the path node/% and add the condition where URL path is news.
      4. Click the 'Create layout' button at the bottom.
      5. Place your content into the regions provided by this layout.
      6. Click the 'Save layout' button at the bottom.

If you run into problems, check the layout's issue queue. If your problem hasn't already been addressed, post a question and someone will try to help you out.