Resolved Workaround: How to set up 5 equal Columns + Custom Admin Theme

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 .

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

Here´s a preview of the result:


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;
}