Build with Blocks and Layouts

Backdrop comes with ten (10) standard responsive layout templates, but if your site requires something more customized, you can easily install additional contributed layout templates, or create your own custom ones.

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

2. Extract the files. When you first get the layout template, it will appear in a compressed file format such as 'tar.gz'. On Windows, use a program like 7-Zip to extract it. On Mac OS, 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 template 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 template from the list provided, and click 'Save layout'.
     4. Place your content into the regions provided by this layout template.
     5. Click the 'Save Configuration' button at the bottom.
   • If you would like to use this layout template 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 template from the list provided, and configure any additional settings.
     3. Place your content into the regions provided by this layout template.
     4. Click the 'Create layout' button at the bottom.
   • If you would like to use this layout template 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 template from the list provided, enter in the path of the existing page you want to override.
     3. Add visibility 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 visibility conditions.
        • To show this layout on only article nodes, enter in the path node/%, and add the visibility condition where Node: Type is Article.
        • To show this layout on only the news page, enter in the path node/%, and add the visibility 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 template.
     6. Click the 'Save layout' button at the bottom.

If you run into problems, search the issue queue with the keyword "layout", to find any existing issues already reported by others. If your problem hasn't already been addressed, post a question, and someone will try to help you out.