Styling Siteorigin Page Builder with CSS Hero

Learn how to easily customize your SiteOrigin Page Builder powered website by visually editing each element. You'll just need to install and activate the CSSHero WordPress plugin.

About this Plugin

Page Builder by SiteOrigin is a free powerful content builder WordPress Plugin with a very user-friendly interface.
With Page Builder you can craft custom content pages in no-time by choosing from a variety of different widgets which come built-in the plugin. Plus you can get some extra widgets by combining it with the Siteorigin Widgets Bundle which are all ready to be customised with CSS Hero out of the box.

Here’s an overview of the Page Builder widgets which you can customise with CSS Hero.

Editable SiteOrigin Widgets:

  • SiteOrigin Button
    A customizable button widget.
  • SiteOrigin Editor
    A rich-text, text editor.
  • SiteOrigin Features
    Displays a list of features.
  • SiteOrigin Google Maps
    A Google Maps widget.
  • SiteOrigin Headline
    A headline widget.
  • SiteOrigin Hero
    A big hero image with a few settings to make it your own.
  • SiteOrigin Image
    A simple image widget with massive power.
  • SiteOrigin Post Carousel
    Display your posts as a carousel.
  • SiteOrigin Slider
    A responsive slider widget that supports images and video.
  • SiteOrigin Social Media Buttons
    A social media buttons widget.

An incredible Drag and Drop and WYSIWYG developing experience

Building a custom page with Page Builder is as easy as drag and drop, you just need to setup your page rows and columns and then fill them with the content that suits you best. The plugins comes with a number of basic styling options which can now be extended with CSS Hero.

With CSS Hero you can finally get full control of your custom pages making them really unique.

Change Colors, fonts and others Siteorigin’s elements, live!

Changing the font-size, the font-color or any other CSS property of a Page Builder widget is now a matter of seconds with Hero. No more coding needed!

Plus CSS Hero fully supports Page Builder’s option to assign custom classes to rows and widgets. If a custom class is provided Hero will automatically generate the right CSS selector for that element giving you the ability to customise individually each element of your page on an element-class basis.

If you use (or plan to use) this Plugin...

CSS Hero can help you deeply and quickly customize the SiteOrigin Page Builder Plugin, solving some common issues like:

  • How to customize fonts in the SiteOrigin Page Builder WordPress Plugin, to make font biggers or change typeface for titles and header texts
  • How to change CSS background image on the SiteOrigin Page Builder WordPress Plugin and build background fades
  • How to change colors and styles on SiteOrigin Page Builder WordPress Plugin

Plugin Details

User Feedbacks

CSS Hero is the definitive plugin to customize your WordPress themes with an easy and intuitive WYSIWYG interface.

Affiliate

Become a CSS Hero affiliate and earn 40% on each sale right now. Spread the CSS Hero word and share the wealth with us!
Start Earning →

Follow the Hero