Custom HTML Pages

Custom pages allow you to create custom layouts with HTML that can work offline. Here are some things to know:

  • Custom pages can work offline
  • They can be completely independent of your website
  • You can create custom layouts for your WP-API sliders and lists
  • You can add HTML and some Ionic tags
  • You must rebuild your app after making changes to a custom page

For example, make a custom "About Us" page with text and images that works offline. Add custom Ionic tags, such as an intro slider. Add a Google Map embed code to display a map, create a custom API list layout, and more.


Here is a custom layout example:

Starter Templates

Copy/paste HTML code for your custom pages from our starter templates here, then edit as needed.


Creating Custom HTML Pages

To create a custom page, go to the App Customizer, and click Custom Pages. Below the list of pages, click "Add new page."

Choose "Custom HTML."

A form will appear where you can enter your page details.

All custom pages only show for the app where you created them, so you won't see the page you just created if you go to another app.

Custom HTML

To create a page with simple text and images that works offline, you can add custom HTML content.

For example, try adding a page title, then add this to the page content area:

<h2>About Us</h2>
<h4>Fred Gaviria</h4>
<h4>Alice Floor</h4>
<p>Vice President</p>
<h4>Frank Tank</h4>
<p>Chief Operating Officer</p>

Next, click create page. If your page was created successfully, you will see it at the top of your custom pages list in the sidebar.

This page will not show up in your app preview yet.

Important: To get this page in your app, you need to add it to your menu and build the app. 

Go to Menus and add this page to your active menu. To do that, click Menus => Your Menu => Add Item => AppPages => Your Page. Next, go to "Build and Preview" and click Build app.

When the build is complete, you should be able to see the page you created in your app preview by clicking on the menu item you added.

Advanced HTML and Ionic Components

The example above is very simple, but you can do advanced things with custom pages such as using Ionic components.

For example, try adding this to a custom page:

    The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.

<ion-button (click)="pushPage('my-page')">Button</ion-button>

It's important to note that you can use display components such as a card, but components that require data (such as a search box, form, or dynamic list) do not work without custom code.

Important: do not add an ion-content tag to your pages, it will cause spacing issues.

Add WordPress Posts and More with API Components

You can add WordPress posts in the form of lists and sliders using simple components. They work like WordPress shortcodes, see the custom layouts article for more information.

Maps, Youtube videos, etc.

To add a Google Map, simply paste the map embed code into the page content box. The same goes for a YouTube or Vimeo video, or any type of iframe content.

Network Status

There may be times when you want to display or hide content based on the network status.  Whether you device is online or offline you can use the follow code to hide or show content in your custom pages.

<div *ngIf="isOnline">Your app is online</div>
<div *ngIf="!isOnline">Oops! Your app is offline</div>
<div *ngIf="isOffline">Please try again when you are connected to the internet</div>


To display or hide sections of content based on the current language you can use the follow snippet.

<div *ngIf="language?.code=='en'">Hello English speaker</div>
<div *ngIf="language?.code=='es'">Hello Spanish speaker</div>
<div *ngIf="language?.code=='ru'">Hello Russian speaker</div>
Language code: {{ language?.code }}<br>
<div *ngIf="!language">Language is not set</div>