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 13,688
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

Comments (55)

Shayan Davoodi
Shayan Davoodi
This comment was minimized by the moderator on the site

Great work guys I didn't exactly get what "Navigation addon" does and how it works.
I will try it to find out

Paul Frankowski
Paul Frankowski    Shayan Davoodi
This comment was minimized by the moderator on the site

Our new addon, It's like basic menu builder.
On screenshot look at the top , back BG

Marcelo Alcantara
Marcelo Alcantara
This comment was minimized by the moderator on the site

This sounds good!

Paul Frankowski
Paul Frankowski    Marcelo Alcantara
This comment was minimized by the moderator on the site

Thanks, I guess we both can sing:

We built this component together,
we built this component on rock an' roll

stq74
stq74
This comment was minimized by the moderator on the site

Excellent guys, as usual ...
The navigation addon is a great idea, an option drop-down menu would have been great.

Paul Frankowski
Paul Frankowski    stq74
This comment was minimized by the moderator on the site

Thanks, main purpose for this addon were OnePage layouts.

H
Hjalte
This comment was minimized by the moderator on the site

Great

Just updated and cleared cache.

Can't find background image in row option anymore ?

Raju Ahmmed
Raju Ahmmed    Hjalte
This comment was minimized by the moderator on the site

Hello,

Select image option at Enable Background Options. I hope you will get your image background option

Thanks

R
Rupert
This comment was minimized by the moderator on the site

Resizeble sidebar? THANK YOU!

Arafat Bin Sultan
Arafat Bin Sultan    Rupert
This comment was minimized by the moderator on the site

Welcome, Rupert! We always value your feedback and feelings. So, keep expressing!

R
Rupert
This comment was minimized by the moderator on the site

But wait a mo, doesn't work on latest FireFox on Mac :-(

Paul Frankowski
Paul Frankowski    Rupert
This comment was minimized by the moderator on the site

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

Raju Ahmmed
Raju Ahmmed    Rupert
This comment was minimized by the moderator on the site

Hello Rupert,

I have checked on latest Firefox on Mac. It's working fine.

R
Rupert    Raju Ahmmed
This comment was minimized by the moderator on the site

Doesn't work with Safari on Mac

R
Rupert
This comment was minimized by the moderator on the site

I see the <--> icon when hovered over the edge but dragging doesn;t do anything :-(

Sad. Sob

F
forhair
This comment was minimized by the moderator on the site

what about the switch to turn off open graph???

Paul Frankowski
Paul Frankowski    forhair
This comment was minimized by the moderator on the site

Not possible yet, but we have that topic on our TO DO LIST, believe us.

Mo Ahmed
Mo Ahmed
This comment was minimized by the moderator on the site

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    Mo Ahmed
This comment was minimized by the moderator on the site

Thanks, Mohammed Ahmed for your suggestions. Our developer team will take a look at these.

A
Andrea
This comment was minimized by the moderator on the site

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    Andrea
This comment was minimized by the moderator on the site

It will be fixed in next update, we are really sorry that you have to wait..

A
Andrea    Paul Frankowski
This comment was minimized by the moderator on the site

thanks Paul

Syed H
Syed H
This comment was minimized by the moderator on the site

Congrats on another milestone... Keep em coming...

Best Regards,
Syed H

Paul Frankowski
Paul Frankowski    Syed H
This comment was minimized by the moderator on the site

Thanks Syed, every good vote counts.

pepperstreet
pepperstreet
This comment was minimized by the moderator on the site

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    pepperstreet
This comment was minimized by the moderator on the site

Why You cannot look at the left side on screen?
Oh, RTL language right.

pepperstreet
pepperstreet    Paul Frankowski
This comment was minimized by the moderator on the site

For a right-handed user, it feels strange and wrong. Especially on big wide screens.

Paul Frankowski
Paul Frankowski    pepperstreet
This comment was minimized by the moderator on the site

I use mouse in right-hand , indeed I never think about it in this way.

pepperstreet
pepperstreet    Paul Frankowski
This comment was minimized by the moderator on the site

Lucky guy! I do it all the time... and my brain feels like a gordian knot.

Paul Frankowski
Paul Frankowski    pepperstreet
This comment was minimized by the moderator on the site

I added your request on our dashboard today.

pepperstreet
pepperstreet
This comment was minimized by the moderator on the site

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
This comment was minimized by the moderator on the site

Can you pls fix the resizeablw sidebar?

Paul Frankowski
Paul Frankowski    Rupert
This comment was minimized by the moderator on the site

For which browser?
---
We tested for Safari OSX
Windows : Chrome, Firefox, Brave.

pepperstreet
pepperstreet    Paul Frankowski
This comment was minimized by the moderator on the site

Trying OSX and Safari 11.02xxx. Does not work for me. I have used your pagebuilder online demo, also deleted cache. No success.

Paul Frankowski
Paul Frankowski    pepperstreet
This comment was minimized by the moderator on the site

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
This comment was minimized by the moderator on the site

BACKGROUNDS: Almost complete...
What about adding the CSS BLEND MODES as an additional parameter?!

Paul Frankowski
Paul Frankowski    pepperstreet
This comment was minimized by the moderator on the site

We thought about it, but it's not supported by IE/Edge.
https://caniuse.com/#search=mix-blend-mode

pepperstreet
pepperstreet
This comment was minimized by the moderator on the site

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
This comment was minimized by the moderator on the site

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
This comment was minimized by the moderator on the site

Resizable sidebar do not work in Firefox

Rudolf Arlt
Rudolf Arlt
This comment was minimized by the moderator on the site

Gradient background do not work in Firefox

Rudolf Arlt
Rudolf Arlt
This comment was minimized by the moderator on the site

after Ctrl+F5 it all works on Firefox, You make a great Job.

Paul Frankowski
Paul Frankowski    Rudolf Arlt
This comment was minimized by the moderator on the site

Big Thanks Rudolf.
Honest advice next time clear browser cache before posting, hahah.

A
Ales
This comment was minimized by the moderator on the site

Resizable side bar doesnt work on Mac - Safary 11.0.1. and Crome version 63.0.3239.84 but it works fine on firrfox Quantum.

Raju Ahmmed
Raju Ahmmed    Ales
This comment was minimized by the moderator on the site

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    Raju Ahmmed
This comment was minimized by the moderator on the site

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.

I
Igors
This comment was minimized by the moderator on the site

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    Igors
This comment was minimized by the moderator on the site

In v3.1 we used Code Editor for Custom CSS fields in addons.

EM
Elmir Mustafic
This comment was minimized by the moderator on the site

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    Elmir Mustafic
This comment was minimized by the moderator on the site

Thanks, many users asked for it, because of their law legislation (Privacy Policy).

GT
Germain Thomas
This comment was minimized by the moderator on the site

Nice ! the navigation is awesome but can you add sub-item for the navigation ?

Thanks

Paul Frankowski
Paul Frankowski    Germain Thomas
This comment was minimized by the moderator on the site

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
This comment was minimized by the moderator on the site

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
This comment was minimized by the moderator on the site

Can you do the integration of "SP Page Builder" with the Joomshopping component? Read my previous post # 4525.

NF
Nur Faezah
This comment was minimized by the moderator on the site

sp page builder not showing in website after joomla version 3.8.5 updated.

There are no comments posted here yet

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.