20% Discount on membership and single purchase! Use coupon : SAVE20

Founder and Head of Ideas of ThemeXpert. I love building engaging and impactful products! A Joomla! enthusiast and web tech nerd, I love helping people to solve problem in a lean and elegant way. Proud father, husband and family guy love reading and eating own dog food.

Quix 2.0 Alpha 2 Released - Everything Is Shaping Perfectly


Last week we released sneak peek of our upcoming flagship killer; Quix 2.0. We've been working tirelessly to bring you absolutely best page builder for Joomla!

I'm delighted to announce second alpha of Quix 2.0, just in time. This version brings you more refined UI, some additional features and huge architectural improvement behind the scene. 

Improved Media Manager

We have a big ambition for our media manager, and we'll reveal everything step by step. Now you can upload image, video, gif and SVG file with simple drag and drop interface. Media manager comes with all standard features you needed from a file manager like creating new folder, renaming file, moving file from one location to another and much more.

You can preview your image, video by just double-clicking on it.

New Preview Mode

With real-time editing of Quix, you can see your changes instantly, but sometimes you might need to see them as a visitor too. With our new preview mode, you can see your created pages from visitor's eye.

Just like our previous builder (aka Quix classic builder), when you save your changes, preview refresh automatically.

Portability - Export/Import

Previously, when you export any Quix page, it exports every content and settings. Thus it creates some problem with images. It just exports the image path, not the image itself. So, when you import the page on your different website, the image goes missing.

This time we are taking our portability feature to the next level. Now, when you export a page, it encodes the image and attaches to the JSON file. So, you can import the page without any fear of losing content.

Roadmap Up Ahead

We have a long way to go, and I believe we'll reach there on time as planned. Our team is working day and night to ship the best page builder for Joomla.

Here is the release deadline for Quix 2.0 :

  • Alpha 1 Release - 1st March, 2018 ✅
  • Alpha 2 - 8th March, 2018 ✅
  • Beta 1 - 15th March, 2018
  • Beta 2 - 22th March, 2018
  • RC 1 - 29th March, 2018
  • RC 2 - 3rd April, 2018
  • Quix 2.0 Stable - 10th April 🥁​🚀​🎉

When Quix Will Available To Download ?

With Quix 2.0 we plan to give you the best experience ever. From installation to use, we need smooth on-boarding system, and we are working on it. From RC 1, we'll be able to provide you an installable package. Till now we've created a playground for you to test Quix 2.0.

If you wish, you can check out Quix releases and what new is introduced with each release, from below.

  912 Hits
912 Hits

Quix 2.0 Alpha Is Here - Experience The Magical Controller For Joomla!


It's been a month since we announced the upcoming release of Quix 2.0 and a lot of things happened behind the scenes. Everyday brings us closer to the most powerful builder for Joomla ever created!

Talking about Quix reminds me about the old days, when our friendship with you was built. Through all the ups and downs you stayed with us and we worked at an extreme level to fulfill your needs and desires.

Finally, everything inside Joomla will be controlled in one place. You will be able to visually change everything the Quix way: headers, footers, mega-menus, component pages and much more.

We never stop adding edge cutting features, while ensuring everything works smoothly for all our users. Every change we made was considered several times from every possible angle and was based on your feedback along with our own vision.

There is a lot to discover in Quix 2.0 Alpha 1, and more will come on the final release. So, for now, let's explore what Quix 2.0 Alpha 1 has to offer.

Live Frontend Editing With Simplistic UI

Creating something simple and functional is always difficult. We needed a full featured Drag & Drop page builder without creating any mess. After a year of research, sketch & prototype we created a UI that gives you full capability of page building with very minimal footprint. 

Quix is constantly growing and evolving, so the interface need to match this growth. To achieve this, we need to continuously innovate and improve core elements to allow designers and developers to stay ahead of the game. 

Reorganized Everything

Since we have kept everything minimalistic and simple, you will find everything organized as you edit or customize. All the settings and options are now grouped together so that you can easily find them. 

When needed, you will be able to just expand the settings and customize the elements as you need. Organized fields will help you focus and find the specific setting you are looking for. 

New Field Types​ For Better Design Control

