1. SP Page Builder 3.x
  2. Wednesday, 12 February 2020
I create a page from sp page builder, using any template, and looks great under Helix 3:
ss02.png

But I need pages as joomla articles, so I use the article integration, create a new article, import the same template and save, but full width is not working:
ss01.png

How can I make article looks the same as pagebuilder page?
Attachments (2)
Accepted Answer
I think the way I proposed above is safer and more versatile. Despite the fact that requires a bit more manual work. Although, you can just keep the section template that contains class phm-mod-article-full-width-section, that would not add it manually every time.
But you can try it for a full article without adding a class to each section.
Use the following code. This code only for the article. Not for the module.

/*************SPPB Full Width Article*******/
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
margin: auto;
}
@media (min-width: 1140px) {
.sp-page-builder.sppb-article-page-wrapper {
margin: 0 -21vw !important;
}
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
max-width: 1140px;
}
}
@media (max-width: 1140px) {
.sp-page-builder.sppb-article-page-wrapper {
margin: 0 -10vw !important;
}
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
max-width: 992px;
}
}
@media (max-width: 991px) {
.sp-page-builder.sppb-article-page-wrapper {
margin: 0 -16vw !important;
}
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
max-width: 768px;
}
}
@media (max-width: 767px) {
.sp-page-builder.sppb-article-page-wrapper {
margin: 0 -17vw !important;
}
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
max-width: 576px;
}
}
@media (max-width: 575px) {
.sp-page-builder.sppb-article-page-wrapper {
margin: 0 -5vw !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
max-width: 100%;
}
}
/*****************End******************/
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # Permalink
Responses (8)
You are wellcome :)
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 1
That's a pretty nice solution!
I've tried on-the fly and seems to work as I expected.
I'll read it carefuly, although it looks quite simple.
I like it! Thank you very much, Pavel!
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 2
Thank you, Pavel, this is really useful
I want the full article shows up like a pagebuider page, I mean, not only a section.
So I should add this css class to all rows in all SPPB pages.

How could I apply this style to all SPPB rows inside an article?
Could it be possible to make it work for all <section> elements inside a "<div id="sp-page-builder" class="sp-page-builder sppb-article-page-wrapper">"?
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 3
Actually I finished. You can test it.
This code is for the sections in the articles and sections in the modules, if the module is inserted into a standard joomla editor (such as the description of the category).
How to use.
Paste the following class in the css class field of section that you want to stretch.

phm-mod-article-full-width-section

Paste the following code into custom.css file.

/*************SPPB Full Width Section for articles and sppb modules*******/
.phm-mod-article-full-width-section .sppb-row-container,
.phm-mod-article-full-width-section .sppb-container-inner {
margin: auto;
}
@media (min-width: 1140px) {
.phm-mod-article-full-width-section {
margin: 0 -21vw !important;
width: inherit !important;
}
.phm-mod-article-full-width-section .sppb-row-container,
.phm-mod-article-full-width-section .sppb-container-inner {
max-width: 1140px;
}
}
@media (max-width: 1140px) {
.phm-mod-article-full-width-section {
margin: 0 -10vw !important;
width: inherit !important;
}
.phm-mod-article-full-width-section .sppb-row-container,
.phm-mod-article-full-width-section .sppb-container-inner {
max-width: 992px;
}
}
@media (max-width: 991px) {
.phm-mod-article-full-width-section {
margin: 0 -16vw !important;
width: inherit !important;
}
.phm-mod-article-full-width-section .sppb-row-container,
.phm-mod-article-full-width-section .sppb-container-inner {
max-width: 768px;
}
}
@media (max-width: 767px) {
.phm-mod-article-full-width-section {
margin: 0 -17vw !important;
width: inherit !important;
}
.phm-mod-article-full-width-section .sppb-row-container,
.phm-mod-article-full-width-section .sppb-container-inner {
max-width: 576px;
}
}
@media (max-width: 575px) {
.phm-mod-article-full-width-section {
margin: 0 -5vw !important;
padding-left: 20px !important;
padding-right: 20px !important;
width: inherit !important;
}
.phm-mod-article-full-width-section .sppb-row-container,
.phm-mod-article-full-width-section .sppb-container-inner {
max-width: 100%;
}
}
/*****************End******************/
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 4
Through css is not so difficult if you have css knowledge. You just have to work with sppb section and sppb container for five breakpoints. Without affecting the article layout
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 5
That sounds extremelly difficult and time-consuming
It's easy to override an article layout, but I need to create a new one from scratch
There are body classes as "com-sppagebuilder view-page"
There is an <article> element instead of a "<div id="sp-page-builder" class="sp-page-builder">

So I should need to create a full layout.
There must be an easier way
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 6
Hi. Limiting the width of the article is a feature of Joomla. You need to override the article layout and then edit it code. How to do it - see the documentation on joomla.org. Or you can write a pretty big css code snippet trick that involves all breakpoints. Now I am developing such a snippet. And if I can do it, I will share it with the community. But I can not guarantee that it will happen :)

When Sp PB in the article - it's just another one of its additional editor. And nothing more
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 7


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.