How to Build Landing Page using Wagtail CMS

Table of Contents

Wagtail Tutorial Series:

To learn more about Wagtail CMS, please check Build Blog With Wagtail CMS (4.0.0)

  1. Create Wagtail Project
  2. Modern Frontend Techs for Wagtail
  3. Dockerizing Wagtail App
  4. Add Blog Models to Wagtail
  5. How to write Wagtail page template
  6. Create Stylish Wagtail Pages with Tailwind CSS
  7. How to use StreamField in Wagtail
  8. Wagtail Routable Page
  9. Add Pagination Component to Wagtail
  10. Customize Wagtail Page URL
  11. Add Full Text Search to Wagtail
  12. Add Markdown Support to Wagtail
  13. Add LaTeX Support & Code Highlight In Wagtail
  14. How to Build Form Page in Wagtail
  15. How to Create and Manage Menus in Wagtail
  16. Wagtail SEO Guide
  17. Online Demo http://wagtail-blog.accordbox.com/
  18. Source code: https://github.com/AccordBox/wagtail-tailwind-blog

Wagtail Tips:

  1. Wagtail Tip #1: How to replace ParentalManyToManyField with InlinePanel
  2. Wagtail Tip #2: How to Export & Restore Wagtail Site

Write style in Wagtail:

  1. How to use SCSS/SASS in your Django project (Python Way)
  2. How to use SCSS/SASS in your Django project (NPM Way)

Other Wagtail Topics:

  1. How to make Wagtail project have good coding style
  2. How to do A/B Testing in Wagtail CMS 
  3. How to build a landing page using Wagtail CMS 
  4. How to support multi-language in Wagtail CMS 
  5. Add Bootstrap Theme to Wagtail

More Wagtail articles and eBooks written by me

Introduction

Wagtail CMS is a very good option if you want to build a dynamic landing page application.

  1. The Streamfield feature of Wagtail can let you customize your data model to fit the design.
  2. The FormBuilder feature of Wagtail can let you build a flexible and powerful form to collect data.
  3. Wagtail CMS is based on Django, which means you can use 3-party apps of the ecosystem to extend its feature easily.

In this Wagtail CMS tutorial, I will teach you how to build a simple landing page using Wagtail, we would let the editor can control data displayed on landing page in Wagtail admin.

startbootstrap-freelancer is the landing page theme here because it is based on bootstrap so it would be easy to modify or extend the theme.

Note: source code of this tutorial is available at wagtail-freelancer

Analyze the landing page template, build data models

First, let's take a look at the sample landing page and try to analyze it.

Below are the fields that we wish to make them editable.

  1. Title (Start bootstrap)
  2. Subtitle (Web Developer - Graphic Artist - User Experience Designer)
  3. Profile image
  4. Portfolio (Contains more than one block)

We would talk more about portfolio in the next step, let's first define page models to make other fields editable, and below is the code snippet.

class FreelancerPage(AbstractForm):

    subtitle = models.CharField(max_length=100, blank=True)
    profile_image = models.ForeignKey(
        'wagtailimages.Image',
        blank=True,
        null=True,
        on_delete=models.SET_NULL,
        related_name='+'
    )

    content_panels = AbstractForm.content_panels + [
        MultiFieldPanel([
            FieldPanel('subtitle'),
            ImageChooserPanel('profile_image'),
        ], "Hero"),
        MultiFieldPanel([
            FieldPanel('about_text', classname="full"),
            FieldPanel('about_CTA_text'),
            FieldPanel('about_CTA_link'),
        ], "Hero"),

    ]

We also need to modify Django template to display the page content. If you have experience with HTML, this would be super easy.

{% if page.profile_image %}
  {% image page.profile_image original as profile_image %}
  <img src="{{ profile_image.url }}" class="img-fluid mb-5 d-block mx-auto rounded-circle">
{% else %}
  <img class="img-fluid mb-5 d-block mx-auto rounded-circle" src="{% static 'freelancer/img/profile.png' %}" alt="">
{% endif %}

<h1 class="text-uppercase mb-0">{{ page.title }}</h1>
<hr class="star-light">
<h2 class="font-weight-light mb-0">
    {{ page.subtitle }}
</h2>

Implement custom data models using Streamfield of Wagtail

Most CMS can get tasks above done in an easy way, but I really doubt if they can also get tasks below done in an elegant way.

Sometimes, we wish to define custom data models in pages so we can better manage them without touching tedious HTML.