Necessity knows no limits, and we are always working hard to satisfy your needs and to do better. We relentlessly work on introducing new options and ways to bring out the creative person inside you. We have added many new fields to the customization area so that you can make the changes you need on any section you want.

In this awesome Joomla page builder, we have introduced a new color selection field, background field, icon and image picker fields amongst others. With Quix 2.0, we believe you will be able to do a much better development than you do now. To make Quix even better, we will introduce more field types on later releases. 

Flexible Column System

Like its predecessor, Quix 2.0 comes with 11 predefined columns structure, which will help you create designs faster. But we didn't stop there. You will be able to change the column's width and structure by simply dragging the edge. This gives you extreme flexibility to create simple or complex layouts. 

With Quix responsive settings, you can adjust the columns width per-device and hide them if necessary.

Now, instead of using grid, we divided columns into percentages. You can now drag any columns width as much as you want and it will not interfere with the other columns.

Everything in Frontend - New Toolbar

We understand the pain of creating pages in the backend and not being able to edit them directly in the frontend. To solve this we have created a brand new toolbar when you are on the builder's interface.

This new toolbar will allow you to create new pages, jump between Quix pages, add pages to the menu, change page settings and much more.

You will find everything you need for building modern websites. We'll gradually introduce features in the upcoming releases.

New Media Manager With Image Editing & SVG Support

We know that a new media manager is coming with Joomla 4, but we just couldn't wait. So, we created a new and powerful media manager with ReactJS and it will be even more powerful than the upcoming media manager .

Media manager will no longer be for uploading, deleting or browsing images and videos. There a is a lot more that can be done, such as image editing, cropping, filtering, transfering images and most importantly adding perfect srcset for images in websites.

SVG is changing the way we use images on websites. You will now be able to upload, edit and animate SVG files using our media manager.

Roadmap Up Ahead

We are going to release two alpha and two beta versions before the stable release. We are also going to unveil new features on each release which help you get used to them.

We're also going to release a series of blog posts, "Inside Quix", where we'll walk you through each and every feature of Quix.

Here is the release deadline for Quix 2.0 :

  • Alpha 1 - 1st March, 2018 ✅
  • Alpha 2 - 8th March, 2018 ✅
  • Beta 1 - 15th March, 2018 ✅
  • Beta 2 - 22th March, 2018 ✅
  • RC 1 - 29th March, 2018
  • RC 2 - 3rd April, 2018
  • Quix 2.0 Stable - 10th April 🥁​🚀​🎉

What Are you Waiting For ?

To make your experience smoother and faster, we've created a test site to use Quix without installing it on your server. We'll update the test site everyday with new features. Subscribe to our newsletter and be notified of each release. 

Right now there is only one element available for testing and it's not fully functional yet. We have developed so many features and we will be releasing them one by one after testing.

If you wish, you can check out Quix releases and what new is introduced with each release, from below.

  3233 Hits
3233 Hits

Inside Quix Version 2


Our mission is to help you build cutting-edge websites faster and better.

Quix has grown tremendously since its very beginning. We've introduced dozens of new features over the past 2 years, yet the main experience of creating a website with Quix remains the same.

For over a year, we've taken the time to chat with you in person, online, and through email. We've also read through thousands of customers tickets to understand your pain points and frustrations.

In listening to you, it became clear that it was time to take a revolutionary leap: to create a Quix experience that's faster and simpler.

We've learned a lot and applied all the things we've learned to make Quix even better, for you.

Here is an inside look and roadmap of how things are coming together as we roll out the second version of our product: Quix version 2.

Quix has grown leaps and bounds in past two years and when we started working on Quix 2.0 our main focus was to help our customer's websites grow. The most important things we often ignore when we build the website thinking we'll do it before launch and 90% of us failed to do so. Not with Quix anymore. Our main focus for Quix 2.0 is :

  • Performance
  • SEO
  • Accessibility

Let's see how Quix helps you to fix these problems, the moment you start building your website.


Performance has never been an afterthought for Quix. We are very obsessed with speed and from the very beginning, we used page caching, asset caching, device based rendering and so on...

Now, when we talk about the performance of v2 there are two sides of it.

