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.

While this is running, open templates/base.html and re-add the header placeholder, it should look something like:

{% block header %}
{% placeholder "header" or %}
<!-- Page Header -->
{% render_model_block request.current_page.pagefieldextension %}
{% endrender_model_block %}
{% endplaceholder %}
{% endblock %}

This enables us to use the page field extension and create our own structure at the same time.

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 layout with django CMS plugins to replicate this structure from the template:

<header class="masthead" ...>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">

Or simply:

> header
  > container
     > row
        > column

Learn more about the Bootstrap 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 "masthead"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. Hit Save. Then under Row choose to add Column by clicking on the "+" icon. Here, we can change the settings like this:

Click Save to add the 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?