By the end of this guide, you will have a custom portal layout built with the drag-and-drop block builder.
Prerequisites
Before you begin, make sure you have:
- DeskPress installed and activated
- A portal page created (via the setup wizard or manually)
Steps
1. Assign the Custom template
Edit your portal page in WordPress and set the page template to DeskPress - Custom. This tells WordPress to use the DeskPress template builder for that page.
2. Open the builder
Go to DeskPress > Support Portal > Portal Builder tab.
3. Understand the layout zones
The builder has four zones where you can place blocks:
| Zone | Description |
|---|---|
| Top | Full-width area above the columns (typically used for the Hero) |
| Left | Main content column |
| Right | Sidebar column (380px wide, collapses below main content on mobile) |
| Bottom | Full-width area below the columns |
4. Arrange blocks
Drag and drop blocks between zones to create your layout. The available blocks are:
- Hero -- banner with title, subtitle, and optional search bar
- Search -- standalone search field
- Topics -- grid of support topic cards
- Actions -- quick action buttons (New Ticket, Live Chat, etc.)
- Conversations -- list of the customer's conversations
- Hours -- opening hours widget
- AI Chat -- the AI chatbot interface
- Login Prompt -- encourages visitors to log in
- Footer -- portal footer content
5. Enable or disable blocks
Each block has an on/off toggle. Disabled blocks stay in their position but do not render on the page. This lets you keep your layout organized even if you are not using every block.
6. Set alignment
Use the left, center, or right alignment buttons on each block to control how it sits within its zone.
7. Configure block settings
Click the gear icon on blocks that have extra settings:
- Hero -- toggle the search bar and opening hours display
- Topics -- toggle recommended badges on topic cards
- AI Chat -- toggle the Tickets and Docs tabs
8. Save your layout
Click Save. Changes are saved via AJAX -- the page does not reload.
9. Preview
Visit your portal page to see the final result.
Example Layouts
Here are a few starting points to inspire your layout:
Knowledge-first layout
- Top: Hero
- Left: Topics, then Conversations
- Right: Hours
Chat-first layout
- Top: Hero
- Left: AI Chat
- Right: Topics
- Bottom: Conversations
Minimal layout
- Top: Search
- Left: Conversations
- Right: Login Prompt
Tips
- When DeskPress adds new blocks in future updates, they appear in the Top zone (disabled by default). They will not disrupt your existing layout.
- Blocks placed in the Right column form a sidebar -- this works well for Hours, AI Chat, or Login Prompt.
- The entire layout is fully responsive. On mobile screens, the Right column collapses below the Left column into a single-column view.
Verification
Visit your portal page in a regular browser window. Confirm that blocks appear in the zones you placed them, with the correct alignment and settings. Check on a mobile device to verify the responsive behavior.