πŸ““

Content Modules

Return to Clientβ€’Studio

Common page content modules

πŸ’‘
Modules are the building blocks for pages and posts. They can sometimes be used on single page only (home) or they can be universal to the site (any post or page)

Here’s a list of commonly used content modules

You can find code for these elements from the Baselayer Theme for Wordpress. These often are the ones used in design or any new elements can often be derived from these.

  • Text + Image (aka Feature, Highlight) - Image aligned left and textblock (heading, p, btn) on the right. Usually automatically varied to switch sides on following blocks.
  • Banner (aka CTA, Full Image) - Usually full image (or color) background accompanied by vertically centered text block.
  • Columns (aka Grid) - Repeater text blocks / columns
  • Cards - Similar to columns but usually have background dropshadow and card header image.
  • FAQ (aka Accordion) - collapsible ul more or less
  • Carousel - it is what it is. Slickjs, Flickity or css only.
  • Numbers - usually columns with animated large h1 number
  • Tabs - Horizontal tabs that change content below (usually feature or text block)
  • Steps (aka Vertical Feature) - usually something where text columns (3-4) are vertically on the left and fixed single image on the right. The image changes when corresponding text column is highlighted (click, time or scroll)
  • Stack - Usually full screen panels that are scroll snapped together to create fixed effect (css only or js)

Other jargon

Smaller elements used inside the modules or page templates

Toast - similar to alert softer https://flowbite.com/docs/components/toast/

Pagination - Sometimes required for blog archives (if not dynamically loaded)