Page Builder
The Page Builder (Drag & Drop editor) is great for creating unlimited designs, styles, and pages - without skipping a beat! When you create a new page, the Page Builder will load and let you fully customize the page.
Creating a new page with the Drag & Drop editor
On the left sidebar, you'll find 3 tabs on the very top:
1. Blocks & Templates: The first tab contains all blocks and pre-designed templates we've created for you. You can drag any content block or widget onto the page.
- Blocks are essentially widgets that you can add to any page. They are categorized by type - you can find basic blocks that are useful for generic content, rows and columns, and more. Then, you'll find custom widgets that include popular types of content you'd probably want to display - a list/grid/carousel of all your episodes, a list/carousel of reviews, blog posts, sliders, guests (participants), Videos, sharing/social widgets, audio player, forms and much more.
- Templates are pre-designed content sections that you can add to any page. This include CTA (call to action) sections, various content sections, and even full page templates like theme homepages, about pages, contact pages, page with sidebar, or a media kit page.
2. Widget Settings: Each item you place on the page canvas comes with its own set of options and layout settings.
You can control basic things like the layout (margin, padding, max width/height etc.), typography (font family, font style, font size, color etc.), and decorations (background color, background image, opacity, border, transitions, shadow and more).
Beyond those generic styling options, you'll also find advanced settings for each widget. For example, when you add the "Episodes" widget, you'll be able to modify the initial episode count, the column count, display filter buttons or filter to only display a certain category, and much more.
3. Page Settings: Edit the page options like the page slug (URL), add a custom SEO title, description or image, change the page status or set the page as the homepage.
Page builder controls
The top toolbar can help you navigate and control the editor a little further.
There are a few custom controls on the toolbar of the editor that can help you create better pages -
Device Mode (Mobile / Responsive editing)
When you create your page, the default view is always the desktop mode. In order to preview and edit your website's mobile layout, you can hit one of the other views (tablet & mobile) and make changes specifically on those. (more info on mobile editing here)
Layer Manager
When you build more complex pages, the layer manager can come handy - You'll be able to view all the different items located on your page, re-order the elements or jump to a certain section. It makes it much easier to navigate on large pages with lots of elements.
Advanced Styling Options
Toggle the "Advanced Options" button to enable more advanced styling and layout settings in the sidebar. This really gives you full control over the appearance of the pages.
By default, we hide certain styles that are not as frequently used as others. This really helps simplifying the editor and make it accessible to complete beginners and professional designers alike. If you're a power-user looking for more granular control - this one is for you.
Enabling the Advanced Options mode is global, so you'll see it on all your pages, but it can be easily deactivated at any time.
Misc. / additional controls
In the above image, you can see 4 controls. From left to right, here's what they are for:
- "Distraction Free" mode - make the canvas full screen and (without a sidebar) and edit basic text without distractions.
- "Grid View" mode - When enabled, you'll see a thin border around each and every component, container or element. This can help designers and editors to get a better understanding of the spacing and layout being used.
- Undo / Redo - This one is straightforward - these buttons would take you once step back or forward in your editing process
Page Builder - Basic Editing
Creating a custom homepage
When you create or edit a page, you'll be able to set that page as the homepage, this is located in the page settings panel:
Example: Creating a page
Migrating old pages to the new editor
When you edit older pages that were created without the page builder editor, you can easily just click on the toggle button to automatically migrate the old structure of your page into the new editor -
