JUX Graphsign

Created: 08/01/2014

Lastest update: 08/01/2014

By: Joomlaux

Need Support

On Graphsign template, we have used SP Page Builder to create pages (Home page). SP Page Builder is a full responsive component(Joomla 3.x only) that allows you to easily create Joomla pages, add them into menu and display with useful and cool effects inside. Whether you’re a beginner, web designer or developer building commercial sites for clients or a business owner managing and maintaining your own website, SP builder’s flexibility and functionality means one thing: web content design made easy. It can be used for constructing unique-looking pages. Take full control over your Joomla 3.x site with our backend page builder extension. You can go to this LINK learn more about SP Page Builder.

This picture describes the elements of Home page:

About Module

Use this module to build About Us on homagepage.

Module name: About

Module type: Custom HTML


Custom HTML

			
			<div class="art-slider-about-us gr-wrap">

			<div id="art-slider-about-us" class="gr-caroufredsel">

			<ul class="gr-slider-wrapper">

			<li class="gr-slider-item slider-our-process">

			<div class="slider-img"> </div>

			<div class="bg-overlay"> </div>

			<div class="slider-caption slider-caption-2">

			<div class="container">

			<div class="slider-caption-title">

			<div class="gr-title-style-2 gr-table align-middle">

			<div class="gr-table-cell main"><span class="gr-icon-left-text-style-1">our process</span></div>

			<div class="gr-table-cell sub">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</div>

			</div>

			</div>

			<div class="slider-caption-content gr-block-style-3">

			<ul>

			<li class="item item-1 bg">

			<div class="text">crawl</div>

			<div class="circle"> </div>

			</li>

			<li class="item item-2 bg">

			<div class="text">ideal</div>

			<div class="circle"> </div>

			</li>

			<li class="item item-3 bg">

			<div class="text">concert</div>

			<div class="circle"> </div>

			</li>

			<li class="item item-4 bg">

			<div class="text">design</div>

			<div class="circle"> </div>

			</li>

			<li class="gr-slider-item slider-about-us">

			<div class="slider-img"> </div>

			<div class="bg-overlay"> </div>

			<div class="slider-caption slider-caption-1">

			<div class="container">

			<div class="slider-caption-title">

			<div class="gr-title-style-2 gr-table align-middle">

			<div class="gr-table-cell main"><span class="gr-icon-left-text-style-1">About us</span></div>

			<div class="gr-table-cell sub">Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan</div>

			</div>

			</div>

			<div class="slider-caption-content gr-block-style-2">

			<div class="gr-table align-top">

			<div class="gr-table-cell left">

			<div class="content-title">We are creative</div>

			<div class="content-sub-title gr-icon-bottom-text-style-1">Graphsign design</div>

			<div class="content">

			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat</p>

			</div>

			<div class="content-button"><a class="gr-btn gr-btn-style-4" href="#">read more</a></div>

			</div>

			<div class="gr-table-cell right text-right"> </div>

			</div>

			</div>

			<!-- .gr-block-style-2--></div>

			</div>

			</li>

			<li class="gr-slider-item slider-experties-skills">

			<div class="slider-img"> </div>

			<div class="bg-overlay"> </div>

			<div class="bg-experties-skills"> </div>

			<div class="slider-caption slider-caption-3">

			<div class="container">

			<div class="slider-caption-title">

			<div class="gr-title-style-2 gr-table align-middle">

			<div class="gr-table-cell main"><span class="gr-icon-left-text-style-1">experties skills</span></div>

			<div class="gr-table-cell sub">Consectetuer adipiscing elit, sed diam nonummy nibh euismod</div>

			</div>

			</div>

			<div class="slider-caption-content gr-block-style-4">

			<div class="row">

			<div class="item col-xs-12 col-md-4">

			<div class="content-progress-circle gr-progress-circle-style-2">

			<div class="gr-progress-circle" data-goal="70" data-barcolor="#009cff" data-trackcolor="rgba(255, 255, 255, 0.05)" data-fillcolor="rgba(0, 0, 0, 0.0)" data-barsize="2" data-easing="ease" data-speed="40">

			<div class="gr-progress-circle-number">0%</div>

			<div class="circle-inner bg-copy" style="border-color: #009cff;"> </div>

			<div class="gr-progress-circle-label gr-overflow-ellipsis">Photoshop</div>

			<div class="gr-progress-circle-svg"> </div>

			</div>

			</div>

			<div class="content">

			<p>Praesent turpis mauris, aliquet id dolor<br />Gravida adipiscing lectus ut rutrum<br />Aenean at posuere risus.</p>

			</div>

			</div>

			<div class="item col-xs-12 col-md-4">

			<div class="content-progress-circle gr-progress-circle-style-2">

			<div class="gr-progress-circle" data-goal="50" data-barcolor="#02cdb3" data-trackcolor="rgba(255, 255, 255, 0.05)" data-fillcolor="rgba(0, 0, 0, 0.0)" data-barsize="2" data-easing="ease" data-speed="40">

			<div class="gr-progress-circle-number">0%</div>

			<div class="circle-inner bg-copy" style="border-color: #02cdb3;"> </div>

			<div class="gr-progress-circle-label gr-overflow-ellipsis">Corel</div>

			<div class="gr-progress-circle-svg"> </div>

			</div>

			</div>

			<div class="content">

			<p>Praesent turpis mauris, aliquet id dolor<br />Gravida adipiscing lectus ut rutrum<br />Aenean at posuere risus.</p>

			</div>

			</div>

			<div class="item col-xs-12 col-md-4">

			<div class="content-progress-circle gr-progress-circle-style-2">

			<div class="gr-progress-circle" data-goal="85" data-barcolor="#ff6600" data-trackcolor="rgba(255, 255, 255, 0.05)" data-fillcolor="rgba(0, 0, 0, 0.0)" data-barsize="2" data-easing="ease" data-speed="40">

			<div class="gr-progress-circle-number">0%</div>

			<div class="circle-inner bg-copy" style="border-color: #ff6600;"> </div>

			<div class="gr-progress-circle-label gr-overflow-ellipsis">Illustrator</div>

			<div class="gr-progress-circle-svg"> </div>

			</div>

			</div>

			<div class="content">

			<p>Praesent turpis mauris, aliquet id dolor<br />Gravida adipiscing lectus ut rutrum<br />Aenean at posuere risus.</p>

			</div>

			</div>

			</div>

			</div>

			<!-- .gr-block-style-4--></div>

			</div>

			</li>

			</ul>

			</div>

			<!-- .gr-block-style-3--></div>

			</div>

			</li>

			</ul>

			</div>

			</div>
	

