THEME DOCUMENTATION

Thank you for purchasing Listop!

In case of any questions please do not hesitate to contact us via our support forum at Bitlers Please don’t forget to rate Listop and leave a nice review, it means a lot to us and our theme. Simply log in your Themeforest, go to Downloads section and click 5 stars next to the Listop WordPress theme.

RATE LISTOP

INSTALLATION

Once you've downloaded the installation file on ThemeForest, Extract it and locate a file called Listop_v1.x.zip. You can install the theme by using one of two installation methods

Requirements

To use Listop, you must be running WordPress 4.7 or higher. We have tested it with Mac, Windows and Linux. Its feasibility has been tested on Chrome, Firefox, Safari, Opera, Internet Explorer 10+ as well.

Downloading Listop

Download the Listop_full_package.zip file from themeforest.net and unzip it. In this zip file you have everything you need:

  1. Licensing
  2. Listop_Documentation.zip
  3. Listop_v1.x.zip
  4. Listop_online_documentation.html

The main theme zip file ( Listop_v1.x.zip ) you need to upload to your WordPress in order to install Listop. In this zip file, you will find the theme itself.

Note: Do not unzip file Listop_v1.x.zip. Do not upload the entire Listop_full_package.zip file you get from ThemeForest.

INSTALL Listop

WordPress upload - This is probably the simplest way for most users. Here are the steps you need to take

  • Login to WordPress Admin
  • Go to Admin Panel > Appearance > Themes > Add New > upload theme
  • Click on "Choose File" and select Listop_v1.x.zip
  • Click on "Install Now"

FTP upload - If you wish to install via FTP, here are the steps you need to take:

  1. Using FTP client, login to the server where your WordPress website is hosted
  2. Using FTP client, navigate to the /wp-content/themes/ directory under your WordPress website's root directory.
  3. Using FTP client, upload the Listop directory to themes directory on remote server

Great!! Now you can start building your site!

Listop comes with a one click import module. To import one of our demo sites, please follow these steps:

  • Login to WordPress Admin.
  • Go into Admin Panel > Appearance > Theme Options > Demo Installation
  • Click on the Import Demo and wait for few minutes

Activate Listop

After theme installation, click on "Activate" here.

Install Plugins

In order to get Listop work properly, you need to install some useful plugins. All these plugins are included in Listop, you don’t need to purchase them! After install plugins, activate them.

  1. Click on “Begin installing plugins”
  1. Check all plugins, select “Install” and click on “Apply”
  2. After installing plugins activate them.

Manual Update

You can update your theme manually by performing the following steps:

  1. Download the latest theme zip file from ThemeForest
  2. Extract it and locate Listop_v1.{x}.zip
  3. Extract Listop.zip and locate the Listop folder
  4. Copy/Replace content of the Listop folder to the /wp-content/themes/Listop folder of your web site.

Theme Option

Listop has an advanced Admin Panel for Theme Options, which gives you plenty of options and settings to customize your website.

Go to Appearance > Theme Options and you will get Listop Admin Panel. . All settings are organized in logical sections and have brief descriptions of what they do. A lot of these settings are self-explanatory.

Things to remember:

  • Always click on “Save changes” in order to change your settings accordingly.

Please note: in order to ensure the correct working of theme options (saving your style changes) all caching plugins you may be using on your website should be better deactivated. After you are done with your changes you can activate this caching plugins again.

General

To get this section, go to Theme Options> General from Admin Panel.

Here you can:

  • Select Theme color
  • Enable/Disable Boxed layout
  • Paste the custom css.
  • Paste the Google Analytics.

Boxed Layout

You can convert your demo in Boxed version .Go to Appearence >Theme options > click on General Setting tab:

  • To enable this option click "On" button.
  • Select background type.
  • Upload background image.
  • Set background according to your requirement either background repeat or no-repeat.
  • Set background attachment that should be fixed or to scroll.

Custom Css Code

Here, you can write css code to customize your theme.

To set it up, go to Appearance>Theme Options> General from Admin Panel

Click “Save Changes” button at the end in order to apply the changes throughout the theme.

Header Setting

Go to Theme Options from the dashboard and under the General tab, click Header Setting option.

Select Header Style

