Joomla Page Builder - Illustrated examples of using custom styles | Joomla Templates and Extensions Provider

JoomlArt's Blog

Joomla Tutorials, info, Discussions and much more...

With JA Joomla Site Builder it becomes very easy to build Joomla page layouts and update typographic styles. For advanced users who love to implement custom css, our Builder tool supports custom styles for every element of the page.

Here are some illustrated examples of how easily one can use basic css skills to enhance the look and feel of their joomla pages right from the frontend. Do try replicating them on your dev sites, its fun learning.

how to customize Joomla page builder styles

To do that, open the edit mode of a page then open the SETTINGS sidebar.

customize Joomla page builder styles

Next, select Advanced configuration. There are 2 fields:

  • This Page Custom Styles: Add CSS rules to the field if you want to customize style for the current page only.
  • All Pages Custom Styles: Add CSS rules to the field if you want to customize style for all pages.

before style customization

You could see the changes when active mouse in other place.

after style customization

The CSS rules are auto saved, if you feel its okay, hit Publish button to push the changes to live site.

Please note that, the CSS rules added to the fields will override style from builder style files.

Some examples with before and after changes

Example 1

customize style example 1

Example 2

customize style example 2

Example 3

customize style example 3

Example 4

customize style example 3

Docs  FREE Download  Live Demo

JA Site builder blog posts:

BLOG COMMENTS POWERED BY DISQUS