SP Page Builder 3.1 comes with gradient background, addon saving as preset and more - JoomShaper

SP Page Builder 3.1 comes with gradient background, addon saving as preset and more

08 January 2018
Hits 16,391
4 min read
SP Page Builder 3.1 comes with gradient background, addon saving as preset and more

Let’s start this year with a bang, an updated version of your most beloved and most famous drag and drop visual page composer tool SP Page Builder. On the pledge of introducing you to the latest technological advancements in our product, today we are going to release SP Page Builder 3.1. Let's see what's inside!

New features of SP Page Builder 3.1

  • Gradient background for rows, columns, and addons
  • Save addons as presets in the library
  • Resizable sidebar
  • Navigation addon
  • Custom CSS field for addons
  • Re-designed Background effect bar

We have made lots of other modifications and fixes as well. You can find more details below. 

Gradient background

Figure: Adding gradient background

According to many design experts, gradient backgrounds will be the trend in the coming years. To let you have a gun loaded, we have introduced the gradient background feature with SP Page Builder 3.1. Now you can add a multicolor gradient in the section background of your website. You can declare the background of an element (row, column and addon) to be not only in solid color, but also to be a linear or radial gradient. Using gradients, rather using an actual image file, is better for site performance. Gradient size will match the size of the element it applies to. It lets you display smooth transitions between two specified colors. You can also set a starting point and a direction (or an angle) along with the gradient effect. Yes, our gradients also support transparency, which can be used to create fading effects.

Resizable sidebar

Figure: Resizing the Page Builder frontend sidebar

We agree that the frontend sidebar of SP Page Builder should be resizeable, rather than being a fixed size, so that editors can take up more or less of the screen. The new-generation frontend sidebar of SP Page Builder 3 is now more improved with a new scalability feature. With today's update, you can resize the sidebar of SP Page Builder easily to fit to your screen. If you have a big screen or high resolution display, you can manually increase the width of the front-end editor toolbar using the mouse to fill the available space on screen.

Addon saving as preset

Navigation addon

Figure: Addon saving as preset

Since this update, not only rows, but also addon designs (with their settings) can be saved and used later from addon library around your whole website. That means, now you can save addons as presets in the Saved Addons library (just like the saved sections feature).

Navigation addon

Navigation addon

Figure: Navigation addon

The brand new Navigation addon is introduced in SP Page Builder 3.1 which allows you to create a sort of (navigation) menu with custom links and icons before titles. This addon has features to be "Sticky" and to use "Scroll To" and can be used as a typical navigation, with chosen alignment (left, right or center) useful for RTL languages. Great solution for onepage type layouts, especially for landing page projects.

Full changelog

Here is the changelog for SP Page Builder 3.1.

  • New: Gradient background for rows, columns, and addons
  • New: Save addons as presets in the library
  • New: Resizable sidebar
  • New: Navigation addon
  • New: Custom CSS field for addons
  • New: Re-designed background effect bar
  • Tweak: Extra checkbox field for Contact Form addon
  • Tweak: Improved box shadow in input UX
  • Tweak: Margin, border and border-radius options for columns
  • Tweak: Negative value for Heading addon letter spacing
  • Tweak: Link field now supports attachments for Heading and Image addons
  • Tweak: Text transformation and shadow for Heading addon
  • Fix: Margin and padding value split conflict with old data
  • Fix: Addon default value init in Article
  • Fix: OG image issue
  • Fix: JCE editor link prettify issue
  • Fix: Image content empty button text issue
  • Fix: Backend settings drop down menu overflow issue
  • Fix: Link color for Feature addon issue
  • Fix: Google maps not showing in articles with integration enabled

We strongly believe that this update will be of a great use to your everyday web development activities. SP Page Builder 3.1 is one of the many exciting surprises for you from us in 2018. Please stay tuned and keep providing your valuable feedback. Cheers! 

Try SP Page Builder for FREE!    Get SP Page Builder