Page Building: Quix v2 comes with live frontend editing interface with a huge array of settings. You can build websites 2x faster than before. You will be able to see changes live while you make it and it will autosave your changes. 

Page Loading: We re-wrote the entire rendering engine using the most popular and fastest template engine in the PHP world. I'll talk about this in a later blog post. The new template engine loads Quix page faster than ever before. 

What about the backend editor? Is it still available?

Do not worry, we won't remove backend editor. Both backend and front editor will be available with Quix 2.0. You can use whichever one that suits you best. All of the old pages created with v1 will open with the backend editor (called classic editor) and the new page will use the frontend editor.

​Search Engine Optimization At It's Best

What is the benefit of having a beautiful site when people cannot find them in search results? Quix 2.0 enables you to easily build a beautiful responsive site with more SEO friendliness.


The codebase of Quix 2.0 is 100% optimized for SEO.

Our enhanced SEO plugin increases your chances of showing up in a website search result.

Our newly created SEO plugin will tell you your live score while building the website ( surprise :) )

Accessibility Support

Everyone has equal rights. So we are giving fair support for everyone. Quix 2.0 is coming with accessibility support for people with disabilities. The UI structure, element switching, menu items searching and all other things will be very much easier with new Quix.

Technical Changes That Matter

Let's talk about some technical changes that coming with the new version.

Bootstrap 4

With the power of flex and CSS grid system, you can build any kind of layout you want. Bootstrap 4 is completely re-written with CSS flex and lot more cool features. It's completely modular and most popular choice for front-end developers. We decided to go with BS4 but remember Quix is completely framework agnostic. You can use any framework you want. Such as UiKit, Foundation or Semantic UI.

Font Awesome 5

Icons play an essential role in websites, and Font Awesome is the most popular icon pack available. Font Awesome gives you more control, icons, and more customizability options than any other icon packs. You will be glad to know, Quix 2.0 is coming with Font Awesome 5 which means you will be getting most out of Font Awesome and you will be able to use more icons in the coolest ways. Grow, shrink, rotate, do whatever you like to do with your icons and make awesome websites with Quix 2.0

We've been working with Quix for the past 4 months and we are very close to release first public alpha, hopefully, next week. With the release of first alpha, we'll keep you informed of the full development roadmap. We've re-written every piece of code and making Quix the absolutely best page builder for Joomla!. Let's rock together...
  1758 Hits
1758 Hits

Quix Features Updates! The New Smart Tabs Element With Typography Enhancement, 800+ Google Fonts & New On-Boarding System


Today we are announcing a huge update to Quix tab element. This new update takes what was a simple tab builder and transforms it into something new, something much more powerful and full of possibilities. We called it 'Smart Tabs' and it's a big update that really takes the element to the next level.  

Section, Row, Column & Element As Tab Content

The smart tabs element can pull any section, row, columns or other element as tab content. That means, your tab content layout has hundreds of possibilities. It use the Quix native builder interface so you have zero learning curve.

​ All you need is to copy the section or row id, and paste it into smart tabs navigation item settings.

New Tab Layouts

The smart tabs element comes with two different layout. You can create horizontal and vertical tab layout and align them accordingly, which is great for making a multi dimensional content experience.

Subtitle & Image/Icon

The nav title also has subtitle option where you can add more description of your tab navigation. It's great for explaining features as tab nav and showing image as tab content.

​ You can also add image or select an icon for each individual nav item. Make your tab more visually appealing to your visitors.


The smart tabs element comes with a huge set of styling option that can make your tab stand out and unique. Typography, color, spacing, hover and active state controls allow you to uniquely design each of your tabs styles. 


The smart tab element leverage all our animations set, plus you can control the appearance of tab content animation. Support fire different animations. 

Brand New Typography Control

We redesigned the typography controls from scratch. We transform the font size, line height and letter spacing input box with a slider. Now you don't have to leave your mouse, just drag the slider to adjust the values. 

800+ Google Fonts Support

We've updated the Google fonts selector with all their 800+ fonts and the list change dynamically. You don't have to wait for Quix update, when Google release a new font you will see it immediately on your font selector drop down.

All the fonts has their own set of variants. Just select the font and you will see all available variants right after the drop down. 

New On-Boarding System

