Leo Widly Elements

Leo Widly Elements guide for prestashop 8x


THANK YOU FOR PURCHASING OUR THEME!

Here are some basics on installing, configuring and customizing the Leotheme.

BEFORE WE GO

The theme and the sample data is provided "as is". Customizing code and other design related issues can be done as freelance work, if our team is available. If you are new to Prestashop, please understand I cannot fix your site for free. Leotheme would love to help everyone but We are really busy. I suggest reading documentation available online regarding using Prestashop, server requirements, etc.

If you like this theme please rate it.

Have a rest of your day

LeothemeTeam

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

https://doc.prestashop.com/display/PS17/Getting+started

For each package you download from Leotheme, you will have: quickstart package, theme package, PSD. If you buil your shop from scrap, you can download quickstart file.

Steps of how to install QuickStart

Note : all the steps are described in the video already.

If you have avail shop and install follow guide

Steps of how to install Prestashop theme

  1. Upload, file from your computer: Please find box: Import from your computer > Choose File > Click Next , If you see error when use this way, please use option 2
  2. Upload file to your folder in your live site via FTP client. Please upload the zip file of template to folder: ROOT/themes/theme.zip, refresh your browser, you will see zip file in dropdown list of box Import from FTP, Select template file and click next

Note: Please note that all the steps are described in the video already.

1. Install follow video guide

2. Install follow demo images

- Backend > Preferences > Themes > Add new theme

- You can import themes from your computer

+ If you see this error when the file is too big, you can follow my guide

- Also, you can put themes on the folder themes form FTP

- You can select a theme for the shop

- Select template as default and config show left or right column in each page

3. Create or edit size image and Regenerate thumbnails

Backend > Design > Image Setting

+ Create or edit size image

+ Regenerate thumbnails

You can read guide in link (Blog Guide)

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

7: Back-up

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

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

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

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

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

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

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

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 Layout.

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

- Front End

- Configure Tool bar(Backend > Modules > Leo Theme Control Panel)

11. Front-office translations(Backend > Localization > Translations)

11.1. Installed modules translations(Backend > Localization > Translations)

Thank you for reading!

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

Getting Support

If you are unable to find your answer here in our documentation, please go to our forum and post up a new topic with all the details we need. Please be sure to include your site URL as well or send us an email.

Our support scope

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

Our support time

We try our best to monitor the email around the clock, however, this is not always possible due to different time zones. We will try to reply you as fast as we can.

Our working time is 8.00 AM - 5.30 PM, Monday to Friday (GMT+7). So if ask for help in the weekend, you may have to wait a little bit for support and please be patient.