Creating a Welcome Page
Pages are core visual components within a Coreo app, enabling you to split your content into discrete sections as needed. Pages are built either by using templates or a WYSIWYG editor.
Let’s create your first page – a Welcome page.
What is a Welcome page?
A Welcome page is a page that appears on first installing and starting your project. It can be used to provide your audience with some initial information on, for example, what the project’s purpose is.
The Welcome page will only automatically appear the first time a user starts the project or when the Welcome page has been updated with new content. This way, any information you need all users to see can be provided to them.
Creating and editing a page
- Go to the Configuration menu and select Pages.
- Click on the the Create Page button.
- Give your page the title “Welcome“.
- Choose the Custom Template. This opens the WYSIWYG page editor.
Page Layout
(1) Page Settings – This column controls the page name, icon and general permissions/visibility.
(2) Page Editor – This column is where you add and layout the content for your page.
(3) Page Preview – This column is the dynamic page preview and shows how the page will render in the Coreo app.
How the WYSIWYG Page Editor works
- To activate the page editor tool you need to mouse click within a blank area of the page editor.
- This reveals the + symbol
- Clicking this allows you to select the tool you want to use.
Add a heading
- Click to activate the + tool.
- Select the H (heading) icon.
- Type your chosen page heading and then centre the text using the “Tune” icon.
Add a delimiter
A delimiter is a simple way to add some vertical space (padding) between objects on your page. We’ll add one now to create some space between the heading and an image we are going to add in the next task.
- Click on a blank part of the page and select the + control
- Now select “Delimiter” from the menu
- You will now see 3 asterisks appear, as in the image below. However, as you will be able to see in your preview, these are not visible on your actual page.
Add an image
You will now add an image to the home page.
- Click the + control again
- Now select “Image” from the menu and then navigate to the media folder in the Coreo Tutorial files you downloaded at the start of the tutorial.
- Select the image ‘mimic-1.jpg’
- Centre the image on the page
Notes on images in Coreo
- Images should be prepared (edited) before upload to Coreo.
- Ideal image dimensions are 1200 x 800 px and photos should be saved as JPEGs with a relatively small file size where possible.
- Your project may look better with images all having the same aspect ratio, so it’s best to stick to one format. We prefer to use landscape images.
Add some text
You might now want to add some text below the image
- Click on a blank part of the page and select the + control
- Now select “Delimiter” from the menu
- Next, select the T (text) icon and add some information below your image
- Save your page.
Your Welcome page should now look something like this:
Page Settings
In page settings you can:
- Set an icon for your page. This appears in the project’s menu system alongside the page name.
- Choose if the page is visible (published). Note that all new pages are set to not be published by default. This is so that pages don’t appear in your app publicly whilst under construction.
- Choose if the page should be displayed to new users (i.e. be set as a welcome page)
- Choose if the page should appear in navigation (i.e. should it be listed in the project’s menu?)
It’s worth getting into the habit of checking the set-up of your pages whenever you add them. If ever you can’t see a page in your project, remember to check the page’s settings to make sure you have published it.