Select the header style for this theme from the available header options.

Select Header Style

  1. Here you can select the header style for your theme

Header One Settings

In this section set all available header one options.

Go to Admin Panel>Appearance >Theme Options and Under the General Settings tab click on Header Settings.

Here you can:
  1. Upload logo
  2. Enable or disable sticky header
  3. Enable or disable transparent header
  4. Show or hide Search bar
  5. Show or hide Login registeration
  6. Show or hide Listing Button
  7. Enter the button text

API Setting

To set it up, go to Admin Panel>Appearance > Theme Options > Click on API Setting menu.

Here you can

  • Enter google map API key
  • Enter MailChimp Heading
  • Enter MailChimp Subheading
  • Enter MailChimp API key
  • Enter MailChimp List ID

Click on ‘save changes’ button at the end to save the changes you have made.

Social Profile Setting

Go to Appearance > To get this section, go to Theme Options > Social Profile Setting from Admin Panel.

In this section you can enter

  • You can set social profiles
  • Select your social profile icons which remain same on every page including footer
  • You can enter the links to your social profiles

SMTP

Through SMTP you can ensure that your email will be send to the authorized recipient To set it up, go to Appearance > Theme Options > SMTP from Admin Panel.

By enabling this option, you can enter:

  • SMTP host name
  • SMTP port
  • SMTP SSL/TLS
  • SMTP authentication
  • SMTP User name
  • SMTP password

Template Setting

Go to Theme Options from the dashboard and click Template Setting.

Blog Setting

Go to Theme Options> Templates Setting > Blog from Admin Panel.

Here you can:

  1. Show or hide Top Banner
  2. Add the title for the blog page
  3. Add Banner Background
  4. Add the word limit
  5. Select the sidebar layout for all blog posts

Archive Setting

To set it up, go to Appearance > Theme Options and under the Template Settings tab, click on "Archive" from the Admin Panel.

Here you can:

  1. Show or hide Top Banner
  2. Add Archive page title
  3. Add Banner background
  4. Select sidebar layout
  5. Add Word limit
  6. Select sidebar

Author Setting

To set it up, go to Appearance > Theme Options and under the Template Settings, tab, click on "Author" from the Admin Panel.

Here you can:

  1. Show or hide Top Banner
  2. Add Author page title
  3. Add Banner background
  4. Add Word limit
  5. Select sidebar layout
  6. Select sidebar

Category Setting

To set it up, go to Appearance > Theme Options and under the Template Settings, tab, click on "category" from the Admin Panel.

Here you can:

  1. Show or hide Top Banner
  2. Add category page title
  3. Add Banner background
  4. Add Word limit
  5. Select sidebar layout
  6. Select sidebar

Tag Setting

To set it up, go to Appearance > Theme Options and under the Template Settings, tab, click on "Tag" from the Admin Panel.

Here you can:

  1. Show or hide Top Banner
  2. Add Tag page title
  3. Add Banner background
  4. Add Word limit
  5. Select sidebar layout
  6. Select sidebar

Search Setting

To set it up, go to Appearance > Theme Options and under the Template Settings, tab, click on "Search" from the Admin Panel.

Here you can:

  1. Show or hide Top Banner
  2. Add Search page title
  3. Add Banner background
  4. Add Word limit
  5. Select sidebar layout
  6. Select sidebar
  7. Enter heading
  8. Enter description

404 Setting

To set it up, go to Appearance > Theme Options and under the Template Settings, tab, click on "Search" from the Admin Panel.

Here you can:

  1. Show or hide Top Banner
  2. Add 404 page title
  3. Add Banner background
  4. Enter 404 heading upper text
  5. Enter 404 heading
  6. Enter 404 bottom text
  7. Enter 404 image

Blog Detail Setting

To set it up, go to Appearance > Theme Options and under the Template Settings, tab, click on "Blog detail" from the Admin Panel.

Here you can:

  1. Show or hide Top Banner
  2. Add Banner background
  3. Select sidebar layout
  4. Show or hide post date
  5. Show or hide post author
  6. Show or hide comments
  7. Show or hide views
  8. Show or hide social shares
  9. Show or hide social related post
  10. Show number of posts
  11. Show heading
  12. Show subheading
  13. Enter content limit
  14. Add Word limit

