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 map;
- insert a video;
- add a favicon;
- how to get a responsive image.
It’s very simple!
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:
<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="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
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:
<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>
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;
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 “relative width” to make the block responsive:
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!