Support Forums

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

Your Time: Our Time:

How can I make templates page box layout from SP page builder !!!

Featured Lock Resolved Task
hi,

I have query related to the see attached image and link. So could you tell me, how can I make same layout box from sp page builder? give me any tutorial or guide me please.

See attached image / https://www.joomshaper.com/joomla-templates

Thanks,
-Sohail

Attachments (1)

  • templates_box_layout.jpg
    templates_box_layout.jpg 35.7 KB

9 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
yes, it was built using SPPB Pro.
In general, we do not give CSS lessons here.
But the solution was/is pretty easy:
two rows:
1) with image or slider
2) with an addon and this row should have a negative top margin
for example

margin-top: -180px;

yes, from Row Options.

Sohail Ghani

More than a month ago #Permalink
Hi,
yes, it was built using SPPB Pro.
In general, we do not give CSS lessons here.
But the solution was/is pretty easy:
two rows:
1) with image or slider
2) with an addon and this row should have a negative top margin
for example

margin-top: -180px;

yes, from Row Options.




Hi,

I didn't say to you give me CSS lessons here. I was asking you how can I make this If is it created in SP PAGE BUILDER PRO 3 to share any tutorial or guide me please.

I have tired this but its not exactly same like your website.
here is demo link



regards,
SG

Paul Frankowski - Staff

More than a month ago #Permalink
We do not have a tutorials for customizations, especially for commercial projects.
---
I can give you an extra tip, but I have to see mockup how it should look like,
now I see 3 boxes.

Do you remember what I said about ad1) I don't see any row with bg image now.

Paul Frankowski - Staff

More than a month ago #Permalink
BTW
Look at boxes here:
http://demo.joomshaper.com/2017/educon/
Or single block here:
http://demo.joomshaper.com/2017/spectrum/
----
Anyway, First I will see graphic mockup then we can talk further, I don't want to guess..

Paul Frankowski - Staff

More than a month ago #Permalink
About travus layout, as I said there are two rows.
.
travus.jpg

Attachments (1)

  • travus.jpg
    travus.jpg 248.2 KB

Sohail Ghani

More than a month ago #Permalink
Hi Paul,

I tired to give (-180px margin) in the row setting but image layout out. see my attached image. what i did in the backend sp page builder page.


Thanks,
sg3box1.jpg

Attachments (1)

  • sg3box1.jpg
    sg3box1.jpg 126.2 KB

Paul Frankowski - Staff

More than a month ago #Permalink
But where is mock-up how it should look?

Sohail Ghani

More than a month ago #Permalink
But where is mock-up how it should look?


Mock website link, I have PM in your inbox. again I tired to give -180px margin in the top first row setting but it does not effect .
sg3box21.jpg

Further I have checked browser inspect -180px margin top is disable or row setting is not taking top margin -180px
see attached image
sg3box2_inspect1.jpg


reagrds,
Sohail

Attachments (2)

  • sg3box21.jpg
    sg3box21.jpg 87.6 KB
  • sg3box2_inspect1.jpg
    sg3box2_inspect1.jpg 143 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Sorry, but I still do not see what is your goal.
What must be where? Mock-up -- is something else, read more before next post.


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

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 126
Sifat

Sifat

Total Accepted Answers: 82
Toufiq

Toufiq

Total Accepted Answers: 39
Pavel

Pavel

Total Accepted Answers: 6
Sohan

Sohan

Total Accepted Answers: 3

114

Templates

292609

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