A detailed guide to the Helix3 Layout Manager - JoomShaper

A detailed guide to the Helix3 Layout Manager

14 January 2016
Hits 83,255
5 min read
A detailed guide to the Helix3 Layout Manager

Helix3 framework makes it easy to build a complete website quickly. It comes with a built-in page layout which you can customize to showcase desired elements as you wish. The major part of the Helix3 framework is its Layout Manager which has a set of tools to organize and present website contents. Let’s get introduced to the mostly used features and options of Helix3 Layout Manager.

The Core

Here is a screenshot of the top section from a page using Helix3 framework.

helix top 1 2

The top left side shows social media profile links and the right section hosts contact information. You can see the site header just below the top bar. The header section contains the website logo and a menu. Okay, so how can we make it?

Very easy. The social links, contact information and the logo can be inserted from Helix3 framework’s Basic style settings. Go to your Joomla admin control panel and navigate to Extensions > Templates. Open ‘shaper_helix3 - Default’. You will get a page like the following.

helix basic

Here we find an option to make the header section sticky so that it will remain on the top even we scroll the page down. It also provides a function to upload/set a logo, coming soon page, background image, boxed layout, footer, etc.

If we scroll further down, we will get input fields to enter the social links and contact information.

social and contacts

After configuring Basic options, we can move to the Layout builder. Here is a screenshot of the Helix3 Layout Manager.

helix layout 1

The interface is pretty simple and self-explanatory. You can insert a new row anytime which can be divided into several columns thereafter. The row title is also called section title or section name. The Helix3 framework can be used to build the core website layout where you can position the top bar, header, menu bar, bottom modules and the footer. You can assign a block for a component which can be used to put more page specific contents including texts, images and other multimedia elements. Remember, here you can assign only one component in a single layout and it’s more than enough to build a powerful site. So, don’t worry. Just make sure that Helix3 (shaper_helix3 - Default) is being used as the default site template, and it will work.

The top menu bar is built in. You can edit it from the Admin Control Panel> Menus > Main Menu.

Working With Modules and Positions

The Helix3 Layout Manager displays contents based on their module positions. You need to create a position to show a module element via the Helix3 framework layout. Creating a position is fairly simple. At first login to your hosting server. Go to the public html directory. Navigate to templates > shaper_helix3. Open the templateDetails.xml file.

template details sc

You will find the position entries there. For example, we use the ‘logo’ position to place the logo on the header. The position code for logo is ‘logo’. You can add a position for an ‘example’ module just by adding ‘example’ (with the position tag) below the other position codes.

new position

Now you can proceed to create a module. Visit the Joomla admin panel and go to Extensions > Modules > New. It will show a list of different modules.

select module

Select one from them and assign the position you’ve created for this. Then save the module.

example module select

Now that, our module is ready. Let’s insert it into a row. We'll insert the Example Module into the Bottom section. We need to click the gear icon to open the module position selector.

bottom 1

Once the popup appears, select a module position from the dropdown list.

selecting example

 You can also define whether the module should be shown in all devices or just individual device categories like tablets, mobiles or desktops. There are different layouts available for tablets and mobile phones. After selecting necessary options, click the green Apply button found at the bottom left side of the popup. Now save the total layout by clicking the green Save button appears at the upper left corner of the screen.

If we refresh the home page (or any other page where the Example module is displayed) of the test site, we can see the element just added.

example module shown

Working With Rows, Columns and Other Tools

Adding a row is a matter of a mouse click. Click the Add Row button found on other rows. It will create a new row instantly.

add row

This is our new row. We can add columns on rows.

select column numbers

There are lots of customization options available in row settings. Give it a name, set a background color/image, control visibility for different device types, set padding-margin, use custom CSS class etc. Just click the Settings button on the target row and make adjustments. Apply those settings and finally save the layout.

row settings

You can customize typography, display icons, add multimedia items and new modules along with positions to build a solid structure of a Joomla site using JoomShaper Helix3 framework. There are lots of tools that can be utilized to build an informative, clean and beautiful website. Try it today. It's free.

Free download Helix3 framework now!

Arafat Bin Sultan

Arafat Bin Sultan

Lead Content Developer
Arafat is the Lead Content Developer at JoomShaper. He is a tech-enthusiast by born with a keen interest in space, photography, and video making.

Comments (45)

K
kian
This comment was minimized by the moderator on the site

thanks a lot

Arafat Bin Sultan
Arafat Bin Sultan    kian
This comment was minimized by the moderator on the site

Welcome!

RM
rk malbacias
This comment was minimized by the moderator on the site

Do you happen to know the issue with regards to using this template, that the Browser Title Page won't change even if you set a Browser Title Page in the Settings of the Menu that has a single article function? Do you happen to know a fix for it?

