You guys already are long known about the extensive capabilities of intuitive pagebuilder Quix, and the ability to let you give any shape for your website..
That's not just a tale, you have been experiencing this- since the day you kick-started with your favorite Quix pagebuilder. We ThemeXpert is truly thankful for all of your appreciations.
Being seeing the topic, you might have already assumed- what's you are going to find in this article.
Basically, we've made-up a plan to show exploring Quix capabilities in a series of post, especially for the newbies, helping them having ideas of its magnificent power as you do.
Typically, this is the very first post in that series, and we are covering the beyond-simple-approach to make a personal portfolio website in just 10 minutes. More articles are coming soon, covering to make other categories of website in possibly less time. If you wish you can also build your own template, follow this guide - A Complete Guide to Create Marketplace Ready Onepage Joomla Template.
We know, you are not in the mode of wasting your valuable time hearing something else. Let's just begin.
You will need a couple of stuffs for this purpose. Find the list of required components below.
- Quix Pagebuilder
- Any of our Joomla template (ex. Firefly)
- T3 Framework
⏳ Step 1: Download
This is the very first thing you need to do. Just head over the download page and download all the above required components from the below given links then save to your local drive or somewhere safe.
???? Step 2: Installation
Installation of required stuffs is absolutely simple. You can install required components using Joomla native installer with the intuitive drag and drop interface.
Just to pick the component file and drop on the drag and drop area. Then, the installer would do the rest of the task with notifying you once it's successfully done the installation process.
- Go to Extensions> Manage> Install
- Drag your file on the Drag & Drop area or click on the green Browse for file button to choose your downloaded component from local storage.
Once it's ready, you will be notified through a completion message.
???? Step 3: Creating Homepage
You are to now create the main-page of your site. Creating pages with Quix is extremely simple, you are just a couple of drag and drop away.
With 50+ elements, you have unlimited possibilities of layout styles so, not to bound in fixed and defined layouts.
To learn more- visually, and explore Quix Customizability, you are welcome to the Video Tutorial page.
Let's skip talking something else and create the Homepage.
- Go to Quix> Pages
- Click on the green NEW button at left-top.
- Give the Homepage Title on the Title empty field.
You have now two approaches to choose. Either you can insert our predefined blocks from online server using the pink ADD FROM TEMPLATE button or you can your own customised blocks using purple ADD NEW SECTIONS button.
???? Step 4: Creating Required Blocks
Let's create some blocks that a personal portfolio website should have. Its genuinely up to you, which blocks you consider to have in your portfolio site.
For instance, I'm going to create the four blocks (about, projects, testimonial, contact) one after one. Procedure is absolutely simple.
- Click on ADD NEW SECTION button.
- Click on + Add Column button to choose the number of column you wish to have.
- I am taking two columns for the first block.
- By clicking on the + Add Element button loads all quix elements and you are allowed to add any of them.
- In left column- I'm taking an Image element, and taking Heading, Text elements on the right column.
- Thus the block is made. (+) button pointed on the following screenshot allows you to create more blocks.
- Similarly, create rest of the blocks with your preferred combination of 50+ quix element.
Let me quickly suggest you the quix elements, needed to be used for a portfolio site.
About Section/Block : Image, Heading, Text
Project Section/Block : Filterable Gallery
Testimonial Section/Block : Testimonial Pro/ Testimonial
Contact Section/Block : Contact Form
Once, I am done creating with the required blocks according to my preference, its entirely looks like the screenshot below.
Oh! One important thing to remember.
Don't forget to change the section IDs according to their individual names. It will later help you using frequently anywhere you need, such as- assigning on navigation menu external url.
- Head over to Section Settings
Under Advanced tab, put the section Id name according to the label name.
???? Step 5: Integrating Social Icon
Social profile integration is one of the important things that supposed to be done in every portfolio website. Even that's not a stressful task with quix.
No custom works to do, just required the Social Icon element. Placement for social icon is entirely your wish. So, consider where to place the social icon first, then-
- Click on + Add Element
- Choose Social Icon element
Provide your social profile link on its corresponding field and save using keyboard shortcut Ctrl+S (windows)/ Command+S (MAC)
???? Step 6: Creating Navigation
Now, it's time to create navigation menus for your portfolio site. Creating Navigation menu is nothing but a few clicks. Find the approach below.
- Go to Menus> Main Menu
- Click on the green New button at left-top.
- Give the menu title on title empty field and
- Click on the Select option next to Menu Item Type and choose System Links> URL
- Save the menu using Save & Close button at left-top.
Create all other necessary menus according to the same above approach.
⛓ Step 7: Assigning Menus with Certain Section/ Block
In this step, you have to assign navigation menus with their corresponding section/ block.
Let's assign the Homepage first.
- Go to Menus> Main Menu
- Click on the menu items Home
- Click on the Select button next to Menu Item Type and choose Quix> Page
- Click on the Select button next to Select The Menu option and choose the earlier created Homepage with Quix.
Now, let's assign other navigation menu with corresponding blocks.
- Go to Menus> Main Menu and you can find the list of all created menu items here.
- Click on a menu item, on its Link field- put the section id with whom you want to assign the menu item.
>> Make sure, # symbol is placed earlier of the section id on the menu item Link field.
Assign the other menu items with the corresponding sections with the same procedure.
???? Step 8: Creating Footer
Now, let's create Footer section/block. The procedure is unlike to create any other blocks/ sections. I'm putting copyright text on footer section for instance. Find the approach below, how you can do so as well-
- First, choose how many columns you wish to arrange your footer in.
- You can use Text element to put copyright information of your website as I did.
???? Step 9: Applying Animation (Optional)
To make your website functionally smooth you can apply some additional animation effect on its surface.
Quix allows you to apply entrance animation and hover animation in every of its section, row, column and element as well. All of them come with a tab named ANIMATION on their setting panel, from where you can control applying animation.
You are just to choose- which animation you wish to apply and that's all.
✅ Step 10: Save and Done
After doing all these, you are a click away to done finalizing your work. Just a single mouse click on the green SAVE button at top of the Quix page you are in, and you have your own portfolio website.
Alternately, you can use keyboard shortcut Ctrl+S (windows)/ Command+S (MAC) to save you work.
See, how easy to create a portfolio website with the extreme powerful pagebuilder Quix!! But still, in case you feel any confusion with any of the procedures above, feel free to let us know. Our dedicated support team is always ready to get your problem solved. With Quix, only the sky is the limit, Be Quix, be Smart.