The Page Builder (Drag & Drop editor) enables creating unlimited designs, styles, and pages, without skipping a beat!
When you create a new page, the Page Builder mode will automatically be activated.
Creating a new page with the Drag & Drop editor
When you create a new page and use the new editor, you'll find an empty canvas for you to create a page. Luckily, you can create a beautiful page in just a few clicks. Here's how a blank page can look like, we automatically show the header, page title (which can be modified or removed) and footer -
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. The blocks are also 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.
2. Widget Settings: Each item you place on the page 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: 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
Generally speaking, page builders or any type of software can be a little overwhelming at a first glace. That said, we invested many hours in researching, designing and developing the page builder to be super-intuitive for beginners and professionals alike. 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)
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 Style Options
Once you click on the above icon, you'll toggle the "Advanced" CSS/style options. By default, we hide many styles that are a little more advanced or complex to use. If you're an experienced web designer or have used other website building tools in the past - feel free to enable this whenever you build your pages!
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 your 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
Creating a custom homepage
When you create or edit any page, you'll be able to set that page as the homepage:
Enabling this option will automatically replace the default homepage with the custom page you've just created. You can only have one homepage per website, of course, so enabling this on another page would just turn that new page into the current homepage.
Example: Creating a page
Migrating old pages to the new editor
When you edit old pages, you can easily just click on the toggle button to automatically migrate the old structure of your page into the new editor -
Once you migrate to the visual Drag & Drop mode, you'll be able to fully preview the page and add a lot of new types of content and layouts