Landing page ▶️

In this Landing page template we will see on Voltapp how to create a landing page on which the user will arrive after clicking on a button or a link for example.

Create a landing page

All the pages of your website are landing pages. Start by creating different screen nodes that will correspond to your different pages, e.g. :

Home
About
Get Started
Demo

Landing 1.jpg

Click on + Nodes then Screen. The node appears in the left inspector. You have a parent node "Screens" and a child node "Screen#1" by default. Click on the parent node and repeat the previous step as necessary. You will then see "Screen #2", "Screen #3", etc.

These screens will correspond to your landing pages. To help you find your way around, rename them: Home, About, Get Started, Demo, etc.

Rename a node

Renaming a node allows you to be better organized and to navigate more easily in the left inspector.

To do this click on the node in the left inspector. Then in the right inspector, delete the default name (e.g. Screen#1) and replace it with the desired name (e.g. Home).

Create a text/button linked to a landing page

On this template when you click on About at the top left of the page, you are immediately redirected to the About page. How to build this path on Voltapp?

Create a text/button node etc.
Fill in and edit the node fields as you wish
Switch to Graph mode
Click on +Blocks
Select the "click" event and add it to the graph.
Click and drag on the output of the "click" block and add the "change screen" action.
Click on the "change screen" block.
In the inspector on the right select the relevant landing screen (ex: About).

That's it! If you switch to preview mode and click on "About" in your homepage you will arrive on the requested page.

Landing 2.jpg