To have this module, navigate to Extensions > Modules > News > Select Custom HTML module.

Backend Settings

Counter Module

Use this module to have counter on Home page.

Module name: Counter

Module type: Custom HTML


Custom HTML

	<div class="jux-counter animated container">

	<div class="two-half-circles-wrapper">

	<div class="two-half-circles"> </div>

	 </div>

	</div>​

To have this module, navigate to Extensions > Modules > News > Select Custom HTML module.

Backend Settings

Testimonial image

Use this module to have counter on Home page.

Module name: Testimonial image

Module type: Custom HTML


Custom HTML

<div class="image-testimonial">

<div class="background-mobile">

<div class="background-mobile-inner"></div>

</div>

<img class="img-test" src="templates/jux_graphsign/images/jux_graphsign/mobile-testimonial.png" alt="img_test" /></div>

To have this module, navigate to Extensions > Modules > News > Select Custom HTML module.

Backend Settings

JUX Portfolio

Use this module to show portfolio on Home page.

Module name: JUX Portfolio

Module type: JUX Portfolio


To have this module, navigate to Extensions > Modules > News > Select JUX Portfolio module.

Backend Settings
Display Options
Hover Options

Unite Revolution Slider 2

Use this module to show Revolution Slider on Home page.

Please make sure you have created your Revolution Sliders on your website. If not, navigate to Components > Unite Revolution Slider2 > Create New Slider.

In addition, going to this Documentation to see the guide of Revolution Slider and go to this Video Tutorials to get video tutorials of this component.

Module name:Unite Revolution Slider 2

Module type: Unite Revolution Slider 2


To have this module, navigate to Extensions > Modules > News > Select Unite Revolution Slider2 module.

General Settings

Back to top

Use this module to make "back top to" button on footer of Graphsign.

Module name: Back to top

Module type: Custom HTML


Custom HTML

<div id="back-to-top" class="back-to-top">

<div class="icon fa fa-angle-double-up"> </div>

<div class="text">back to top</div>

</div>

To have this module, navigate to Extensions > Modules > News > Select Custom HTML module.

Backend Settings

Get-social

Use this module to make "social" button on footer of Graphsign.

Module name: Get-social

Module type: Custom HTML


Custom HTML

<div class="get-social">Get social</div>

To have this module, navigate to Extensions > Modules > News > Select Custom HTML module.

Backend Settings

Helix3 Preset Option

Use this module to show layout style on Homepage which will help you customizer to select layout style directly.

Module name:OHelix3 Preset Option

Module type: Helix3 Preset Option

Module position: menu


To have this module, navigate to Extensions > Modules > News > Select Helix3 Preset Option module.

Backend Settings

Offcanvas

Use this module to show off-cavas when viewing Graphsign on the small devices.

Module name:Offcanvas

Module type: Menu

Module position: offcanvas


To have this module, navigate to Extensions > Modules > News > Select Menu module.

Backend Settings

Most view

Use this module to show the most view of articles on the main sidebar of blog page.

Module name:Most view

Module type: Articles - Most Read

Module position: right

Module Class Suffix: most-view


To have this module, navigate to Extensions > Modules > News > Select Articles - Most Read module.

Backend Settings
Module Class Suffix

Recent Posts

Use this module to show the recent posts on the main sidebar of blog page.

Module name:Recent Posts

Module type: Articles - Latest

Module position: recent-posts

Module Class Suffix: recent-posts


To have this module, navigate to Extensions > Modules > News > Select Articles - Latest module.

Backend Settings
Module Class Suffix

Tags Cloud

Use this module to display the post tags on the main sidebar of blog page.

Module name:Tags Cloud

Module type: Tags - Popular

Module position: right

Module Class Suffix: tags-cloud


To have this module, navigate to Extensions > Modules > News > Select Tags - Popular module.

Backend Settings
Module Class Suffix

Category

Use this module to display categories on the main sidebar of blog page.

Module name:Category

Module type: Articles - Categories

Module position: right

Module Class Suffix: category


To have this module, navigate to Extensions > Modules > News > Select Articles - Categories module.

Backend Settings
Module Class Suffix