Listing Settings

Go to Theme Options from the dashboard and click Listing Setting.

Single listing

To set it up, go to Theme options> Listing Settings > Single Listing from Admin Panel.

Here you can:
  1. Show or hide Top Banner
  2. Upload banner background

Listing Category

To set it up, go to Theme options > Listing Settings > Listing Category from Admin Panel.

Here you can:
  1. Show or hide Top Banner
  2. Upload banner background
  3. Select sidebar layout

Dynamic Sidebar

Go to Theme Options from the dashboard and click Dynamic sidebar.

Here you can:
  1. Add dynamic sidebar name

Typography

Body Styling

To set it up, go to Appearance > Theme Options and under the Typography tab, click on "Body Styling" from the Admin Panel.

To set it up, go to Appearance > Theme Options and under the Typography tab, click on "Body Styling" from the Admin Panel.

  1. Font Family
  2. Font Weight & Style
  3. Font Subsets
  4. Text Align
  5. Font Size
  6. Line Height
  7. Word Spacing
  8. Letter Spacing
  9. Font color

Headings Styling

To set it up, go to Appearance > Theme Options and under the Typography tab click on "H1 Styling" from the Admin Panel.

Here you can show or hide the heading typography.In this section you can style Heading 1

You can set:
  1. Font Family
  2. Font Weight & Style
  3. Font Subsets
  4. Text Align
  5. Font Size
  6. Line Height
  7. Word Spacing
  8. Letter Spacing
  9. Font color

Demo Importer

The Listing comes with a one click import module. To import one of our demo sites, please follow these steps:

  1. Login to WordPress Admin.
  2. Go into Admin Panel > Appearance > Theme Options > Demo Importer
  3. Click on the Import Demo and wait for few minutes

Building Pages

To create a new page, go to Pages > Add New from the Admin Panel. In the text field near the top of the screen enter a title for your page. After you have added a title, choose the “Full width” template from the section on the right named "Page Attributes". This will allow you to add sections to your page that span across the whole width of the screen.

To start adding elements to your page, first make sure that you are in the backend editor. If the blue button on the top left says BACKEND EDITOR, click on it to enable the Visual Composer page builder view. Once you’re in the Visual Composer view, the blue button will say CLASSIC MODE. You can now click on “Add element” to start adding elements to your page. You can learn more about elements in the Custom Shortcodes section of this user guide.

Finally, click the "Publish" button in the upper right section of the page. (If you made some changes on already published page, "Update" button will appear.)

Blog Posts

To create a new blog post, go to Posts > Add New from the Admin Panel.

  1. Enter a title for your post in the text field near the top of the screen.
  2. On the right side of your screen, in the section called "Format", choose a format for your blog post.

Now it's time to categorize this post.

  1. Beneath the "Format" section you will see a section named "Categories". Here you can select the categories that you would like to add to this post.
  2. Once you've checked the categories you would like to add your post to, click the “Publish” button.
  3. Beneath the "Categories" section you will see the "Tags" and "Featured Image" sections. Here you can add tags to your post and set a featured image to be displayed for this post on blog list pages.

Categories

Here you can define which post categories belong your post categories belongs your post. You can add new blog categories in Posts Categories or directly here in Categories panel by clicking on “Add New Category”

Publishing Blog List

Publishing Blog List on a Page

Inserting blog lists in a page is very simple. Use Visual Composer and "Latest News" shortcodes.

Add a New Listing

To get this option, go to dashboard and click Lisitng.

Here you can view already available listings or add a new one.

Categories

To set it up, go to Listing > Categories from Admin panel.

Here you can:
  • Enter name of the new added category
  • Enter slug
  • Choose parent category
  • Add description
  • Add image
  • Add Address
  • Add Feature Heading and bottom add Features
  • Add FAQ Heading and bottom add FAQs

Testimonials

Testimonials are a great way to show potential clients what others are saying about your business.

