When real pro needed

User guides

for Prestashop Landing Page Builder

Install Prestashop Landing Page Builder

Subtitle
This manual describes the main steps of editing the site content and its features.

Basic terms:
Front office - the visible part of the site from the client.
Back office - admin part of the site, not visible to the client.
Module - software designed to perform a specific function on the site.
Design block - the semantic part of the site with its structure, content and specific functionality.
Header - the top block of the site, usually with constant content.
Footer - the lower block of the site, usually with constant content.
1. Installation

Download .zip file with module after purchase on you hard drive.

Login in to admin part of your store and go to modules section.

Choose “add new module” button, then choose module and upload it.

2. Setup

After install module you can see a switch button (turn on/turn off builder) and field for enter your current IP address. If you use IP then only you can use the builder on any pages. Other customers will see ready to use page.

3. Ready to use
Now you can go to the front office and start use Landing Page Builder.

Work in Landing Page Builder

After installation you can go to main page or any  product pages to make changes on it. Panel of Landing Page Builder consist of 4 main sections:  top section, left section, bottom section and right section.

Top section

Here you can clear all content from current page and choose mobile device to see how your page look on it and make some changes. For example, when you choose “tablet mode” and modify style of any blocks, that mean this modification will be show only on tablet.

Left section

This section contains 5 buttons:
- add/modify section
- import template
- export template
- page options
- grid

Add/modify section

All pages usually contain header, footer and some sections with different content between it. When you push layer button you see the first panel with already added sections. You can push on any section icon to choose that layout you need. Or if you need to add new section you must push green plus button, then choose a necessary section and then choose the necessary layout of this section.

Import/Export template

Also you can save any of your created pages and used it any time. Just press export button and enter the name of your template,  than you can see it in import window. 

Page options

Here you can select font of all text for current page and set a loader that user can see before opening this page. The loader will be visible to the user until all the contents of the page are loaded.

Grid

Just click on the ruler icon, and you will see the grid on the current page, it is needed for easy sorting and positioning of all the elements on the page.

Bottom section

Here you see two buttons “Custom code” and “Custom css”. Custom code needs if you want a place on page facebook pixel or other metrics. In custom css window you can add your own style for any element on page using standard css3 syntax.

Right section

This panel shows main actions for the section where placed a mouse cursor. You can Up/Down section, edit all text, images, and links. Choose options for sections and set styles for this section.

Section options

In each section option window contain three tabs:
- Content
- Listing
- Options

In content tab you can change any text variables, images and backgrounds for desktop and mobile devices. Use language selector to type correct translation. Remember in this selector were all languages that you have already installed in you shop and this selector will be hide if you use only one language.

 

Listing tab contain addition elements with own structure. Here you can edit, delete and change position each of them.  Variables for this element can be different for some blocks but all is simple and have main description.

Subtitle

* If you choose icon and load image for an element than on page will show an image! If you want to show icon, you need to  delete an image by select checkbox and press apply.

Options tab contains of switchers that modify content on current section. Here the short description about all of it:

Show on mobile – (turn on/off section to show on mobile devices)
Show on tablet – (turn on/off section to show on tablet devices)
Title down – (use this option if you want to show title in lower content  column)
Swap content – (this option change placement of content in the current section)
Leadgen button – (show button that with lead form in pop-up window “pop-up module must be installed ”)
Video button – (show video by pressing on video button “video url must be entered  in content tab”)
Leadform – (show lead form  “leadform module must be installed ”)
Bullits in column – (show all listing elements in column)
Number of columns –(enter number of columns)
Collapse bullits – (show all listing elements as collapse items)
Bullits with image background – (placed image of listing elements to background of this elements)
Video bullets – (convert all listing elements to video)
Show "add to cart" button - (option for catalog section)
Show stickers - (option for catalog section)
Show timer on products - (option for catalog section)

Parallax – (turn on parallax mode)
Video background – (turn on video background “parallax must be turn on”)
Full width – (content of current section will be placed on full width of user screen)
No margin – (delete margin of columns)

Style editing

To edit style for any elements just click on it. When mouse cursor will be over one of the elements you see a green border around of it. Click on it and you see a window of element style edit. If window closing itself some editing content you can drag it in to any side of screen.