Configuring Content Areas (Placeholders)

Earlier, we added a placeholder to a template:

{% extends "base.html" %}
{% load cms_tags %}

{% block content %}
    {% placeholder content or %}
        <p>This page has no content yet. Make sure you are in <em>Edit</em> mode
           (hit the <strong>Edit page</strong> button if required). Then switch to
           <em>Structure</em> mode.</p>
    {% endplaceholder %}
{% endblock content %}

We can simplify this, replacing:

{% placeholder content or %}
    <p>This page has no content yet. Make sure you are in <em>Edit</em> mode
       (hit the <strong>Edit page</strong> button if required). Then switch to
       <em>Structure</em> mode.</p>
{% endplaceholder %}

with:

{% placeholder "content" %}

___

Add other placeholders
To add a placeholder in django CMS, simply add {% placeholder "placeholder_name" %} in your template.

This tag will create a placeholder, which is available on the current site and can be filled with any available plugin, such as text, an image or even more complex plugins.
___

Save the content.html  file and go back to your base.html  file.

Creating Different Header Images for Each Page

Currently, our theme is set to load the same header image for each page on our website. 

To replace the header with content defined by the CMS, we need to add a placeholder around the header:

<!-- Page Header  -->
{% placeholder header or %}    
    <!-- Set your background image for this header on the line below. -->
    <header class="intro-header" style="background-image: url({% static 'img/about-bg.jpg' %})">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="page-heading">
                        <h1>About Me</h1>
                        <hr class="small">
                        <span class="subheading">This is what I do.</span>
                    </div>
                </div>
            </div>
        </div>
    </header>
{% endplaceholder %}

This is an enhanced use of the django CMS placeholder tag. The or at the end of the tag allows us to define content that is only rendered in case the placeholder has no plugins or if these plugins do not generate any output.

In our case, we show the about-bg.jpg  as a fallback, if nothing else was defined.

Defining Default Content

To set a default title as a fallback in the header, we use the template tag: {% page_attribute "page_title" %}

The values can be changed in the page settings (Page > Page Settings) and will be shown if there are no CMS plugins added.

So replace this:

<div class="page-heading">
    <h1>About Me</h1>
    <hr class="small">
    <span class="subheading">This is what I do.</span>
</div>

with:

<div class="page-heading">
    <h1>{% page_attribute "page_title" %}</h1>
</div>

Save your changes. We now have our markup set up to add some content.

___

Want to learn more about django CMS template tags? Visit:
Learn more about django CMS template tags
___

Adding Content

Because we have no content or plugins added yet, our home page is pretty empty. 

Before we add our first text plugin, we need to become familiar with the different view modes the CMS offers:

Editing View

This is the mode you’ll use for adding content and changing your structure. 

Select View published to switch to the published view.

Published View

This is the view mode of the CMS. Here, you can browse your live website as a normal user and see the pages and content that will be visible to the public.

Go to Edit mode again by clicking on the Edit  button. Click on Structure, or hit the space bar, to display the structure view:

Structure View is the most important view for adding content and defining the layout of your page. 

You'll see two placeholders you added (Header and Content) in the previous steps.

To add our first plugin, go to the Content placeholder and click on the + icon indicated above.

In the box that appears, you’ll see a list of all available plugins for this placeholder. 

Type in text in the search field and select Text from the Generic section. This is the main plugin for adding basic text blocks.

There are other helpful plugins available if you search for Bootstrap.

The next screen allows you to add basic content. Add whatever content you’d like:

___

Quick Tip
If you want some dummy text for your pages, use the Lorem Ipsum Generator at http://hipsum.co/
___

After you’re finished adding your content, hit the Save button.

Learn more about nested Plugins

Did this answer your question?