Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

5 column layout for pagebuilder

Featured Lock Resolved
hello, i just recently purchased sp pagebuilder and i need to make a layout 5 equal columns. (20%, 20%, 20%, 20%, 20%) for one of my pages.

i have been trying to adjust the layout but it keeps giving me the "Error generated. Please correct your column arrangement and try again."

Can someone help me out with this? my layout must be 5 columns - no other options. if i have to do something custom to set it up that is fine, i just need a hand getting it set up.

thank you!

7 Answers

Toufiq - Staff

More than a month ago #Permalink
Hi,

Thanks for your query. Sp page builder does not exist this feature to make 5 column in row. Besides if you want to do 5 column, then you can increase core css file. But it could be hamper other css.
components\com_sppagebuilder\assets\css

.sppb-col-sm-2 {
width: 16.66666667%;
}


And replace this code

.sppb-col-sm-2 {
width: 20%;
}


-Thanks

pedro olaia

More than a month ago #Permalink
You can try to use one row with 2 colunms (9/3) or (10/2) and then inside of the larger colunm insert 4 iqual colunms (3/3/3/3). The end result will be 5 colunms, will not be perfect or exacly what you want, but preaty close to it. Then you can try to ajust colunms with a bit of margin and padding...

But ye, It would be awesome if joomshaper guys could implement an extra rule for 5 colunms.

There are lots of exemples of it, heres one:
https://coderwall.com/p/-uxgaq/5-columns-layout-with-twitter-bootstrap

markmark

More than a month ago #Permalink
Add Row option class col5 then only special section...

Generate 2+2+2+2+2 and other empty...
if need Row Option (Columns Equal Height / Fluid Row / Remove Gutter) enable all

Add to template custom css

@media (min-width: 992px) {
.col5 .sppb-col-md-2 {
width: 20%!important;
}
}


Result is perfect and responsive 5 column!

Attachments (1)

  • sppb-5col.jpg
    sppb-5col.jpg 170.9 KB

Nico

More than a month ago #Permalink
Hello,

Why don't you do a :

1+2+2+2+2+2+1

Like this you do have 5 columns, more space on left and right, but it might not be a problem ?
Cheers

markmark

More than a month ago #Permalink
Hy Nico!


Why don't you do a :

1+2+2+2+2+2+1


because in Fluid Row not viable..
It's definitely strange to not be able to divide by 20%!

Paul Frankowski - Staff

4 weeks ago #Permalink
It's bootstrap gird.
---
Beside, "SP Page Builder 1.x" is not supported anymore.
We develop only 3.x now.


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 141
Toufiq

Toufiq

Total Accepted Answers: 44
Sifat

Sifat

Total Accepted Answers: 16
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 11
Shibbir

Shibbir

Total Accepted Answers: 5

100+

Templates

200,000+

Community Users

Newsletter

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