Page Sections

There are a number of different pods that can be used at the “trunk” level of page design within Steersman’s Website module, and Page Section is one that you’ll find yourself using for almost everything. This pod acts as a container for many other design pods, such as Grid, Text, Picture, etc. and it allows you to specify a set of stylizations that would apply for the entire section.

page section selection.JPG

When adding a Page Section pod to your page, you can control the background color, text color, and the blending mode, all of which will apply for all the child pods you add to the section. You can add configurable image elements to any or all of the four corners of the section, and you can specify an image that would stretch or repeat across the background to add texture.

Most of the design changes can be controlled via presets and you can read more about all the various preset options here, however if you just want this section to have a light gray background accent and you don’t need to customize anything else, there’s a built in flag that allows you to do that without creating a preset.

example of background accent flag.JPG

Because this pod is intended to act as a container, the only actions you can take is to select a preset, highlight the section, mark it as shared and most importantly, add a variety of child blocks, which will contain the actual content. Not all pods can be added within a Page Section, some are only available at the trunk or within one of the other pods. The following is a list of pod types that can be added to a Page Section:

  • Grid
  • Inline Block Container
  • Text
  • Text Card
  • Map Card
  • Picture
  • Picture Text
  • Category Tiles
  • Banner Carousel
  • List Banner
  • Compatibility Tag
  • Contact Form
  • FAQ
  • Social Media Icons
  • Security Badge
  • Country Switch
  • Quote

Each Page Section pod comes with built in margins, so if you find that two consecutive pods are just too close together no matter the content, you can insert some breathing room by putting them into separate Page Sections. The following shows a highlighted Page Section with an Image and a Text pod compared to two separate Page Sections where one contains the Image pod and the other has the Text pod. As you can see, there is more white space in the second option.

page section margins.jpg

Just like any other pod, if you’re planning to use this particular design or content in several places throughout your website you can set the Share flag. This will allow you to add the entire pod wherever you need it without recreating it from scratch. If you ever need to update the content of this pod, you’ll also have the benefit of only having to do it once. Since the pod is shared, updating any one instance of it will automatically ensure that all instances reflect the changes.

example of sharing page sections.JPG

Please keep in mind that if you remove all instances of a shared Page Section, you’ll effectively delete it and will be unable to add it elsewhere in the future without recreating it.

A lot of the content on your website will be contained in Page Sections, so you may want to consider the various styles and options you can control on this level when creating design plans for your pages. For a list of child pods that can be contained within a Page Section, please refer back to the outline provided here.