Skip to main content

Modules

Create reusable sections that update everywhere at once.

Overview​

Modules are reusable sections that can be included in multiple templates. When you edit a module, every template using it updates automatically.

Think of modules as "single source of truth" components.

When to Use Modules​

Perfect For​

Use CaseExample
HeadersSite header appearing on every page
FootersSite footer appearing on every page
CTAsCall-to-action section used across pages
Newsletter signupEmail capture form
Contact infoAddress/phone appearing in multiple places
TestimonialsCustomer quotes section

Benefits​

  • Consistency - Same content everywhere
  • Efficiency - Edit once, update everywhere
  • Organization - Keep reusable parts separate

Modules vs Blueprints​

TheDock has two types of reusable content:

TypeBehavior
ModuleLinked - changes sync everywhere
BlueprintCopied - creates independent content

Modules (Linked)​

When you use a module:

  • Content is linked to the source module
  • Editing the module updates all instances
  • Great for content that should be identical everywhere

Blueprints (Copied)​

When you use a blueprint:

  • Content is copied as static elements
  • Changes only affect that specific copy
  • Great for starting points that you'll customize

Managing Modules​

Accessing Modules​

  1. Click B. Layout in navigation
  2. Click Modules in the sidebar

Module Categories​

CategoryDescription
In UseModules currently used in templates
UnusedCreated modules not in any template
LibraryPre-built module blueprints

Creating Modules​

New Module from Scratch​

  1. In Modules, click New Module
  2. Name your module
  3. Build using the same editor as templates
  4. A module contains: Sections → Grids → Areas → Blocks

From Existing Section​

  1. While editing a template
  2. Select a section you want to reuse
  3. Click Save as Module in the action menu
  4. Name the module
  5. The section becomes a linked module

From Blueprint​

  1. Browse the Library
  2. Click a blueprint to preview
  3. Click Save as Module
  4. The blueprint becomes your own module

Editing Modules​

Opening the Module Editor​

  1. Go to B. Layout > Modules
  2. Find the module you want to edit
  3. Click Edit

Making Changes​

The module editor works like the template editor:

  • Add/remove sections and blocks
  • Configure settings
  • Preview changes

Changes Propagate Everywhere​

When you save a module, all templates using it update automatically.

Warning: Be careful - changes affect every instance!

Using Modules in Templates​

Adding a Module to a Template​

  1. Open a template for editing
  2. Click + to add a section
  3. Select From Module
  4. Choose the module to insert
  5. The module appears as a linked section

Identifying Modules​

In the template tree view, modules are marked with a special icon and show:

  • Module name
  • "Linked" indicator
  • Link to edit the source module

Positioning Modules​

Modules can be placed anywhere sections can go:

  • Top of template (for headers)
  • Between content sections
  • Bottom of template (for footers)

Detaching Modules​

Sometimes you want to break the link and make a module's content independent.

How to Detach​

  1. In the template editor
  2. Select the module section
  3. Click Detach from Module
  4. The content becomes static in that template only

After Detaching​

  • That section no longer updates with the module
  • You can customize it independently
  • Other instances of the module remain linked

Headers and footers are special modules assigned globally.

Setting a Global Header​

  1. Go to B. Layout > Header
  2. Select a module to use as header
  3. All templates show this header
  1. Go to B. Layout > Footer
  2. Select a module to use as footer
  3. All templates show this footer

Template-Specific Headers/Footers​

If a template needs a different header/footer:

  1. Open the template
  2. Add a module section at top/bottom
  3. Choose a different header/footer module

Modules as Flexible Content (Page Builder)​

One of TheDock's most powerful features is the ability to export modules as flexible content sections that WordPress editors can add to pages—essentially creating a page builder experience.

What is Flexible Content?​

Flexible content lets editors compose pages by adding, removing, and reordering pre-designed sections. Instead of a fixed layout, editors choose from a library of modules you've created.

Traditional Template:              Flexible Content:
┌────────────────────┐            ┌────────────────────┐
│ Header             │            │ Header             │
├────────────────────┤            ├────────────────────┤
│ Hero Section       │            │ [Editor chooses]   │
├────────────────────┤            │  + Hero            │
│ Features Grid      │            │  + Testimonials    │
├────────────────────┤            │  + CTA             │
│ Testimonials       │            │  + Features        │
├────────────────────┤            │  (any order,       │
│ CTA                │            │   any combination) │
├────────────────────┤            ├────────────────────┤
│ Footer             │            │ Footer             │
└────────────────────┘            └────────────────────┘

