Getting started

When creating a new landing page, you can start from scratch and create a “New landing page”.

Or you can start by duplicating an existing landing page in your account and then make the updates needed. 

When starting from scratch with a landing page it requires you to start coding the landing page from scratch as well. But you can of course copy and paste code in to the code editor if you want. And from the code view we even offer upload of zip files, so that you can upload your existing landing pages to Bannerflow even if they were created somewhere else. 

Code view

The code view consists of the list of files (to the left) and the text editor (to the right). 

Files 

To the left you can see a list of all the files in this landing page. I's a mix of HTML files, CSS files, Javascript files and images files. You can open the different files as new tabs if you click on them in the list.  

You can upload new files the same was as I showed you how to upload zip files earlier. Use the small upload icon! To create a new file to code in, use the + -sign instead. 

Make it translatable 

Texts and images can be made translatable in the Landing page editor. When a text or an image is translatable it means that it can be updated also from the design view and if multiple versions have been added, they can also be updated in each version separately.  

To make a text translatable, start by finding it in the code and mark the part that should be translated. Then click the small icon that shows up to the right. 

When the text is translatable it will be blue marked in the code. You can form here update the copy and add a suitable title. 

Making an image translatable is made from the file list to the left. Find the image in the list that should be translatable and klick the context menu to the right. 

When an image is translatable, it will have the globe icon as you can see on two of the images in the list below. 

Design view

In the design view you can see a preview of your design. To the right you can update copy and images that has been made translatable. The grey dashed boxes on the landing page marks the translatable parts and can be updated either form the text panel to the left or directly on the design. 

It's also possible to update text styles and colors from the text panel to the left without going in to the code. 

A new image can be uploaded by just hover it and click replace, and select a new image from your computer. To keep the nice design when replacing images it's good to keep in mind that the result best if new image have the same or similar proportions as the old one. 

Add versions or localisations

Up in the middle of the page you can mange your versions. In the image below you can see that this landing page have one English version and one Swedish. By clicking "Manage versions" you can manage your existing versions and add more. 

From the manage versions page you can edit the version name and the fallback URL. 

Click "Add new versions" to add more text versions to your landing page. Select the languages you want to add and click "Next". 

Choose if you want to send out the versions for translation or just add it and translate yourself from the landing page builder. You can also edit the settings in this step. Click "Conform" and "Add 2 versions" when you are ready.

Now you can toggle between your languages and version from the version picker. When Swedish is selected in in the drop down, you can edit the copy and the images in the Swedish version only. 

Save and move on to another text version. 

👉 Please note: Any changes you make in the code will affect all language versions. Only the translatable texts and images in the text panel to the left in the design view is individual for each text version. 

Did this answer your question?