You don’t have to wait until your product exits development and is ready to sell in order for you to build a website for it. You can start building brand awareness and generating excitement around your new product ahead of time with a beautiful microsite.
In this tutorial, we’ll use the Furniture Website Slider template to demonstrate how easy it is to build a microsite while your product is being constructed behind the scenes.
Table of Contents:
- Step 1: Move the slides around as needed
- Step 2: Update the microsite images
- Step 3: Edit the text
- Step 4: Add a call-to-action
- Step 5: Customize the menu links
- Step 6: Adjust the navigation elements
How to build a microsite to promote your product prior to launch
The Furniture Website Slider template is a good example of how to create an effective one-page website for a business or shop:
That said, microsites are also a great option for promoting products prior to launch. You can use them to appeal to your target audience’s pain (real or abstract) while briefly educating them on the benefits of your solution.
In this tutorial, we’ll show you how to use this template to do just that and build a microsite for a new pain relief product:
Here are some references to help you get started with Slider Revolution if this is your first time using the website builder:
Step 1: Move the slides around as needed
There are five slides/pages in this microsite template. Each slide has one or two images in it.
Rather than add, remove, or resize the images, try to work with what’s here. By cutting down on the amount of editing you do to the layout, you can focus on creating a custom style and content for your promotional site.
The better option is to move the slides around if you’d like to change things up. To do this, go to the “Slides” dropdown in the top toolbar.
The slides can be moved using drag and drop. So click on the slide you want to reposition and then drag it to its new position amongst the other slides:
Drop it into place and then save your changes.
Learn more:
Step 2: Update the microsite images
There are a variety of sizes when it comes to the images in this template. To simplify the editing process for you, here are the sizes in pixels for each:
Slide 1
- Left Image – 1920×1080
- Right Image – 580×759
Slide 2
- Left Image – 600×785
- Right Image – 600×785
Slide 3
- Image Bg – 1920×1080
Slide 4
- Image – 600×785
Slide 5
- Right Image (shape layer on the left) – 600×785
- Right Image (group) – 960×1101
[Note to Julian/client: The left image layer is mislabeled in Slide 5. Is there a way to fix this in the template so that it’s called “Left Image” for all users going forward? We’ll then need to update the text above to say “Left Image” and remove the parentheses insets.]
Once you have your images properly sized and exported, go through the slides one at a time. Click on the image layers in the canvas or timeline editor. Then replace them under “Layer Options” and “Style”.
If you find that the subject of your image isn’t properly centered, use the Position tools beneath the uploader:
Once your images are in place, save your changes.
Learn more:
Step 3: Edit the text
There are three text layers in each slide:
- Slide Number
- Headline
- Description
We’re going to delete the Slide Number from our microsite so visitors can focus on the marketing message in each slide. To delete the text layer, select it in the canvas or timeline, then hit the Backspace or delete key.
To edit the remaining text layers, use the settings under “Layer Options”.
“Content” is where you’ll edit what the text says for each layer. “Style” is where you’ll go to change the font and general aesthetics of the text.
Note: If the Headline doesn’t wrap the way you want it to, you can manually add a hard break. Either hit the Enter or return key on your keyboard or place <br /> at the breaking point.
Go through and edit each of the slides. Make sure to apply the same stylistic changes to the text from slide to slide so your microsite ends up with a consistent look and feel.
Learn more:
Step 4: Add a call-to-action
Depending on what you’re using this slider template for, you might not need a call-to-action. For a product microsite, however, you should have one.
In this example, we’re going to add a small form to the last slide so that people can sign up to be notified when the product is ready.
To do this, we’re going to need the Contact Form 7 plugin. Back out to WordPress and install and activate the plugin.
Go to the newly created “Contact” menu on your WordPress sidebar and click on Contact Forms. You can edit the existing sample form to create this new one for the microsite.
We’re going to keep this simple and only ask for an email address. Trim your form’s fields down as much as you need to, making sure to leave the “Submit” button at the bottom.
Save your changes. Copy the shortcode at the top of the form editor.
Then return to your microsite template in Slider Revolution.
Open up your last slide. Hover over the “Add Layer” dropdown in the toolbar and select Text. Paste the shortcode into the “Content” field.
You won’t be able to see the form in the canvas, but you’ll see it when you open the preview. If you need to make changes to the form, here’s what you can do:
Use “Style” to change the label font, text color, and size. You can also add a white background to match the Description layer.
Use “Size & Pos” to refine the positioning of the form on the page.
You can also use “Animation” if you want the form to slide into place as the other text layers do.
If you want to change the color or outline of the form fields or button, it’s best to do this with custom CSS. Go to “Module Options” and “CSS/jQuery” to add your styles. (See link under Learn more for tips on what to do here.)
Before you move on, open up the responsive editor from the toolbar.
You’ll need to repeat this form editing process for Notebook, Laptop, and Mobile.
Learn more:
Step 5: Customize the menu links
With the slides completed, we’re now going to turn our attention to the global layers. To access them, open the “Slides” dropdown in the toolbar and click on Global Layers.
In this step, we’re going to focus on the hamburger menu in the top-left corner of our microsite.
The first thing we’re going to do is update the Logo. To upload your own logo file, double-click on the existing Logo.
Go to My SVG Library, click on Import SVG Files, and upload your SVG.
Select it from the library to add it to the menu.
Next, we’re going to change the grey background color to our brand color. You’ll need to edit the background color under “Style” for both Menu-Btn and Menu.
Last but not least, we need to modify the menu labels and links:
- Slide 1 Link
- Slide 2 Link
- Slide 3 Link
- Slide 4 Link
- Slide 5 Link
To change what the labels say, modify the text under “Content”.
To make the font and style match the rest of your design, go to “Style”. You can also go to “Hover” to adjust how the text appears whenever someone hovers over it.
You’ll also have to fix the links if you changed the slide order in the first step. To do this, go to “Actions”. Select the Jump to Slide action. If the slide number is incorrect in the field on the right, update it.
Close the modal to save your changes.
Learn more:
- Special Layers, Rows, Groups, Backgrounds & Global
- Editing Links in Template Modules
- Adding and Configuring Icon and SVG Layers
Step 6: Adjust the navigation elements
The last thing to do is update the navigation and cursor elements in our microsite.
First, we’re going to delete the custom Circle/Circle Small cursor. This will enable our visitors to focus more closely on the content.
Next, we’re going to update the Arrow Up/Arrow Down navigation arrows on the right. There are a couple of things you can do.
The first is to change the style of the arrows. To edit them, go to “Content” and select the Icon tab. Do a search for “arrow” and you’ll find other options to choose from.
Note: Remember to delete the old arrow code so you only have one style remaining.
The other thing you can change is the background color behind the arrows. To change the normal background state, go to “Style” to set the BG Color. To change the hover background state, go to “Hover”.
Preview your work and make sure the menu and navigation updates look and behave as you want them to. When you’re done, save your changes.
You can now add this microsite to the Home page in WordPress (using a shortcode or the Slider Revolution widget) and push it out to the public.
Learn more:
Get people excited about your new product with an awesome microsite
You don’t need to build an entire website to start building anticipation around your new product. With the Furniture Website Slider template, you can build a new microsite — with a lead generating form, no less — and launch it in a matter of hours.
