How to Quickly Build a Great-Looking Microsite for Your Product [Tutorial]

Want to build a microsite for a product that’s still in production, but don’t want to spend a ton of time or money on it? In this tutorial, we’ll show you how to speed up the process with Slider Revolution.

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:

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:

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:

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.

How to Quickly Build a Great-Looking Microsite for Your Product [Tutorial]

FREE: Your Go-To Guide For Creating
Awe-Inspiring Websites

Get a complete grip on all aspects of web designing to build high-converting and creativity-oozing websites. Access our list of high-quality articles and elevate your skills.

The Author

SR Staff

We're a passionate bunch of designers and developers writing about the ins and outs of web design.

Liked this Post?
Please Share it!

Leave a Reply

Your email address will not be published. Required fields are marked *