Enabling Modules for Flexible Content​

To make a module available as flexible content:

  1. Go to B. Layout > Modules
  2. Find the module you want to enable
  3. Click the database icon (Activate Flexible) on the module
  4. The module is now available as a flexible content section

The icon toggles between:

  • Inactive - Module is only usable in TheDock templates
  • Active - Module is exported as a flexible content option

Creating a Flexible Section in Templates​

Once modules are enabled for flexible content:

  1. Edit a template
  2. Add a new section
  3. Choose Flexible Content as the section type
  4. Select which ACF flexible content field to use (or create a new one)
  5. The section becomes a placeholder that editors fill with modules

How Editors Use It​

After export, when editors create or edit a page in WordPress:

  1. They see a Flexible Content field (powered by ACF)
  2. They click Add Row to add a section
  3. They choose from your enabled modules (Hero, CTA, Features, etc.)
  4. They can reorder sections by dragging
  5. They can remove sections they don't need
  6. Each module may have its own editable fields

Example: Building a Page Builder​

Step 1: Create Your Modules

ModulePurpose
Hero - CenteredLarge headline, centered text, CTA button
Hero - SplitImage on one side, text on the other
Features Grid3-column feature cards
Testimonials SliderCustomer quotes carousel
CTA BannerFull-width call-to-action
Team GridTeam member photos and bios
FAQ AccordionExpandable questions and answers
Contact FormForm with map

Step 2: Enable for Flexible Content

Click the database icon on each module you want editors to access.

Step 3: Create a Flexible Template

  1. Create a new template (e.g., "Page - Builder")
  2. Add Header module at top
  3. Add a Flexible Content section in the middle
  4. Add Footer module at bottom
  5. Mark template for export

Step 4: Export and Test

After export, editors can create pages using this template and compose unique layouts from your modules.

Module Fields in Flexible Content​

When a module is used as flexible content, any custom fields in that module become editable per-instance:

  • Static content (set in TheDock) stays the same
  • Dynamic fields (custom fields) can be edited per section

For example, a "Hero" module might have:

  • Fixed: Layout structure, styling, animations
  • Editable: Headline text, background image, button text, button link

Best Practices for Flexible Modules​

1. Design for Flexibility​

Create modules that work well in any order:

  • Don't assume what comes before/after
  • Use consistent spacing
  • Consider background color transitions

2. Name Modules Clearly​

Editors see these names when adding sections:

  • ✅ "Hero - Centered with Video"
  • ✅ "3-Column Features"
  • ❌ "Section 1"
  • ❌ "New Module"

3. Provide Variety​

Offer multiple versions of common sections:

  • Hero (centered, split, video background)
  • Features (2-column, 3-column, icon-based)
  • Testimonials (single, slider, grid)

4. Keep Modules Self-Contained​

Each module should look complete on its own:

  • Include appropriate padding
  • Handle its own background
  • Don't rely on adjacent sections

5. Test All Combinations​

Before launching, test modules in various orders to ensure they work well together.

Module Best Practices​

1. Plan Your Modules​

Before building, identify what should be modules:

  • What appears on multiple pages?
  • What needs to stay consistent?

2. Name Clearly​

Use descriptive names: "Main Header", "Newsletter CTA", "Contact Footer"

3. Keep Modules Focused​

One purpose per module. Don't create mega-modules.

4. Test After Changes​

Since changes propagate, preview multiple templates after editing.

5. Document Non-Obvious Modules​

If a module has special requirements, note them in the name.

6. Use Unused for Staging​

Build new modules as "Unused" until ready, then add to templates.

Troubleshooting​

Changes not appearing in templates​

  • Ensure you saved the module
  • Check that templates use the module (not detached copies)
  • Export theme to see changes on live site

Module shows in wrong position​

  • Check template structure
  • Verify module is in the correct section slot

Can't delete module​

  • If "In Use", remove from all templates first
  • Check that it's not set as global header/footer

Module looks different in different templates​

  • Check template-level settings (background colors, etc.)
  • Module inherits some styling from template context
  • Templates - Using modules in templates
  • Header - Global header configuration
  • Footer - Global footer configuration

← Back to Documentation