Requirements

Requirements of Leo Elements


First of all, we'd like to say thank you for choosing our work.

Leotheme - a website where you can find the best Prestashop theme and their Extensions . We're proud of our professional themes, extensions. With years of experience working on Opensource, we have created a great number of extensions for Prestashop like: Leo Prestashop Framework, Leo Megamenu Prestashop Module ...

Leotheme is also famous for custom work, if you have any trouble or need help with your website design, coding part, .... we will always be here to support you or to give you the most brilliant solution.

Our main goal with Leo Elements is to create the fastest, most advanced page builder for PrestaShop. For this, we make sure that it is based on the latest technology that available. (If you aren't sure if your server supports this or not, contact your host for more information). Here are some basics of installing, configuring and customizing the Leo Elements.

- PrestaShop 8.0 or Greater

- Compatible with PHP 8

- Database

- Memory Limit: The more the better… (128 MB or higher is preferred)

- Browsers: Leo Elements is supported on almost all browsers

- Device: It is not possible to edit with mobile phones and tablets for the moment. It is possible to work only with desktop computers.

LeothemeTeam

Download and Install

What is Leo Elements


Leo Elements is the powerful module followed Prestashop Standards which contained Necessary Features to build professional Prestashop site within minutes. Leo Elements has Four components, they are AP Profiles Manager, AP Position Manager, AP Product List Builder and AP Widget Manager. It shows the rationality in the administration and the apparently purpose of each module.

Here are some basics of installing, configuring and customizing the Leo Elements.

Download

Leo Elements has been realeased, after purchasing this module you can download it at our official site or at other market as Prestashop Addon, Themeforest. Another way to experience the powerful Leo Elements Module is to purchase our prestashop theme, Leo Elements is intergrated in every theme.

Install

You can install our modules in an easy and fast way. When you're doing the installing and setting process, we will always be there to support you if any problem occur.

Install the module from Back Office

- In the Modules tab, click on Upload a module

img

- Browse to open the dialogue box letting you search your computer and select the file or just drop your module to the upload area.

img

- If the installation is successful, the following message will appear:

img

- The module is successfully installed, now click on the Configure button to setup the module.

- Or you can access the module manager tab, then search for Leo Elements, enable it then open its setting panel.

img

Changelog


v1.0.0

First Release

How to use


Leo Elements is a visual page builder module for PrestaShop that enable you to create a web pages in live.

If you are new to prestashop. Please read prestashop guide first:

http://doc.prestashop.com/display/PS16/Getting+Started

Leo Dashboard

img

1: Configure links to sections of module Leo Elements

2: Configure links to other modules.

3: Statistics of profiles, positions, hooks, etc. was created with Leo Elements

4: Links to each position of the Profile.

5: Hide or Show Panel tool.

6: Export Sample For Dev

img

+ To export data of module Leo Elements, you should check the modules you want to export.

+ The next step is to click the "Create Sample" button.

+ The system will automatically export file .xml" in folder at "Sample" located in theme: Example: H:\xampp\htdocs\prestashop_leo\prestashop_1.7.8.7\themes\base\samples

img

7: Back-up

img

+ To back-up data of module Leo Elements, you should check the modules you want to export.

+ The next step is to click the "Backup" button.

+ This tools will save all database of module to php file in folder. Example: H:/xampp/htdocs/prestashop_leo/prestashop_1.7.8.7/var/cache/prod/backup/themes/

img

- After creating a profile and position of a page, we have the result of the Leo dashboard tab.

img

Profiles: Home or LandingPage

- This module supplies many widgets to build features for sales, and intuitive user interfaces flexibility. It also integrates your work in this module, you only need to do it one and then you could reuse it.

- How to create a new profile screen: From the menu on the left "Profiles: Home or LandingPage" to the next screen lists Profile; Use click "Add new" button to create profile.

img

- When you access "Add New" page, you need to fill in all these blanks below:

- General

img

- Name: Name of profile.

- Friendly URL: This fields to build url for homepage or landing page

- Meta title: These fields are used to create a title for the homepage or landing page according to SEO standards.

- Meta description: These fields are used to create a description of the title for the homepage or landing page.

- Meta keywords: These fields are used to create keywords for the title of the homepage or landing page.

- Profile Key: The Character string of profile.

- Enable Back to Top: Show a Scroll To Top button.

- Layout Mode: Set the layout for the pages, there are 2 modes: full width and boxed large.

- Fullwidth Homepage: The setting full-width for above HOOKS, apply for Home page

- Fullwidth other Pages: The setting full-width for above HOOKS, apply for all OTHER pages ( not Home page )

- Disable cache Hooks: Some modules always update data, disable cache for those modules show correct info.

- Click "Save" button when you finish the process.

- Header

Header is the top part of the web page. It is the introduction part of ​​the website where people have their first impression before diving deeper. Header is considered as an "invitation" with the task of providing core information about the product so that customer can grasp the information in just a few seconds.

Headers can include multiple layout elements, for example:

+ Basic elements of brand identity: logo, brand name, slogan, mascot, etc.

+ Links to basic website content categories.

+ Links to important social networks

+ Basic contact information (phone number, e-mail, etc.)

+ Switch language, Search field, login, register, etc.

- Access the Header tab, then choose to Create a new position.

img

- Create a name for the position header

img

- After creating the position, Select the content for the weighing hook to use.

img

-Create a name for the hook of position.

img

- And here are our results

img

- Click "Save" button when you finish the process.

- Home Content

Content is the first factor to evaluate a quality website, it has many effects such as conveying a message, conveying a story, or also promoting a product, etc. Depending on the content of each website, we create a different content.

- Similar to the header, the content section also creates new content -> select content for each hook -> create a name for the hook of position.

img

img

img

img

- And here are our results

img

- Click "Save" button when you finish the process.

- Footer

Footer is the final part of a web page, displaying the same content on all pages of that website. The information displayed is very important and useful to the website owner.

- Similar to the header and content sections, we also have a new footer like the previous sections.

img

img

img

img

- And here are our results

img

- Click "Save" button when you finish the process.

- Background

img

- Access the Background tab

- Correctly edit the background in full-width mode:

+ Background Color: Choose background color for website

+ Background image: Create a website background with an image. There are two ways is to insert the URL or select the file.

+ Background repeat: Choose the background repeat mode, there are many modes: Repeat-x, Repeat-y, Repeat-both or No-repeat.

+ Background attachment: Used to control the background image in relation to frames and elements.

+ Background size: Background-size defines the size of the background image, its value will be changed to fit the frame without causing scale deviation.

- Correctly edit the background in box mode:

+ Background Color: Choose background color for website

+ Background image: Create a website background with an image. There are two ways is to insert the URL or select the file.

+ Background repeat: Choose the background repeat mode, there are many modes: Repeat-x, Repeat-y, Repeat-both or No-repeat.

+ Background attachment: Used to control the background image in relation to frames and elements.

+ Background size: Background-size defines the size of the background image, its value will be changed to fit the frame without causing scale deviation.

- Click "Save" button when you finish the process.

- Breadcrumb

img

- Access the Breadcrumb tab

- Use background for breadcrumb: Select Enable to enable the use of background images for breadcrumbs

- Edit appropriate for your site:

+ Breadcrumb Background for all page: Create a website background with an image. There are two ways is to insert the URL or select the file.

+ Breadcrumb Background Color: Or you can also use background color for breadcrumb.

+ Use full breadcrumb background: After enable breadcrumb background will show full web.

+ Breadcrumb Min Height: Put height for it.

+ Breadcrumb Text Position: Select the text position of the breadcrumb.

+ Breadcrumb on Category Page: Choose the right mode for your website.

- Click "Save" button when you finish the process.

- Product List: Category, Manufacture, Search

img

- Access the Product List: Category, Manufacture, Search tab

- You can create a new Product list layout in Leo Elements Creator > Product Lists Builder. Then you can config conlum per row in Product List.

- Config for Default Product List Layout

- You can select Product list Layout for each Page

- Click "Save" button when you finish the process.

- Category Page

img

- Access the Category Page tab

- You can create new category layout in Leo Elements Creator > Categories Builder.

- Click "Save" button when you finish the process.

- Product Detail Page

img

- Access the Product Detail Page tab

- You can create new category layout in Leo Elements Creator > Products Builder.

- Click "Save" button when you finish the process.

- Font Config

img

- Access the Font Config tab

- You can choose font-family according to their website, there are default font-family types or add the others, there are many cases with font-size, light-height, etc. default for each tag. Create your own website with your own style

- Click "Save" button when you finish the process.

- Custom Css and Js

img

- Access the Custom Css and Js tab

- Custom Css: Please set write Permission for folder D:\xamp\htdocs\prestashop\module_appagebuilder/themes/classic/modules/appagebuilder/css/profiles/

- Custom Js: Please set write Permission for folder D:\xamp\htdocs\prestashop\module_appagebuilder/themes/classic/modules/appagebuilder/js/profiles/

- Click "Save" button when you finish the process.

- Set Variable CSS

img

- Access the Set Variable CSS tab

- You can choose colors depending on their website, there are default colors for each element of the website. Create your own website with your own style.

- Click "Save" button when you finish the process.

- Leo Elementor Module Creates Multiple Landing Pages on Prestashop

- To create a new landing page, do the same with the Profiles: Home or LandingPage section above

- After following the steps mentioned earlier, we will get some results as follows:

img

- Click the "Save" button when you're done with the process. We will get more landing pages on Prestashop.

img

Positions: Header Content Footer

Used to manage the location of blocks on the page. (Leo Elements Creator > Positions: Header Content Footer)

- Add Position

To create a position, simply click on the "+" button.

img

Here you can fill in the following information.

img

Name: Enter a name (This field is required).

Position Key: Use it to save as file name of css and js of Position

Type: Location displayed on the page.

Custom Css: Please set write Permission for folder D:/xamp/htdocs/prestashop/module_appagebuilder/themes/classic/modules/appagebuilder/css/positions/

Custom Js: Please set write Permission for folder D:/xamp/htdocs/prestashop/module_appagebuilder/themes/classic/modules/appagebuilder/js/positions/

- Click "Save" button when you finish the process.

- Edit

To configure the position click on "View"button.

Then choose "Edit", To edit the information of the location.

img

- Delete

To configure the position click on"View"button.

Then choose "Delete", To edit the information of the location.

img

Hook And Content Any Where

Used to manage the location of blocks on the page. (Leo Elements Creator > Hook And Content Any Where)

- Add Hook

To create a position, simply click on the "+" button.

img

Here you can fill in the following information.

img

Name: Enter a name (This field is required).

Status: Status displayed on page.

Display Hook: Location displayed on the page.

- Click "Save" button when you finish the process.

- Edit

Then choose "Edit", To edit the information of the location.

img

- Delete

To configure the position click on "Edit"button.

Then choose "Delete", To edit the information of the location.

img

Products Builder

Used to manage the product detail. (Leo Elements Creator > Products Builder).

- Add Product Detail

- Access the Products Builder tab.

- Select the file you want to import on your computer -> The next step is to click the "Import" button.

- Or select add new to create a new product detail.

img

Here you can fill in the following information.

img

- Name: Enter a name (This field is required).

- Product List Key: The character string of product key.

- Difficult to use, you can select avail item.

- Or you can create a new product detail yourself.

- Click "Save" button when you finish the process.

- Edit

Then choose "Edit", To edit the information of the location.

img

- Delete

To configure the position click on "Edit"button.

Then choose "Delete", To edit the information of the location.

img

Categories Builder

Used to manage the category detail. (Leo Elements Creator > Categories Builder).

- Add Category

- Access the Categories Builder tab.

- Select the file you want to import on your computer -> The next step is to click the "Import" button.

- Or select add new to create a new category.

img

Here you can fill in the following information.

img

- Name: Enter a name (This field is required).

- Category Key: The character string of category key.

+ Filter: The position of the filter will be displayed on the page.

+ Category Information Box: Including information about the category (image, description, display location, etc.), unleash your creativity

+ Sub Category: Including information about sub-categories (images, descriptions, display locations, etc.), unleash your creativity

+ Product List: The product list will be displayed in the category for each device.

- Click "Save" button when you finish the process.

- Edit

Then choose "Edit", To edit the information of the location.

img

- Delete

To configure the position click on "Edit"button.

Then choose "Delete", To edit the information of the location.

img

Product Lists Builder

Used to manage the product lists. (Leo Elements Creator > Product Lists Builder).

- Add Product List

- Access the Product Lists Builder tab.

- Select the file you want to import on your computer -> The next step is to click the "Import" button.

- Or select add new to create a new product lists.

img

Here you can fill in the following information.

img

- Name: Enter a name (This field is required).

- Product List Key: The character string of product key.

+ Product List File Content: This section will have the class properties of the product list, Products Listing Mode, set the number of columns for each screen of the devices.

Class: Class used to style the product.

+ Top function Config: Category, manufacturer, search.

+ Paging: Category, manufacturer, search

+ Run Ajax: This section to enable image display or countdown etc.

+ Other features: Use Swipe image (Mobile - You can swipe the product photo in product list.)

+ Difficult to use, you can choose to Import From Demo Product List

+ Or you can create a new product list yourself:

Layout: The frame contains elements.

Product_description_short: Short description of the product.

Product_flags: Display label on product.

Product_name: Name of product.

Product_price_and_shipping: Price and shipping.

Product_thumbnail: Show small image of the product.

Quickview: Used to view the product, when customers click on the product it will display a popup describing the specific product.

Tpl code: Used to add code to the frame "Tpl code".

Functional-buttons: To Create group covers outside, we also create ".functional-buttons" class.

You can drag and drop elements from the right-hand frame to the left-hand side. To create product followed design.

For example, you can drag and drop elements from the layout as image below:

img

- Click "Save" button when you finish the process.

- Edit

Then choose "Edit", To edit the information of the location.

img

- Delete

To configure the position click on "Edit"button.

Then choose "Delete", To edit the information of the location.

img

Font Configuration

Used to manage the font family. (Leo Elements Creator > Font Configuration).

- Add Font

- Access the Product Lists Builder tab.

- Click '+' button on right corner of the screen to create."Add new"

img

Here you can fill in the following information.

- Name: Enter a name (This field is required).

- There are two ways to add new font families:

+ Case 1: Upload your font file

img

Select full information such as font-style, font-weight, etc. Upload the full font file.

+ Case 2: Use the available font of google font

img

- Click "Save" button when you finish the process.

- Edit

Then choose "Edit", To edit the information of the location.

img

- Delete

To configure the position click on "Edit"button.

Then choose "Delete", To edit the information of the location.

img

Hook Manage

Used to manage the hook. (Leo Elements Creator > Hook Manage).

img

+ Drop modules from hooks layouts to "UnHook Modules" Panel to unhook them. Drag and drop modules from hooks layouts to update theirs order and hook position

+ Override hook feature only applies for HOOK_HEADERRIGHT, HOOK_SLIDESHOW, HOOK_TOPNAVIATION, HOOK_SLIDESHOW, HOOK_PROMOTETOP, HOOK_CONTENTBOTTOM, HOOK_BOTTOM

+ Here only shows all of installed modules having hooks supportting for LeoTheme Layout.

Edit with Creative Elements


Edit an existing CMS Page

- Access the Design tab -> Page

img

- Click the button "Edit with Leo Elements Creator" to edit cms page.

img

Edit a New CMS Page

- Access the Design tab -> Page -> click button "Add new page"

img

Fill in the information for the new page

img

- Page category: Choose category for page.

- Title: Title of page

- Meta title: Used to override the title tag value. If left blank, the default title value is used.

- Meta description: Enter the meta description of the page.

- Meta keywords: To add tags, click in the field, write something, and then press the "Enter" key.

- Friendly URL: Only letters and the hyphen (-) character are allowed.

- Button "Edit with Leo Elements Creator": Click it to enter live edit.

- Indexation by search engines.

- Display: Hide or Show new page.

Edit Product description

- Access the Catalog tab -> Products -> click icon "pencil"

img

- And click button "Edit with Leo Elements Creator" in page Product to enter live edit.

img

Edit Category description

- Access the Catalog tab -> Categories -> click icon "pencil"

img

- And click button "Edit with Leo Elements Creator" in page Categories to enter live edit.

img

Page Layout


To create page designs with Creative Elements, we use 3 types of elements: Sections, Columns and Widgets. Combining these elements lets you design and compose very complex web pages. You can control and edit the appearance of each of them. Sections are the largest building blocks, and inside them are groups of Columns. Columns sit inside of Sections and are used to house the Widgets. Widgets are placed inside of Columns. You control the Section, Column, and Widgets with their handle.

img

Handle icons lets you:

- Edit and customize each of the elements.

- Move an element up or down the page.

- Duplicate, add, save, or delete an element.

Explore our elements.

Section

A section is the most basic element that you can work with. It's the building block of every page. A section can be set as full width and spread all over the screen, or receive the content area width (by default). After you create a section you can drag and drop a widget inside. You can also divide each section to few columns. Every page you create can contain as many sections as you want. You can drag a section above or under another one to relocate it.

Column

Every section includes one or more columns. You are able to insert your content inside each column. You can easily arrange and order the columns, simply by dragging and dropping them.

Edit Category description

Widgets are different UI items, which enable the website to perform a function or just display information. You can insert Widgets inside Columns, a Widget width is set by the Column width.

Here is the list of the currently available widgets:

- Products ( Carousel / Grid )

- Products Tabs ( Carousel / Grid )

- Block Link

- Generate Code

- Block Carousel

- Manufacturers Carousel

- Instagram

- CountDown

- Leo Slideshow Module

- Leo Megamenu Module

- Leo Blog Module

- Module

- Inner Section

- Heading

- Image

- Text Editor

- Video

- Button

- Divider

- Spacer

- Google Maps

- Icon

- Image Box

- Icon Box

- Star Rating

- Icon List

- Counter

- Progress Bar

- Testimonial

- Tabs

- Accordion

- Toggle

- Social Icons

- Alert

- HTML

- Menu Anchor

Section Overview


Edit Section icons

img

- Drag Section: Move the Section up or down with a simple drag & drop.

- Duplicate: Duplicate the Section with only one click.

- Save: Save the section into your Template Library.

- Remove: Delete Section from page.

Layout Tab

img

- Stretch Section: Force the Section to stretch to the full width of the page.

- Content Width: Set the Content Width to Boxed or Full Width. When choosing Boxed - use the slider to set your width.

- Columns Gap: Set your Columns Gap.

- Height: Choose between Fit to Screen: Your section will fill the screen, and Min Height: Set a Min Height, and use the slider to set your section height.

- Content Position: Set your Section Content Position.

- Overflow: Set the Overflow to Default or Hidden.

- HTML Tag: Choose one from the predefined layouts.

- Structure: Choose one from the predefined layouts.

Styles Tab

img

Background

Background Overlay

Border

Shape Divider

Typography

Note: The following colors won't work if Default Colors are enabled.

Set the font colors.

Advanced Tab

img

Advanced

Motion Effects

Responsive

Attributes

Custom CSS

Column Overview


Edit Column icons

img

- Drag Column: Move the Section up or down with a simple drag & drop.

- Duplicate: Duplicate the Section with only one click.

- Save: Save the section into your Template Library.

- Remove: Delete Section from page.

Layout Tab

img

- Column Width (%): Set Column Width (unit is %).

- Vertical Align: Align columns vertically.

- Horizontal Align: Align columns horizontally.

- Widgets Space (px).

- HTML Tag: Choose one from the predefined layouts.

Styles Tab

img

Background

Border

Typography

Note: The following colors won't work if Default Colors are enabled.

Set the font colors.

Advanced Tab

img

Advanced

Motion Effects

Responsive

Attributes

Custom CSS

Widget Overview


Edit Widget icons

img

- Drag Column: Move the Section up or down with a simple drag & drop.

- Duplicate: Duplicate the Section with only one click.

- Save: Save the section into your Template Library.

- Remove: Delete Section from page.

Content Tab

img

Depends on the Widget

Styles Tab

img

Depends on the Widget

Advanced Tab

img

Advanced

Motion Effects

Responsive

Attributes

Custom CSS

Widgets

1. Accordion Widget


The Accordion Widget is used to display text in a collapsed, condensed manner, letting you save space while still presenting an abundance of content. With the Accordion, visitors can scan the item titles, and choose to expand an item only if it is of interest. A similar widget is the Toggle Widget, but there are two main differences between the Accordion widget and the Toggle widget:

Content Tab

Styles Tab

2. Alert Widget

The Alert Widget allows you to display a colored alert box with many styles to draw the attention of your viewers for different purposes. You can use this element to display dismissable special offers, GDPR and Privacy notifications like the ones you see on this page. It appears each time the customer opens the page.

You can configure enable/disable module

Content Tab

Styles Tab

3. Block Carousel Widget

The Block Carousel Widget helps you to easily design and customize item.

Content Tab

Block Carousel

View Settings

Styles Tab

Depends on enabling or disabling attributes

4. Block Link Widget

The Block Link Widget helps you to easily design and customize.

Content Tab

Styles Tab

Depends on enabling or disabling attributes

5. Button Widget

The Button Widget helps you to easily design and customize buttons.

Content Tab

Styles Tab

6. CountDown Widget

The Countdown widget allows you to count down from the start date to the end date in your page.

Content Tab

Styles Tab

Depends on enabling or disabling attributes

7. Counter Widget

The Counter Widget enables you to add an animated numbered counter to your page. When the page is loaded, an animation of running numbers will be seen on this widget, going up from the start point to the end point.

Content Tab

Styles Tab

Depends on enabling or disabling attributes

8. Divider Widget

This widget allows you to add horizontal lines that divide your content. This is a fairly basic and simple widget, but it can help you create nice effects as separators of various sections, or for highlights of your headings.

Content Tab

9. Generate Code Widget

This widget allows you to add code snippet. The code will be read and the result will be displayed on the screen.

Content Tab

10. Google Maps Widget

The Google Maps widget is a really simple way to embed Google Maps in your website. This is very useful for contact pages, so your visitors can know where you are situated.

Content Tab

11. Heading Widget

The Heading Widget allows you to create stylish title headings.

Content Tab

Style Tab

12. HTML Widget

Inside the HTML Widget you can embed HTML, CSS, and also include JS scripts. It’s mostly recommanded for advanced users.

Content Tab

Style Tab

Depends on the type of attribute entered.

13. Icon Widget

The Icon widget is incredibly useful for displaying icons in numerous styles on your page. You can choose to display the icon as default, stacked, or framed. The list of icons is derived from the Font Awesome, My Libraries set, you can upload your icon and we try to keep it as updated as possible.

Content Tab

Style Tab

Icon(Normal & Hover)

Icon(Hover)

The stacked and framed icon setting also has the shape option to choose from circle or square. It also features the icon padding, allowing you to add inner padding to the icon. You also get the border radius, which lets you control the round edges of the frame.

14. Icon Box Widget

Icon boxes come in very handy when building websites. The most common usage is for sections that list features of products or services. The icons are derived from the Font Awesome Icons, My Libraries set, you can upload your icon, and you are able to search through them and pick the right one.

Content Tab

Style Tab

Icon(Normal & Hover)

Icon(Hover)

Content

Content > Title

Content > Description

15. Icon List Widget

The Icon List Widget creates an easy-to-manage list of items, with each item highlighted by its own icon.

Content Tab

Icon List

Icon List > Items

Add Item: Click on the Add Item button to add an item.

Style Tab

List

Icon

Text

16. Image Widget

The Image widget lets you add images to your pages, and design them visually using Creative Elements. Images play a vital role in web design, so you will most likely use the Image Widget a lot while designing your website. When you add the image widget to the page, the left panel opens the settings panel for that widget. This panel includes the content, style and advanced tab for the image widget. Let's go over all of the settings you can control for this widget.

Content Tab

Style Tab

17. Image Box Widget

The Image Box widget lets you add image boxes that combines images, headlines and text. This is used, mostly and alternatively to the Icon Box Widget, for features sections. You have full control over the design of the image, the headline and the description.

Content Tab

Style Tab

Image

Content

Content > Title

Content > Description

18. Inner Section Widget

Inner Section Widget utility helps to create a child Section inside a parent Section. The Inner Section is located inside a column of the parent Section. We cannot put an Inner Section inside the created Inner Section unless you use Shortcode.

Layout Tab

Layout

Layout > Structure

Choose one from the predefined layouts.

Layout > More Structures

Choose one from many predefined layouts.

Background

Background Overlay

Border

Shape Divider

Typography

Note: The following colors won't work if Default Colors are enabled.

Set the font colors.

19. Instagram Widget

Instagram widget Allows you to add an Access Token to display instagram photos related to your topic.

Content Tab

Configuration

View Settings

20. Manufacturers Carousel Widget

This widget will show you the logos of all the manufacturers, or those that you need to display.

Content Tab

Manufacturers Carousel

View Settings

21. Menu Anchor Widget

The Menu Anchor widget allows you to create a page with an internal smooth scrolling navigation.

Content Tab

Anchor

22. Module Widget

Select a module from the list what you want to display on this Widget. (Only those modules are available which implements the WidgetInterface class).

Content Tab

Module Options

23. Products( Carousel / Grid )

Showcase your products to your buyers in a fancy carousel! This widget will help you to increase sales by highlighting your featured products, new products, prices drop and bestsellers.

Content Tab

Product Options

View Settings

24. Products Tabs( Carousel / Grid )

Showcase your products to buyers on a fancy carousel! This widget will allow you to display many featured products.

Content Tab

Product Tabs

Tabs Items:

Button "Add item": When we click this button, we will be added a new item.

View Settings

Style Tab

Tabs

Title

25. Progress Bar Widget

This Widget allows you to add fully styled, animated progress bars to your page. Progress bars are usually great to engage users for fundraising campaigns or showing off a milestone your business achieved.

Content Tab

Style Tab

Progress Bar

Progress Bar > Inner Text

Title Style

26. Social Icons Widget

The Social Icons Widget lets you add icon links to all your social media profiles. With this Widget you get total control over the appearance of your social icons.

Content Tab

Style Tab

Icon

Icon Hover

27. Spacer Widget

It’s the easiest widget, use it if you want to put some space inside a Column.

Content Tab

28. Star Rating Widget

It’s the easiest widget, use it if you want to put some space inside a Column.

Content Tab

Style Tab

29. Tabs Widget

The Tabs Widget allows you to divide your content into tabs.

Content Tab

Style Tab

Tabs

Tabs > Title

Tabs > Content

30. Testimonial Widget

This is a great Widget for promoting your services or products and adding social proof of the value you provide your customers.

Content Tab

Testimonial

Style Tab

Content

Image

Name

Title

31. Text Editor Widget

This widget is great to add content to your page. If you need to add shorter text, you might prefer to use the Heading widget. This widget has more styling options that let you change settings like font weight, line height, letter spacing, alignment, and more.

Content Tab

Text Editor

Style Tab

Text Editor

Drop Cap

32. Toggle Widget

The Toggle Widget lets you create text boxes that are collapsed, so the visitor only sees the titles of each text box item. This lets you show your content in a condensed form, so visitors don't have to scroll through a long page and can sift through the titles easily. A similar widget is the Accordion widget, but there are two main differences between the Toggle widget and the Accordion widget.

Content Tab

Style Tab

Toggle

Title

Icon

Content

33. Video Widget

Use the Video Widget to easily embed videos on your page.

Content Tab

Video

Video Options > YouTube

Video Options > Vimeo

Video Options > Dailymotion

Image Overlay

Style Tab

Video

Modules

34. Leo Blog Module

Leo Blog is a module Blog for Prestashop that includes everything for your site blog page. The Blog dashboard allows you to configure how the display of the blog page, listing item view, and item detail view. You can also create a theme, and template for the blog page. Blog content management includes Category management, blog item management, and comment management.

Download and Install

Leo Blog has been realeased, after buying this module you can download it at our official site or at other market as Prestashop Addon, Themeforest. In addition, Leo Blog is integrated in our prestashop themes. So you can buy our themes and experience the powerful Leo Blog Module.

You can install our modules as other modules extremely easily and quickly. After you buy the module and installation, we will quick support if there are problems. Also we integrate the features installed demo data so you can quickly build sites. With powerful features but installation process is quite fast and easy. If you have to face with any problems please contact us. We will always beside you.

Install the module from Back Office

- In the Modules tab, click on Upload a module

img

- Browse to open the dialogue box letting you search your computer and select the file or just drop your module to the upload area.

img

- Once the installation is successful, the following message will appear:

img

- The module is successfully installed, now click on the Configure button to setup the module.

- Or you can access the module manager tab, then search for Leo Blog, enable it then open its setting panel.

img

How to use

img

Content Tab

Blog Options

View Settings

Style Tab

Show Image

Show Image (Normal)

Show Image (Hover)

35. Leo Megamenu Module

Download and Install

Leo Megamenu has been realeased, after purchasing this module you can download it at our official site or at other market as Prestashop Addon, Themeforest. Another way to experience the powerful Leo Megamenu is to purchase our prestashop theme, Leo Megamenu was intergrated in every theme.

You can install our modules as other modules extremely easily and quickly. After you buy the module and installation, we will quick support if there are problems. Also we integrate the features installed demo data so you can quickly build sites. With powerful features but installation process is quite fast and easy. If you have to face with any problems please contact us. We will always beside you.

Install the module from Back Office

- In the Modules tab, click on Upload a module

img

- Browse to open the dialogue box letting you search your computer and select the file or just drop your module to the upload area.

img

- If the installation is successful, the following message will appear:

img

- The module is successfully installed, now click on the Configure button to setup the module.

- Or you can access the module manager tab, then search for Leo Megamenu, enable it then open its setting panel.

img

How to use

img

Content Tab

Megamenu Options

36. Leo Slideshow Module

Download and Install

Leo Slideshow has been realeased, after buying this module you can download it at our official site or at other market as Prestashop Addon, Themeforest. In addition, Leo Slideshow is integrated in our prestashop themes. So you can buy our themes and experience the powerful Leo Slideshow Module.

You can install our modules as other modules extremely easily and quickly. After you buy the module and installation, we will quick support if there are problems. Also we integrate the features installed demo data so you can quickly build sites. With powerful features but installation process is quite fast and easy. If customer faces with any problems please contact us. We will always beside you.

Install the module from Back Office

- In the Modules tab, click on Upload a module

img

- Browse to open the dialogue box letting you search your computer and select the file or just drop your module to the upload area.

img

- If the installation is successful, the following message will appear:

img

- The module is successfully installed, now click on the Configure button to setup the module.

- Or you can access the module manager tab, then search for Leo Slideshow, enable it then open its setting panel.

img

How to use

img

Content Tab

Slideshow Options

Thank you for reading!

We hope you can create the best website with our module.

Getting Support

If you can't find an answer to your question by searching in this userguide, please go to our forum and post a detailed topic about the issue, along with your website URL, or send it to us via email.

The Scope Of Our Support

Our support covers configuration, building site as demo, trouble while using any features, bug fixes. We don't provide support for customizations or 3rd party extension.

Our Support Time

We always try our best to help you with the problem as soon as possible, ut sometime it will take a little longer due to different time zones

Our working hours are 8.00 AM - 5.30 PM, Monday to Friday (GMT+7). Because of that all the requests for support on the weekend will be replied on the next week. Thank you for your patience.

Leo Theme