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.

Example

Here is a custom layout example:

You can find the code for that page  here.

Video

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>
<p>President</p>
<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:

<ion-card>
  <ion-card-header>
    Header
  </ion-card-header>
  <ion-card-content>
    The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
  </ion-card-content>
</ion-card>

<button ion-button>Button</button>

See more examples of custom HTML page markup here.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.

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, learn more here.

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>