Ankur PataIntroduction:
Hey Dev community! đź‘‹
Building a marketing page quickly and efficiently is something every developer or small business owner needs at some point. Today, I want to walk you through how you can build a fully functional marketing page in under 30 minutes using drag-and-drop widgets and customizable templates using a developer-friendly CMS, Sling.biz.
Whether you're working on a side project, launching a new product, or helping a client, this method will save you a ton of time! It also allows your client or marketing team to make changes on the fly without needing help from a developer.
Step-by-Step Guide
Let’s say we want to build a simple page like the one in the screenshot below—a landing page with a hero banner and some dynamic content that your marketing or content team can update at any time of the day.
1. Setting Up the Project
To start building your page, we need to set up the project using a starter kit. Here’s how to quickly set up the foundation:
- Run this command to generate the project:
yarn create sling-app my-marketing-page
- Pick the Hosted Solution to use Sling Studio directly without needing to manage one yourself.
- Skip adding keys in the next step and finish the installation.
2. Creating a Sling Studio Account
Next, we're going to create a free account on Sling Studio to get the keys. You can also host your Studio locally (since it’s open source) and generate keys, but in this post, we’re going to use the hosted solution.
Head over to the Sign-Up Page and create an account.
Finish the onboarding process and go to the Settings page to get your keys.
- Update the keys in your project's
.envfile. Restart the Sling Frontend App and visit the sample Product Listing Page, and you should see the below page.
3. Creating Custom React Widgets
Next, we are going to create small React widgets for the following functionalities:
- A responsive header
- A Hero Banner Widget with a dynamic prop to update the Hero Banner's image dynamically.
- A ShowCaseVideo Widget – with a customizable video URL to play a video.
- A CoffeeTypes Widget – shows different types of coffee based on a JSON array served from SlingStudio.
Note: For references to code, please check the YouTube video or GitHub source code.
4. Drag and Drop Widgets
Drag and drop widgets from Sling Studio in the same order as the design. This CMS comes with a set of predefined widgets, but you can also create your own! Here’s a simple example of how to add and configure widgets:
Drag a Hero Block onto your page.
Use the widget editor to customize the text, image, and CTA button.
- Next, update props for the Header.
- Similarly, update props for all the widgets. For the CoffeeOptions Widget, select the prop type as JSON to provide a JSON array.
- Similarly, drag in other components like features, pricing, and the VideoPlayer Widget.
5. Preview and Publish
Once you’ve finished designing your marketing page, preview it to make sure everything looks just right. You can now deploy your marketing page directly from the app or export it to deploy on your preferred hosting provider.
