Have you ever wanted to make a page change depending on where visitors are coming from, or create a page with a few slight variations?

What you want to avoid is duplicating the page and making multiple versions. What if you want to update some of the copy or design in the page? Now you’ll need to update several pages.

Instead, we’re going to make a page that can invoke different variations depending on a query parameter in the URL. A query parameter is a way to send data to a page through a URL, without affecting where the URL takes you. Here’s a simple explanation.

The method we’re going to use is extremely simple and can be applied to any webpage that allows you to edit HTML.

In a nutshell, what we’re going to do is:

1. Create an element with a unique ID and set it to hidden
2. Write a Javascript snippet that will show this element when the URL has a certain query parameter

Create the hidden dynamic element

Let’s say you want to have an alert bar show at the top of a page for some people.

Use a page builder like Elementor to add this to the page, but don’t publish it yet because this will show to everyone.

If you want to make a variation of a certain bit of copy or an existing section of the page, just duplicate that section and make the new version. Leave them side by side.

Next, make sure to hide this element by default. Different page builders will handle this differently. In Elementor, sometimes hiding the element doesn’t use the CSS attribute display:none; so I avoid using their hidden option.

In Elementor, click the element, go to the Advanced tab, and scroll to “Custom CSS”. Add this CSS:

selector {
    display:none;
}

If you’re wondering, “selector” is a variable Elementor provided which allows you to easily write a rule for this specific element without having to think about the selector.

Set up a selector

Depending on the system you’re using to build the page, this step may look different.

In the Elementor page builder, simply select the piece you just added and go to the Advanced tab, then enter something in the CSS id box.

Use a simple, easy-to-remember phrase such as “salesalert” and avoid using spaces. Take care that this ID is unique and not used anywhere else on the page. If you’re not sure, just use a complicated enough phrase that there’s no chance another element has that ID.

Add Javascript

Depending on the page builder, where you add the Javascript will depend.

In Elementor, I usually add an HTML element to the top of the page and write my script there. It’s not terribly important that this script loads before the rest of the page.

Sometimes, I use Google Tag Manager to deploy the script (usually when it needs to be applied to several different pages at once).

Here’s some sample code:

<script type="text/javascript">
if (window.location.search.includes("confirmation=true")) 
{ // Replace "confirmation=true" with whatever parameter you want
document.getElementById("hideconfirmation").style.display = "block";} // Replace ID "hideconfirmation" with your own
</script>

Let’s break it down so you can make your own version.

Window.location.search grabs the parameters at the end of the URL. For example: ?email=test@example.com&confirmation=true.

.includes(“confirmation=true”) checks for “confirmation=true” in the parameters. Change this part to whatever you want. For example, “alert=true”. Or, if you have several variations on the same page, you can do something like “var=1”, “var=2”, “var=3”, and so on. These are entirely made up and your choice.

document.getElementById(“hideconfirmation”) lets you select the element you built earlier based on the ID name you gave it.

.style.display = “block” changes the display from none to block. You may need to choose a different option such as inline-block. Here’s a summary of what the different display options are and what they mean.

Test the page

Publish all these changes, and see if the page has your new element when you preview it. It shouldn’t show up unless you add the parameter of your choice to the URL bar.

Use-cases to consider for this technique

Here’s a few ways you can use this simple dynamic page-building method:

• Use it in place of having a confirmation page after filling out a form. Just have the form redirect to the page with ?confirmation=true at the end. You can use an alert bar at the top, or replace the form itself with a thank you message.
• Use it to create different variations of copy for different target groups. For example, a different H1 for different segments of your audience. (Do be careful with overdoing this technique though—it can create an absolute mess. There are SEO implications to hiding and showing text with javascript, and it can be hard to keep copy up-to-date if not everyone is aware of the dynamic variations hidden on a page).
• Use it to create one landing page for all podcasts that you’re featured on. Rather than creating a custom page for each podcast, just create a new shortlink for every podcast you’re on. The shortlink should take you to the same page but with a parameter such as ?podcast=jimmyneutronshow. In the Javascript, associate each of these show names with a custom message or whatever you want.

Downsides and caution for this approach

Around 0.2-1% of web traffic has Javascript disabled, which means the hidden element will never show.

Don’t panic, though. People who have Javascript disabled are used to having terrible experiences online because most pages won’t work with Javascript disabled. Try it sometime.

Also be aware that if you hide text by default, Google won’t see that text. This can affect your SEO. If you have a default version of the text visible at all times, that will mitigate the issue.

Make sure your page works without any query parameters. Always have a default/fallback option. Not everyone will remember to use the parameters.

Finally, make sure to document which pages have dynamic variations and how to invoke them. Even someone with technical knowledge may miss the fact that the page has dynamic elements. Most page builders won’t let you know that there’s an element on the page you can’t see.