This update comes with a new onboarding screen that will help you to get started with Quix faster than ever. Instead of a blank section, you will now see 2 button that we think the most straightforward way to get started.  

New Icon System Implemented

You can start building your site from our range of pre-designed blocks or start from scratch...

You can also watch all of Quix's video tutorials that will give you a clear understanding of how Quix work and how you can make a beautiful page with it. 

We've done something awesome with Quix icon system and we are not going to release this feature in this version. Instead, we are making Quix ready for new icon system. This will provide a breathing window to template developer to update their template with the new icon loader API. 

Update Instruction

Quix 1.7 brings you lot more new features and improvements. We've tested it thoroughly on staging and production website. Everything works fine but you have to follow these steps before you jump into update :

  1. Take Backup : We always recommend to take backup before update to any major extensions update. You can safely restore anytime.
  2. Update Your Template First : If you are using our templates, then please check the template update section and update it first. New icon system will not work if the template use any core element override.
  3. Clear Browser Cache:  In order to see new typography controls, please clear your browser cache and hard reload the browser. Cmd + Shift + R if you are using Mac, Ctrl + R if you are in Windows. Due to browser aggressive caching, you may not see the controls so clear the cache first.

The new smart tabs elements is available today with all other improvements and fix.

So download Quix today and take it for a spin. Have fun and don't forget to check next week for even more great Quix update coming your way. 

  3568 Hits
3568 Hits

Quix 1.6.5 Brings An Enhanced Slider Pro Element With Parallax Effect


On this version of Quix we worked only and only on the Slider Pro element and added tons of cool new features, I am excited about. We introduced a brand new parallax system on Quix previous release, and now Slider Pro incorporated tightly with the parallax effect. 

Slider Pro elements now turn to a full featured parallax slider element for Quix. 

Let's take a look at the cool features we added to the element: 

Parallax Scrolling

Add motion driven parallax effect to your slideshow background image. When your visitor scrolls the page, they will get a new smooth experience with the slider. Have look the demo.

Background Overlay

Now you can add colorful overlay over your slider images makes every slide a unique experience. You don't have to use any photo editing tool to make your image darker so your slider text can be readable. Add overlay image that nicely blends with your image. 

Slider Height control

The most request features for slider element. Now you can make a full height slider or customize it's height. Full height slider is useful for hero area slider or full-screen slider.

Animation Control for Slider Element

You can add different animation for title, content, and buttons. Previously it was hard coded to only one animation type, and we understand that you need more animation to make your slider content attractable. Select from 29 animation type for all slider element now. 

Unique Title Style

We understand a slider is for attracting your visitor eye at first glance, and nothing can be good as a typeface with beautiful style. Now you have full control over your slider title, and you can design part of it by applying different color font and style. Don't take my word for it; you can check the demo here. 

What's Next ?

Slider Pro is a pro element and not included in Quix free version. You can always test Quix free and upgrade to pro version when you feel confident. 

Our mission is to make Quix the most powerful and user-friendly page builder for Joomla in the market, and we are continuously thriving with new features. We have some exciting new features and elements down to the road. 

If you have any suggestion or feedback, please feel free to share in the comment box below. 

  1914 Hits
1914 Hits

Introducing New Animation, Box Shadow, Parallax Controls + Big Elements Improvements In Quix


Today is a big day for Quix community. We are thrilled to announce a major update of Quix where we touched every elements (50+) and turned them into more powerful than ever. 

Re-organized each element options, added more features and functionalities, new input types and transformed them into much more advanced and full of possibilities. It is a big update that takes the Quix to a whole new height. 

The New & Improved Animation Controls

The brand new animation controls allow you to control any section, row, column and elements entrance animation with time delay. We moved animation controls to a new tab so you can find and control animation quickly. 

Now there is 28 animation type for you to decide how your element will enter to screen. 

Hover Animation & Box Shadow Controls

Within the animation tab, some new hover animation controls give you much control of how your element will interact when someone hovers or tap over the elements, section, row or column. 

Hover shadow animation expand with more controls that give your control over blur, spread, horizontal, vertical and scale the shadow. Now you do not need any template that comes with these cool animation. You can control every interactive animation right inside Quix on any template and framework available on the market. 

