Using the drag-and-drop page editor

The Page Editor is a visual, drag-and-drop builder: you assemble your page out of blocks and watch the result update live as you work. No code, no design software. This guide walks through every part of the editor.

The screen at a glance

  • Left panel - your page structure: the layout choice, page background, headings font, and a list of every area (menu, header, main, side bars, footer) with the blocks inside it.

  • Middle - the live preview. This is your actual page: what you see here is exactly what visitors will get.

  • Right panel - the settings of whichever block you clicked: its texts, images, colors and options.

  • Top bar - Save, Preview (opens your real page in a new tab), Mobile (phone-sized preview) and Publish/Unpublish.

On a phone, the three panels become the tabs Preview, Layout and Settings at the top of the screen.

The areas of your page

  • Header - the top strip of your page. It holds as many blocks as you like (for example a hero banner plus a social-links row) and can get its own background color, text color, and a "stick to top while scrolling" option.

  • Navigation menu - an optional menu bar with your own links. Add it with "+ Add navigation menu" in the left panel; in its settings you choose whether it sits above or below the header.

  • Main - the heart of your page, where most blocks live.

  • Left / right bars - narrow columns beside your main content, only visible if your layout has them.

  • Footer - the bottom of the page, with its own background and text color. Every layout has a footer.

Adding a block

  1. Hover between two blocks in the preview: a thin line with a ⊕ appears. Click it to insert a block at exactly that spot.

  2. Or use the "Add block" buttons in the left-hand area lists - handy for empty areas.

  3. Pick a block type from the menu. Blocks that are not part of your plan show a small lock with an upgrade hint.

Editing a block

Click any block in the preview (or in the left-hand list) and its settings open on the right. The panel is organized top to bottom:

  • Content first - the texts, images, links or books the block shows.

  • "Title style" section - blocks with a title (About the author, Featured book, Bookshelf, FAQ and many more) have a collapsible Title style section: size, bold / italic / underline, font and color. Click the section header to open it.

  • "Layout" section - at the bottom of every block: a Background color (turns the full band behind the block into a color) and Vertical spacing (Compact, Normal or Roomy - pulls the block closer to its neighbours or gives it air).

  • "Remove block" - the red button at the very bottom deletes the block.

Moving and rearranging

  • Drag a block directly in the preview: hover it and grab the small colored handle that appears in its top-left corner.

  • Or drag rows in the left-hand lists by their grip icon - this also works across areas, for example from Main into the Footer.

  • The narrow side bars fit a subset of block types; a block that does not fit simply will not drop there.

Page-wide design

  • Layout (left panel, top): a single centered column, a header above it, or a header with one or two side bars. Miniature previews show each option.

  • Content width: Narrow, Normal or Full - how wide the content column may grow on large screens. "Header & footer at content width" aligns those bands with the column instead of spanning the full window.

  • Page background: a color and/or a background image for the entire page.

  • Headings font: one font for every block title on the page. A block whose own "Title font" is set keeps that font - the page-wide choice is the default, not a lock.

  • Header and footer colors: the swatches under each area in the left panel set the band background and text color.

Starting from a template

The "Start from template..." dropdown in the top bar replaces your current layout with a professionally arranged starting point that you then make your own. This overwrites your existing blocks, so the editor asks for confirmation first.

Saving, previewing and publishing

  • Your changes auto-save every 30 seconds; the Save button saves immediately. "Unsaved changes" in the top bar tells you when a save is pending.

  • Preview opens your real page in a new tab, exactly as visitors see it.

  • Mobile shows your page in a phone-sized frame - most readers visit on a phone, so check this before publishing.

  • Publish makes your page public; Unpublish takes it offline without deleting anything.

Once your page is published, saved changes appear on it right away - there is no separate step to push them live. See publishing and previewing for more.

Tips

  • Looking for a setting you cannot find? Scroll down in the right panel and open the collapsed "Title style" and "Layout" sections - style options live there.

  • Less is more: a hero, an about section and a bookshelf make a strong page. Add from there.

  • Use the Mobile preview after big changes - a layout that looks great on desktop can feel long on a phone.

Was this article helpful?

Still stuck? Contact us - we're happy to help.