I'm currently exploring Django CMS and Wagtail to choose the right CMS for my project.

In Django CMS, there's a very powerful feature that allows non-developers to easily create highly customized page layouts. Users can define containers, rows, and columns, set margins and padding, and control visibility responsively for mobile, tablet, and desktop, all without coding. Here's an example screenshot of Django CMS:

example screenshot of Django CMS

I've also tested Wagtail, which seems to be more popular and widely used. However, I noticed that Wagtail doesn't seem to offer similar functionality out-of-the-box. It does have the StreamField feature, which lets editors add different content blocks to build pages, but these blocks are stacked vertically, one after another, without an intuitive way to define custom responsive layouts (rows, columns, visibility settings, spacing, etc.) as easily as in Django CMS.

Am I missing something obvious? Is there an easy way or a recommended approach/plugin for achieving similar flexible and responsive layouts in Wagtail?

Thank you for any advice or recommendations!

I'm currently exploring Django CMS and Wagtail to choose the right CMS for my project.

In Django CMS, there's a very powerful feature that allows non-developers to easily create highly customized page layouts. Users can define containers, rows, and columns, set margins and padding, and control visibility responsively for mobile, tablet, and desktop, all without coding. Here's an example screenshot of Django CMS:

example screenshot of Django CMS

I've also tested Wagtail, which seems to be more popular and widely used. However, I noticed that Wagtail doesn't seem to offer similar functionality out-of-the-box. It does have the StreamField feature, which lets editors add different content blocks to build pages, but these blocks are stacked vertically, one after another, without an intuitive way to define custom responsive layouts (rows, columns, visibility settings, spacing, etc.) as easily as in Django CMS.

Am I missing something obvious? Is there an easy way or a recommended approach/plugin for achieving similar flexible and responsive layouts in Wagtail?

Thank you for any advice or recommendations!

• wagtail

2 Answers 2

I achieved responsive layouts in my Wagtail project by using the Bootstrap framework. I applied the appropriate classes and HTML structure to allow Bootstrap logic to kick in. You can use some other framework or write CSS yourself.

In your page template you can control the layout of the whole page, it can also extend your base.html if you wish.

You can achieve similar by nesting StreamBlocks. To get the same functionality (including responsive) isn't out of the box, but it is easily doable.

Create one or more StreamBlocks that you want to populate the columns with (e.g. BaseStreamBlock in the example below).

Create a StructBlock for each of the column counts (e.g. full-page, two-col, three-col) with one StreamBlock per column, point these to your column content StreamBlocks (e.g. BaseStreamBlock).

Collect the column-count StructBlocks in a wrapping StreamBlock and use this as your Page StreamField definition.

A rough, simplified example:

class BaseStreamBlock(StreamBlock):
    rich_text_block = RichTextBlock()
    code_block = BlogCodeBlock()
    callout_block = CalloutBlock()
    heading_block = HeadingBlock()
    image_block = ImageBlock()

class FullWidthBaseBlock(StructBlock):
    column = BaseStreamBlock(
        label=_("Single Column Contents"),
        blank=True,
        Null=True
    )

    class Meta:
        template = 'blocks/full_width_block.html'
        icon = 'block-empty'
        label = "Page Wide Block"
        label_format = label

class TwoColumnBaseBlock(StructBlock):
    left_column = BaseStreamBlock(
        label=_("Left Column Contents"),
        blank=True,
        Null=True
    )
    right_column = BaseStreamBlock(
        label=_("Right Column Contents"),
        blank=True,
        Null=True
    )

    class Meta:
        template = 'blocks/two_column_block.html'
        icon = 'columns-two'
        label = "Two Column Block"
        label_format = label

class ThreeColumnBaseBlock(StructBlock):
    left_column = BaseStreamBlock(
        label=_("Left Column Contents"),
        blank=True,
        Null=True
    )
    centre_column = BaseStreamBlock(
        label=_("Centre Column Contents"),
        blank=True,
        Null=True
    )
    right_column = BaseStreamBlock(
        label=_("Right Column Contents"),
        blank=True,
        Null=True
    )

    class Meta:
        template = 'blocks/three_column_block.html'
        icon = 'columns-three'
        label = _("Three Column Block")
        label_format = label

class HomePage(Page):
    ....
    body = StreamField(
        GridStreamBlock(), verbose_name=_("Page body")
    )
    ....

You'd likely want to change the StreamBlock definition for the column StreamBlocks rather than just one fits all as above.

To make it a bit more dynamic, you'd add in choice blocks for breakpoints, column layout, min width, order of collapsed blocks, show/hide one or more columns on collapse.

You can add some admin css that will make those choices a lot more compact that the Wagtail default.

Your front end css will handle the responsive behaviour, simplified if you use something like Bootstrap.