As our promise on Wilcity Facebook Group, We will guide you to create your own Landing Page based on Wilcity Landing Tool.
After following our steps below, You can create a landing page looks like this: https://landing.wilcity.com/
Now, let’s do it.
Step 1: Downloading Wilcity Landing Tool
You can download the tool by clicking on me [sociallocker id=”1378″]https://www.dropbox.com/s/ym5omxq7zbbfe5k/wilcity-landing-tool.zip?dl=0[/sociallocker]
Step 2: Installing NPM in wilcity-landing-tool folder
- Extract the downloaded file, you will see wilcity-landing-tool folder.
- Open your terminal -> Run cd command line to the wilcity-landing-tool folder
Step 3: Building Hero Section
- Now, opening wilcity-landing-tool with an editor like Sublime Text or NotePad++.
- Going to src -> axiosFaker -> section1.js -> This is Hero section. You can change title, button, video background here.
Step 4: Building other sections
It’s the same what you did with the Hero section, you can simply open section you want to use and modify it.
The order of section in the app folder it similar to its order on the Wilcity Landing page
Step 5: Building App page Sections
You can see the app sections under src -> axiosFaker -> app folder. To modify it, please do the same web
Step 6: Setting up Navigation
To setup navigation, please open src -> axiosFaker -> navigation.js, here you can add / remove / modify the menu item.
Step 7: Building Production Version and upload to your hosting
After completing everything, We will build the production version and upload it to your hosting.
To build the production version, please run the following command lines:
yarn build
or
npm run build
The product files will be added under wilcity-landing-tool -> build folder -> Uploading those files to your hosting.
We hope this tutorial will help to create your own landing page. If you get any issue while creating the landing page, feel free open a ticket on https://wilcity.ticksy.com/tickets/