Building with Stacking Cloud: Build a Mobile Application Landing Page

In this article, I’d like to guide you through building a very simple landing page using StackingCloud with LiveCanvas, its integrated builder. In building this landing page I will use some components that come with the UI Kit I and the LiveCanvas team built, which is available at https://ui.bootstrap.ninja to create a visually appealing and functional landing page.

First things first you choose what you want to achieve. In this case, I need a few key components: a header with a logo in the center, a hero section with a caption that will get our users’ attention and a screenshot of the application embedded into the mockup of a mobile phone. Following this will come a logo clouds section that will act as social proof. I then want to show my application’s features and I will end up showing some pricing tables.

Step 1: Setting Up The Website on StackingCloud

In StackingCloud navigate to My Websites and click the “Add new site” button. Since you want to start a website from scratch, without using any of the pre-made templates that StackingCloud offers; to do so scroll down to the bottom and select “Start from scratch”.

You will be prompted with a modal to choose a name for the project. Be creative here!

Once you create the website you’re directed to a dashboard showcasing your site’s details, including some setup notices such as “connection not set”. This information, as well as the options available in the menu that appear if you click the three dots, are features that will allow for the deployment process and we don’t care right now. Click on “visit site” and let’s start building!

Customizing Your Landing Page’s Header with LiveCanvas

Now you have your blank canvas and you “just” need to use your creativity to build something valuable and beautiful.

Easy! Ain’t it? 

Back to business, the first thing you customize is the header. Since we’re gonna build an elementary landing page we need something with just a logo placed at the center, no navigation links, and no menu. We will check the Headers components’ page of the UI kit we chose and pick the one that best fits our needs or tastes.

Set the header of our site using LiveCanvas. 

In the newly created website’s dashboard browse to the “LiveCanvas” menu page and check the boxes that will allow you to edit the header and the footer using LiveCanvas itself, and then save.

You are all set! now go to LiveCanvas > Template Partials and you will be able to Edit with LiveCanvas the header!

Just copy and paste what you copied from the UI toolkit page and that’s it!

Building the Core Components of the Page

Now all it takes is to choose the best components to get your design ready and customize them. I’ll start from the hero with a phone mockup to display my app to the users.

I’ll save you the rest of the copy and paste. The whole job now is about copy from the UI Kit website and use LiveCanvas HTML editor to customize each on od them with the content we need.

Now I’ve got a decent landing page with all the key elements I figured out at the beginning. Now it’s time to make it look special.

StackingCloud’s theme customizer, powered by AI, assists in selecting a harmonious color palette for your site. This innovative feature simplifies the typically complex process of choosing a color scheme that complements your brand and content and help into choosing a palette that fits some fancy color theory.

Once you find the colors you like just hit “Publish” and the colors will be saved. What happened behind the scenes is SCSS being compiled and bootstrap variables changed. So you have no additional CSS, no cluttering style. Just plain Bootstrap being customized to match your style.

The Final Result

The job is done and the landing page looks amazing!

We will see next how to deploy our landing page to a cloud making it static.