Flexible Content Editor - How the page editor and modules work together

How the Page Editor and Modules Work Together

The EWS Platform CMS uses a powerful Flexible Content Editor that enables you to build custom page layouts using a row and column system. Content modules integrate seamlessly with this editor to provide dynamic functionality throughout your website.

Understanding the Page Editor

The Page Editor, also known as the Flexible Content Editor, is a visual drag-and-drop interface that allows you to build custom page layouts without writing code.

1. Access the Page Editor

   Navigate to Pages in your admin panel and click Add New or Edit on an existing page. The Flexible Content Editor appears below the page settings, allowing you to build your page structure.

2. Create Rows (Sections)

   Rows are horizontal sections that span the full width of your page. Each row can have custom settings including background colors, images, videos, padding, margins, alignment, and responsive behavior. Click the Add Row button to create a new section.

3. Add Columns Within Rows

   Within each row, you can add multiple columns to create complex layouts. Columns are percentage-based (e.g., 50/50, 33/33/33, 25/75) and automatically stack on mobile devices. Each column can contain text, images, buttons, and module content.

4. Configure Row and Column Settings

   Click the settings icon on any row or column to access advanced options. You can control spacing (padding/margins), background styles, text alignment, minimum heights, custom CSS classes, and responsive breakpoint behavior for desktop, laptop, tablet, and mobile.

5. Add Content to Columns

   Click within any column to edit its content using the rich text editor. You can format text, insert images, create links, embed videos, and add module shortcodes. The editor supports advanced formatting options for complete customization.

6. Use the Block Library

   Save frequently used row layouts to the Block Library for reuse across pages. This feature allows you to maintain consistent design patterns and speed up page creation. Click the Save to Library option when editing a row.

7. Integrate Modules

   Modules are self-contained functional components like forms, CTAs, galleries, news feeds, and testimonials. Insert module content using shortcodes within your columns, or assign modules to specific page settings (e.g., Footer CTA, Contact Form).

8. Preview and Publish

   Use the View Page button to preview your changes before publishing. Your page content is automatically converted into a fully responsive website layout that works beautifully on all devices.

How Modules Integrate with Pages

The EWS Platform uses a modular approach where different types of content are managed separately and integrated into pages as needed. Common modules include:

• Forms: Contact forms, lead capture, and custom form builders that can be embedded on any page
• Call-to-Actions (CTAs): Reusable promotional sections that appear in page footers or inline content
• Galleries: Image galleries and lightbox functionality for showcasing visual content
• News & Blog: Dynamic content feeds that display recent articles with filtering and pagination
• Testimonials: Customer reviews and social proof elements with star ratings
• Knowledge Base: Help documentation and support articles with categorization and search
• Resources: Downloadable files, whitepapers, and digital assets
• Staff Directory: Team member profiles with photos and contact information
• FAQ: Frequently asked questions with accordion-style display

Content Publishing Process

When a visitor accesses a page, the CMS automatically:

1. Loads the appropriate page template with header and navigation
2. Displays your page content with all configured rows and columns
3. Processes any modules or dynamic content areas
4. Applies responsive styling to ensure proper display on all devices
5. Includes the site footer and any assigned footer modules

Best Practices

• Use consistent row and column patterns throughout your site for visual cohesion
• Save commonly used layouts to the Block Library to maintain design consistency
• Configure responsive settings to ensure content displays properly on all devices
• Use clear headings and proper text hierarchy for better readability and SEO
• Test page load times when using background videos or large images
• Leverage module reusability by creating content once and referencing it across multiple pages
• Use page templates appropriately to maintain consistent site structure
• Preview your pages on different devices before publishing to ensure everything looks great