Nested plugins allow you to build complex structures without making changes to your templates. 

In this section, we’ll demonstrate how an advanced structure can allow content managers to change the header background image and content for each individual page, without having to change the template.

To set the background image for each page, you can also extend the page model if you have some Python knowledge:

For this step, we need to install/configure some additional addons. 

Let’s switch back to the Addons Section in the Control Panel.

Search for the “Aldryn Background Image” addon and install it.

Then, search for the pre-installed “django CMS Style” addon and click “Configure” and add “container, page-heading” to “List of Classes”. We need this classes later to give certain elements their specific look:

Click on “Save” and go back to the Divio App build local server by clicking on the button the "Update". 

This will take a couple of minutes, so please wait until the command has finished running.

After successful rebuild, go back to your website, refresh and switch back to structure mode by clicking on “Structure” in the toolbar. 

Next we build up the Bootstrap 3 layout with django CMS plugins to replicate this structure from the template:

    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">

Or simply:

> header
  > container
     > row
        > column

Learn more about the Bootstrap 3 grid system, here:

We start building this structure by adding plugins into the placeholder “Header.” 

First, click on the “+” icon inside the “Header” placeholder and type “background image” in the search box. 

Then, drag and drop the “home-bg.jpg” file from the downloaded theme img-folder into the plugin (grey area):

Change the Tag Type to "header," then click on Advanced Settings “(Show)” and add "intro-header"to the Additional Classes field.

Click “Save.”

Next, click on the “+” icon of the newly created "Background Image" plugin and search for “style.” Choose “container” from the Class Name dropdown.

Click “Save.”

Next, click on the “+” icon in the “Style” plugin and search for “Row.” Here, we can change the settings like this:

Click “Save” to add the plugin.

Now, open the newly created “Row” plugin by clicking on the triangle. The Row plugin automatically creates the “Column” plugin nested inside the “Row” plugin. 

Click the “+” icon in the “Column” plugin and search for “style.” Add it with the following settings:

Finally, click the “+” icon in the “Style” plugin and type “text” into the searchbox, then click on “Text.” 

Type your name, select it and choose “Heading 1” from the “Paragraph Format” dropdown in your editor. Click “Save” in the lower right.

Your structure should now look like this:

Change back to Content View. 

You can now easily change the content of the header by double-clicking on it:

You can also directly access the other plugins from this view by switching to the according plugin in the breadcrumb menu (i.e. to change the background image):

After you’ve made your changes, click “Publish page changes” in the toolbar.

This button indicates that you’ve made changes to your content that haven’t been published yet; meaning that they’re yet accessible to the public.

Check out your first finished home page: 

Don’t worry, though: You won’t need to create nested plugins every time you want to change the background-image. You can simply save the page as a page-type, learn more.

Did this answer your question?