A
Alberto
This comment was minimized by the moderator on the site

good work

Arafat Bin Sultan
Arafat Bin Sultan    Alberto
This comment was minimized by the moderator on the site

Thanks

Schipperijn
Schipperijn
This comment was minimized by the moderator on the site

Ok, just have seen this to. As RK MalBacias write. When using Helix 3 the browser titel at menu tab is not working.
It wil take the article titel in place of browser titel, when doing singel article menu

How can you avoid this.
Great system it is. Could be that Joomshaper thinks this is better.

OC
oswaldo chamorro
This comment was minimized by the moderator on the site

Does anybody knows how I can remove the front big picture. That is the only thing that I do know how to remove. the picture with two hands holding an Ipad.

Hope someone can help me. thanks a lot.

Paul Frankowski
Paul Frankowski    oswaldo chamorro
This comment was minimized by the moderator on the site

Hi, it's from SP Page Builder > Home > Row setting > Style >Background (as I remember)

V
Vasil
This comment was minimized by the moderator on the site

The Module Position drop down menu doesn't work. It's frosen in any raws and columns. Do you know how to fix that?
And how can I point the module position in "Component"?

Paul Frankowski
Paul Frankowski    Vasil
This comment was minimized by the moderator on the site

It was fixed by one of updates.

J
jaki
This comment was minimized by the moderator on the site

this is very small article and we need more information about layer manager

Arafat Bin Sultan
Arafat Bin Sultan    jaki
This comment was minimized by the moderator on the site

Thanks for your comment, Jaki! We are planning to publish more detailed resources in future

S
Stefan
This comment was minimized by the moderator on the site

Hello,
I have created 3 modules in a row. But on the page the modules are not shown in a row. the last one is always beneath the other ones.
see: kammerl.one

Why is that?

Rifat Wahid Alif
Rifat Wahid Alif    Stefan
This comment was minimized by the moderator on the site

I don't see anything like this on your website. if you face this issue then maybe it happened for the closing of the div.

NOTE: Please for further support post on the forum or join our facebook helix community page to get better solutions: https://www.facebook.com/groups/819713448150532/


- Thanks

H
hareth
This comment was minimized by the moderator on the site

hi how can i make modules top of component? thanks

Rifat Wahid Alif
Rifat Wahid Alif    hareth
This comment was minimized by the moderator on the site
A
ablaye
This comment was minimized by the moderator on the site

how can i have this https://i.stack.imgur.com/fDtPI.png

Rifat Wahid Alif
Rifat Wahid Alif    ablaye
This comment was minimized by the moderator on the site

Hi,
In helix3 we don't have the option to add an inner row. We will discuss this issue with the team.

- Thanks

D
dan
This comment was minimized by the moderator on the site

hi
how can i add a position between left and right column and under and up of component area

like this
i.imgur.com/xsEOogv.png" target="_blank" rel="nofollow">http://i.imgur.com/xsEOogv.png

add to this
http://i.imgur.com/QiXdJMN.png

please help me.

D
dan
This comment was minimized by the moderator on the site

hi
how can i add a position between left and right column and under and up of component area

like this
http://i.imgur.com/xsEOogv.png

add to this
http://i.imgur.com/QiXdJMN.png

Rifat Wahid Alif
Rifat Wahid Alif    dan
This comment was minimized by the moderator on the site
D
dan    Rifat Wahid Alif
This comment was minimized by the moderator on the site

i thank you rifat

i did that , but i have another issue with that,

as you can see ,in the layout manager (backend) while the positions, (above and below positions) are in out of main body.

[img]http://imgur.com/HaTnCaj[/img]

in the frontend, the positions, (above and below positions) are in and out of main body in the same time ,

for example when i publish a module in above postilions then the module are repeating in 2 positions , one in


in fact i have 4 positions now, 2 positions are in main body row and 2 positions are out of main body row.

[img]http://imgur.com/C8o9Xb0[/img]

D
dan
This comment was minimized by the moderator on the site

i thank you rifat

i did that , but i have another issue with that,

as you can see ,in the layout manager (backend) while the positions, (above and below positions) are in out of main body.

http://i.imgur.com/HaTnCaj.png

in the frontend, the positions, (above and below positions) are in and out of main body in the same time ,

for example when i publish a module in above postilions then the module are repeating in 2 positions , one in


in fact i have 4 positions now, 2 positions are in main body row and 2 positions are out of main body row.

http://i.imgur.com/C8o9Xb0.png

J
joe
This comment was minimized by the moderator on the site

Hi, this is good. I'm new to helix3 and what is the rule to show article in component area? By sequence of category or defined in template?
thanks.

Paul Frankowski
Paul Frankowski    joe
This comment was minimized by the moderator on the site

