Put a landing page online

Post on 15-May-2015

1.095 views 1 download

Tags:

Transcript of Put a landing page online

How to:

Put a landing page online 101

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

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)

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

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)

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

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

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)

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.

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

(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)

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)

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!

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

Step 14

When you are done, this is what you see.

Step 15

(1)

(2)

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

Step 16

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

(1)(2) (3)

Step 17

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

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)

Step 19

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

(1)

Step 20

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

Step 21

Click on “propriétés”.

Step 22

“Click on “redaction”

Step 23

Right click over here on the little yellow pen.

Step 24

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

Step 25

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

Step 26

Now the codes are copied. Click again here.

Step 27

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

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)

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)

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)

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)

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

Step 32

(1)

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)

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)

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)