Edit pages and add content

Open a page in the content editor and learn how blocks, elements, the text editor, the HTML editor, saving and the preview work.

Page content is edited in the content editor, a block editor in which you put together texts, images, buttons and addons. This article shows how to open it and how its parts fit together.

Open a page for editing

  1. Click Pages → Manage Pages in the sidebar. You see all your pages; the Categories filter on the left and Search for pages help you find one.
  2. Click the page name or the pencil icon Edit Page Content. The cog icon Page Settings opens name, title, URL and the other settings instead; from there, Edit Page Content opens the editor as well.

You can also get there from Menu → Manage Menu Elements: every page link has an Edit Page icon.

How a page is built: layout, blocks and elements

  • The layout is the whole page content. It defines how the blocks are arranged.
  • A block is a section of the page. A block is vertical (its elements below each other) or horizontal (its elements side by side).
  • An element is one piece of content inside a block: a text, a button, a gallery, a contact form, embedded HTML and so on.

Click a part of the page to select it. The switch Layout / Block / Element shows which level is active, and Show Settings opens the settings of that level, for example background, border, spacing, width or alignment.

Add blocks and elements

  • Add Block adds a new section: choose Blank Vertical Block, Blank Horizontal Block or one of the ready-made Templates (filter them by keyword).
  • Add Element (Addon) in the toolbar, or the plus icons Add Element before and Add Element after at a selected element, open the element picker:
    • Basic: Standard (a text element) and Button.
    • Addons: Blog, Calendar, Contact Form, Gallery, Guestbook, Linklist, Member Area, Newsletter, Pinboard, Poll, Shoutbox and Sitemap. Set the addon up under Addons in the sidebar first, see add addons to your website.
    • Social Media: Follow Buttons, Facebook, Instagram, Twitter.
    • Special: Ticker and Embedded HTML for code from other providers.
    • Saved Elements: elements you stored with Save element to reuse them on other pages.

The icons at a selected element move it up or down (left or right in a horizontal block), duplicate it (Duplicate Element) or delete it (Delete selected element).

Write and format text

Click into a Standard element and type. A formatting toolbar appears with bold, italic and underline, font, size and colour, paragraph formats and alignment, lists, links, images, videos, tables, special characters and Insert HTML. Images are explained in insert images, videos in embed videos.

The HTML editor

HTML Editor shows the complete HTML of the page in a code editor. It is meant for advanced users: a mistake can break the page layout. If the code cannot be read back into the visual editor, Try to repair helps. Exit HTML Editor returns to the visual view; Save (Continue Editing) and Save (Finish Editing) save from here as well. See also what is HTML?.

Save, undo and preview

  • Changes are not saved automatically. Save & Continue saves and keeps the editor open; Save & Finish saves and returns to the page list. If you leave with unsaved changes, the admin area warns you.
  • Undo and Redo step through the changes of your current editing session.
  • Preview opens the current content in your website design in a new tab, without saving. After saving, Show page on website in the page list opens the live page.

Still need help?

Our support team is happy to help you with any question about your hPage website.

Contact support