To create a testimonial, go to Testimonials > Add New from the Admin Panel, and enter a title for your testimonial in the text field near the top of the screen.

  • Title: It is a testimonial’s title, which is used internally only for wordpress admin, for example in testimonial lists.
  • Content: Here you can enter the quoted text or brief description concerning your testimonial. It will be displayed in your testimonial on page.
  • Designation: Here you can upload designation of person.
  • Address: Here you can enter address.
  • Client rating: Here you can enter client rating

Services

To add a new service, go to Services > Add New from the Admin Panel.

Here you can:
  • Title: It is a service’s title, which is used internally only for WordPress admin.
  • Content: Here you can enter the quoted text or brief description concerning your service. It will be displayed in your service on page.
  • Select icon: choose any icon to show at your service page.
  • Icon image: upload the icon image. It has a totally different design to that of select icon.
  • Add Features

Price Table

Adding New Price Table

Go to Pricetable and click on add new to add pricetable.Give title of pricetable.

  1. Active Table: enable and disable price table.
  2. Show Pricing Plan: enable and disable pricing plan.
  3. Plan Type: To select plan type click on dropdown.
  4. Plan Price: Here you can enter plan price.
  5. Currency Symbol: Here you can enter plan price currency symbol.
  6. Button Text: Enter button text for price table.
  7. Button Link: Enter button link for price table.
  8. Plan Features: Click on add row button to add plan features of pricing table.

Publishing Price Table

Publishing Price Table On A Page

Inserting price table in a page is very simple.Select visual composer from "Page Attributes" in the right side of wordpress admin and select "Price Table" shortcodes add number of post.

Visual Composer

Visual Composer is the best drag’n’drop visual editor for building pages, posts etc. in WordPress.

Please note, that Visual Composer inside Listop is optimised for this theme, so all content elements and shortcodes you have here are Listop-related. All Listop elements you will find in tab „Listop“ in Visual Composer:

To start creating new page layout you can choose whether to do it in backend or in frontend editor. We recommend to use Frontend Editor, because it is a real “What You See Is What You Get” way to build your pages. Click on “Front End Editor”

And you will be switched to Visual Composer Frontend Editor:

Here you might want to begin with adding a new content element by clicking on “Add element”. After that the overview of all content elements will be displayed.

You can begin with adding a new content row in your page; choose “Row”. You will be switched to your page with added row element. Now you can edit its properties like for example number of columns and layout.

Shortcodes

List of ShorCode here

Categories with Listing

By clicking here, you can:

  1. Enter Heading
  2. Enter Subheading
  3. Enter Category
  4. Enter Number
  5. Show or hide button

Categories with search form settings

By clicking here, you can:

  1. Enter Heading
  2. Enter Subheading
  3. Enter Category
  4. Enter Number
  5. Show or hide button

Contact form

By clicking here, you can:

  1. Title
  2. Description
  3. Button text
  4. Email

Contact information

By clicking here, you can:

  1. Enter Heading
  2. Enter description
  3. Enable or disable social button
  4. Enter email
  5. Enter Phone Number
  6. Enter Phone Number

Creative listing carousel

By clicking here, you can:

  1. Enter category
  2. Enter number

Creative services settings

By clicking here, you can:

  1. Enter number

Feature banner settings

By clicking here, you can:

  1. Enter Heading
  2. Enter subheading
  3. Upload mockup
  4. Show or hide social button

Google Map

By clicking here, you can:

  1. Latitude
  2. Longitude
  3. Map height

How it works

By clicking here, you can:

  1. Heading
  2. Description
  3. Add processes

Listing grid

By clicking here, you can:

  1. Category

Listing search form

By clicking here, you can:

  1. Heading
  2. Description
  3. Button label
  4. Category

Listing with Author

By clicking here, you can:

  1. Category
  2. Author
  3. Number

Masonary gallery

By clicking here, you can:

  1. Upload gallery

Masonary listing

By clicking here, you can:

  1. Enter category

Popular listing

By clicking here, you can:

  1. Enter category

Price Tables

By clicking here, you can:

  1. Enter number

Recent Post

By clicking here, you can:

  1. Category
  2. Number of posts
  3. Sort by
  4. Limit

Right Parallax Banner

By clicking here, you can:

  1. Enter features
  2. Show or hide button

Simple services

By clicking here, you can:

  1. Enter number
  2. Enter limit

Testimonial

By clicking here, you can:

  1. Enter number