Shayan Davoodi
Shayan Davoodi
6 years ago
Great work guys :D I didn't exactly get what "Navigation addon" does and how it works.
I will try it to find out
Paul Frankowski
Paul Frankowski
6 years ago
Our new addon, It's like basic menu builder.
On screenshot look at the top , back BG
Marcelo Alcantara
Marcelo Alcantara
6 years ago
This sounds good! :)
Paul Frankowski
Paul Frankowski
6 years ago
Thanks, I guess we both can sing:
[quote]We built this component together,
we built this component on rock an' roll[/quote]
stq74
stq74
6 years ago
Excellent guys, as usual ...
The navigation addon is a great idea, an option drop-down menu would have been great.
Paul Frankowski
Paul Frankowski
6 years ago
Thanks, main purpose for this addon were OnePage layouts.

H
Hjalte
6 years ago
Great:)

Just updated and cleared cache.

Can't find background image in row option anymore ?
Raju Ahmmed
Raju Ahmmed
6 years ago
Hello,

Select image option at [b]Enable Background Options[/b]. I hope you will get your image background option :)

Thanks
R
Rupert
6 years ago
Resizeble sidebar? THANK YOU!
Arafat Bin Sultan
Arafat Bin Sultan
6 years ago
Welcome, Rupert! We always value your feedback and feelings. So, keep expressing!
R
Rupert
6 years ago
But wait a mo, doesn't work on latest FireFox on Mac :-(
Paul Frankowski
Paul Frankowski
6 years ago
And what about Safari, Is okay there?
---
On Windows Firefox 57.0 all is OKAY, works smoothly.

As you know Apple doesn't like alternative browsers :p:p
Raju Ahmmed
Raju Ahmmed
6 years ago
Hello Rupert,

I have checked on latest Firefox on Mac. It's working fine.
R
Rupert
6 years ago
Doesn't work with Safari on Mac
R
Rupert
6 years ago
I see the <--> icon when hovered over the edge but dragging doesn;t do anything :-(

Sad. Sob
F
forhair
6 years ago
what about the switch to turn off open graph???
Paul Frankowski
Paul Frankowski
6 years ago
Not possible yet, but we have that topic on our TO DO LIST, believe us.
Mo Ahmed
Mo Ahmed
6 years ago
I've played around a bit.

A few suggestions;

1. Extra options like hover or click (makes it easier for tablet navigation)
2. Submenus
3. Define the position from top when sticky would be good, as you can have the primary menu navigation to be sticky too.
Arafat Bin Sultan
Arafat Bin Sultan
6 years ago
Thanks, Mohammed Ahmed for your suggestions. Our developer team will take a look at these.
A
Andrea
6 years ago
Goog joob but i have an problem with modal-popup and is not resolved ..i'm so frustating..
https://www.joomshaper.com/forums/row-disappear-in-modalpopup
i update to the last version SP PG 3.1 and clear cache but dont' work.
Please help me
Paul Frankowski
Paul Frankowski
6 years ago
It will be fixed in next update, we are really sorry that you have to wait..
A
Andrea
6 years ago
thanks Paul
Syed H
Syed H
6 years ago
Congrats on another milestone... Keep em coming...

Best Regards,
Syed H
Paul Frankowski
Paul Frankowski
6 years ago
Thanks Syed, every good vote counts.
pepperstreet
pepperstreet
6 years ago
Thank you very much for RESIZABLE SIDEBAR! Should have been a 3.0 feature...
PLEASE, would you try to implement an option to switch from left position to the RIGHT!? Actually, I don‘t make use of the Frontend editor because of the left position. Another cool feature or alternative would be a FLOATING bar... you might have a look at and inspiration from WP’s DIVI BUILDER ;)
Paul Frankowski
Paul Frankowski
6 years ago
Why You cannot look at the left side on screen?
Oh, RTL language right.
pepperstreet
pepperstreet
6 years ago
For a right-handed user, it feels strange and wrong. Especially on big wide screens.
Paul Frankowski
Paul Frankowski
6 years ago
I use mouse in right-hand , indeed I never think about it in this way.
pepperstreet
pepperstreet
6 years ago
Lucky guy! I do it all the time... and my brain feels like a gordian knot.
Paul Frankowski
Paul Frankowski
6 years ago
I added your request on our dashboard today.
pepperstreet
pepperstreet
6 years ago
NAVIGATION Add-On is a nice feature. Is it possible to turn it into a so-called DOT navigation? Where dots or icons float on the left or right window border.
R
Rupert
6 years ago
Can you pls fix the resizeablw sidebar?
Paul Frankowski
Paul Frankowski
6 years ago
For which browser?
---
We tested for Safari OSX
Windows : Chrome, Firefox, Brave.
pepperstreet
pepperstreet
6 years ago
Trying OSX and [b]Safari 11[/b].02xxx. Does [b]not[/b] work for me. I have used your pagebuilder online demo, also deleted cache. [b]No success[/b].
Paul Frankowski
Paul Frankowski
6 years ago
Indeed Safari problem, we will check & fix it asap.
Hopefully in Chrome/Firefox OSX should work.
BTW
Why every browser is so difficult in use , brrr.
pepperstreet
pepperstreet
6 years ago
BACKGROUNDS: Almost complete...
What about adding the CSS BLEND MODES as an additional parameter?!
Paul Frankowski
Paul Frankowski
6 years ago
We thought about it, but it's not supported by IE/Edge.
https://caniuse.com/#search=mix-blend-mode
pepperstreet
pepperstreet
6 years ago
ADDON PRESETS: Is a nice time-saver and a workaround for color consistency...
But In regards of colors, I would really like to see a COLOR PALETTE or PRESET feature. Colors should be defined globally and should be reusable in all the color parameters. This is much more intuitive, and much faster. Maybe colors could be defined as LESS/SASS variables...
D
debbie
6 years ago
Our biggest issue with SP Pagebuilder is that we cannot front-end edit in anything but the default template. We don't use that template for all of our pages, and the section that we are using SP Pagebuilder in more than any other uses a different template. Now, when we try to edit those pages from the front-end, they are thrown into the default template, which isn't how they look at all. Is this in the version yet?
Rudolf Arlt
Rudolf Arlt
6 years ago
Resizable sidebar do not work in Firefox
Rudolf Arlt
Rudolf Arlt
6 years ago
Gradient background do not work in Firefox
Rudolf Arlt
Rudolf Arlt
6 years ago
after Ctrl+F5 it all works on Firefox, You make a great Job.
Paul Frankowski
Paul Frankowski
6 years ago
Big Thanks Rudolf.
Honest advice next time clear browser cache before posting, hahah. ;)
A
Ales
6 years ago
Resizable side bar doesnt work on Mac - Safary 11.0.1. and Crome version 63.0.3239.84 but [b]it works fine[/b] on firrfox Quantum.
Raju Ahmmed
Raju Ahmmed
6 years ago
Hello,

