How to build your own admin pages from blocks

In TeleportHQ, your team can create new pages for your live site from the admin panel, without opening the editor. In the admin panel, open Pages and click + Add New. Type a Title (the Slug follows it), add blocks such as Section, Heading, Text, Image, Button or your own components from the Add blocks tab, set Status to Published and click Create. The page appears at /pages/<slug> on your site within about 60 seconds.

Before you start#

• The admin panel must be on, and you need an account with the admin role. See How to open the admin panel on your live site.
• Publish your site after turning on the admin panel.
• For your own design blocks, create components in the editor first. A component can be used as a block when its settings are simple: text, long text, image, select, color, number, on/off, rich text or link. See How to add editable settings to a component (props).

Steps#

1. Open your admin panel on your live site and sign in as an admin.
2. In the admin sidebar, under CONTENT, click Pages. The list shows each page's Title, Slug, Status and Created At.
3. Click + Add New. The new-page screen opens on its Page details tab.
4. In Title, type the page's name, for example Summer Sale.
5. Check the Slug. It fills in from the title, for example summer-sale, and becomes the address: /pages/summer-sale. Edit it to change the address.
6. In Status, choose Published. Pages left as Draft aren't shown on your site.
7. Click the Add blocks tab. Its cards are grouped under Layout, Elements and Your components. Click a card to add that block to the page. For example:
   • a Section with Layout set to 2 columns,
   • a Heading with the text Summer Sale,
   • an Image, a Text and a Button with the label Shop now and a link.
8. On the right, Blocks on this page lists what you added. On a block, click Edit to change its settings, ↑ or ↓ to move it, or ✕ to remove it. You can also drag a block into a section. Click Live preview to see the page as visitors will.
9. Click Create.

To change a page later, click it in the Pages list, edit it and click Save Changes.

The built-in blocks#

Your project's own components appear under Your components.

Page SEO#

On the Page details tab, each page has its own search and sharing settings. Leave a field empty to use the default:

• Search engine settings: Meta title, Meta description, No index ("Ask search engines not to list this page."), Canonical URL, and Custom redirect with its Redirect type.
• Social sharing (Open Graph): Social title, Social description and Social image (1200 × 630 pixels works best).

Check that it worked#

• In the Pages list, click View ("Open this page on the site, in a new tab").
• The page opens at /pages/<slug>. Changes show on the site within 60 seconds.

Troubleshooting#

The page doesn't appear on my site Check that Status is Published and the slug is correct. Wait up to 60 seconds after saving.

A block shows as "Unknown block (removed component)" The component behind it was deleted in the editor. Its content is kept on the page, but the block no longer shows on your site. Recreate the component, or replace the block.

My new component isn't offered as a block In the editor's left sidebar, open Plugins → Admin panel, click Manage next to Data the admin panel manages, and at the bottom of the Manage Entities window click Sync components. It asks once more: "This rebuilds the Custom Pages renderer and regenerates the three admin Pages screens. Edits you made to those admin screens are lost; your saved pages and their content are not affected." Click Sync components again, then publish.

"Give the page a slug first — that is what its address is made of." You tried to copy the page address before adding a slug. Add a slug first.

Publishing says "Your admin Pages screens have manual changes, so Custom Pages left them alone" You edited the admin Pages screens in the editor, so new blocks weren't added to them. Run Sync components in Manage Entities to rebuild them.

Good to know#

• Up to 60 blocks per page, counting sections and the blocks inside them.
• In the editor, the page named Custom Page (with an Admin chip in the Pages list) shows every page your team builds. Its canvas is read-only, and it can't be deleted or duplicated while the admin panel is on.
• You can look at the builder in the editor: in the Pages list, open admin-panel → pages → pages-create. Its tabs only switch on the published admin panel.
• When you publish, TeleportHQ may update the admin Pages screens to match your components: "Custom Pages was updated to match your components before publishing."