Pages

All of the pages on your website are available at the Pages panel.

This is where you can view, edit and delete the pages available on your site. When you mouse over the pages, you will have the ability to quick-edit, delete (trash), duplicate (clone), and view the page.

Adding a page

Adding a page is as easy as Pages > Add New. There are a few things that you need to note when you add a new page.

  • Title — This is the title of the page, and will be displayed at the top of the page.
  • Subtitle — This will be displayed right below the page title, and can be left blank.
  • Background Colour — This will allow you to set a background colour for the page. If left blank, it will default to #f9f9f9, which is a off-white colour.
  • Featured Image (right) — This allows you to set the "hero image" on the top of the page. It will be automatically cropped to a suitable size for the layout.
  • Permalink (right) — This allows you to set the URL of the page. By default, this will be the title, with spaces replaced by dashes -. Once you save the page, you will be able to see the permalink, and edit it accordingly.

However, the main section of the page will be the page builder called Gutenberg. Gutenberg is a multi-stage revamp of Wordpress's UI for customising the site itself. The first stage focuses on the editor, which is the editor you see when you add / edit a page. The basis of Gutenberg is a block. Previously, when you want to add content, you have to use something like a shortcode [shortcode] in order to add custom functionality into the page, or a plugin like Visual Composer in order to add "formatting" capacities to the editor. From Wordpress 5.0 onwards, Gutenberg is set to unify all of the previous solutions into one interface.

Editing a Page with Gutenberg

The foundation of Gutenberg is a block. When you click on the editor and start typing, you're actually typing into a "Paragraph" block. As the name suggests, the Paragraph block allows you to create a paragraph of text in the page. However, the capabilities of Gutenberg go way beyond that.

Toolbar for Gutenberg Toolbar for Gutenberg, located at the top

The toolbar allows you to add a block via the (+) button. The last button allows you to see a list of all the blocks on the page, along with the nesting order. This lets you select blocks with more precision as compared to hovering over the blocks with your cursor.

When you add a block, you are able to do a text search for the block you want to add. Take a look at some of the important blocks that you should know. There is no limit to the amount of blocks you can add, though it is recommended that you keep it to a minimum as it will drastically affect page loading speed.

After you edit a page, remember to clear the cache. All pages on the site are "cached", meaning Wordpress generates a static version of the page and saves it so that when visitors load the page, Wordpress serves the pre-generated page instead of going into the database, loading the content, loading the template, processing the content through the template, before displaying it to the visitor. This is done to dramatically improve page-load speeds. To clear the cache, go to Settings > WP Super Cache and click on "Delete Cache". If you do not delete the cache, your edits to a page will not be reflected.

Translating a page

After you create a page on the admin panel for the English site, you will see the option to add a translation for your newly created page. Once you click on it, you will need to copy the content from the English page. Once you've copied the content over, you will need to update the title, the URL as well as any body content.

Button for translating a page Click to add a page for ZH

Button to copy content from English Click to copy content from the English page

For some pages, you will need to translate your content via another panel; for example, the Board of Director & Our Team page requires you to translate the data under "Our Team", and you will need to contact Sulphur to update some code on the backend. Other pages that does not include fetching data from other pages, like Dispute Resolution, do not require additional support from Sulphur.