Here, what is the best way to create&edit the content of portfolio?

  1. We can treat portfolio field in the page as a container.
  2. The portfolio container can contain multiple portfolio block
  3. Eash portfolio block has title, image, text fields.

We can add content to portfolio block , edit, reorder to manage the portfolio of the page.

Wagtail has a tech called StreamField to help us get this job done. With simple model definition code, we can config the model.

class FreelancerPage(AbstractForm):

    # code omitted for brevity

    portfolio = StreamField([
        ('portfolio', PortfolioBlock()),
    ], null=True, blank=True)

    content_panels = AbstractForm.content_panels + [
        StreamFieldPanel('portfolio'),
    ]

class PortfolioBlock(blocks.StructBlock):
    heading = blocks.CharBlock(classname="full title")
    image = ImageChooserBlock()
    intro = blocks.RichTextBlock()

As you can see this is very clean and easy to manage.

Please check the video below to see how StreamField works here.

Use Formbuilder of Wagtail to build form

In most landing pages, there would be a contact form for the reader to contact the site owner.

But, what if I want to add another field to the form, for example, a dropdown list which tell me your profession? Can I get it done without coding?

Wagtail has a FormBuilder feature to help editor create a flexible custom form with just clicks.

Here I would show you how to use it to build a simple contact form, but you can also use it to build your own custom form.

class FreelancerFormField(AbstractFormField):
    page = ParentalKey('FreelancerPage', related_name='form_fields')


class FreelancerPage(AbstractForm):
    content_panels = AbstractForm.content_panels + [
        InlinePanel('form_fields', label="Form fields"),
    ]

As you can see, this is easy and clean. After you defined the FreelancerPage, you an add, edit form fields in Wagtail admin. No coding needed any more.

Please check video below to see how FormBuilder works in Wagtail.

Conclusion

In this Wagtail tutorial, we learned how to use Wagtail CMS to build a landing page application, Wagtail CMS has 2 advantages compared with other CMS.

  1. The StreamField is flexible and can let you define custom models in easy way.
  2. The FormBuilder feature is also powerful and flexible, you can quickly build custom form in your application without using 3-party services.

Wagtail Tutorial Series:

To learn more about Wagtail CMS, please check Build Blog With Wagtail CMS (4.0.0)

  1. Create Wagtail Project
  2. Modern Frontend Techs for Wagtail
  3. Dockerizing Wagtail App
  4. Add Blog Models to Wagtail
  5. How to write Wagtail page template
  6. Create Stylish Wagtail Pages with Tailwind CSS
  7. How to use StreamField in Wagtail
  8. Wagtail Routable Page
  9. Add Pagination Component to Wagtail
  10. Customize Wagtail Page URL
  11. Add Full Text Search to Wagtail
  12. Add Markdown Support to Wagtail
  13. Add LaTeX Support & Code Highlight In Wagtail
  14. How to Build Form Page in Wagtail
  15. How to Create and Manage Menus in Wagtail
  16. Wagtail SEO Guide
  17. Online Demo http://wagtail-blog.accordbox.com/
  18. Source code: https://github.com/AccordBox/wagtail-tailwind-blog

Wagtail Tips:

  1. Wagtail Tip #1: How to replace ParentalManyToManyField with InlinePanel
  2. Wagtail Tip #2: How to Export & Restore Wagtail Site

Write style in Wagtail:

  1. How to use SCSS/SASS in your Django project (Python Way)
  2. How to use SCSS/SASS in your Django project (NPM Way)

Other Wagtail Topics:

  1. How to make Wagtail project have good coding style
  2. How to do A/B Testing in Wagtail CMS 
  3. How to build a landing page using Wagtail CMS 
  4. How to support multi-language in Wagtail CMS 
  5. Add Bootstrap Theme to Wagtail

More Wagtail articles and eBooks written by me

Launch Products Faster with Django

SaaS Hammer helps you launch products in faster way. It contains all the foundations you need so you can focus on your product.

Michael Yin

Michael is a Full Stack Developer from China who loves writing code, tutorials about Django, and modern frontend tech.

He has published some ebooks on leanpub and tech course on testdriven.io.

He is also the founder of the AccordBox which provides the web development services.

Django SaaS Template

It aims to save your time and money building your product

Learn More

This book will teach you how to build a SPA (single-page application) with React and Wagtail CMS

Read More
© 2018 - 2024 AccordBox
Cookies Privacy