Graphsign - Joomla Onepage Template is a template designed with clean and modern style. The template comes 2 styles: one is suited for graphic design firm, creative studio or portfolio, and another is matched with website of organization, business, agency, corporate, etc.
Helix 3 is a user-friendly, modern, highly customizable and easy to integrate solution to build your next joomla 3+ website based on your idea. Perfect to use as is or as a blank, genesis, start template development. You can refer more about Helix framework, please visit here
Kick-start a new Joomla Site: if you are planning to start fresh with a new Joomla Site, then use our Quickstart package to quickly clone the demo site, then replace the demo content with yours. Check the “How to install quickstart package documentation” for the in depth how to guide for Quickstart installation.
Install on your existing live site: if you are planning to use this template for your existing Joomla Site, then you should follow the “How to Make your site look like demo site” guide first to dig in the steps involved.
Here is the extension which you need to install on your Joomla website:
When purchasing successfully our template from Joomla UX, you will have ourtemplate package. The template package contains:
This section will show you the confguration general of Graphsign Template. After installing this template, you can go to Extensions > Templates > Open jux_graphsign - Default to configure some basic options.
To see the configuration of Basic tab, please go to Extensions > Templates > Open Open jux_graphsign - Default > Basic
Detail Option:
You can select Presets style for your site this here, also change color for background, text and Major that you want
Detail Option:
It allows you to choose menu from available in your system. You can set type as Mega menu, Off Canvas, Dropdown.
Right now using Google Font is much easier and we also want to introduce our "Update Font List" feature. It allows you to refresh the list of available Google fonts. So if there are any new one, this button allows you to quickly update fonts with just one click, and they will be automatically added in to Helix 3 Framework which allows you to use them faster.
Typography settings allows you to choose font and its settings for popular HTML tags: body, h1, h2, h3, h4, h5, h6 and navigation. Subsets (like Latin Extended, Vietnamese is also no problem - just choose the character sets you want. Of course if they are available for selected font set. All settings are from template settings, so you have got now a simple and efficient way to embed Google fonts of your choosing to your website with a few clicks of your mouse.
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:
This image will describe all configuration of Home page on Graphsign template. If you want to have Homepage which is same as our demo site, please install our quickstart.
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 SettingsUse 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 SettingsUse 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 SettingsUse 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 SettingsUse 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 SettingsUse 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 SettingsUse 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 SettingsUse 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 SettingsUse this module to show off-cavas when viewing Graphsign on the small devices.
Module name:Offcanvas
Module type: Menu
Module position: offcanvas
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 SettingsUse 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 SettingsUse 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 SettingsUse 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 SettingsUse this module to show background image of blog header on blog page.
Module name: Banner-blog
Module type: Custom HTML
Custom HTML
<div class="banner-blog"> <img class="img-blog" src="templates/jux_graphsign/images/jux_graphsign/art_banner_1.jpg" alt="img_blog" /> </div>
To have this module, navigate to Extensions > Modules > News > Select Custom HTML module.
Backend SettingsUse this module to show breadcrumb on blog header.
Module name: Breadcrumbs
Module type: Breadcrumbs
Module position: slide
Module Class Suffix: breadcrumbs
Custom HTML
<div class="banner-blog"> <img class="img-blog" src="templates/jux_graphsign/images/jux_graphsign/art_banner_1.jpg" alt="img_blog" /> </div>
To have this module, navigate to Extensions > Modules > News > Select Breadcrumbs module.
Backend Settings