1. SP Page Builder 2.x (not supported version)
  2. Sunday, 27 November 2016
Hello Joomshapers,

i was just working on my new statusboard, which i wanted to create with the help of PageBuilder V2.

I`d liked to have a 5 column layout in some cases, but that`s not the standard layout in a bootstrap based grid.
But with some help of CSS, we can achieve this :D.

I`d like to share the results of my work as a tutorial with some files (Template, Custom Theme) for the Joomshaper community :D .

Here´s a preview of the result:
https://img3.picload.org/image/rarddwpp/sppagebuilderv2-5columnsprevie.gif

In the attachement is a zip acrhive with all the necessary files.


1- What is this?
* This is a description file for the „How to set up 5 Columns in SP PageBuilder V2“

2- What is included:
* seperate files:
- custom.css (add in your frontend template) or add these lines to your existing custom.css:

@media screen and (min-width : 990px) {
.five-cols .sppb-col-md-2,
.five-cols .sppb-col-md-4
{
width:20%;
}
}

- PB V2 - Template 5 Columns.json (for importing into PageBuilder)

* Screenshots (how does it look like in the backend)
* Template 5 Columns
(add this folder to „administrator/components/com_sppagebuilder/builder/templates/THIS-FOLDER“)


———————————————————————————————————————————————————————————————————————————————————————————————————————
HOW TO:
———————————————————————————————————————————————————————————————————————————————————————————————————————

1. Let`s start with adding a new row
IMPORTANT: add the class „five-cols“ to new row,
and to to all rows in which you want to use a 5 column layout

2. Hit the „Add/Manage Columns“ Button and enter „2+2+4+2+2“
see screenshot „Manage/set Columns (2+2+4+2+2).png“

-> we have 5 Columns - in the backend they are not equal (..yes, there`s a four in it)
see screenshot „5 Columns Grid in PageBuilder V2.png“

—>> add the „custom.css“ to your template

>>> add some content to columns. (Tip: create an addon and duplicate this)
Save, check the frontend: we have 5 equal columns =).

3. Switch back to PageBuilder and set the responsive setting for each column.
3a. The first 2 items get this setting:
- Tablet Layout: col-sm-4
- Mobile Layout: col-xs-6
3b. The big item get this setting:
- Tablet Layout: col-sm-4
- Mobile Layout: col-xs-12
3c. The last 2 items get this setting:
- Tablet Layout: col-sm-6
- Mobile Layout: col-xs-6

You can try different settings if you know what your`re doing.
For 1 item in a row on mobiles, use this setting

3a. The first 2 items get this setting:
- Tablet Layout: col-sm-4
- Mobile Layout: col-xs-12
3b. The big item get this setting:
- Tablet Layout: col-sm-4
- Mobile Layout: col-xs-12
3c. The last 2 items get this setting:
- Tablet Layout: col-sm-6
- Mobile Layout: col-xs-12

4. You`re done.

5. Check your result in the frontend.


———————————————————————————————————————————————————————————————————————————————————————————————————————

Since PageBuilder V2 has not yet the ability to save rows, and reuse them (as a Template),
you`ll have to go through the 5 steps above, if you already created a page an some rows with content.

BUT there is the neat feature „copy row“ in the „row options“ menu,
with this you actually can copy & paste exiting rows from your pages to other pages.

So the short way is:

- import the 5 column template, or use the template „Template 5 Columns“
- don`t forget to add the custom.css
- add content OR copy the row and paste the 5-column-row in a page,
on which you`re actually working on.

Happy Shaping =).

———————————————————————————————————————————————————————————————————————————————————————————————————————

Your PageBuilder looks different to mine ?
* add the „custom.css“ from „files/administrator_template_css“ folder
to your administrator template css-folder.