Unlike our competitor, Quix always comes with the exact functionality that needed to build a beautiful and modern website.

Box Shadow Control

Creating box shadow in Quix is easier than ever using the new box shadow controls. Within the new box shadow option interface, you can select shadow color, define blur and control how far it will spread horizontally and vertically. Shadow draw outside the box, but you can put them inside the frame by using 'Inset' mode. 

One of the core aspects of material design is layer depth which you can achieve using the box-shadow settings. Your can make your website 2017 ready instantly with Quix new box shadow and animation control. 

Parallax Background

Another new cool thing, I'm excited about. Until this version, parallax background implemented with CSS which isn't cool anymore. We have got lots of feedback to make it neat and most importantly, make it mobile friendly. 

The wait is over, now the parallax background is Javascript based and gives you a nice motion when you scroll down and fall back to CSS for mobile devices. I am sorry, mobile devices (iOS/Android) doesn't support parallax yet :( 

Improved Options Organization

In our previous release, we re-designed the Quix interface with better usability in mind. In this version, we get the chance to re-organized each setting of all elements. Now they are better organized, easy to find and relevant fields are all grouped together. 

We improved the in-place help system (aka tips), so you do not have to wonder about any options anymore.

Big Update To All Elements

Beyond the animation and box shadow update in this release, we have also significantly improved some the most used core elements.

Heading Element Got Significant Improvements

With this newly developed heading element, you can create a nice headline combining multiple fonts and colors. Wrap your highlighted text with a `` tag and assign different font and color from style settings. 

You can now position subtitle above and beyond the title with more control over fonts, colors and much more.  

Blurb Got Big Improvements

Now you can select the blurb headline type. Blurb is the most used element on any Quix page, so we provide you the ability to choose blurb headline from H1-6. 

Also, you can decide where the blurb link will apply. From the title to image or combination of both is possible now. Combining with animation, box-shadow and hover animation, you can now make fresh blurb items. 

Image Picker Replaced With New File Manager

In Quix 1.4 release, we have added a brand new file manager with image editing capabilities. Until now, the file manager haven't been implemented in every element. After three months and 6 release, we are more confident of our file manager and applied with every element we have. 

Read more about the file manager capabilities here and how to use it properly. 

Massive New Update To Joomla Article & Article(s) Elements

We haven't been updated the Joomla article & article(s) element since it's release. The styling was mostly depended on the template. 

With this new release, we have added more options for styling. Now you can change the background, text color of title and content, add box-shadow and much more...

Section Stretch Mode + Container ( Less Option, Less Confusion )

Previously there are five options for section and row container settings which often create confusion. Now, there are only two choices which itself descriptive. 

Whether you want to stretch the section or add a container both are a switch away and don't interpret others. When both settings are ON, it will stretch out the section/row with a container added inside. 

Confetti Option ( Eid Bonus )

Did you notice the beautiful confetti on this blog post? We have been using this for all big announcement post, and our users love it. We have got people asking, how to add this to their website for a special occasion. 

Now, you can turn on confetti to any Quix page with just one click. 

Implemented rel="noopener" For Every Outgoing Link

One of mostly ignored security vulnerabilities is <code>target="_blank"</code>. In plain English, when you link other website and when it open a new window. 

According to Google, we've added rel="noopener" every time you select any link to open in new window. There is a little performance benefit too. 

Update Instruction

If you have used 'Stretched with container' or 'Stretched without container' mode in section, you may see the stretch mode not working properly. However, your website or page layout will not break or affected with this update. 

You can safely update to this version. 

New How to's videos

Not only the awesome updates, but our team is also busy creating small and useful How to's video for you. We have uploaded four videos as off now, and more is on editing phase. We are hoping to upload more videos by the end of next week. 

Check out Quix 1 minute how to's playlist and subscribe to our Youtube channel for updates :) 

  2278 Hits
2278 Hits

Introducing Quix New Interface - Refreshing, Vibrant and Fresh


 Since after Quix's first release, a lot has been changed. We released bunch of cool new features, elements, blocks and the list goes on…

One thing we haven't touch since then is Quix interface. Changing Quix's UI is very challenging and we have make sure that user experience doesn't break and there is no learning curve.

