Custom Page HTML Starter Templates (v4)
Example code for creating your own layouts in custom pages. AppPresser 4 only.
Sample HTML Code
Copy and paste the code below into a new custom page, edit as needed.
Faith
<!-- change this image by replacing the src url below -->
<img src="https://s3-us-west-2.amazonaws.com/myapppresserstorage/wp-content/uploads/2020/03/16165505/sunset-1000.jpg" />
<ion-card class="card-over-image">
<ion-card-header>
<ion-card-subtitle>
The place for you
</ion-card-subtitle>
<ion-card-title>
Welcome to our Church
</ion-card-title>
</ion-card-header>
<ion-card-content>
Learn a little more about who we are, what we believe, what we value, and how we can
serve you. We are one church with many locations and we have found that we are truly better together.
</ion-card-content>
<ion-list>
<!-- to change these links, view our documentation https://docs.apppresser.com/article/340-link-to-other-pages -->
<ion-item (click)="pushPage( 'my-page' )">
<ion-icon name="logo-youtube" slot="start"></ion-icon>
Watch Sermons
</ion-item>
<ion-item (click)="pushPage( 'another-page' )">
<ion-icon name="share" slot="start"></ion-icon>
Connect
</ion-item>
<ion-item (click)="pushPage( {url:'https://apppresser.com',target:'_blank' } )">
<ion-icon name="globe-outline" slot="start"></ion-icon>
Our Website
</ion-item>
</ion-list>
<ion-card>
<ion-card-content>
<p><b>Announcements</b></p>
<p>Join us this weekend for a new message series on love</p>
</ion-card-content>
</ion-card>
</ion-card>
Login
<div style="text-align:center" class="bg-color-wrap ion-padding">
<!-- Maybe put your logo here? -->
<div style="font-size:72px;margin-bottom: 50px;">
<ion-icon name="flame"></ion-icon>
</div>
<ion-card class="card-over-image">
<ion-card-header *ngIf="!user">
<ion-card-title>
<p>Welcome to our app</p>
</ion-card-title>
</ion-card-header>
<!-- only show this when logged out -->
<ion-grid *ngIf="!user">
<ion-row>
<ion-col size="4">
<ion-icon color="danger" name="body" size="large"></ion-icon>
<p>Lorem ipsum</p>
</ion-col>
<ion-col size="4">
<ion-icon color="danger" name="list" size="large"></ion-icon>
<p>Sit amet</p>
</ion-col>
<ion-col size="4">
<ion-icon color="danger" name="settings" size="large"></ion-icon>
<p>Un dolor</p>
</ion-col>
</ion-row>
</ion-grid>
<ion-card-content>
<p *ngIf="!user" style="font-size:12px;color:#ccc;">Edit this page by going to
Custom Pages and click on this
page.</p>
<div *ngIf="user">
<!-- Only logged in users see this content -->
<ion-card-title *ngIf="user.username">Welcome back {{ user.username }}!</ion-card-title>
<p class="subtitle">View your content below.</p>
<ion-list>
<ion-item *ngFor="let p of pages.side_menu.items | slice:1" (click)="pushPage(p)" [hidden]="p.show === false">
<ion-icon *ngIf="p.class" name="{{p.class}}" slot="start"></ion-icon>{{p.title}}
</ion-item>
<ion-item *ngFor="let p of pages.tab_menu.items | slice:1" (click)="pushPage(p)" [hidden]="p.show === false">
<ion-icon *ngIf="p.class" name="{{p.class}}" slot="start"></ion-icon>{{p.title}}
</ion-item>
<ion-item (click)="loginModal()">
<ion-icon name="exit" slot="start"></ion-icon>
{{ 'Logout' | translate }}
</ion-item>
</ion-list>
</div>
<div *ngIf="!user">
<p class="subtitle" style="margin: 25px 0;">To get started, signup or login below.</p>
<ion-button expand="block" (click)="loginModal()">Sign up or Login</ion-button>
</div>
</ion-card-content>
</ion-card>
</div>
Menu Links
<ion-toolbar color="light">
<ion-buttons slot="start">
<ion-button (click)="loginModal()">
<ion-icon slot="start" name="enter-outline"></ion-icon>
Login
</ion-button>
</ion-buttons>
<ion-buttons slot="end" *ngIf="user">
<ion-avatar *ngIf="user?.avatar" class="ion-padding">
<ion-img [src]="user.avatar"></ion-img>
</ion-avatar>
</ion-buttons>
</ion-toolbar>
<div class="bg-color-wrap">
<div class="ion-padding">
<h2>Welcome</h2>
<p>Click any link below to get started.</p>
</div>
<ion-grid>
<ion-row>
<ion-col size="6" *ngFor="let p of pages.all.items | slice:1" [ngClass]="p.extra_classes" [hidden]="p.show === false">
<ion-card (click)="pushPage(p)" class="menu-card">
<ion-card-title>
<ion-icon *ngIf="p.class" name="{{p.class}}" size="large"></ion-icon>
</ion-card-title>
<ion-card-content>{{p.title}}</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</div>
Menu Links with
Location
<!-- Replace this iframe with your own Google Map embed code -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d740.8277781758185!2d-91.86519287076264!3d41.992621598700836!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87e5022e36365d95%3A0x3c19d0e914dd0b14!2s272+Park+Ridge+Rd%2C+Atkins%2C+IA+52206!5e0!3m2!1sen!2sus!4v1502817714758"
frameborder="0" style="border:0" allowfullscreen></iframe>
<ion-list>
<ion-list-header>
<ion-label>
<ion-text>
<h2>Fitness Life Gym</h2>
</ion-text>
</ion-label>
</ion-list-header>
<ion-item>
<ion-label class="ion-text-wrap">Everyone is welcome! Located at the intersection of the 5 and 405 freeways in
San Dimas. (Edit this page under Custom Pages, then click on the page.)
</ion-label>
</ion-item>
<ion-item lines="none">
<ion-icon name="navigate-circle-outline" slot="start" color="secondary"></ion-icon>
<ion-label class="ion-text-wrap">
2345 Main Street<br>
San Dimas CA, 92876
</ion-label>
</ion-item>
<ion-item lines="none">
<ion-icon name="call" slot="start" color="secondary"></ion-icon>
<ion-label class="ion-text-wrap">
1-900-MIX-A-LOT
</ion-label>
</ion-item>
<ion-item-divider>
<ion-icon name="time" slot="end"></ion-icon>
<ion-label>Hours</ion-label>
</ion-item-divider>
<ion-item>
<ion-label><strong>Monday</strong> 9am - 5pm</ion-label>
</ion-item>
<ion-item>
<ion-label><strong>Tuesday</strong> 9am - 5pm</ion-label>
</ion-item>
<ion-item>
<ion-label><strong>Wednesday</strong> 9am - 5pm</ion-label>
</ion-item>
<ion-item>
<ion-label><strong>Thursday</strong> 9am - 5pm</ion-label>
</ion-item>
<ion-item>
<ion-label><strong>Friday</strong> 9am - 5pm</ion-label>
</ion-item>
<ion-item>
<ion-label><strong>Saturday</strong> Closed</ion-label>
</ion-item>
<ion-item>
<ion-label><strong>Sunday</strong> Closed</ion-label>
</ion-item>
</ion-list>
<ion-card>
<ion-card-content>Get 1 free personal training session with any new signup. Contact us today!</ion-card-content>
</ion-card>
<h2 class="ion-padding">Reviews</h2>
<ion-card>
<ion-card-header>
<ion-card-title>
Frank Smith
</ion-card-title>
<ion-card-subtitle color="warning">★ ★ ★ ★ ★</ion-card-subtitle>
</ion-card-header>
<ion-card-content class="pt-0">
I love this gym, they are professional and give me the motivation I need to get fit!
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-header>
<ion-card-title>
Sally Holmes
</ion-card-title>
<ion-card-subtitle color="warning">★ ★ ★ ★ ★</ion-card-subtitle>
</ion-card-header>
<ion-card-content class="pt-0">
My trainer has helped me lose 50 lbs of fat and gain 5 lbs of muscle. Keep rocking!
</ion-card-content>
</ion-card>
Fitness
<div class="bg-color-wrap fitness-wrap" style="background-image: url('https://s3-us-west-2.amazonaws.com/myapppresserstorage/wp-content/uploads/2020/03/12185211/fitness-barbell-800.jpg');">
<div class="title-wrap">
<p class="subtitle">Welcome to...</p>
<h2 class="big-title">GLOBO GYM</h2>
</div>
<ion-list>
<ion-item lines="none" *ngFor="let p of pages.all.items | slice:1" [ngClass]="p.extra_classes" (click)="pushPage(p)" [hidden]="p.show === false">
<ion-icon *ngIf="p.class" slot="start" name="{{p.class}}"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-list>
</div>
WordPress Categories
<ion-item-divider>
<ion-label class="subtitle">{{'Choose a category' | translate}}</ion-label>
</ion-item-divider>
<ap-list route="{{wp_url}}wp-json/wp/v2/categories" class="col-2" card="true" categories="true"></ap-list>
Bistro
<div class="bg-color-wrap bistro-wrap" style="background-image: url('https://s3-us-west-2.amazonaws.com/myapppresserstorage/wp-content/uploads/2020/03/12194602/burger-bistro.jpg');">
<div class="title-wrap">
<p class="subtitle">Welcome to...</p>
<h2 class="cursive-title">The Bistro</h2>
</div>
<ion-grid>
<ion-row>
<ion-col size="6" *ngFor="let p of pages.all.items | slice:1" [ngClass]="p.extra_classes" [hidden]="p.show === false">
<ion-card (click)="pushPage(p)" class="menu-card">
<ion-card-title>
<ion-icon *ngIf="p.class" name="{{p.class}}" size="large"></ion-icon>
</ion-card-title>
<ion-card-content>{{p.title}}</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</div>