Support Forums

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

Your Time: Our Time:

How to build up this layout?

Featured Lock Resolved Task
Hi there,
I am using Page Builder Pro. I am playing around for one hour now and I cant get it to work.

How is it possibile to build up a page with following layout, see attached file.

Best regards,
kweb

Attachments (1)

  • file.jpg
    file.jpg 32.2 KB

12 Answers

pepperstreet

More than a month ago #Permalink
Hey Paul, great minds think alike! ;) I guess, I prepared my screenshots and examples while you were writing your comment... bummer... anyways, here we go:

There are two possible setups.

1. With 1 nested row and wrapping columns. See screenshots with leading "1"

2. Classic setup with 2 nested rows. See screenshots with leading "2"

Additionally for both cases, you might enable "Equal Height Columns" for the outer Row.
Hope this helps.

Attachments (5)

  • 1_nested_row_wrapping_columns_frontend.png
    1_nested_row_wrapping_columns_frontend.png 69.1 KB
  • 1_nested_row_wrapping_columns_backend.png
    1_nested_row_wrapping_columns_backend.png 38.2 KB
  • 1_wrapping_columns_setup.png
    1_wrapping_columns_setup.png 22.9 KB
  • 2_nested_rows_frontend.png
    2_nested_rows_frontend.png 188 KB
  • 2_nested_rows_backend.png
    2_nested_rows_backend.png 42.3 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
Sure You Can. You have to use nested Rows, I mean Row in Row.

Tip: https://www.joomshaper.com/documentation/sp-page-builder/sp-page-builder-2-x#how-to-use-nesting-rows

Paul Frankowski - Staff

More than a month ago #Permalink
@pepperstreet - big thanks.
Next time just make Export Page , zip and add as a attachment - it will be faster :p ;)

pepperstreet

More than a month ago #Permalink
@pepperstreet
Next time just make Export Page , zip and add as a attachment - it will be faster :p ;)

Yep, thought about it! But that would not "teach" anything. "Learning by doing" will help the user to understand the problem and solution! ;)

Paul Frankowski - Staff

More than a month ago #Permalink
I fully agree, maybe I will add a short video clip into manual soon :)
thanks again.

pepperstreet

More than a month ago #Permalink
I fully agree, maybe I will add a short video clip into manual soon :)
thanks again.


BTW, I wanted to report this small issue/bug for quite some time... but forgot about it:
See my previous backend screenshots. The nested Row does not display any admin title.

Paul Frankowski - Staff

More than a month ago #Permalink
Opss, you're right. Sent to developers.

kweb

More than a month ago #Permalink
Hi there, thanks for your answers I could figure it out with the help of that. But I dont understand why this empty space is appearing (see screenshot).

http://kares-webdesign.de/entwicklung/mehrhof/index.php/pages/schueco-kunststofffenster

The container

<div class="sppb-section-title sppb-text-center">

is in charge of it but how can I deactivate it?

kweb

Attachments (1)

  • space.jpg
    space.jpg 150.2 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
it looks that you have addon or title above.
Check / disable / delete

Attachments (1)

  • 00.png
    00.png 42.4 KB

kweb

More than a month ago #Permalink
Hi,
it looks that you have addon or title above.
Check / disable / delete


Ah yes I made the mistake to set a new nested row. Now working, thanks!

Paul Frankowski - Staff

More than a month ago #Permalink
You're welcome.
---
Advice:
Make telefon number click-able for Silke (addon above).

<a href="tel:5634.....">+49 (0) 5634....</a>


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: 207
Sifat

Sifat

Total Accepted Answers: 129
Toufiq

Toufiq

Total Accepted Answers: 86
Pavel

Pavel

Total Accepted Answers: 6
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 4

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

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us