Store operators know that in order for visitors to become buyers, they need to be addressed directly. This works very well via images that trigger emotions.
Background is in the foreground
One of the most important adjusting screws: the background. Captivating background images and graphics have a direct impact on the success of your store.
With the new CMS Page Builder 4 for Smartstore, it's easy to add beautiful backgrounds to your online store. Page Builder is a tool that allows store owners to design fascinating content from products, merchandise groups, images, videos and texts with just a click of the mouse.
You can use a large image, a video for backgrounds in Page Builder, or even a graphic background as presented here:
The possibilities for backgrounds have been greatly expanded in Page Builder 4. Background layers can be added in any number and order.
Graphic backgrounds with CSS gradients
In this post I want to show you a special kind of background: the "CSS-Gradients". Gradient means color gradient, a more or less smooth transition from a color A to a color B. CSS gradients are fancy patterns created using CSS instructions. These are plain text and can be easily split and pasted. Designers can stack several simple gradients to create attractive background graphics in the final result. You as a store owner just paste the finished CSS code from the designer.
The advantages of these CSS gradients in backgrounds:
1. low loading time, because no pixel image, but space-saving CSS style.
2. easy handling, because there are no image files to manage
3. usable everywhere in the store, where CSS styles can be entered
4. expandable with own designs and additional page builder layers
Gradient gallery
A very good source for ready-made CSS gradients is:
https://www.gradientmagic.com/browse
Here you can find many free backgrounds based on CSS.
Example in Page Builder 4
In the screenshot you can see an example of how to use a CSS gradient as a story background in Page Builder 4.
Custom CSS backgrounds can also be inserted for Page Builder blocks:
More info on the topic: