Side Tabs

24 Apr Side Tabs

Posted at 06:25h in by
1 Like

Side Tabs is an add-on for Green Popups that allows you to create small tabs (associated with popups) and stick them to any window edge. Clicking the tab opens associated layered popup. This add-on works with WordPress and standalone version of Green Popups. Download Side Tabs from CodeCanyon.

Standalone ScriptWordPress Plugin

Installation

  1. Make sure that you have Green Popups 7.00 or higher installed.
  2. Downloads “Side Tabs” from CodeCanyon and install it into admin panel where Green Popups installed.
  3. Go to admin panel and activate “Side Tabs” add-on. Once activated, it creates Left Side Menu “Green Popups >> Side Tabs”.
  4. Click “Green Popups >> Side Tabs” and create as many side tabs as you need and associate them with existing popups.
  5. Read next paragraph to know how to embed tabs into website.

How to use Side Tabs

Use the tab on any web pages. How to do it?

  1. Make sure that webpage has DOCTYPE. If not, add the following line as a first line of HTML-document.
  2. Make sure that website loads jQuery version 1.9 or higher. If not, add the following line into head section of HTML-document.
  3. Copy JS-snippet taken on Advanced Settings page (under “Remote Use” section) in your admin panel and paste it into HTML-document. You need paste it at the end of body section (above closing </body> tag).
  4. To display the tab on certain part of website, insert the following JavaScript-snippet at the source code of the page. 
    <script>
if (typeof lepopuptab == typeof undefined) var lepopuptab = new Array();
lepopuptab.push("TAB_SLUG");
</script>

    TAB_SLUG is a tab slug taken from relevant column on Side Tabs page.
    OR

    <script>
if (typeof lepopuptab == typeof undefined) var lepopuptab = new Array();
lepopuptab.push("TAB1_SLUG*TAB2_SLUG");
</script>

    TAB1_SLUG is a tab slug for desktops/laptops.
    TAB2_SLUG is a tab slug for mobiles.

Installation

  1. Make sure that you have Green Popups 7.00 or higher installed.
  2. Downloads “Side Tabs” from CodeCanyon, install and activate it as a regular WordPress plugin. Once activated, it creates Left Side Menu “Green Popups >> Side Tabs”.
  3. Click “Green Popups >> Side Tabs” and create as many side tabs as you need and associate them with existing popups.
  4. Read next paragraph to know how to embed tabs into website.

How to use Side Tabs

Sitewide

 To display the tab sitewide, select it on Settings page (under “Side Tabs Settings” section).
Certain page (standard)

 To display the tab on certain post/page/product, select it on editor of that page (“Green Popups – Side Tabs” meta box).
Certain page (advanced)

 To display the tab on certain part of website, insert the following JavaScript-snippet at the source code of the page.

<script>
if (typeof lepopuptab == typeof undefined) var lepopuptab = new Array();
lepopuptab.push("TAB_SLUG");
</script>

TAB_SLUG is a tab slug taken from relevant column on Side Tabs page.
OR

<script>
if (typeof lepopuptab == typeof undefined) var lepopuptab = new Array();
lepopuptab.push("TAB1_SLUG*TAB2_SLUG");
</script>

TAB1_SLUG is a tab slug for desktops/laptops.
TAB2_SLUG is a tab slug for mobiles.

Remote use Use the tab with any non-WordPress pages of the site or with 3rd party sites. How to do it?

  1. Make sure that non-WordPress page has DOCTYPE. If not, add the following line as a first line of HTML-document.
  2. Make sure that website loads jQuery version 1.9 or higher. If not, add the following line into head section of HTML-document.
  3. Copy JS-snippet taken on Advanced Settings page (under “Remote use” section) in your admin panel and paste it into HTML-document. You need paste it at the end of body section (above closing </body> tag).
  4. Use any method marked by blue dot (see above).
No Comments

Sorry, the comment form is closed at this time.