Capitol
Creative Multi-Purpose Joomla Template v1.0.0
Created Date: 30/09/2015 - By: joomlavi - Email: dev@joomlavi.com
Thank you for purchasing my theme. If you have any questions that are
beyond the scope of this help file, please feel free to email via my user page contact form here or to my
support forum at http://joomlavi.com/forum. Thanks so much!
Installing
1. Installing the quickstart package.
The quickstart package is basically a clone of my demo preview, a package of Joomla, Capitol template, Components, Modules, plugins, libraries, etc all of these already installed. All you need to do is to unzip to your host, create a fresh database and just follow the quick install steps. That's it, only 5 min and you have a full working website. This solution is mostly for users who will start a fresh website.
After finishing this quickstart installation, you only need to edit or add text, logo, product images and information, menu, new articles... in the back-end.
Step 1: Download Quicktart
Please download mainfile package on themforest, when extracting file, you will see jv-capitol-quickstart-vx.x.x package.
Step 2: Extract & Upload Quickstart Package
- If you install Capitol on your localhost for testing or development: just copy the folder to …\xampp\htdocs (If you are using XAMPP) or….\wamp\www (If you are using WAMP)
- If you install Capitol on your actual server:
Unzip the files into your host, eg: www.yourwebsite.com would be just into public_html/ ; www.yourwebsite.com/hidden_test_folder/ would be in public_html/hidden_test_folder
You can upload files via FTP using a client application like Filezilla or via cPanel -> File Manager -> Upload file(s).
Step 3: Create Database
Create a fresh database. (Tutorial for cPanel, Tutorial for Phpmyadmin)
Step 4: Run installation
Now it's time to start with the installation process. If you have uploaded installation files in your root directory you just need to go to http://yourdomain.com or subdomain (i.e http://yourdomain.com/capitol) in your browser and get started.
You will see the first screen where you enter necessary information:
- Enter the your site's name. This for the first heading of your index.
- Enter a short description of your website.
- Enter a valid email address for system messages and password recovery.
- Enter admin username.
- Enter a password.
- Select whether your site should be taken offline after the installation process is completed.
Click "Next" to continue the installation process.
The next screen you will see is about Database Configuration:
- By default this value is set to MySQLi, but you can select MySQL
- Leave the default localhost value.
- Enter the database username, which you created in step 3.
- Enter the password for the database username, which you created in step 3.
- Enter the database name, which you created in step 3.
- This is used to add to all of database tables. If you want to host many Joomla sites on a single database. You should leave the default value.
- If you have any existing databases. You can select "remove" or "backup" any existing data. You should leave this option "Backup" since it is the safest choice
Click to proceed installation.
The next screen you will see is "Overview". In the first part, you can specify if you want install sample data on your server. We recommend you to choose the option, which helps build your actual website cloning Capitol Demo.
Click to start the real Joomla installation.
In the next screen, you will see Joomla Web Installer is installing....
On the last screen of the installation process you need to press button or you can rename the installation folder. Note that you can't use your site unless you remove this folder completely!
Access your administrator eg: www.yourwebsite.com/administrator/ , login and go to . Here look at the tab called and make sure all the folders listed are green "Writable". If not change their permissions to 755 for folders (or in some rare servers try 757) and files to 644 (the same in some rare servers try 646).
Also, Joomla recommends the php option Display Errors to be disabled. Some servers have this option enabled. The advantage is you can change this settings from the Global Configuration, 3rd tab called Servers. There is an option there, Display Errors, and set it to None.
2. Installing standalone Version.
Install Joomla by downloading from here http://www.joomla.org or by installing it from your cPanel Fantastico.
Download package Capitol on themeforest. In this package, we have already archive needle files to install Jv Capitol. Including JV Framwork, Plugin, Module... About K2 Component - please kindly download at this address: http://getk2.org/. Download Virtuamart at http://virtuemart.net/.
The way to Upload & Install Joomla Extension you can watch it here:Upload & Install Joomla Extension
The setting Template, Components, Module, Plugin... You will be introduced at the next version of this file.
Also it would be recommended that you install a full clone install (quick start) in a temporary path, to see the contents of the articles, settings etc.
I personally don't like this method because it's a bit harder to set it up, but i'm sure you know what you are doing.
The installation JV Framework is comppulsory to use Capitol Template.
Template Customization
You can manage the template by Navigating to
- Click on the name of the template in the Style column to edit style with our powerful JV Framework 4.0
- Click on the name of the template in the Template column to edit core files
Styles column refers to changing the available parameters of a template, such as color, font-color, logo... These are dependent on the parameters a template maker made available and are a convenience for quick changes. Template - column refers to editing the actual template files.
1. Edit Style via JV Framework
Accessing to Edit Style you can edit Galaticos style with JV Framework. This area includes 10 tabs:
You can reset all settings to default by click on in the top right corner. Now we will go to each tab to find out more.
1.1. Overview Tab
This tab contains general information of JV Framework and the template.
You can change the name of style
Displaying Template's ID
Template name
Version of template
1.2. Global Tab
This tab contains a collection of general parameters that affect the entire site.
The sets of parameters that can be found in this tab are:
Choose Yes for activating Develop Mode. At that time you will edit LESS instead of CSS
Choose logo type (images/type). You can upload your own logo, add Logo text, slogan
Select layout for the template ( default/Left-Right-Main/Main-Left-Right/Mobile).
Yes/Auto/No RTL mode. Yes If using RTL. In case of using multi-langues, please chooseAuto template will work base on the displayed language.
Allow you to select the type of layout that will be used when accessed from a mobile device. In case of you chooseMobilesome position will be rejected. You must be consider carefully before using this option.
Enable/disable Support Retina mode.
This is where you enable/disable the cache function for JV Framework’s extensions or clear the cache.
Allow you to optimize the site performance by utilizing various types of compression.
Enable/disable Go to top button
Allow you to enable/disable and modify copyright information.
1.3. Google Fonts Tab
In this tab, you can easily apply google font to your contents.Click to add font. Every panel can choose 1 font. You can create many different panels for collerative fonts.
Title font
You can search and choose the fonts which Google Font has already provided.
After choosing font at the list of font weights will be updated atomatically. You should choose the needle font weight, Using many fonts weight can slow down your webpage
Choose the target which use font.
1.4. Style Tab
This tab allows you to edit template color
We support 4 basic layout style: (default), , andChoose colour & pattern background, pattern background you can replace the default images by overwriting the image of folder.. Note: This class is just used for style layout: , and
This Option choooses the displaying and positions of module.
This is basic choosing of template.
It will help you enter general class for all of website. Capitol provide 2 classes available for header style: blank (default) and header-white
enable/disable custom theme color mode
If enabled, you can easily add your own color to classes, ids, heading, paragraph... Simply edit colors with color box and assign selector: background or border or color. You can also edit classes, ids... in the box
Click to add and style new classes, ids...
1.5. Grid Layout Tab
This tab allows you to adjust the size ratio of the grid layout. This feature is ultized from Bootstrap 3
This Tab works like this: The default template just support when those positions are changed. Each postion provide 6 postion inside it, for example: position button have bottom-1, bottom-2, bottom-3, bottom-4, bottom-5, bottom-6; The green - round button is the number of displaying positions:(It's included Modules). The drag part below is the size choosing of this module.
1.6. Extension Tab
This tabs contains several sets of parameters that enhance or support the Framework .
enable/disable the date indicator, as well as configure it.
enable/disable the font resizer.
enable/disable Google Analytic.
enable/disable Yahoo Analytic.
enable/disable lazy loading mode.
1.7. Custom JS Tab
This Tab will support for you to create Carousel with OWL Carousel
Please choose the version plugin OWL Carousel
Initializing Carousel with different customizations.
element you want to Carousel. Is spaced with
,Please watch those options of OWL Carousel v1.3.3 at here, v2.0 at here. Then choosing needle customized options. As the picture above. If you not do this, the value will be default.
1.9. Assign Tab
If this style is not the default one, this is where you can assign which page will utilize this style instead of the default style.
Below are some examples of style default, and assign1.9. Scrolling Effect Tab
This is the new feature added in JV Framework 4.x, with this tab, you can create scroll effect for each page. Each element will appear within its relative distance from the perspective of the visitor. Simply add selectors and config parameters.
CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more.A string or number determining how long the animation will run.
Set a timer to delay execution of subsequent items in the queue.
Get the current coordinates of the first element in the set of matched elements, relative to the document.
Set repeat timer effect.
Some specific effects. Let's watch this demo here:
Enable/disable on mobile
Set a timer to delay execution of subsequent items in group
Selector of those sub- selectors
Turn the effect opposite with the original between some items in group.
2. EDIT CORE FILES
Go to click on Jv-Capitol in template column.
2.1. HTML STRUCTURE
The template's grid/html structure and features are based exclusevely on Bootstrap http://getbootstrap.com/
It would be very wise to use Firebug (in Firefox) or Developer Tools (in Chrome), it will surely make your life easier.
2.2. CSS STRUCTURE
Capitol Template uses these css files which are located in templates/jv-capitol/css/ folder:
template.css - this is the main css stylesheet that contains most of the important styles
template.rtl.css - this is the main css stylesheet rtl direction that contains most of the important styles
menu-touch.css - this is the menu mobile css stylesheet styles
menu-touch.rtl.css - this is the menu mobile css stylesheet rtl direction styles
custom.css - We added this stylesheet for YOU to add code in it. Please try using only this stylesheet and override rules from other stylesheets. Why? Because i will probably add future updates so in order for not overwriting your rules changed in template.css it's better to add your own code in this stylesheet. Backup this file before update template
2.3. JS STRUCTURE
This theme uses both Mootools and jQuery (less mootools). Most extensions i used are jquery build which is way better in my oppinion.
Most of the js files are located in templates/jv-capitol/js/ folder
We have included a custom coded js. It's name is script.js
Shortcode
Shorcode is the main support when creating page in JV Capitol. It is developed and reserved for this template. We dont need to explain more about how to use it. Basically, It is easy to use and visual. Below are some actual image of Plugin ShortCode Capitol.
At footer content, please click on button to open Shortcode Panel
A Popup appear include: An Enter class to quickly find shortcode. Below are list of Capitol support shortcode(We will optimize and add some shortcodes in the next version.).
When choosing a shortcode from the list, you will have a panel: Here will have some value class for your to choose or enter easily. It is included components like the picture above. It is search tool for searching and come back to shortcode list.
Below are breadcrumb and button
Below are some Value class for you to choose or enter:
Below is the tools group:
- After entering your values, please click on this button to insert shortcode in the context.
- It is the same with button Live Priview at the top of this page. It provide the preview version of ShortCode; Some Shortcode neither support for this functions nor effectively working, please infer at the frontend you should view at Frontend to see the last result.
- Scroll at the top panel
- This value is really helpful. It will save all of your setting for using later.next time. For example: When setting a shortcode tab, you will save it with name "Preset 1". When creating a new page. -> You will need to open shortcode. Go to Presets -> Choose "Preset 1" you will gain the shortcode which you have created before.
1. Headings
[jv_heading style="default" heading_text="Lorem ipsum" heading_tag="h3" heading_size="0" heading_class="class" sub_text="Lorem ipsum dolor sit amet" sub_text_size="0" sub_text_class="" align="none" class="class"]
- Choose style headings
- Enter heading text
- Tagname element. h1. h2, h3, h4, h5
- Heading size. Using the value 0 if we use css to set up size
- Enter heading class. Ex: text-primary, text-bold, text-uppercase, text-italic. mt-10 ...
- Enter subtext
- Sub text heading size. Using value0 if you you css to size
- Enter sub text class. Ex: text-primary, text-bold, text-uppercase, text-italic. mt-10 ...
- Set text align: none, left, center, right
- General class for heading
a. Headings Default
Preview Get shortcode
[jv_heading
style="default"
heading_text="Lorem ipsum"
heading_tag="h3"
heading_size="0"
heading_class="class"
sub_text="Lorem ipsum dolor sit amet"
sub_text_size="0"
sub_text_class=""
align="none"
class="class"
]
d. Headings Style 3
Preview Get shortcode
[jv_heading
style="style3"
heading_text="Heading text"
heading_tag="h1"
heading_class=""
heading_size="0"
align="none"
][/jv_heading]
b. Headings Style 1
Preview Get shortcode
[jv_heading
style="style1"
heading_text="Latest works"
heading_tag="h1"
heading_class="text-bold text-uppercase font-montserrat"
sub_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse"
sub_text_class="text-italic font-playfair"
sub_text_size="18"
align="center"
][/jv_heading]
e. Headings Style 4
Preview Get shortcode
[jv_heading
style="style4"
heading_text="Heading text"
heading_tag="h1"
heading_class=""
heading_size="0"
sub_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
sub_text_class=""
sub_text_size="0"
align="none"
][/jv_heading]
c. Headings Style 2
Preview Get shortcode
[jv_heading
style="style2"
heading_text="Latest works"
heading_tag="h1"
heading_class="text-bold text-uppercase font-montserrat"
heading_size="36"
sub_text="In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo. Morbi fringilla massa placerat neque bibendum porta. Integer a iaculis tortor. Maecenas sollicitudin dolor pulvinar."
sub_text_class="font-raleway"
sub_text_size="15"
align="center"
][/jv_heading]
3. Columns
[jv_columns class="column_class"]
[jv_column class="jv-column col-xs-6 col-sm-6 col-md-6 col-lg-6"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit.[/jv_column]
[jv_column class="jv-column col-xs-6 col-sm-6 col-md-6 col-lg-6"]Tincidunt ut laoreet dolore magna aliquam erat volutpat.[/jv_columns]
[/jv_columns]
- Set number of columns. Click number button to set how many columns you want. Click arrow button to merge the column with next one
- Extra CSS class
[jv_columns class="column_class"]
[jv_column class="jv-column col-xs-6 col-sm-6 col-md-6 col-lg-6"]Lorem ipsum dolor sit amet.[/jv_column]
[jv_column class="jv-column col-xs-6 col-sm-6 col-md-6 col-lg-6"]Lorem ipsum dolor sit amet.[/jv_columns]
[/jv_columns]
4. Lists
[jv_orderlist list_style="icon" icon="icon:question-circle" icon_color="#444" class=""]
[jv_li]Lorem ipsum dolor sit amet [/jv_li]
[jv_li]consectetur adipisicing elit[/jv_li]
[jv_li]sed do eiusmod tempor [/jv_li]
[jv_li]incididunt ut labore et dolore [/jv_li]
[jv_li]magna aliqua[/jv_li]
[jv_li]Sed ut perspiciatis unde [/jv_li]
[/jv_columns]
- Shoose list style: none, o-circle, o-square, o-decimal, o-decimal-leading-zero, o-alphabet, o-alphabet-upper, icon, m-decimal and m-alphabet
- button icon (only style icon). syntax: icon:icon_name. Support FontAwesome & 7 stroke icon
- Set icon color
- Extra CSS class
[jv_orderlist list_style="icon" icon="icon:question-circle" icon_color="#444"]
[jv_li class=""]Lorem ipsum dolor sit amet [/jv_li]
[jv_li class=""]consectetur adipisicing elit[/jv_li]
[jv_li class=""]sed do eiusmod tempor [/jv_li]
[jv_li class=""]incididunt ut labore et dolore [/jv_li]
[jv_li class=""]magna aliqua[/jv_li]
[jv_li class=""]Sed ut perspiciatis unde [/jv_li]
[/jv_orderlist]
[jv_orderlist list_style="icon" icon="icon:angle-right" icon_color="#444"]
[jv_li class=""]Lorem ipsum dolor sit amet [/jv_li]
[jv_li class=""]consectetur adipisicing elit[/jv_li]
[jv_li class=""]sed do eiusmod tempor [/jv_li]
[jv_li class=""]incididunt ut labore et dolore [/jv_li]
[jv_li class=""]magna aliqua[/jv_li]
[jv_li class=""]Sed ut perspiciatis unde [/jv_li]
[/jv_orderlist]
[jv_orderlist list_style="o-decimal"]
[jv_li class=""]Lorem ipsum dolor sit amet [/jv_li]
[jv_li class=""]consectetur adipisicing elit[/jv_li]
[jv_li class=""]sed do eiusmod tempor [/jv_li]
[jv_li class=""]incididunt ut labore et dolore [/jv_li]
[jv_li class=""]magna aliqua[/jv_li]
[jv_li class=""]Sed ut perspiciatis unde [/jv_li]
[/jv_orderlist]
[jv_orderlist list_style="icon" icon="icon:pencil" icon_color="#444"]
[jv_li class=""]Lorem ipsum dolor sit amet [/jv_li]
[jv_li class=""]consectetur adipisicing elit[/jv_li]
[jv_li class=""]sed do eiusmod tempor [/jv_li]
[jv_li class=""]incididunt ut labore et dolore [/jv_li]
[jv_li class=""]magna aliqua[/jv_li]
[jv_li class=""]Sed ut perspiciatis unde [/jv_li]
[/jv_orderlist]
5. Label
[jv_label background_color="#00b2b2" font_size="13" border_radius="3" text_color="#fff"]
- Set background color
- Set label font size
- Set border radius
- Set text color
- Extra CSS class
[jv_label background_color="#00b2b2" font_size="13" border_radius="3" text_color="#ffffff"]consectetur adipiscing[/jv_label]
[jv_label background_color="#333" font_size="13" border_radius="0" text_color="#ffffff"]hend merit non sed[/jv_label]
[jv_label background_color="#339b62" font_size="13" border_radius="25" text_color="#ffffff"]Proin egestas diam[/jv_label]
6. Tooltips
[jv_tooltip tooltip_text="Tooltip Text" placement="top" font_size="12" border_radius="30" background_color="#111111" text_color="#111" class="text-semi-bold"]Hover here to see tooltip[/jv_tooltip]
- Set tooltip content
- Set tooltip placement
- Set tooltip font size
- Set tooltip border radius
- Set tooltip background
- Set a class if you want to custom style for tooltip such as: background-color
- Set color for the text that has tooltip
- Extra CSS class
[jv_tooltip tooltip_text="Tooltip Text" placement="top" font_size="12" border_radius="30" background_color="#111111" text_color="#111" class="text-semi-bold"]Hover here to see tooltip[/jv_tooltip]
7. Dropcaps
[jv_dropcap style="square" size="4" text_color="#fff" background_color="#444" class="text-semi-bold"]L[/jv_dropcap]
- Set dropcap style: default, square, circle, rounded
- Set dropcap size
- Set dropcap text color
- Set dropcap background
- Extra CSS class
[jv_dropcap style="default" text_color="#444" size="5" class="text-semi-bold"]L[/jv_dropcap]
[jv_dropcap style="square" size="4" text_color="#fff" background_color="#444" class="text-semi-bold"]L[/jv_dropcap]
[jv_dropcap style="circle" text_color="#fff" background_color="#33aaea" size="4" class="text-semi-bold"]L[/jv_dropcap]
[jv_dropcap style="rounded" size="4" text_color="#fff" background_color="#74c8b8" class="text-semi-bold"]L[/jv_dropcap]
8. Blockquotes
[jv_quote style="default" width="0" author="Author name" author_url="http://joomlvi.com"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.[/jv_quote]
- Set blockquote style: default, light, dark
- Set width in pixels. Leave it 0 for responsive moder
- Set author name
- Set author URL
- Extra CSS class
Blockquote default
Preview Get shortcode
[jv_quote style="default" width="0" author="Author name" author_url="http://joomlvi.com"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.[/jv_quote]
Blockquote Light
Preview Get shortcode
[jv_quote style="light" width="0" author="Author name" author_url="http://joomlvi.com"]In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo. Morbi fringilla massa placerat neque bibendum porta.[/jv_quote]
Blockquote Dark
Preview Get shortcode
[jv_quote style="dark" width="0" author="Author name" author_url="http://joomlvi.com"]In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo. Morbi fringilla massa placerat neque bibendum porta. [/jv_quote]
9. Message box
[jv_messagebox style="info" font_size="13" icon="images/icon/icon-info.png" close="no" class="text-uppercase font-montserrat"]I am message box. click edit button to change this text.[/jv_messagebox]
- Set message style: info, warning, success, danger
- Font size for text
- button icon (only style icon). syntax: icon:icon_name. Support FontAwesome & 7 stroke icon
- Show/Hide Close button
- Extra CSS class
[jv_messagebox style="info" font_size="13" icon="images/icon/icon-info.png" close="no" class="text-uppercase font-montserrat"]I am message box. click edit button to change this text. [/jv_messagebox]
[jv_messagebox style="warning" font_size="13" icon="images/icon/icon-warning.png" close="no" class="text-uppercase font-montserrat"]I am message box. click edit button to change this text.[/jv_messagebox]
[jv_messagebox style="success" font_size="13" icon="images/icon/icon-faq.png" close="no" class="text-uppercase font-montserrat"]I am message box. click edit button to change this text.[/jv_messagebox]
[jv_messagebox style="danger" font_size="13" icon="images/icon/icon-danger.png" close="no" class="text-uppercase font-montserrat"]I am message box. click edit button to change this text.[/jv_messagebox]
10. Action Box
[jv_actionbox
style="dark"
icon="icon:7s-portfolio"
icon_size="48"
heading_text="Want to see more amazing works?"
heading_tag="h4"
heading_size="0"
heading_class="text-bold text-uppercase font-montserrat"
button_text="Subscribe US"
button_style="default"
button_color="default"
button_link="http://joomalvi.com"
button_target="_blank"
button_second_text="View Protfolio"
button_second_style="outline"
button_second_color="default"
button_second_link="index.php/portfolio/03-columns/light-cover"
button_second_target="_blank"
class=""
]
- Set text action style: dark, white
- Set icon. syntax: icon:icon_name. Support FontAwesome & 7 stroke icon
- Size of icon
- Enter content heading text
- Choose heading tag: h1, h2, h3, h4, h5, p
- Select Heading size (pixels) - 0 equivalent auto
- Heading CSS class
- Set button text
- Set button style: default, outline
- Set button color: default, general, primary, success, info, warning, danger, gray, white
- Set button link
- Choose a way to open link: _self or _blank
- Set button second text
- Set button second style: default, outline
- Set button second color: default, general, primary, success, info, warning, danger, gray, white
- Set button second link
- Choose a way to open link: _self or _blank
- Extra CSS class
[jv_actionbox
style="dark"
icon="icon:7s-portfolio"
icon_size="48"
heading_text="Want to see more amazing works?"
heading_tag="h4"
heading_size="0"
heading_class="text-bold text-uppercase font-montserrat"
button_text="Subscribe US"
button_style="default"
button_color="default"
button_link="http://joomalvi.com"
button_target="_blank"
button_second_text="View Protfolio"
button_second_style="outline"
button_second_color="default"
button_second_link="index.php/portfolio/03-columns/light-cover"
button_second_target="_blank"
class=""
]
[jv_actionbox
style="white"
icon="icon:7s-like2"
heading_text="Like what you see? check our complete work."
heading_tag="h5"
heading_class="text-uppercase"
button_text="PURCHASE TEMPLATE"
button_style="outline"
button_color="white"
button_link="#"
button_target="_self"
class="font-montserrat"
]
11. Accordions
[jv_accordion style="accordion-1" toggle="no" active_first="yes" icon="yes" panel="4" ]
[jv_panel title="WHAT SHIPPING METHOD ARE AVAILABLE?" icon="icon:star" class=""]
We serve freshly brewed tea and coffee, soft drinks and a section of light meals and tasty treats and snacks.
[/jv_panel]
[jv_panel title="CAN I CUSTOMIZE THE FONTS?" icon="icon:star-o" class=""]
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
[/jv_panel]
[jv_panel title="WHAT ABOUT BLOG OPTIONS?" icon="icon:flag" class=""]
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
[/jv_panel]
[jv_panel title="WORDPRESS STANDARDS WERE USED?" icon="icon:cogs" class=""]
Eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.
[/jv_panel]
[/jv_accordion]
- Set accordion style: accordion-1 (default), accordion-2, accordion-3 and accordion-4
- Enable/disable toggle mode
- Open first spoiler when page loaded
- Choose collapse icon for spoilers (Icon Arrow)
- Enter a number of your panel and their data
+ panel icon (only style icon). syntax: icon:icon_name. Support FontAwesome & 7 stroke icon
+ panel title
+ panel content
+ panel CSS class
Accordions style 1
Preview Get shortcode
[jv_accordion
style="accordion-1"
toggle="no"
active_first="yes"
icon="yes"
]
[jv_panel title="WHAT SHIPPING METHOD ARE AVAILABLE?"]
We serve freshly brewed tea and coffee, soft drinks and a section of light meals and tasty treats and snacks.
[/jv_panel]
[jv_panel title="CAN I CUSTOMIZE THE FONTS?"]
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
[/jv_panel]
[jv_panel title="WHAT ABOUT BLOG OPTIONS?"]
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
[/jv_panel]
[jv_panel title="WORDPRESS STANDARDS WERE USED?"]
Eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.
[/jv_panel]
[/jv_accordion]
Accordions style 2
Preview Get shortcode
[jv_accordion
style="accordion-2"
toggle="no"
active_first="yes"
icon="yes"
]
[jv_panel title="WHAT SHIPPING METHOD ARE AVAILABLE?"]
We serve freshly brewed tea and coffee, soft drinks and a section of light meals and tasty treats and snacks.
[/jv_panel]
[jv_panel title="CAN I CUSTOMIZE THE FONTS?"]
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
[/jv_panel]
[jv_panel title="WHAT ABOUT BLOG OPTIONS?"]
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
[/jv_panel]
[jv_panel title="WORDPRESS STANDARDS WERE USED?"]
Eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.
[/jv_panel]
[/jv_accordion]
Accordions style 3
Preview Get shortcode
[jv_accordion
style="accordion-3"
toggle="no"
active_first="yes"
icon="yes"
]
[jv_panel title="WHAT SHIPPING METHOD ARE AVAILABLE?"]
We serve freshly brewed tea and coffee, soft drinks and a section of light meals and tasty treats and snacks.
[/jv_panel]
[jv_panel title="CAN I CUSTOMIZE THE FONTS?"]
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
[/jv_panel]
[jv_panel title="WHAT ABOUT BLOG OPTIONS?"]
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
[/jv_panel]
[jv_panel title="WORDPRESS STANDARDS WERE USED?"]
Eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.
[/jv_panel]
[/jv_accordion]
Accordions style 4
Preview Get shortcode
[jv_accordion
style="accordion-4"
toggle="no"
active_first="yes"
icon="yes"
]
[jv_panel title="WHAT SHIPPING METHOD ARE AVAILABLE?"]
We serve freshly brewed tea and coffee, soft drinks and a section of light meals and tasty treats and snacks.
[/jv_panel]
[jv_panel title="CAN I CUSTOMIZE THE FONTS?"]
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
[/jv_panel]
[jv_panel title="WHAT ABOUT BLOG OPTIONS?"]
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
[/jv_panel]
[jv_panel title="WORDPRESS STANDARDS WERE USED?"]
Eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.
[/jv_panel]
[/jv_accordion]
12. Tabs
[jv_tabs style="style-1" placement="top" tabs="3" fitwidth="no" active="1"]
[jv_tab title="Desciption"]
Cras ut magna quis metus tristique vulputate.
[/jv_tab]
[jv_tab title="Addition Infomation"]
Quisque interdum malesuada nisi non accumsan.
[/jv_tab]
[jv_tab title="Reviews" icon="icon:star-o" class=""]
Nam in ligula vel mi interdum tincidunt sit amet eget leo.
[/jv_tab]
[/jv_tabs]
- Set accordion style: style-1 and style-1
- Choose a placement: Top, bottom, left and right
- Enter a number of your tab and their data
+ Select icon from icon picker (only style icon). syntax: icon:icon_name. Support FontAwesome & 7 stroke icon
+ tab title
+ tab content
+ tab CSS class
- Allow tab buttons fit whole width by percent
- Select which tab is open by default
- Extra CSS class
Tabs style 1
Preview Get shortcode
[jv_tabs style="style-1" placement="top" tabs="3" fitwidth="no" active="1"]
[jv_tab title="Desciption"]
Cras ut magna quis metus tristique vulputate.
[/jv_tab]
[jv_tab title="Addition Infomation"]
Quisque interdum malesuada nisi non accumsan.
[/jv_tab]
[jv_tab title="Reviews" icon="icon:star-o" ]
Nam in ligula vel mi interdum tincidunt sit amet eget leo.
[/jv_tab]
[/jv_tabs]
Tabs style 2
Preview Get shortcode
[jv_tabs style="style-2" placement="top" tabs="3" fitwidth="no" active="1"]
[jv_tab title="Desciption"]
Cras ut magna quis metus tristique vulputate.
[/jv_tab]
[jv_tab title="Addition Infomation"]
Quisque interdum malesuada nisi non accumsan.
[/jv_tab]
[jv_tab title="Reviews" icon="icon:star-o" ]
Nam in ligula vel mi interdum tincidunt sit amet eget leo.
[/jv_tab]
[/jv_tabs]
Tabs style 1 - Bottom
Preview Get shortcode
[jv_tabs style="style-1" placement="bottom" tabs="3" fitwidth="no" active="1"]
[jv_tab title="Desciption"]
Cras ut magna quis metus tristique vulputate.
[/jv_tab]
[jv_tab title="Addition Infomation"]
Quisque interdum malesuada nisi non accumsan.
[/jv_tab]
[jv_tab title="Reviews" icon="icon:star-o" ]
Nam in ligula vel mi interdum tincidunt sit amet eget leo.
[/jv_tab]
[/jv_tabs]
Tabs style 2 - Bottom
Preview Get shortcode
[jv_tabs style="style-2" placement="bottom" tabs="3" fitwidth="no" active="1"]
[jv_tab title="Desciption"]
Cras ut magna quis metus tristique vulputate.
[/jv_tab]
[jv_tab title="Addition Infomation"]
Quisque interdum malesuada nisi non accumsan.
[/jv_tab]
[jv_tab title="Reviews" icon="icon:star-o" ]
Nam in ligula vel mi interdum tincidunt sit amet eget leo.
[/jv_tab]
[/jv_tabs]
Tabs style 1 - Left
Preview Get shortcode
[jv_tabs style="style-1" placement="left" tabs="3" fitwidth="no" active="1"]
[jv_tab title="Desciption"]
Cras ut magna quis metus tristique vulputate.
[/jv_tab]
[jv_tab title="Addition Infomation"]
Quisque interdum malesuada nisi non accumsan.
[/jv_tab]
[jv_tab title="Reviews" icon="icon:star-o" ]
Nam in ligula vel mi interdum tincidunt sit amet eget leo.
[/jv_tab]
[/jv_tabs]
Tabs style 2 - Left
Preview Get shortcode
[jv_tabs style="style-2" placement="left" tabs="3" fitwidth="no" active="1"]
[jv_tab title="Desciption"]
Cras ut magna quis metus tristique vulputate.
[/jv_tab]
[jv_tab title="Addition Infomation"]
Quisque interdum malesuada nisi non accumsan.
[/jv_tab]
[jv_tab title="Reviews" icon="icon:star-o" ]
Nam in ligula vel mi interdum tincidunt sit amet eget leo.
[/jv_tab]
[/jv_tabs]
Tabs style 1 - Right
Preview Get shortcode
[jv_tabs style="style-1" placement="right" tabs="3" fitwidth="no" active="1"]
[jv_tab title="Desciption"]
Cras ut magna quis metus tristique vulputate.
[/jv_tab]
[jv_tab title="Addition Infomation"]
Quisque interdum malesuada nisi non accumsan.
[/jv_tab]
[jv_tab title="Reviews" icon="icon:star-o" ]
Nam in ligula vel mi interdum tincidunt sit amet eget leo.
[/jv_tab]
[/jv_tabs]
Tabs style 2 - Right
Preview Get shortcode
[jv_tabs style="style-2" placement="right" tabs="3" fitwidth="no" active="1"]
[jv_tab title="Desciption"]
Cras ut magna quis metus tristique vulputate.
[/jv_tab]
[jv_tab title="Addition Infomation"]
Quisque interdum malesuada nisi non accumsan.
[/jv_tab]
[jv_tab title="Reviews" icon="icon:star-o" ]
Nam in ligula vel mi interdum tincidunt sit amet eget leo.
[/jv_tab]
[/jv_tabs]
13. Gallery
[jv_gallery uid="1437828934" source="media:images/gallery" carousel="no" number="4" crop="yes" thumbnail_width="400" thumbnail_height="400" show_title="no" arrows="no" pagination="no" autoplay="0" speed="600"]
[jv_image src="images/gallery/1.jpg" title="Gallery - image 1" parent_tag="gallery"]
[jv_image src="images/gallery/2.jpg" title="Gallery - image 2" parent_tag="gallery"]
[jv_image src="images/gallery/3.jpg" title="Gallery - image 3" parent_tag="gallery"]
[jv_image src="images/gallery/4.jpg" title="Gallery - image 4" parent_tag="gallery"]
[jv_image src="images/gallery/5.jpg" title="Gallery - image 5" parent_tag="gallery"]
[jv_image src="images/gallery/6.jpg" title="Gallery - image 6" parent_tag="gallery"]
[jv_image src="images/gallery/7.jpg" title="Gallery - image 7" parent_tag="gallery"]
[jv_image src="images/gallery/8.jpg" title="Gallery - image 8" parent_tag="gallery"]
[jv_image src="images/gallery/9.jpg" title="Gallery - image 9" parent_tag="gallery"]
[/jv_gallery]
- Unique id is generated automatically
- Choose images source. You can use images from Media library or retrieve it from article under category. See here
- Enable/disable carousel slider mode
- Item number (show per row - Grid Mode / visible - Carousel Mode)
- Crop Image
- Set thumbnail width in pixels
- Set thumbnail height in pixels
- Display Image titles
- Show left and right arrows (only Carousel Mode)
- Show pagination (only Carousel Mode)
- Choose interval between slide animations. Set to 0 to disable autoplay (only Carousel Mode)
- Specify animation speed (only Carousel Mode)
- Extra CSS class
Source: Categories
Source: Media
Edit image
Crop Thumbnail Style
Preview Get shortcode
[jv_gallery uid="1437828934-55b3874604da6" source="media:images/gallery" number="4" crop="yes" thumbnail_width="400" thumbnail_height="400"]
[jv_image src="images/gallery/1.jpg" title="Gallery - image 1" parent_tag="gallery"]
[jv_image src="images/gallery/2.jpg" title="Gallery - image 2" parent_tag="gallery"]
[jv_image src="images/gallery/3.jpg" title="Gallery - image 3" parent_tag="gallery"]
[jv_image src="images/gallery/4.jpg" title="Gallery - image 4" parent_tag="gallery"]
[jv_image src="images/gallery/5.jpg" title="Gallery - image 5" parent_tag="gallery"]
[jv_image src="images/gallery/6.jpg" title="Gallery - image 6" parent_tag="gallery"]
[jv_image src="images/gallery/7.jpg" title="Gallery - image 7" parent_tag="gallery"]
[jv_image src="images/gallery/8.jpg" title="Gallery - image 8" parent_tag="gallery"]
[jv_image src="images/gallery/9.jpg" title="Gallery - image 9" parent_tag="gallery"]
[jv_image src="images/gallery/10.jpg" title="Gallery - image 10" parent_tag="gallery"]
[jv_image src="images/gallery/11.jpg" title="Gallery - image 11" parent_tag="gallery"]
[jv_image src="images/gallery/12.jpg" title="Gallery - image 12" parent_tag="gallery"]
[jv_image src="images/gallery/13.jpg" title="Gallery - image 13" parent_tag="gallery"]
[jv_image src="images/gallery/14.jpg" title="Gallery - image 14" parent_tag="gallery"]
[jv_image src="images/gallery/15.jpg" title="Gallery - image 15" parent_tag="gallery"]
[jv_image src="images/gallery/16.jpg" title="Gallery - image 16" parent_tag="gallery"]
[/jv_gallery]
No Crop Thumbnail Style
Preview Get shortcode
[jv_gallery uid="1437828934-55b3874604da6" source="media:images/gallery" number="4"]
[jv_image src="images/gallery/1.jpg" title="Gallery - image 1" parent_tag="gallery"]
[jv_image src="images/gallery/2.jpg" title="Gallery - image 2" parent_tag="gallery"]
[jv_image src="images/gallery/3.jpg" title="Gallery - image 3" parent_tag="gallery"]
[jv_image src="images/gallery/4.jpg" title="Gallery - image 4" parent_tag="gallery"]
[jv_image src="images/gallery/5.jpg" title="Gallery - image 5" parent_tag="gallery"]
[jv_image src="images/gallery/6.jpg" title="Gallery - image 6" parent_tag="gallery"]
[jv_image src="images/gallery/7.jpg" title="Gallery - image 7" parent_tag="gallery"]
[jv_image src="images/gallery/8.jpg" title="Gallery - image 8" parent_tag="gallery"]
[jv_image src="images/gallery/9.jpg" title="Gallery - image 9" parent_tag="gallery"]
[jv_image src="images/gallery/10.jpg" title="Gallery - image 10" parent_tag="gallery"]
[jv_image src="images/gallery/11.jpg" title="Gallery - image 11" parent_tag="gallery"]
[jv_image src="images/gallery/12.jpg" title="Gallery - image 12" parent_tag="gallery"]
[jv_image src="images/gallery/13.jpg" title="Gallery - image 13" parent_tag="gallery"]
[jv_image src="images/gallery/14.jpg" title="Gallery - image 14" parent_tag="gallery"]
[jv_image src="images/gallery/15.jpg" title="Gallery - image 15" parent_tag="gallery"]
[jv_image src="images/gallery/16.jpg" title="Gallery - image 16" parent_tag="gallery"]
[/jv_gallery]
Carousel Slider Style
Preview Get shortcode
[jv_gallery uid="1437828934-55b3874604da6" source="media:images/gallery" number="4" crop="yes" thumbnail_width="400" thumbnail_height="400" carousel="yes"]
[jv_image src="images/gallery/1.jpg" title="Gallery - image 1" parent_tag="gallery"]
[jv_image src="images/gallery/2.jpg" title="Gallery - image 2" parent_tag="gallery"]
[jv_image src="images/gallery/3.jpg" title="Gallery - image 3" parent_tag="gallery"]
[jv_image src="images/gallery/4.jpg" title="Gallery - image 4" parent_tag="gallery"]
[jv_image src="images/gallery/5.jpg" title="Gallery - image 5" parent_tag="gallery"]
[jv_image src="images/gallery/6.jpg" title="Gallery - image 6" parent_tag="gallery"]
[jv_image src="images/gallery/7.jpg" title="Gallery - image 7" parent_tag="gallery"]
[jv_image src="images/gallery/8.jpg" title="Gallery - image 8" parent_tag="gallery"]
[jv_image src="images/gallery/9.jpg" title="Gallery - image 9" parent_tag="gallery"]
[jv_image src="images/gallery/10.jpg" title="Gallery - image 10" parent_tag="gallery"]
[jv_image src="images/gallery/11.jpg" title="Gallery - image 11" parent_tag="gallery"]
[jv_image src="images/gallery/12.jpg" title="Gallery - image 12" parent_tag="gallery"]
[jv_image src="images/gallery/13.jpg" title="Gallery - image 13" parent_tag="gallery"]
[jv_image src="images/gallery/14.jpg" title="Gallery - image 14" parent_tag="gallery"]
[jv_image src="images/gallery/15.jpg" title="Gallery - image 15" parent_tag="gallery"]
[jv_image src="images/gallery/16.jpg" title="Gallery - image 16" parent_tag="gallery"]
[/jv_gallery]
14. Icon Box
[jv_iconbox style="ontop-circle" title="Web development" title_color="#fff" icon="icon:7s-graph1" icon_color="#222" icon_border="#fff" icon_background="#fff" text_color="#cccccc" readmore="Readmore" readmore_link="http://joomlavi.com" readmore_color="#878787"] Aenean imperdiet vehicula elementum. Vestibulum vitae fringilla mauris. Vestibulum eget. quis nostrud exerci. [/jv_iconbox]
- Icon box style: default, ontop, ontop-circle
- Title of box
- The color of title
- Select icon from icon picker. Syntax: icon:icon_name. Support FontAwesome & 7 stroke icon
- The color of icon
- The color of border icon
- The color of background icon
- The color of text in box
- Label for Readmore button in box
- Link for Readmore button in box
- The color of readmore link
- Extra CSS class
Default Style
Preview Get shortcode
[jv_iconbox
style="inleft"
title="Branding"
title_color="#333333"
icon="icon:7s-anchor"
icon_color="#333333"
readmore="Read more"
readmore_link="htttp://joomlavi.com"
readmore_color="#878787"
]
Aenean imperdiet vehicula elementum. Vestibulum vitae fringilla mauris. Vestibulum eget. quis nostrud exerci.
[/jv_iconbox]
Icon Ontop Style
Preview Get shortcode
[jv_iconbox
style="ontop"
title="Branding"
title_color="#333333"
icon="icon:7s-anchor"
icon_color="#d5d5d5"
]
Aenean imperdiet vehicula elementum. Vestibulum vitae fringilla mauris. Vestibulum eget. quis nostrud exerci.
[/jv_iconbox]
Icon Ontop - Circle Style
Preview Get shortcode
[jv_iconbox
style="ontop-circle"
title="Web development"
title_color="#fff"
icon="icon:7s-graph1"
icon_color="#222"
icon_border="#fff"
icon_background="#fff"
text_color="#cccccc"
]
Aenean imperdiet vehicula elementum. Vestibulum vitae fringilla mauris. Vestibulum eget. quis nostrud exerci.
[/jv_iconbox]
15. Clients
[jv_clients
uid="1437"
source="media:images/clients/black"
display="carousel"
item_row="3"
items="5"
items_desktop="4"
items_tablet="3"
items_mobile="2"
single_item="no"
arrows="yes"
pagination="none"
autoplay="5000"
speed="600"
class=""
]
[jv_image src="images/clients/black/client-1.png" title="Client 1" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/black/client-2.png" title="Client 2" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/black/client-3.png" title="Client 3" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/black/client-4.png" title="Client 4" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/black/client-5.png" title="Client 5" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/black/client-6.png" title="Client 6" link="http://joomlavi.com" parent_tag="clients"]
[/jv_clients]
- Unique id is generated automatically
- Choose images source. You can use images from Media library or retrieve it from article under category. See here
- Choose carousel/grid display
- Set item per row (Grid display only)
- How much carousel items is visible
- How much carousel items is visible (max width 1200px)
- How much carousel items is visible (max width 768px)
- How much carousel items is visible (max width 480px)
- Set single item
- Show left and right arrows (only Carousel Mode)
- Show pagination (only Carousel Mode)
- Choose interval between slide animations. Set to 0 to disable autoplay (only Carousel Mode)
- Specify animation speed (only Carousel Mode)
- Extra CSS class
Carousel Display
Preview Get shortcode
[jv_clients
uid="1437057533-55a7c1fd2a2ce"
display="carousel"
source="media:images/clients/black"
items="5"
items_desktop="4"
items_tablet="3"
items_mobile="2"
single_item="no"
arrows="yes"
pagination="none"
autoplay="5000"
speed="600"
]
[jv_image src="images/clients/black/client-1.png" title="Client 1" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/black/client-2.png" title="Client 2" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/black/client-3.png" title="Client 3" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/black/client-4.png" title="Client 4" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/black/client-5.png" title="Client 5" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/black/client-6.png" title="Client 6" link="http://joomlavi.com" parent_tag="clients"]
[/jv_clients]
Grid Display
Preview Get shortcode
[jv_clients
uid="1437057533-55a7c1fd2a2ce"
display="grid"
source="media:images/clients/white"
item_row="3"
]
[jv_image src="images/clients/white/client-1.png" title="Client 1" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/white/client-2.png" title="Client 2" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/white/client-3.png" title="Client 3" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/white/client-4.png" title="Client 4" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/white/client-5.png" title="Client 5" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/white/client-6.png" title="Client 6" link="http://joomlavi.com" parent_tag="clients"]
[/jv_clients]
16. Testimonials
[jv_testimonials user="4" style="testimonial-1" carousel="no" number="two" arrows="yes"
pagination="none"
autoplay="5000"
speed="600"
class=""]
[jv_user name="Alan Bakes" avatar="images/avatar/1.jpg" position="Ceo" company="Joomlavi.Com" link="Joomlavi.Com" rating="5"]
In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo.
[/jv_user]
[jv_user name="Jayson Pary" avatar="images/avatar/2.jpg" company="Joomlavi.Com" link="Joomlavi.Com"]
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/jv_user]
[jv_user name="David Corner" avatar="images/avatar/3.jpg" company="Joomlavi.Com" link="Joomlavi.Com"]
In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo.
[/jv_user]
[jv_user name="Jonathan Graph" avatar="images/avatar/4.jpg" company="Joomlavi.Com" link="Joomlavi.Com"]
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/jv_user]
[/jv_testimonials]
- Unique id is generated automatically
+ Select image from media.
+ Name user
+ Enter position
+ Enter company
+ Enter link
+ Set user rating
+ user CSS clas
- Choose images source. You can use images from Media library or retrieve it from article under category. See here
- Choose testimonials style: testimonial-1, testimonial-2
- Choose carousel/grid display
- Set item per row (Grid display only)
- Show left and right arrows (only Carousel Mode)
- Show pagination (only Carousel Mode)
- Choose interval between slide animations. Set to 0 to disable autoplay (only Carousel Mode)
- Specify animation speed (only Carousel Mode)
- Extra CSS class
Testimonials Style 1
Preview Get shortcode
[jv_testimonials user="4" style="testimonial-1" carousel="no" number="two"]
[jv_user name="Alan Bakes" avatar="images/avatar/1.jpg" company="Joomlavi.Com" link="Joomlavi.Com"]
In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo.
[/jv_user]
[jv_user name="Jayson Pary" avatar="images/avatar/2.jpg" company="Joomlavi.Com" link="Joomlavi.Com"]
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/jv_user]
[jv_user name="David Corner" avatar="images/avatar/3.jpg" company="Joomlavi.Com" link="Joomlavi.Com"]
In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo.
[/jv_user]
[jv_user name="Jonathan Graph" avatar="images/avatar/4.jpg" company="Joomlavi.Com" link="Joomlavi.Com"]
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/jv_user]
[/jv_testimonials]
Testimonials Style 2
Preview Get shortcode
[jv_testimonials user="4" style="testimonial-2" carousel="no" number="two"]
[jv_user name="Alan Bakes" avatar="images/avatar/1.jpg" company="Joomlavi.Com" link="Joomlavi.Com"]
In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo.
[/jv_user]
[jv_user name="Jayson Pary" avatar="images/avatar/2.jpg" company="Joomlavi.Com" link="Joomlavi.Com"]
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/jv_user]
[jv_user name="David Corner" avatar="images/avatar/3.jpg" company="Joomlavi.Com" link="Joomlavi.Com"]
In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo.
[/jv_user]
[jv_user name="Jonathan Graph" avatar="images/avatar/4.jpg" company="Joomlavi.Com" link="Joomlavi.Com"]
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/jv_user]
[/jv_testimonials]
17. Skill bars
[jv_skillbars style="default" striped="no" show_percent="inline"]
[jv_skillbar title="Graphic design" achievement_percent="90" icon="icon:7s-edit"]
[jv_skillbar title="HTML/CSS" achievement_percent="60" icon="icon:7s-display1"]
[jv_skillbar title="Photography" achievement_percent="80" icon="icon:7s-camera"]
[jv_skillbar title="Web design" achievement_percent="95" icon="icon:7s-config"]
[jv_skillbar title="Architecture" achievement_percent="70" icon="icon:7s-culture"]
[/jv_skillbars]
- Choose skill bars style: default, primary, success, danger, warning, info
- Striped effect. Not available in IE9 and below.
- Show/hide percent number
- Enter a number of your skill bar and their data
+ Select image from media.
+ Select icon from icon picker. Syntax: icon:icon_name. Support FontAwesome & 7 stroke icon
+ Enter position
- Extra CSS class
Skill bars
Preview Get shortcode
[jv_skillbars style="default" striped="no" show_percent="inline"]
[jv_skillbar title="Graphic design" achievement_percent="90" icon="icon:7s-edit"]
[jv_skillbar title="HTML/CSS" achievement_percent="60" icon="icon:7s-display1"]
[jv_skillbar title="Photography" achievement_percent="80" icon="icon:7s-camera"]
[jv_skillbar title="Web design" achievement_percent="95" icon="icon:7s-config"]
[jv_skillbar title="Architecture" achievement_percent="70" icon="icon:7s-culture"]
[/jv_skillbars]
Skill bars - Striped effect - Success Color
Preview Get shortcode
[jv_skillbars style="success" striped="yes" show_percent="inline"]
[jv_skillbar title="Graphic design" achievement_percent="90" icon="icon:7s-edit"]
[jv_skillbar title="HTML/CSS" achievement_percent="60" icon="icon:7s-display1"]
[jv_skillbar title="Photography" achievement_percent="80" icon="icon:7s-camera"]
[jv_skillbar title="Web design" achievement_percent="95" icon="icon:7s-config"]
[jv_skillbar title="Architecture" achievement_percent="70" icon="icon:7s-culture"]
[/jv_skillbars]
18. Pie Chart
[jv_piechart]
style="default"
value="75"
title="Branding"
sub_text="Suspendisse efficitur maximus malesuada. Duis sit amet fringilla nisi. Maecenas mattis."
]
- Choose Pie Chart style: default and light
- Set Pie Chart value
- Set Pie Chart title
- Set Pie Chart sub title
Text dark style
Preview Get shortcode
[jv_piechart style="default" value="75" title="Branding" sub_text="Suspendisse efficitur maximus malesuada. Duis sit amet fringilla nisi. Maecenas mattis."]
Text light style
Preview Get shortcode
[jv_piechart style="light" value="75" title="Branding" sub_text="Suspendisse efficitur maximus malesuada. Duis sit amet fringilla nisi. Maecenas mattis."]
19. Counter
[jv_piechart]
style="default"
value="75"
title="Branding"
sub_text="Suspendisse efficitur maximus malesuada. Duis sit amet fringilla nisi. Maecenas mattis."
]
- Choose Pie Chart style: default and light
- Set Pie Chart value
- Set Pie Chart title
- Set Pie Chart sub title
Dark color style
Preview Get shortcode
[jv_counters style="dark" number="4"]
[jv_counter icon="icon:7s-medal" digit="1850" title="satisfied clients"]
[jv_counter icon="icon:7s-graph1" digit="85.50" suffix="%" title="startup growth"]
[jv_counter icon="icon:7s-cash" digit="1850" prefix="$" title="avarage prices"]
[jv_counter icon="icon:7s-users" digit="550" title="happy clients"]
[/jv_counters]
Light color style
Preview Get shortcode
[jv_counters style="light" number="4"]
[jv_counter icon="icon:7s-medal" digit="1850" title="satisfied clients"]
[jv_counter icon="icon:7s-graph1" digit="85.50" suffix="%" title="startup growth"]
[jv_counter icon="icon:7s-cash" digit="1850" prefix="$" title="avarage prices"]
[jv_counter icon="icon:7s-users" digit="550" title="happy clients"]
[/jv_counters]
Dark color style 2
Preview Get shortcode
[jv_counters style="dark2" number="3"]
[jv_counter icon="icon:7s-medal" digit="1850" title="satisfied clients" class="bg-lighter2 pt-130 pb-130"]
[jv_counter icon="icon:7s-cup" digit="990" title="AWARDS WON" class="bg-lighter pt-130 pb-130"]
[jv_counter icon="icon:7s-like2" digit="15850" title="FAVOURITE FANS" class="bg-very-lighter pt-130 pb-130"]
[/jv_counters]
Light color style 2
Preview Get shortcode
[jv_counters style="light2" number="4"]
[jv_counter icon="icon:7s-medal" digit="1850" title="satisfied clients"]
[jv_counter icon="icon:7s-graph1" digit="85.50" suffix="%" title="startup growth"]
[jv_counter icon="icon:7s-cash" digit="1850" prefix="$" title="avarage prices"]
[jv_counter icon="icon:7s-users" digit="550" title="happy clients"]
[/jv_counters]
Dark color style 3
Preview Get shortcode
[jv_counters carousel="yes" style="dark3" number="2" arrows="yes"]
[jv_counter icon="icon:7s-medal" digit="1850" title="satisfied clients"]
[jv_counter icon="icon:7s-graph1" digit="85.50" suffix="%" title="startup growth"]
[jv_counter icon="icon:7s-cash" digit="1850" prefix="$" title="avarage prices"]
[jv_counter icon="icon:7s-users" digit="550" title="happy clients"]
[/jv_counters]
Light color style 3
Preview Get shortcode
[jv_counters carousel="yes" style="light3" number="2" arrows="yes"]
[jv_counter icon="icon:7s-medal" digit="1850" title="satisfied clients"]
[jv_counter icon="icon:7s-graph1" digit="85.50" suffix="%" title="startup growth"]
[jv_counter icon="icon:7s-cash" digit="1850" prefix="$" title="avarage prices"]
[jv_counter icon="icon:7s-users" digit="550" title="happy clients"]
[/jv_counters]
Dark color style 4
Preview Get shortcode
[jv_counters carousel="yes" style="dark4" number="3" arrows="yes"]
[jv_counter icon="icon:7s-users" digit="1955" title="Happy Clients"]
[jv_counter icon="icon:7s-cup" digit="27" title="AWARDS WON"]
[jv_counter icon="icon:7s-coffee" digit="3566" title="Coffee Cups"]
[jv_counter icon="icon:7s-like2" digit="550" title="FAVOURITE FANS"]
[/jv_counters]
Light color style 4
Preview Get shortcode
[jv_counters carousel="yes" style="light4" number="3" arrows="yes"]
[jv_counter icon="icon:7s-users" digit="1955" title="Happy Clients"]
[jv_counter icon="icon:7s-cup" digit="27" title="AWARDS WON"]
[jv_counter icon="icon:7s-coffee" digit="3566" title="Coffee Cups"]
[jv_counter icon="icon:7s-like2" digit="550" title="FAVOURITE FANS"]
[/jv_counters]
20. Price table
[jv_pricetable style="pricetable" pricetable="4" currency="$" duration="Per month" popular="3" purchase_text="Sign up" ]
[jv_pricecol title="Basic Package" sub_title="Entry level solution" price="199.00" image="images/price/1.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="2GB Webspace;1 Domain;PHP 5 Enabled;24h - Support"]
[jv_pricecol title="Advance Package" sub_title="More features" price="299.00" image="images/price/2.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="4GB Webspace;2 Domain;PHP 5 Enabled;24h - Support"]
[jv_pricecol title="Smart package" sub_title="Perfect business Solution" price="399.00" image="images/price/3.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="8GB Webspace;4 Domain;PHP 5 Enabled;24h - Support"]
[jv_pricecol title="Premium package" sub_title="All You need" price="499.00" image="images/price/4.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="16GB Webspace;8 Domain;PHP 5 Enabled;24h - Support"]
[/jv_pricetable]
- Choose Price table style: default and pricetable-2
- Set currentcy in used
- Set duration
- Set popular number
- Set text for purchase button
- Set Pie Chart sub title
+ Table title
+ Table sub title
+ Select icon from media picker.
+ Price of table
+ Link of purchase button
+ enter data fields, separated by commas
Style 1
Preview Get shortcode
[jv_pricetable style="pricetable" pricetable="4" currency="$" duration="Per month" popular="3" purchase_text="Sign up" ]
[jv_pricecol title="Basic Package" sub_title="Entry level solution" price="199.00" image="images/price/1.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="2GB Webspace;1 Domain;PHP 5 Enabled;24h - Support"]
[jv_pricecol title="Advance Package" sub_title="More features" price="299.00" image="images/price/2.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="4GB Webspace;2 Domain;PHP 5 Enabled;24h - Support"]
[jv_pricecol title="Smart package" sub_title="Perfect business Solution" price="399.00" image="images/price/3.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="8GB Webspace;4 Domain;PHP 5 Enabled;24h - Support"]
[jv_pricecol title="Premium package" sub_title="All You need" price="499.00" image="images/price/4.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="16GB Webspace;8 Domain;PHP 5 Enabled;24h - Support"]
[/jv_pricetable]
Style 2
Preview Get shortcode
[jv_pricetable style="pricetable-2" pricetable="3" currency="$" duration="Per month" popular="2" purchase_text="Sign up" ]
[jv_pricecol title="Basic Package" sub_title="Entry level solution" price="199.00" image="images/price/1.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="2GB Webspace;1 Domain;PHP 5 Enabled;24h - Support"]
[jv_pricecol title="Advance Package" sub_title="More features" price="299.00" image="images/price/2.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="4GB Webspace;2 Domain;PHP 5 Enabled;24h - Support"]
[jv_pricecol title="Smart package" sub_title="Perfect business Solution" price="399.00" image="images/price/3.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="8GB Webspace;4 Domain;PHP 5 Enabled;24h - Support"]
[/jv_pricetable]
21. Feature Box
[jv_features style="feature-1" feature="4"]
[jv_feature title="FULLY CUSTOMIZIBLE" icon="icon:7s-keypad" image="images/features/1.jpg" ]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ex consectetur, pharetra lorem sit amet, posuere tellus. Aenean molestie orci a est imperdiet consequat. Nulla et enim eget nunc blandit fermentum.
[/jv_feature]
[jv_feature title="RETINA READY" icon="icon:7s-monitor" image="images/features/2.jpg" ]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/jv_feature]
[jv_feature title="SEO OPTIMIZED" icon="icon:7s-network" image="images/features/3.jpg" ]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ex consectetur
[/jv_feature]
[jv_feature title="DEMO CONTENT" icon="icon:7s-phone" image="images/features/4.jpg" ]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ex consectetur
[/jv_feature]
[/jv_features]
- Choose Feature Box style: feature-1 and feature-2
- Enter a number of your features and their data
+ Table title
+ Select icon from icon picker. Syntax: icon:icon_name. Support FontAwesome & 7 stroke icon
+ Select icon from media picker.
- Extra CSS class
Style 1
Preview Get shortcode
[jv_features style="feature-1" feature="4"]
[jv_feature title="FULLY CUSTOMIZIBLE" icon="icon:7s-keypad" image="images/features/1.jpg" ]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ex consectetur, pharetra lorem sit amet, posuere tellus. Aenean molestie orci a est imperdiet consequat. Nulla et enim eget nunc blandit fermentum.
[/jv_feature]
[jv_feature title="RETINA READY" icon="icon:7s-monitor" image="images/features/2.jpg" ]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/jv_feature]
[jv_feature title="SEO OPTIMIZED" icon="icon:7s-network" image="images/features/3.jpg" ]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ex consectetur
[/jv_feature]
[jv_feature title="DEMO CONTENT" icon="icon:7s-phone" image="images/features/4.jpg" ]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ex consectetur
[/jv_feature]
[/jv_features]
Style 2
Preview Get shortcode
[jv_features style="feature-2" feature="6"]
[jv_feature title="Branding" icon="icon:7s-anchor" image="images/features/1.jpg" ]
Nullam feugiat tincidunt nunc nec interdum. Praesent ac fermentum enim.
[/jv_feature]
[jv_feature title="Development" icon="icon:7s-bicycle" image="images/features/2.jpg" readmore_link="http://joomlavi.com"]
Nullam feugiat tincidunt nunc nec interdum. Praesent ac fermentum enim.
[/jv_feature]
[jv_feature title="Designer" icon="icon:7s-loop" image="images/features/3.jpg" readmore_link="http://joomlavi.com"]
Nullam feugiat tincidunt nunc nec interdum. Praesent ac fermentum enim.
[/jv_feature]
[jv_feature title="Support" icon="icon:7s-micro" image="images/features/4.jpg" readmore_link="http://joomlavi.com"]
Nullam feugiat tincidunt nunc nec interdum. Praesent ac fermentum enim.
[/jv_feature]
[jv_feature title="Photography" icon="icon:7s-photo-gallery" image="images/features/5.jpg" readmore_link="http://joomlavi.com"]
Nullam feugiat tincidunt nunc nec interdum. Praesent ac fermentum enim.
[/jv_feature]
[jv_feature title="Marketing" icon="icon:7s-note2" image="images/features/6.jpg" readmore_link="http://joomlavi.com"]
Nullam feugiat tincidunt nunc nec interdum. Praesent ac fermentum enim.
[/jv_feature]
[/jv_features]
22. Teams
[jv_teams style="style-3" members="4" carousel="no" number="4" arrows="no" pagination="no" autoplay="5000" speed="600" class=""]
[jv_member name="Member name 1" image="images/avatar/1.jpg" position="CEO" facebook="#" google="#" twitter="#"]
[jv_member name="Member name 2" image="images/avatar/2.jpg" position="Designer" website="#" facebook="#" google="#"]
[jv_member name="Member name 3" image="images/avatar/3.jpg" position="Coder" website="#" facebook="#" google="#"]
[jv_member name="Member name 4" image="images/avatar/4.jpg" position="Maketer" website="#" linkedin="#" tumblr="#"]
[/jv_teams]
- Choose Feature Box style: feature-1 and feature-2
- Enter a number of your members and their data
+ Member name
+ Select icon from media picker.
+ Member position
+ Social link
- Choose carousel/grid display
- Item number show (per row - Grid display / visible - Carousel display)
- Show left and right arrows (only Carousel Mode)
- Show pagination (only Carousel Mode)
- Choose interval between slide animations. Set to 0 to disable autoplay (only Carousel Mode)
- Specify animation speed (only Carousel Mode)
- Extra CSS class
Style 1
Preview Get shortcode
[jv_teams style="style-1" members="4" number="4"]
[jv_member name="LANA P." image="images/avatar/5.jpg" position="CEO"]
[jv_member name="JOHN DOE" image="images/avatar/6.jpg" position="Designer"]
[jv_member name="JORDAN CREPT" image="images/avatar/7.jpg" position="Coder"]
[jv_member name="CHARLIE K." image="images/avatar/8.jpg" position="Maketer"]
[/jv_teams]
Style 2
Preview Get shortcode
[jv_teams style="style-2" members="4" carousel="no" number="4" arrows="no" pagination="no" autoplay="5000" speed="600"]
[jv_member name="LANA P." image="images/avatar/9.jpg" position="CEO"]
[jv_member name="JOHN DOE" image="images/avatar/10.jpg" position="Designer"]
[jv_member name="JORDAN CREPT" image="images/avatar/11.jpg" position="Coder"]
[jv_member name="CHARLIE K." image="images/avatar/12.jpg" position="Maketer"]
[/jv_teams]
Style 3
Preview Get shortcode
[jv_teams style="style-3" members="4" carousel="no" number="4" arrows="no" pagination="no" autoplay="5000" speed="600"]
[jv_member name="Member name 1" image="images/avatar/1.jpg" position="CEO" facebook="#" google="#" twitter="#"]
[jv_member name="Member name 2" image="images/avatar/2.jpg" position="Designer" website="#" facebook="#" google="#"]
[jv_member name="Member name 3" image="images/avatar/3.jpg" position="Coder" website="#" facebook="#" google="#"]
[jv_member name="Member name 4" image="images/avatar/4.jpg" position="Maketer" website="#" linkedin="#" tumblr="#"]
[/jv_teams]
23. Google map
[jv_googlemap width="0" height="400" address="New York" coordinate="40.7127840,-74.0059410" infowindow="" border="1px solid #cccccc" ="13" zoom_control="yes" pan_control="yes" streetview_control="yes" maptype_control="yes" scale_control="yes" overview_control="yes"][/jv_googlemap]
- Set width in pixels. Leave it 0 for responsive mode
- Set height in pixels
- Set your marker adress. It is also map center
- Set your marker coordinate. It is also map center. If it isn't empty, it will be prioty.
- Info Window
- Set border style
- Set zoom value when the map is initialized
- Show Zoom Control
- Show Pan Control
- Show Street View Control
- Show Map Type Control
- Show Scale Control
- Show Overview Control
- Extra CSS class
24. Youtube Video
[jv_youtube url="https://www.youtube.com/watch?v=BLklI3nDAMg" width="600" height="400" responsive="yes" autoplay="no" class=""][/jv_youtube]
- Enter your youtube video's URL
- Set video's width in pixels
- Set video's height in pixels
- Allow the video to be responsive
- Autoplay video
- Extra CSS class
Components
1. JV Portfolio
JV Portfolio extension is a free Joomla! 3.x component designed to create image portfolio functionality in to your CMS website. Allows designers, artists, photographers to create, manage and publish a very modern and outstanding filterable portfolio. Present your best work to customers and new clients in an attractive, professional and responsive way. It’s very easy and fast to create stunning portfolios and integrate them into your Joomla! site. The Filterable Portfolio - when a particular tag is selected, the list of projects is instantly regenerated with a new list of projects from the selected tag.
1.1 Feature
- Package contains component and module- It can be downloaded and use for free, also in commercial projects
- Simple-to-use solution, and it requires no coding knowledge
- Layout Settings (Default | Gallery with or without space between images)
- Thumbnail Styles to choose from: Square, Rectangular or Masonry
- You can add details to each item, such as: screenshots (thumbnail & full image), a title, alias, description, URL, and select status, language and access level
- Based on Tags system
- Images and Photos support (JPG,PNG, GIF)
- Columns to show : 1, 2, 3, 4 or 6
- You can set number of items to show per page
- You can upload your images
- Filtered items using animation
- Lightbox effect
- CSS3 Animation effect on thumbnails
- Multilingual support
- Search Engine Friendly URLs
- Responsive layout, which means your portfolio will look great on any device Modern look & feel
1.2 Configuration
In Joomla Administration, go toLet's take a look at here:
a. JV Portfolio Tab
- Choosing folder default Image- Choosing style default for portfolio detail page. See here
b. Button Social Tab
- Please enter html code to gain social button. As default, we support AddThis See here
c. Extra Group
This part will help you to create the optional data field.
For example: Let see the set up below: - Group Name Extra- The data field in group.
- Support Clone & Remove Extra group
1.3 Add New/Edit
In Joomla Administration, go toLet's take a look at here:
Once you're on field portfolio, please click button "New" to create new Portfolio. Or click Portfolio name to edit:
Now we will have the field to enter:
- Id is generated automatically- Portfolio Name
- Portfolio Categories
- Detailed description Portfolio
- Link to Portfolio or any links which you want to insert.
- Portfolio tags
- Introduce Video
- The displaying way the detail content of JV Portfolio:
Default, Grid, Slider, Wide
- is generated automatically
- With actions:
Add, Check all, Unchecked, Remove checked. See here and See here
- Are those field which you've created 1.2 Configuration
Do not forget to save what you have done :)
1.4 Layout Settings
Create layout displaying list of those portfolio.
Firstly, please create new menu item.
At please click Select. Then click on JV Porfolio > Items. See here
Portfolio Tab:
- Choosing layout overider- Enable/disable caption effect
- Set caption delay (millisecond)
- Enable/disable caption inverse
- Grid column: 1, 2, 3, 4, 6. If you want to display 5 column, please using class
pfo-five fill inPage Class
- The number of displaying item on every page.
- Enable/disable filter
- Enable/disable sort by:
Name, Date, Liked- Displaying some items which its tag are choosen. It will be effect when filter is activated.
- Please choose the way to download item. Paginate, Scroll load or Button load
- Choosing the display size of thumbnail
- Show/hide title item
- Show/hide tags item
- Show/hide creation date
- Show/hide vote
- Choosing effect loading item. Please refer here
- Please choose the default or animate.css
Layout device:
At that time, this version don't support this function. We will update in the newest version.
Page Display:
Here we use the value of to builg those style layout
Using class pfo-wide to display layout at the maximum width
Using those class: pfo-caption, pfo-smooth, pfo-lateral, pfo-border, pfo-with-title, pfo-dark
2. JV Slideshow
The JV Slideshow is an amazing revolution slider for joomla. The slider has been developed by themepunch and we would like to thank them in advance before talking about the slider features. We have developed a friendly backend that lets you manage your slider like no other extension yet made for joomla. You can design your slider with no css or jquery needed an come out with amazing effect.
2.1 Feature
- Image and Thumbs fully re-sizable- Using CSS Animation with FallBack to jQuery
- Unlimited Caption Layers
- Unlimited Slides
- iPhone & Android Swipe Touch enabled
- jQuery Conflict free plugin
- Customizable 100% via Plugin Backend
- Easy installation in your Website
- Special Easing
- Vimeo & Youtube Supported
- Duplicate, Slider, slide, captions Function
- Drag and Drop Captions in the Editor
- Fullwidth, Responsive and Normal Modes
- Countless Art of Transitions
- Optional Shadows included
2.2 Installation
2.3 Import
This function will help you to set up the exist sample more quickly.
We've attached the sample file of JV Capitol, you just need to download it and import -> The slideshow will be start working. Or you can download free slider exchange. here. Please choose v4.x because at that time we don't update version v5.x
Slideshow 1 Slideshow 2 Slideshow 3 Slideshow 4 Slideshow 5 Slideshow About2.4 Export
It will help you to save backup version.
2.5 Display - use module
Using module to display slideshow
2.6 Display - use shortcode
Please use shortcode to display slideshow via text or module Custom HTML
3. K2
First download K2 component from http://getk2.org/ and install it through .
K2 Documentation see here. K2 Support Forum see here
Settings - Backend
Frontend
4. Virtuemart
First download Virtuemart component from http://virtuemart.net/ and install it through . Make sure you first install the core than the AIO.
Download file virtuemart.cfg, file which has the proper settings (at least like in my demo). Copy this file to administrator/components/com_virtuemart/ folder overwriting the old one (you may want to backup the old one first). If you want to simply have your own configuration, make sure you will take a look at the and make sure you will uncheck loading the VM Jquery, see here . This will prevent conflicts.
If you're new to VM, you can go to and here you can Reset all tables and install sample data.
At this point, Capitol already has VM layout overrides which will take over the default VM styles in templates/jv-capitol/html/com_virtuemart/.
Virtuemart Documentation see here. Virtuemart Support Forum see here
Settings - Backend
Frontend
Extensions
Below we will introduce and instruct to set up some of modules which are used in template. Some of module Joomla, K2, Virtuemart you can search in the author's page. Or watching the setting at file quickstart.1. Modules
We support the reference table for you to search the module position which JV Capitol use.
Module - Reference Table Module Position
1.2. JV Ajax Shop Search
Search display for VirtueMart
Please use the attached filepkg_jvajax_shop_search-1.0.3.zip trong file download on Themeforest and install it through .
Configuration
- Enable/disable CSS Bootstrap 3, warning: You must disable because Capitol has used CSS Bootstrap 3- Use a different layout from the supplied module or overrides in the templates.
- A suffix to be applied to the CSS class of the module. This allows for individual module styling.
- Choose Virtuemart Or Hikashop. Capitol support Virtuemart only
- Menu item result display. Should defaults
- The number of columns which the product appear on the list.
- The number of goods which the product appear on the list.
- Display method the searching result. There are 2 options: Normally - this is the style module or a popup
- The size of Popup which is displayed.s
- Enable/disable Auto detect category
- Show/Hide name filter
- Show/Hide price filter
- Price Style Display: Input Style or Slider Style
- Value Price Slider Min
- Value Price Slider Max
- Show/Hide product title
- Show/Hide product price
- Show/Hide product description
- Description word limit
- Show/Hide product image
- Show/Hide Add To Cart Button
- Set Image Width (px)
- Set Image Height (px)
- Choose image align:
Center, Left, Right- Choose image position:
Before Title, After Title- Choose pagination position:
Top, Bottom and Top and Bottom
1.3. JV Contact
JV Contact is a free extension designed by Joomlavi. Please using this attached filemod_jvcontact_v3.1.5_j3x.zip in file download on themeforest and install it through .
Configuration
a. Module Tab
- Add fotter text ( in HTML )
- Add text show message
- Add text in submit button
- Add More info text
- Add Mail subject text
- Select whether to show checkbox to send a copy email to sender
b. Custom Template Tab
Default and Custom, Capitol also provides 2 extra options: Those are contact-1, contact-2, contact-2- Inpput Custom HTML code
- The component which you enter in "Custome HTML"
- Add custom css
Capitol contact layout:
c. Recipients Tab
d. Form & fields Tab
- Show/Hide title in field
- Select fields from a dropdown list to add; or you can select default with 4 fields: name, email, subject, text
e. Social Tab
- Show/Hide Facebook Button Share
- Show/Hide Tweeter Button Share
- Show/Hide Google+ Button Share
- Show/Hide LikedIn Button Share
- Show/Hide More Button
e. Captcha Tab
In this tab, you can config parameters for Captcha, to get Captcha you to visit https://www.google.com/recaptcha/admin#whyrecaptcha to get and
- Insert public key after signing up and creating reCaptcha
- Insert private key after signing up and creating reCaptcha
- Choose theme for reCaptcha from dropdown menus
- Enter your own text for "instructions visual"
- Enter your own text for "instructions audio"
- Enter your own text for "play again"
- Enter your own text for "cant here this"
- Enter your own text for visual challenge
- Enter your own text for audio challenge
- Enter your own text for instructions visual
- Enter your own text for "help"
- Enter your own text for "incorrect try again"
e. Google Map Tab
This tab allow you to show and config parameters for google map
To be able to us google map in contact form, you need to visit https://code.google.com/apis/console/ to get API key to
1.4. JV Custom
JV Custom is a free extension designed by Joomlavi. Please using this attached file mod_jvcustom_v1.0.2.zip in file download on themeforest and install it through .
Configuration
a. Module Tab
None, Center, Left, Right- Module background. Select form media picker
- Set background color CSS
- Background position css, value:
left top, left center, left bottom, right top, right center, right bottom, center top, center, center bottom- Set background attachment CSS:
None, scroll, fixed, local- Set background repeat CSS:
None, repeat, repeat-x, repeat-y, no-repeat- Background size css, value:
auto or w% h% or wpx hpx or cover or contain or initial or inherit - Enable/disable parallax scrolling. The background images translate slower than the content in the foreground
- Translational speed of the background images
- Choose parent element level to set background
- Create a overlay class stand between the background and the content
- The transparency of overlay class
- Content color CSS:
light, dark- Skewed background with CSS. See here
- Set module Full Screen
- Enable/disable Prepare Content. Optionally prepare the content with the Joomla Content Plug-ins.
- Input HTMl content
b. Video Blackground Tab
1.5. JV Insgram
JV Custom is a free extension designed by Joomlavi. Please use this attached file mod_jvinsgram_v1.5.zip in file download on themeforest and install it through .
Configuration
a. Insgram Tab
Go to http://instagram.com/developer/ and create a new account.
- Sign in using your account.
- Click on "Manage Clients" menu on the top of the site.v
- Click on "Register a New Client" and complete the form.
+ Application Name : Choose an appropriate name for your application, for example My Instagram Gallery.
+ Description : Write a few words that describe your application, for example "Sharing Instagram Photos".
+ Website : The URL of your website, for example http://www.mywebsite.com
+ Redirect URL : the root URL of your website, for example http://www.mywebsite.com
After registering you will get Client information, for example:
- Sign in using your account.
- Click on "Connect Instagram" link and click on "Authorize" button on popup window.
- The popup window will be redirected to your website automatically. Please copy access_token in url of popup window and paste it into "Access token" textbox.
b. Display Feeds Tab
- Choose Source
- Set Columns display:
1, 2, 3, 4, 6- Set description feeds
c. Item Tab
1.7. K2 Content
Module is provided free from K2. Here we introduce the layout which Jv Capitol overrides which will take over the default.
Capitol provide 4 additional sub-templates: Latest, Latest-2, NewsUpdate, Recent. You can see the option sub-temple below:
1.10. Module Scroll Up
Module Scroll Up v1.0.0 is the simple module to show button "Scroll To Top". And it also works with Capitol Template.
Please use this attached filemod_scrollup_v1.0.0.zip In file download on themeforest and install it through .
1.11. Search
The same with Login Module, beside LayoutDefault. Capitol provides 1 additional alternative Layout: modal
1.12. VirtueMart Shopping Cart - Joomlavi
Module VirtueMart Shopping Cart - Joomlavi is developed based on Module VirtueMart Shopping Cart of Virtuemart. It will be provided additionally displayed image. Ajax Data processomg, Show module with canvas style. Delete product in cart quickly and virtually .
Please use this the same with Module VirtueMart Shopping Cart
1.13. JV Portfolio
Module is installed together with JV Portfolio Component.
Configuration
- Using layout of this menu to display the content of portfolio detail
- Enable/disable caption effect
- Set caption delay (millisecond)
- Enable/disable caption inverse
- Grid column: 1, 2, 3, 4, 6. If you want to display 5 column, please use class
pfo-five please fill inClass suffix
- The number of items which displayed on every page.
- Enable/disable filter
- Enable/disable sort by:
Name, Date, Liked- Display those item which tag is choosen. It is just activated when you activate filter.
- Please choose the way to download Item. Paginate, Scroll load or Button load
- Choosing the size to display thumbnail
- Show/hide title item
- Show/hide tags item
- Show/hide creation date
- Show/hide vote
- Choosign the loading item effect. Please refer to this linkhere
- You should set either default or animate.css
SOURCE & CREDITS
1. Fonts used
Use those font come fromGoogle Fonts
- Montserrat
- Raleway
2. Icons used
- Font Awesome
- Stroke 7 Icon Font
3. Graphics used
Many thanks for these great images to:
- Picjumbo
- Shutterstock
- Pixeden
- Subtle patterns
4. Scripts used
- Bootstrap 3- Headroom
- Modernizr
- Shuffle
- UIKit
- Magnific Popup
- OWL Carousel v1.3.2
- Images Loaded
- One Page Nav
- Slider Revolution Responsive jQuery Plugin
5. Joomla Extensions
- Virtuemart - Ecommerce component- K2 Blog
- Simple Image Gallery
- AllVideos
- And Extensions by Joomlavi