Content Editor

Revolutionize how travel agents create and manage event websites.

In this page
March 19th, 2025

Editing Workflow

Dedicated Mode

Users access a dedicated editing mode by clicking on an "Edit website" button. This allows them to make changes to their wedding website in a separate interface. The key aspects of this editing approach are:

  1. Simplified User Approach
    Users access a dedicated editing mode by clicking an "Edit website" button, making it clear when they are in editing mode versus viewing mode.
  2. Reduce Learning Curve
    This approach avoids overwhelming users with too many options or complex interfaces, ensuring that travel agents can focus on creating and customizing their event website efficiently.
  3. Improved Usability
    The clear distinction between editing and viewing modes helps streamline the editing process, allowing travel advisor to efficiently create professional‐looking event website.
  4. Alignment with Industry Standards
    This method aligns with established practices in the industry, such as The Knot´s approach, which users may already be familiar with.
March 19th, 2025

Two Main Components

Screen Layout

Provide users with an intuitive and efficient editing experience that works well across various devices and screen sizes. The editing interface consists of two main components:

  1. Website Preview
    • Positioned on the left side of the page.
    • Responsive, expanding based on browser width.
    • Displays the live preview of the website being edited.
  2. Side Drawer
    • Located on the right side of the page.
    • Fixed width of 536px on desktop.
    • Full width (100%) on mobile devices.
    • Contains the editing interface and controls.

Design Benefits:

  • Clear visual separation between editing tools and the website preview.
  • Efficient use of screen space, especially on larger displays.
  • Seamless transition between desktop and mobile experiences.
  • Improved user focus by keeping editing controls in a dedicated area.
March 19th, 2025

Side Drawer

Seamless Editing Experience

The editing interface features a dual-panel layout where the website being edited is displayed on the left side of the page, while a side drawer containing the editing tools appears on the right.

Here are the key points about this UI element:

  1. Non‐overlapping Layout
    The side drawer does not overlap the website preview, maintaining a clear separation between the editing interface and the live preview.
  2. Responsive Design
    The layout adapts to different screen sizes, ensuring usability across desktop and mobile devices.
  3. Contextual Editing
    TUsers can make changes in the side drawer while simultaneously viewing the results in the website preview.