Website Page Editor
How to lay out a custom website page in the full-screen drag and drop editor, or write it in the HTML editor, including saving, previewing and the Computer and Phone views.
Custom website pages are designed full screen, in one of two editors. Pages built from blocks open in the drag and drop editor, where you lay the page out with sections and blocks and set its fonts and colours. Pages written in HTML open in the HTML editor, with the code beside a preview. The built-in pages, such as Home and Contact, don’t use either: they have their own fields.
To open a page’s editor, go to My Website, switch to Pages, click the page and choose Edit. On the page’s settings screen, choose Edit design in the Design card, or Edit HTML for a page written in HTML. A new page opens in its editor as soon as you create it.
Which Editor a Page Uses
The Design type on the page’s settings screen decides which editor opens and what visitors see.
- Visual editor (drag-and-drop blocks): The right choice for most pages. You build the page from ready-made sections and blocks such as titles, text, images and buttons, without writing any code.
- Raw HTML (paste or write your own): For a page you already have as HTML, or would rather write by hand.
- Changing it later: Pick the other Design type and choose Save page. Until you save, the Design card says Save the page to design it this way and the button to open the editor is hidden. Switching doesn’t convert the page: the blocks and the HTML are kept separately, so switching back brings your blocks back as you left them. Visitors see whichever one the page is set to.
The Top Bar
Both editors share the same bar across the top of the screen.
- Back: The arrow on the left goes back to the page’s settings screen, asking first if you have unsaved changes.
- Page name: Click it to rename the page, then press Enter, or Esc to leave it as it was. The new name becomes the page’s Title when you save. The Navigation label used in your website menu is separate, so change that on the settings screen if it should match.
- Undo and Redo: Step back and forward through your changes. Ctrl+Z and Ctrl+Shift+Z do the same, or Cmd+Z and Cmd+Shift+Z on a Mac.
- Save status: Says Unsaved changes while there is something to save, and Last saved with the time once you have saved.
- Computer and Phone: Show the page at the width of a computer or a phone screen.
- Preview: Only in the drag and drop editor. Opens the page in a popup, as described further down.
- Save: Saves your changes and keeps you in the editor. Ctrl+S, or Cmd+S on a Mac, does the same.
- Save & quit: Saves your changes, then takes you back to the page’s settings screen.
Saving Goes Straight to Your Website
Website pages save when you choose to, not as you go, and there are no drafts like there are for document templates. Each save puts your changes straight onto the page, so if the page is enabled, visitors see them as soon as you save. To build a new page in private, leave Enabled switched off on its settings screen until it is ready.
- Leaving with unsaved changes: Going back, or opening another screen, asks Leave without saving? first. Stay keeps you in the editor and Leave without saving throws the changes away. Closing the browser tab warns you too.
- If a save fails: The top bar and a message say what went wrong, and your changes stay in the editor so you can try again.
Laying Out a Page With Blocks
The drag and drop editor has a panel on the left and the page in the middle. The rail down the side of the panel switches between Content, for adding things to the page, and Style, for the look of the whole page. It is the same editor used for document templates, with two extra blocks for the web.
Adding Blocks and Sections
- Blocks: A tile for each kind of block: Title, Text, Image, Button, Logo, Social, Divider, Spacer, HTML, Table, List, Quote, Video and Navigation. Drag a tile onto the page where you want it, or click it to add the block in a new section at the bottom of the page.
- Sections: Ready-made sections in folding groups: Text and images, Text, Images, Headers, Footers and Empty columns. Click one to add it at the bottom of the page, or drag it into place.
- Saved: Sections you have saved to use again, shared by all your website pages and blog posts. To save one, select a section on the page and choose Save section on its toolbar. Saved Sections covers renaming and deleting them.
Arranging the Page
- Selecting: Click a block to select it, and click the space around blocks to select their column or section. The panel then shows the settings for what you selected. The cross at the top of the settings closes them and puts the Content panel back.
- Toolbar: Whatever is selected has a small toolbar under it. Drag the handle to move it, or use Select parent, Move up, Move down, Duplicate and Delete. A section also has Save section, and a column has Remove column, which moves its blocks into the column beside it.
- Columns: A selected section has a plus on each side for adding a column, up to four. Drag the lines between columns to resize them, or choose a layout under Columns in the section’s settings.
- Shortcuts: Delete or Backspace removes the selected block or section, Ctrl+D (Cmd+D on a Mac) duplicates it, and Esc selects whatever holds it.
Writing and Formatting Text
Click a title, text, quote, list or button on the page to type straight into it. While you type, a text toolbar sits across the top of the page with Text style, Font, Font size, bold, italic, underline, strikethrough, text colour, highlight, links, alignment, bulleted and numbered lists, subscript, superscript and Clear formatting. It only offers what suits the block, so a button’s label can be aligned but not formatted.
Settings for What Is Selected
- A block: Its own settings come first, such as the image, link and alternative text for an Image block. Then come the groups every block shares: Layout, Spacing, Background, Corners and border and Content visibility.
- A section: Name, which only shows in the editor to help you find it, Columns, Line up columns, Background with Background across the whole page, Spacing including the space between columns and between blocks, Corners and border and Content visibility.
- A column: Line up content, Padding, a background colour, and corners and a border.
- Content visibility: Show on chooses Everywhere, Computers or Phones, for something that should only appear on one kind of screen, such as a shorter heading for phones.
Images
- Choose an image: On an Image block, opens the Media library popup with the images from your website’s Media tab. Search by name or alt text, and click an image to use it.
- Upload image: Adds a new image from your device. It goes into the website Media library, so it is ready for your other pages and galleries too.
- Alternative text and Caption: Typed on the Image block itself. The alt text saved in the Media library isn’t copied onto the page, so describe the image here for people who can’t see it.
- Image address: Paste a web address instead to use an image from somewhere else. Link makes the image open a page when it is clicked.
- Deleting from the popup: The bin on an image deletes it from the Media library altogether, not just from this page, so anywhere still using it shows a broken image.
Video and Navigation Blocks
These two blocks are only offered for website pages and blog posts, because they don’t suit a printed document.
- Video: Paste the video’s address into Video link. YouTube and Vimeo links fill in the thumbnail for you, or use Choose a thumbnail to pick your own. Description names the video for people who can’t see the thumbnail. On your website the video shows as its thumbnail with a play button, and clicking it opens the video.
- Navigation: A row of links, useful in a header section. Add a page lists the enabled pages on your website, and Add a link takes any other address, such as
https://or/contact. Space between sets the gap between the links. Links are copied in when you add them, so if you later rename a page or change its slug, update the block as well.
Style and Your Brand
- Style: Sets the look of the whole page: Page for the background, padding, content width and text direction, then Text, Text styles for normal text and headings H1 to H4, Links, Buttons and Tables. Settings on a block take over from these.
- Apply brand: In the Brand group, fills in the page’s fonts and colours from the brand library in Organisation Information. Undo puts them back. New pages already start with your brand’s colours and fonts. If no brand is set yet, the group links to Organisation settings instead.
- Logo and Social blocks: The Logo block shows the logo saved in Organisation Information and is left out while there isn’t one. A new Social block starts with the social media pages saved there.
Computer and Phone Views
Switch between Computer and Phone in the top bar to check the page at each size. Columns stack on a phone. A block set to show only on the other kind of screen is faded, and the label on a block or section says computers only or phones only. Columns can only be resized in the Computer view.
Preview
Preview opens the page in a popup as it is in the editor now, including changes you haven’t saved. It shows the page’s content on its own, without your website’s header, menu, footer, gallery or quote form. To see the page in place, save it and use Open page in the page’s details.
On a Phone or Small Screen
On a narrow screen the page takes the full width, and the panel slides up over it from the Blocks button in the corner. It also opens by itself when you select something, and Hide panel tucks it away. The top bar keeps fewer controls, and on a phone it has just the back arrow, the name, Preview and Save & quit.
Writing a Page in HTML
A page set to Raw HTML opens in the HTML editor, with the code on the left and a preview of the page on the right. On a narrow screen they take turns, with a Code and Preview switch at the top.
- The code: Coloured as you type, with line numbers and matching tags. Ctrl+F, or Cmd+F on a Mac, searches it.
- The preview: Catches up a moment after you stop typing, and Computer and Phone in the top bar change its width. It is styled simply rather than in your website template, so check the finished look on your website after saving.
- Saving: Works as in the drag and drop editor: Save, Save & quit or Ctrl+S, with a warning before you leave with unsaved changes. There is no Preview button, because the preview is always beside the code.
- Images: There is no image picker. Add images with an
imgtag and the image’s web address. - Size: A page can hold about 1 MB of HTML. Anything larger won’t save.
For safety, Work Planner tidies the HTML before showing it. Headings, paragraphs, lists, links, images, tables and quotes come through. Scripts, style sheets, forms and embedded frames such as maps or video players are removed, along with classes and most inline styles, so the page takes its fonts and colours from your website template. The preview shows the page after this tidy-up, so anything that disappears there won’t show on your website either.
What This Affects Elsewhere
What you save here is the live body of the custom page. The page’s settings screen still controls everything around it: the address, whether the page is enabled and in the menu, its SEO details, and any gallery or quote form above or below the body. Buttons and links can send visitors to your other pages, such as Contact or Request Quote, and images come from the shared website Media library.
Related articles
- Editing a Website Page: The page’s settings screen, including the Design type and the Design card.
- Creating a Website Page: Making the page before you design it.
- Website Media Library: Uploading and looking after the images you use on pages.
- Document Template Editor: The same drag and drop editor, used for your documents.
- HTML Template Editor: The HTML editor as it works for document templates.
- Saved Sections: Saving sections to reuse across your website pages and blog posts.
- Branding and Business Details: The brand colours, fonts, logo and social pages the editor uses.
- Blog Post Editor: Designing blog posts in the same editor.