Put a landing page online

36
How to: Put a landing page online 101

Transcript of Put a landing page online

Page 1: Put a landing page online

How to:

Put a landing page online 101

Page 2: Put a landing page online

After Reflex has sent you the landing page by email, and after unzipping the file you received, this is what you have on your desktop: A file with the images (1) and a page in HTML (2)

(1) (2)

Step 1

Page 3: Put a landing page online

What you want to do is to put the images in our ftp online. You need to use fileZilla.Below is FileZilla just after you open it (by cliking on the FileZilla icon on your desktop).Enter your ftp address (1), your user name (2) and your password (3). And then click on quickconnect (4).

Step 2

(1) (2) (3) (4)

Page 4: Put a landing page online

Step 3Below is the now connected FileZilla. You can see on the right a lot of folders.

You want to create one dedicated file among them to the landing page, or you can use one already there. It’s up to you. To create a folder, right click anywhere with your mouse anywhere in this area, and then click on create directory

Page 5: Put a landing page online

Step 4Enter the name of the new directory (1). Make sure to pick your name wisely. Pick something easy to remember and connected with the landing page (usually the name of the campaign for which the landing page was created). And click on OK (2)

(1)

(2)

Page 6: Put a landing page online

Step 5Find the new folder among the others and open it by clicking on it.

Page 7: Put a landing page online

Step 6

Following the same process as in steps 3 and 4 (right click, create a new directory…) create a new file named “images” in the folder you just opened. Click on the file images now!

Keep this in mindfor step 13.It’s going to be part of the path you will need in step 13

Page 8: Put a landing page online

Step 7

Now you can see on the remote site (2) that you are in the file images and that this file is, so far, empty (2).

(2)

(1)

Page 9: Put a landing page online

Step 8

(1)

(2)

(3)

On the left (1) you see the files in your computer. You want to find the images file with all theimages from the landing page. Click on it (2) and you will see all the images listed inside (3). Select them all.

Page 10: Put a landing page online

Drag them all with your mouse from (2) to (3). You are done with the ftp, the images are now all on it.

(2)(3)

Step 9

Page 11: Put a landing page online

(2)

Now, you have to work on the HTML page itself (see step 1). Right click(1) on it with your mouse and then on “open with” (2) in the menu and click on Adobe dreamweaver (3).

Step 10

(1)

(2)(3)

Page 12: Put a landing page online

Step 11

When Dreamweaver is open, by default your page is split between the code (1) and the page asyou can see it in a web browser (2).

(1)

(2)

Page 13: Put a landing page online

Step 12

(2)

(1)

(3)

(3)

Click on code (1). Then you see the page only in code (2). Now you can see all the images in thispage (3). There are a lot of them, so the code may reach the bottom of the page!

Page 14: Put a landing page online

Step 13

http://us.maison-de-la-france.com/us/gotoday-traveler/

Now you have to paste the path to the images you downloaded in the ftp in the code for each image of the landing page. The path is below. The green part never changes. To find the red part, see step 6.

Path

Page 15: Put a landing page online

Step 14

When you are done, this is what you see.

Page 16: Put a landing page online

Step 15

(1)

(2)

Now you need to copy the code between ImageReady slices (1) and End ImageReady slices (2)

Page 17: Put a landing page online

Step 16

Open the BackOffice and enter down your login (1) password (2) and click on valider (3)

(1)(2) (3)

Page 18: Put a landing page online

Step 17

Then click on “Arborescence” (map of the site)

Page 19: Put a landing page online

Step 18

Find in the “arborescence” the node where you want to put the landing page and click on the + near the name of the landing page (1)

(1)

Page 20: Put a landing page online

Step 19

With your mouse do a right click on “accueil”, below the name of the landing page (1)

(1)

Page 21: Put a landing page online

Step 20

“Propriétés” pops up below accueil after you do the right click.

Page 22: Put a landing page online

Step 21

Click on “propriétés”.

Page 23: Put a landing page online

Step 22

“Click on “redaction”

Page 24: Put a landing page online

Step 23

Right click over here on the little yellow pen.

Page 25: Put a landing page online

Step 24

Click right over here on the little icon that looks like <>

Page 26: Put a landing page online

Step 25

You need to paste the code you copied in step 15 into the empty field.

Page 27: Put a landing page online

Step 26

Now the codes are copied. Click again here.

Page 28: Put a landing page online

Step 27

Now you see the landing page as it will appear on line (more or less ). Click on “valider”.

Page 29: Put a landing page online

Step 28

After clicking on “valider” you are automatically directed to this page. Click on “enregistrer” (1).And then click again on the little yellow pen (2)

(1)

(2)

Page 30: Put a landing page online

This window pops up after you have clicked on the pen in the previous step. Now you want to apply the links on the landing page. Select a text or image on which you want to apply a link (1) and then click on the chain in the menu (2).

Step 29

(1)

(2)

Page 31: Put a landing page online

The usual window for links pops up. You need to choose between(1) “créer un lien vers un mode ou une page” when the link goes to our website or (2) “créer un lien libre” when it goes to a partner’s website

Step 30

(1)(2)

Page 32: Put a landing page online

www.mylink.com (1)

In the example below we chose “créer un lien libre”. You have to enter the link (1) and then to click on valider le lien (2)

Step 31

(2)

Page 33: Put a landing page online

Now you have to activate the tracking by clicking on “Souhaitez vous activer le tracking” (1)

Step 32

(1)

Page 34: Put a landing page online

Enter a tracking name for the link (1). In general, use landing-the-name-of-the-campaign-the-name-of-the-link: ie: landing-gotoday-subscribeenews for the link on subscribe to our enews on the landing page of the campaign in partnership with Go-today. And choose between lien de navigation (if the link goes to our website) or lien de sortie (if it goes to a partner’s website) (2)

Step 33

(2)

(1)

Page 35: Put a landing page online

Click on “lien classique” (1) and on “dans une nouvelle fenêtre” (2) and on “valider les informations et générer le lien” (3)

Step 34

(1)

(2)

(3)

Page 36: Put a landing page online

Click on “fermer cette fenêtre et appliquer le lien” (1). Then repeat steps 29 to 35 for all the links you want to apply on the landing page.

Step 35

(1)