We've tons of exciting features to built and to do so, we had to change its UI. We need a fresh new design without breaking anything.

After a month of planning, testing and coding we are finally able to roll out a new interface for Quix!

So, lets see what have changed

New Color Schema

Color has direct connection with human behavior, it influences perceptions, enhance your work effectiveness, can change your mode and influence you to do something you wouldn't.

When we built Quix, we haven't had enough time to research on colors because we had to do a lot of things. We haven't changed it for a year because of this saying 'If it ain't broke, don't fix it'.

But, the web is moving faster and we need to incorporate the changes into Quix so, you can build website for 2017 and beyond.

Joomla use very dull bluish color all over its backend and to make it like home, we decided to go with that color but with brightest tone. 

New Element Picker

As of writing, Quix has more than 50 elements and more to come. With our new design, you can see more element in the screen and less scrolling needed.

Ohh, the modal window also got new fresh look… 

New Setting Window

We re-factored each and every fields and git it a visually compelling outlook. Related fields are grouped together, provide useful tips while you typing and everything is at right place. 

TinyMCE Update

Finally the toolbar is back. Many of you ask to add the TinyMCE toolbar and its here. 

New Loading Screen

Leave no stone untouched, we wanted to make sure a smooth and joyful entrance to Quix. So we updated the loading screen as well :) 

Section/Row Parallax and Background color overlay fix

Previously, you can't use background color overlay feature with parallax mode. From now on, you can make the background image parallax and add a beautiful color overlay on it. 


You can update to Quix 1.5 safely because there are no braking changes. Remember to clear the browser cache and hard reloaded it otherwise, you may not able to see the changes due to browser aggressive cache system. 

What's Next ?

These UI changes are necessary for the new features we are planning bring in Quix. We are going to release some new elements and plugin next week, which I'm excited about. These elements are one of its kind and many of you already aware through our Facebook group.

Through our idea sharing portal, you can share your wildest idea about Quix and we'll develop if enough people show interest on it. 

  1695 Hits
1695 Hits

How To Track & Display WordPress Post Views Without Any Plugin

How To Track & Display WordPress Post Views Without Any Plugin

Hopefully, you have already seen some blogs use displaying the total view number for every post to prove their visitors engagement, and now you may want to know how it is done?

Do you want to know how many times a particular post has been viewed and as well as want to show the result to your viewers?

In this tutorial, I will show you step by step how you can display the total number of views of a particular post without using any plugin.

This is a three simple steps process and its pretty much easy to follow.

First Step:

Add this codes from the following block in your themes function.php file. It will configure your theme to enhance this functionality.

