Voulez
Docs

A Simple Content Strategy In 5 mins

Max Gfeller Published on September 24th, 2022

In this post we are going to explore some simple content strategies that companies already employ – and of course how we can recreate them using Voulez.

Example #1 – Airline

The airline Wizzair is quite prolific on social media: just on Instagram alone the company has over 500k followers. And while they are often portraying various employees and give fans a look behind the scenes, a lot of the content they are posting follows the same patterns. Take for example this post:

In here, they are highlighting a specific destination the airline is flying to. And because they have over 150 destinations, they can repeat this post almost endlessly.

We will try to create a template for this type of post in Voulez. Templates can be developed using just HTML, CSS and a little bit of Javascript.

I already extracted the “teared paper” background and changed the color so we don’t get in trouble. You can find the image here.

For these examples we’re gonna use TailwindCSS, a utility-first CSS framework. You could just use plain old CSS, too.

<body>
  <div id="background" class="relative w-screen h-screen bg-no-repeat bg-cover">
    <div id="seal" class="rotate-12 absolute flex items-center justify-center w-56 h-56 rounded-full top-20 right-20 border-8 border-[#11b7ba] bg-[#11b7ba] bg-opacity-40 font-extrabold text-4xl text-white text-center">Seal of<br>Approval</div>
    <div class="absolute left-0 right-0 z-20 flex flex-col bg-no-repeat bg-cover bg-origin-content h-96 bottom-20" style="background-image: url(background.png)">
      <div class="mt-32 ml-12 text-5xl font-black text-white">
        Top 5 things<br>
        to do in <span id="location"></span>
      </div>
    </div>
  </div>
</body>

Notice how, instead of putting in the text, we instead added span elements with IDs. The “seal” element as well as the “background” element got IDs, too.

Now, in Voulez all parameters are passed to the template using query parameters. Using Javascript, we can easily parse them:

const params = new URLSearchParams(window.location.search)

const placeName = params.get('location')
const showSeal = params.get('showSeal') === 'true'
const backgroundImage = params.get('image')

…and using a bit more Javascript, we can then make use of those parameters:

document.getElementById('location').textContent = placeName
document.getElementById('background').style.backgroundImage = `url(${backgroundImage})`
if (!showSeal) {
  document.getElementById('seal').style.display = 'none'
}

Notice that how, instead of just always displaying the “seal of approval”, we instead use a parameter. If the parameter is “false” we’ll set the “display” property to “none” and thus hide the element. This way we can let the end-user choose if they want the seal to appear or not.

Before we can create our Voulez template, we’ll first have to host our newly created webpage somewhere – usually you’d do that on your company’s website where you can use already defined styleguides as well as component systems. In this case we have hosted in on examples.usevoulez.com – go check it out!

Now we can create the template on Voulez. For this we’ll give it a name and point it to the uploaded website:

Let’s define the parameters as well:

And then in the end, we’ll have to define our presets. We’re just gonna use this image for Instagram:

That’s it, our template is complete now! Using the Voulez editor, we can now easily generate new posts like in the example:

You can find the full code for the example on Github.

Example #2 – Coffee

In this second example we’re gonna take a look at the coffee company Café Royal. They have almost 10k followers on Instagram and regularly post content. One of those posts looks like that:

It always shows at least one person drinking coffee and a text with a reason, why coffee is amazing. On the bottom there’s a text saying “Why we love coffee #11”.

We can already define our parameters as follows:

  • The reason: a short sentence demonstrating why we love coffee
  • An image: showing a person and there must be a cup of coffee in it
  • Reason number: it doesn’t seem to be incrementing but rather arbitrary

You can take a look at the HTML we’ve come up with on Github. Now we can define the parameters for this template:


For the image we can actually add the conditions as help text, so it does show up in the editor. Also, we can define the aspect ratio as 1/1 – meaning the image should be a square.

When uploading, the customer can then crop the image to include the desired part.

Using this template, we – respectively the end-user – can now create new posts just like that on the go.

Are you ready to try out Voulez for yourself? Sign up now for the waitlist!