Your first Dynamic Page

Your first Dynamic Page#

In this tutorial, you will learn the fundamental workflow for building a dynamic landing page in Plone using the cs_dynamicpages add-on. We will create a new homepage from scratch consisting of a hero banner, a text section, and a sliding gallery.

By the end of this tutorial, you will understand how to:

  • Create a Dynamic Page container.

  • Add and configure different Rows.

  • Add nested, Featured content inside complex rows (like sliders or grids).

Step 1: Create the Dynamic Page Folder#

The foundation of any dynamic page is the Dynamic Page Folder. Think of this as the main "wrapper" or the "page" itself.

  1. Navigate to the location in your Plone site where you want to build the page (e.g., the root of the site).

  2. From the Plone toolbar, open the Add new... menu and select Dynamic Page Folder.

  3. Title: Enter Welcome to our new site.

  4. Summary: (Optional) Enter a brief description. This is used for SEO and when the page appears in search results.

  5. Click Save.

You now have an empty canvas. Let's start adding content!

Step 2: Add a "Hero" Banner Row#

The first thing visitors should see is a large, striking header section. We will use a Dynamic Page Row configured as a Featured View.

  1. Make sure you are viewing the Welcome to our new site page you just created.

  2. From the toolbar, open the Add new... menu and select Dynamic Page Row.

  3. Row Type: The most important field! Change the dropdown from "Horizontal Rule View" to Featured view.

    • Notice what happens! As soon as you change the Row Type, the available fields instantly update to match your choice.

  4. Title: Enter Discover the future.

  5. Description: Enter We are building amazing things with Plone..

  6. Related Image: Upload a high-quality, wide background image.

  7. Image Position: Choose whether the image should appear on the left, right, or top of the text.

  8. Link Text: Enter Learn More.

  9. Link URL: Enter /about-us (or a full https://... URL).

  10. Width: Leave it at Full width.

  11. Click Save.

You have just created the first slice of your page.

Step 3: Add a Text Section#

Next, let's add a standard paragraph of text below the hero banner.

  1. Navigate back to the main Welcome to our new site folder (you can click the breadcrumb).

  2. Open the Add new... menu and select Dynamic Page Row.

  3. Row Type: Select Text view.

    • The image upload fields disappear, and a Rich Text editor appears.

  4. Title: Enter Our Mission.

  5. Text: Write a few paragraphs explaining your organization.

  6. Width: Change this to Centered (or your equivalent narrowed class) so the text is easier to read.

  7. Click Save.

Now you have two rows stacked vertically: a Featured hero and a Text block.

Step 4: Create an Image Slider (Rows with Children)#

Some rows, like sliders, grids, or accordions, require multiple distinct items inside them. We build these by adding a row, and then adding Dynamic Page Row Featured items inside that row.

Let's build a slider with three images.

4.1. Create the Slider Row Wrapper#

  1. Navigate back to the main Welcome to our new site folder.

  2. Open the Add new... menu and select Dynamic Page Row.

  3. Row Type: Select Slider view.

  4. Title: Enter Our Gallery.

  5. Padding top / Padding bottom: Let's add some breathing room. Select 5 for both top and bottom padding.

  6. Click Save.

You now have a Slider row, but it's empty! We need to add slides.

4.2. Add Slides to the Slider#

  1. Look at the view of the Slider row you just saved. Because this row type is configured to accept children, you will see a special Add Featured button (or you can use the standard Plone toolbar: Add new... > Dynamic Page Row Featured).

  2. Click Add Featured.

  3. Title: Enter Slide 1: The Team.

  4. Related Image: Upload the first image.

  5. Click Save.

  6. Repeat steps 2-5 twice more, creating "Slide 2" and "Slide 3" with different images.

Step 5: Admire Your Work#

  1. Navigate back to the main Welcome to our new site folder.

  2. The default view of the folder automatically renders all of its children (the rows) in order.

  3. You should see:

    • The Featured view hero block at the top.

    • The Text view block in the middle, nicely centered.

    • The Slider view at the bottom, automatically cycling through the three featured slides you added inside it.

If you need to reorder the rows, simply use Plone's standard Contents view (folder contents) on the DynamicPageFolder and drag-and-drop the rows into your preferred sequence.

Congratulations! You have built your first dynamic page.

Contents