function getPostViews($postID){
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
        return "0 View";
    return $count.' Views';
function setPostViews($postID) {
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
        $count = 0;
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
        update_post_meta($postID, $count_key, $count);
// Remove issues with prefetching adding extra views
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);

The following code will count the views when someone refreshes or view the post, and it won't discriminate between visitors.

Second Step:

Now add the following line of code in your single.php file within the loop. It will track the views and set the views of each post.


Third Step:

Now at the last step use the following line of code where you want to display the view number inside the loop. It will get the post view number from the last step where you call the set function to track the post views.

echo getPostViews(get_the_ID());

The following image manifests that the code works finely on my local server:


Kudos to Wpsnipp for creating such useful snippet.


Hope you have found this article helpful. Let us know your opinion or questions if any through the comment section in below.

  9067 Hits
9067 Hits

How to Re-create Joomla.org Homepage With Quix

How to Re-create Joomla.org Homepage With Quix

After a year of hard work, Joomla homepage redesign team recently rolled out a brand new design for Joomla.org. Our heartiest thanks to volunteers involved in this team for their fantastic job.

The redesign team took more than a year for research, gathering feedbacks, testing and backporting the old template.

The redesign team’s vision started laying the framework for an upgraded site template for all of our Joomla! Web properties; however, we are not yet at a point where we can roll out this template. So the redesign team’s work was backported into our existing template so we could immediately make use of the team’s hard work and fresh ideas.

At ThemeXpert, our goal to help you make website faster with our joomla templates and page builder. So we asked ourselves, how fast we can make the exact homepage with our tools. Turns out, very fast!

It took us less than 6hrs to replicate the homepage with our Firefly Joomla template and Quix.

It perfectly makes sense to spend a year for redesigning, when the project size is too big like Joomla. Purpose of this blog post to show, how fast you can incorporate a design into your website.

Before we start

We will be using Firefly Joomla template and Quix page builder. Firefly is the best versatile joomla template we have ever created. Firefly comes with different header styles and homepage variations that will help you to build any website you want.

Creating Header

Step 1

To get an exact look, we need to write some CSS code. Who writes CSS code this day? Here is the less code for header style. Joomla header has few different gradient, and we will use Bootstrap gradient mixin for that.

* Roof
.t3-sl-roof {
  background-color: #13294a;
  #gradient > .vertical(#152d53, #10223e, 0%, 100%);  border-color: #0b172a;
  &.t3-sl { padding: 8px 0; }
  .t3-module, p { margin: 0;}
.t3-roof {
  .nav {
    margin-top: 3px;
    li {
      float: left; margin: 0;
      a {
        padding: 0px 10px;
        color: #d9d9d9;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
        &:hover {
          background: transparent;
          color: #fff;
  .search {
    .form-control {
      height: 28px;
      padding: 4px 14px;
      font-size: 13px; 
      line-height: 1;
      border-radius: 0;
      background: #d9d9d9;
      &:focus {
        background: #fff;
* Header
.t3-header {
  padding-top: 0; 
  padding-bottom: 0;
  background-color: #1a3867;
  #gradient > .radial(#17568c,#1a3867);
  border-top: 1px solid #2f64b8;
  border-bottom: 1px solid #10223e;
* Navbar
// Default Navbars (Visual Style only)
// --------------------------------------------------
.navbar-default {
  background-color: #1b63a2;
  border-top: 1px solid #2d8bdc;
  border-bottom: 1px solid #10223e;
  .navbar-nav {
    margin-top: 7px;
    li {
      margin-right: 2px;
    > li > a,
    > li > span,
    > li > .separator {
      padding: 8px 12px;
      line-height: 1;
    > li > a {
      color: #fff;
      border: 1px solid transparent;
      &:focus {
        color: @navbar-default-link-hover-color;
        background-color: @navbar-default-link-hover-bg;
        border: 1px solid #092034;
        .box-shadow(inset 0 -1px 0 rgba(255,255,255,0.2));
    .active > a {
      color: #fff;
      background-color: #1e71b8;
      border: 1px solid #103b60;
      .box-shadow(inset 0 1px 0 rgba(255,255,255,0.5));
  .navbar-link {
    color: @navbar-default-link-color;
    &:hover {
      color: @navbar-default-link-hover-color;
      background-color: #103b60;
      border: 1px solid #092034;
      .box-shadow(inset 0 -1px 0 rgba(255,255,255,0.2));
* Elements
.qx-element-joomla-articles {
  .qx-btn {
    padding: 4px 12px;
    background-color: #eee;
    color: #333;
    border: 0;
    border-radius: 0;

Save the code to a less file called joomla-website.less. Include this file in template.less file for less to css compilation.

@import "joomla-website";

Step 2

Create a menu module and publish to the roof-1 position. Then publish search module in roof-2 position.

Step 3

Upload logo from Theme tab on template option panel.

Step 4

Head over to Quix > Library page and create a library item. Just button group element contain two buttons.

From Joomla Module Manager > New Custom HTML module and load the shortcode from Quix library.

Now, from template settings navigation tab select the main menu.

We are done with header now let's move the page, and we will be using Quix page builder.

Creating The Page

Re-creating Joomla homepage is quite straight forward and easy. We need only a few elements for the homepage.

  • Text element
  • Blurb element
  • Image element
  • Button element
  • Divider element
  • Video element
  • Joomla article element
  • Number counter element
  • Social icon element

Here is the full screenshot of the backend.

Here is the output :

See Live

Joomla! is the 2nd most popular open source CMS on the planet. From corpoarte website to eCommerce website, Social site to customer management portal, everything is possible with Joomla!. You just need right tools for right purpose.

  1538 Hits
1538 Hits