Pre-requisite:

To create a landing page, take a look here.

You've created a landing page for people to sign-up for an event and you want to add a location, a video, something else?

In this article, you will learn how to add some features to your landing pange :

add a text on several columns;
add a map;
insert a video;
add a favicon;
how to get a responsive image.

It’s very simple!

How do I add a text on several columns ?

You wish to have something like this?

Add a text block

2. On the left panel, click on the pink tab to personalize your block and select as many columns as you wish

How do I add a map ?

1. Get the embedding code

In Google Maps, enter the address.

Then click “Share” and in the pop-up, select “embed a map”

You’ll find the HTML content to copy and paste

You’ll get a code that looks like this:

2. Integrate the code into your Landing Page

In your Landing Page editor, select the HTML block.

Click on </> Code, then replace the code given in the example by the code that you have copied.

There you go! In just a few clicks, you’ll have embedded your map into your landing page.

To go a little further:

The map will naturally align itself on your landing page. To centre it, you simply need to add/edit a few fragments of code:

So, to centre it, here is the modified code:

<div style="text-align:center">
<p> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.1518619513145!2d2.3505876154926337!3d48.87438147928909!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fbe448dd087%3A0x6b19709e22838330!2sPlezi!5e0!3m2!1sfr!2sfr!4v1534941422720" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen=""></iframe></p>
</div>

To do this 🤓:

At the start of the code, add: <div style=”text-align:center”>
Replace: “width=”600” with width=”100%”
You have added a <div>, so as a careful coder, you must then close it by adding </div>

How do I insert a video?

Here are the steps:

1.Select the HTML block and place it in the body of your landing page;

2.In the newly created block, click on the button “</> Code”;

3. A window will open: insert your video’s HTML code over the existing code, then click “Save”;

The majority of online video players allow you to copy this code by right-clicking on your video:

4. Your video player will appear on your landing page!

Now all you have to do is finish editing your landing page and then publish it!

How to add my favicon ?

Go to settings > Plezi Configuration

Upload your logo & your favicon size logo on "Appearance"

How do I get a responsive image?

The look of your landing page can vary according to the size of the browser in which you are viewing it; Plezi responds to this constraint by offering you responsive blocks. While a plain colour background won’t generate any formatting surprises, an image use as a background may become truncated in different browsers if you don’t make it responsive. Here’s how to do it:

Place an image block on your landing page;

2. Choose an image to insert by selecting the image block, then in the green tab "Element settings" ;

3. Once the image has been inserted, click on it and under “Customise the chosen element”, choose the option “stretched width” so that the image stretches across frame;

4. Then, under “Customise the selected block”, tick the box “Adjust block to fit screen size” to make the block responsive (to adjust the width):

5. Save and check out the results in the preview:

6. If the landing page has been published, don’t forget to publish your changes:

Good job ! Now you only have to publish your landing page!