Can you clear cache and try again? The resizable sidebar doesn't work on Safari. We know this. But it's should work with Chrome.
A
Ales
6 years ago
I did that and still the same. But it is also one interesting issue. When I oppen in Firefox on macbook main screen, it works fine, but when I grab and move it to my second screen... don't work any more. Just for info.
Igors
Igors
6 years ago
Hi Friends. Realy thanks for resizable sidebar. I use 34' monitor and it is the best option. Now you need only add code editor :)
Paul Frankowski
Paul Frankowski
6 years ago
In v3.1 we used Code Editor for Custom CSS fields in addons.
EM
Elmir Mustafic
6 years ago
And finally checkbox for contact form, thanks a lot and i'm so happy we could met at JWC Rome e talk about it :)
Paul Frankowski
Paul Frankowski
6 years ago
Thanks, many users asked for it, because of their law legislation (Privacy Policy).
GT
Germain Thomas
6 years ago
Nice ! the navigation is awesome but can you add sub-item for the navigation ?

Thanks
Paul Frankowski
Paul Frankowski
6 years ago
thanks, as I said before, this addon was designed for simple menus only. If you need advanced I suggest to use MegaMenu Module or similar from JED.
M
Mackie
6 years ago
Hello! Could you make the compatibility of "SP Page Builder" with the Joomshopping component so that it can be used for descriptions of products, categories, manufacturers, sellers, for descriptions of delivery methods, payment, user groups and static texts?
M
Mackie
6 years ago
Can you do the integration of "SP Page Builder" with the Joomshopping component? Read my previous post # 4525.
NF
Nur Faezah
6 years ago
sp page builder not showing in website after joomla version 3.8.5 updated.:(

Sign up for our newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.