How to change/edit your Landing Page's background?
Having trouble changing your Landing Page background? Follow my lead. There are various options to change the background, I'll walk you through them.
# Change Background around Landing Page
1) Change the entire background of your Landing Page in the general settings. It is the background AROUND the landing page, not behind it. We'll come across the setting to arrange the background BEHIND the landing page later in the article.
Navigate to Distribution and open the Landing Page builder.
Then select a template. You'll enter the Landing Page builder. Navigate to Layout (1) and then Background type (2). This is where you can select if the background around the landing page should be an image or a solid color. (3) Is the indication of what you're going to change. The grey border background.
Let's take a solid color in this example. Press on the 'colored dot' to change the background. (1) (It's blue in my example). Then you'll see that the background has changed. (2)
To have a better understanding of what changed precisely, you can switch from preview screen. By default it's a phone preview, but if you change it to desktop, you'll see it's a background for sure.
So, let's switch the preview mode from phone to desktop. (1)
This feature only alters the background AROUND the Landing Page.
# Change background BEHIND the Landing Page
To change the background BEHIND the Landing Page, you need to press on the 'Root'. That's the subtle black border around the landingpage. (1) Then the 'Edit root' button (2) shows up above your Landing Page.
To adjust the background behind the Landing Page, press on the footer (1) (where the Terms & Conditions are located). The edit root button (2) shows up above your Landing Page.
The root settings page opens up. Change the background color (1).
Let's change it to green.
I hear you think. But it didn't affect my background in general. I still see some white backgrounds in my form? Well, that's arranged like this.
You need to make the modules on the Landing Page transparent. I'll help you do that.
Press on a module on the Landing Page to change the background. (1) Then change the Background to 'transparent' (2).
Now you'll end up with the result below. The background you have set up in the root, surfaces through your module. This is manageable for each module separately.
This is also how you can manage a separate background for every module. Simply put the root settings on 'color' and select the color you'd like to feature as a backround.
# Change Background around Landing Page
1) Change the entire background of your Landing Page in the general settings. It is the background AROUND the landing page, not behind it. We'll come across the setting to arrange the background BEHIND the landing page later in the article.
Navigate to Distribution and open the Landing Page builder.
Then select a template. You'll enter the Landing Page builder. Navigate to Layout (1) and then Background type (2). This is where you can select if the background around the landing page should be an image or a solid color. (3) Is the indication of what you're going to change. The grey border background.
Let's take a solid color in this example. Press on the 'colored dot' to change the background. (1) (It's blue in my example). Then you'll see that the background has changed. (2)
To have a better understanding of what changed precisely, you can switch from preview screen. By default it's a phone preview, but if you change it to desktop, you'll see it's a background for sure.
So, let's switch the preview mode from phone to desktop. (1)
This feature only alters the background AROUND the Landing Page.
# Change background BEHIND the Landing Page
To change the background BEHIND the Landing Page, you need to press on the 'Root'. That's the subtle black border around the landingpage. (1) Then the 'Edit root' button (2) shows up above your Landing Page.
To adjust the background behind the Landing Page, press on the footer (1) (where the Terms & Conditions are located). The edit root button (2) shows up above your Landing Page.
The root settings page opens up. Change the background color (1).
Let's change it to green.
I hear you think. But it didn't affect my background in general. I still see some white backgrounds in my form? Well, that's arranged like this.
You need to make the modules on the Landing Page transparent. I'll help you do that.
Press on a module on the Landing Page to change the background. (1) Then change the Background to 'transparent' (2).
Now you'll end up with the result below. The background you have set up in the root, surfaces through your module. This is manageable for each module separately.
This is also how you can manage a separate background for every module. Simply put the root settings on 'color' and select the color you'd like to feature as a backround.
Updated on: 14/04/2023
Thank you!