If it doesn`t recognise that automticlally, go and install the plugin "admin-custom-css", here:
https://extensions.joomla.org/extension/admin-custom-css.

Or add following lines to your existing (admin) custom.css:

.sp-pagebuilder-column .sp-pagebuilder-addons .sp-pagebuilder-addon > div
{
border-color:#159fd9 !important;
background:#e0f4fc;
}

.sp-pagebuilder-section .sp-pagebuilder-section-inner
{
padding-bottom:15px;
}

.sp-pagebuilder-section-inner
{
background:#dfdcdc !important;
}

.sp-pagebuilder-section-inner:hover
{
background:#61b9e6 !important;
}

.sp-pagebuilder-section .sp-pagebuilder-section-inner .sp-pagebuilder-columns-container
{
width:98%;
margin:0 auto;
}

.sp-pagebuilder-section .sp-pagebuilder-section-inner .sp-pagebuilder-row-tools
{
padding-left:15px;
padding-right:15px;
margin-bottom:0px;
}

.sp-pagebuilder-section-inner .sp-pagebuilder-section .sp-pagebuilder-section-inner .sp-pagebuilder-row-tools
{
padding-left:0px;
padding-right:0px;
}
Attachments (1)
Accepted Answer
Thomas Kühnlein wrote:

Toufiq wrote:

Hi,

I have forward your issue in our developer team.

-Thanks


...my issue?
This is a tutorial Toufiq =).

Greetings Thomas


Hi, Thanks for your clarify :)
Responses (12)
Hi,

I have forward your issue in our developer team.

-Thanks
Toufiq wrote:

Hi,

I have forward your issue in our developer team.

-Thanks


...my issue?
This is a tutorial Toufiq =).

Greetings Thomas
schade - funktioniert bei mir nicht PB V. 3.1)

:-(
schade - funktioniert bei mir nicht PB V. 3.1)

:-(


i have simple decision


insert in custom css addon or your custom.css and enjoy

@media (min-width: 992px){
#youridsection .sppb-col-md-2 {
-ms-flex: 0 0 20%!important;
flex: 0 0 20%!important;
max-width: 20%!important;}
}
Attachments (1)
Hallo Michael,

ich würde dir gerne helfen: beschreibe mal bitte was du genau gemacht hast
Hey Andrey,

5*2 = 10 -> Bootstrap grid is 12

I think your CSS must be like:

@media (min-width: 992px){
#youridsection .sppb-col-md-2,
#youridsection .sppb-col-md-4
{
-ms-flex: 0 0 20%!important;
flex: 0 0 20%!important;
max-width: 20%!important;}
}

So in the column settings for PB`s row it must be like this:
2+2+4+2+2

So the result is 12.
I would have done that with nested rows within PageBuilder already...make a 3-column row, make the left and right columns into 2-columns, then you end up with 5 columns.

if you set margins and column widths correctly, it works without extra CSS etc.
Hey Chris,

that`s nice. Thank you.
So now, we have two ways for achieving a 5 columns layout :)
--------
But i prefer to just add a class to the 1 section, and have 5 addons to deal with.

In your case it`s 1 section with 3 columns, two inner sections (with 2 addons in it), and one addon "solo". But with no extra CSS.

Guys, you decide =).
Hallo Michael,

ich würde dir gerne helfen: beschreibe mal bitte was du genau gemacht hast

Hi,

ich hab das alles nach deiner Anleitung gemacht - trotzdem erhalte ich im SPB 3.1 folgendes Ergebnis:
Attachments (1)
I would have done that with nested rows within PageBuilder already...make a 3-column row, make the left and right columns into 2-columns, then you end up with 5 columns.

if you set margins and column widths correctly, it works without extra CSS etc.


not equal
I would have done that with nested rows within PageBuilder already...make a 3-column row, make the left and right columns into 2-columns, then you end up with 5 columns.

if you set margins and column widths correctly, it works without extra CSS etc.


not equal

I had no Problem with your solution Andrey, thank you. I figured it out with negative margin etc. TOP


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.