Hi, there is no rule, just publish any component. By default there in layout there is place for component display. It depends on menu settings, no relation with template.

FT
Faouaz Taroum
This comment was minimized by the moderator on the site

Hello,
Just wondering why the cell padding and spacing don't work on Helix3, while on other templates it does?

Thank you

Paul Frankowski
Paul Frankowski    Faouaz Taroum
This comment was minimized by the moderator on the site

Hi,
in Helix3 you cannot set padding & Margin for columns. Only for Rows it work. But you have to remember about adding : 1px 2px 3px 4px or 1em 2em 3em 4em, not only numbers.

LT
Lorin Tui
This comment was minimized by the moderator on the site

I guess it does not stay like this on the left side with the preview. I guess this is only an option if you want to preview or not. It is very cramped, hard to follow and set. Custom code is too small to track code lines. Some screens switch to responsive mode due to left widths. I would like to keep the old layout, improved design, and include the new options. You can choose with preview or no preview. I would also like to have the option to add position modules above and below the component, would be of great help. I hope you keep in mind these suggestions. Good luck.

Paul Frankowski
Paul Frankowski    Lorin Tui
This comment was minimized by the moderator on the site

Hi, thanks and sorry but I have to say it, helix3 project has been stopped , it will get only important fixes, all new features and improvements will get only Helix Ultimate.

MW
Mark Waterfield
This comment was minimized by the moderator on the site

How can I disable the main article content block on the homepage, so it only displays module blocks?

Paul Frankowski
Paul Frankowski    Mark Waterfield
This comment was minimized by the moderator on the site

Hi, New Joomla allows you to use EMPTY article, I mean without any content, so use it. Of course disable showing Article title, date, vote etc. as well.

J
Jon
This comment was minimized by the moderator on the site

Looking at Helix Ultimate I notice that COLUMN OPTIONS
- adds default class of col-lg-12....
- has options to add xs, sm, md, xl
- therefore lg settings are hardcoded

Have I missed something?

Thanks

Paul Frankowski
Paul Frankowski    Jon
This comment was minimized by the moderator on the site

Hi, for support you should use forum instead, beside this blog post was about Helix3 only, not HU.

For mobile view indeed default value is full width col-12, but for sure not for desktop view. Beside you choose columns layout from presets options, so default desktop values are added correctly.

M
Marcel
This comment was minimized by the moderator on the site

Hello,
i have a problem with the main menu bar with a multilanguage website.

The Main Menu Bar works fine with the main language, but when i change the language the main menu bar disappears. Can you help me?

M
Marcel    Marcel
This comment was minimized by the moderator on the site

Never mind i got it to work lol. I just put all menu entrys with different languages in the one main menu and it works. great template. love it! Thanks!

Arafat Bin Sultan
Arafat Bin Sultan    Marcel
This comment was minimized by the moderator on the site

Congratulations

Ö
Ömer
This comment was minimized by the moderator on the site

Hi; There is a gap on the first page http://www.iskenderoglu.com i sitll can not find the reason for this gap. How or where can i fix it?

Ö
Ömer
This comment was minimized by the moderator on the site

The gap between menu and the text i mean. I check all the resources for it and found nothing.

Paul Frankowski
Paul Frankowski    Ömer
This comment was minimized by the moderator on the site

In default layout was OK, after your changes is not, that's why. Anyway use:
#sp-section-1 {padding: 70px 0;}

Read: https://www.joomshaper.com/documentation/helix-framework/helixultimate#custom-code

It can be done also via Section settings.

A
Adheesha
This comment was minimized by the moderator on the site

I tried with Carousel adding.. It didn;t work! pls help

P
Paulo
This comment was minimized by the moderator on the site

How to create a nested row in a single section in the Layout Builder?
I want to achieve this: 12+8+4, 2 rows inside 1 section.

Thank you.

Paul Frankowski
Paul Frankowski    Paulo
This comment was minimized by the moderator on the site

Sorry, but this is not possible in Helix3. Use SPPB inside.

RM
Reza Maleki    Paul Frankowski
This comment was minimized by the moderator on the site

Any plan to add this feature? If don't want to use SPPB in all pages?

Thanks

SH
steve hornett
This comment was minimized by the moderator on the site

I seem to be missing how to choose the position for an article within the overall existing defined positions on the page (eg bottom1). I'm just beginning, and do see the power of this framework. Thanks!

Paul Frankowski
Paul Frankowski    steve hornett
This comment was minimized by the moderator on the site

Hi, what is relation article with template module position?
Article = component, not a module. Articles can be displayed in the component area only. Nothing changed in this area since Joomla 1.0.x. Maybe in your city there is Joomla Fan Group join to them to learn some basics.

There are no comments posted here yet

Sign up for our newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.