Using Page Builder CK for Joomla, you can create some styles on any addon item (text, accordion, timeline, etc) and save this style to apply it to any joomla article or Page Builder CK page. You can use this style to render your items the same on all your pages and customize them in one place.
Styles interface
You can find the menu entry for the styles under the Page Builder CK component in the administrator menu of Joomla :
Here you can create how many styles as you want, this can be a style for a text area, a style for multiple addons in the same time, and you can apply one or more style per page or article.
Click on the New button to create a new style, it will open the interface where you can start to add some addons in the workspace. Take any addon and add it to the workspace :
Example with a button :
Then you can click on the edit icon to open the styles options in the left panel. You will see the options that you can use to style the item, here the button.
Update the values you need, for example use another background color and font size for the button, then save the style :
Your style is now saved under the name Pink button big. You can use this style on any page or Joomla article to be used to automatically give the appearance of the buttons.
You can add more addons in the same style, you can also style a row and a column to give some margins, font size or what you want to apply to your pages.
Don't forget that you can create multiple styles, for each need, and select each style separately for each page.
Select a style in a page or article
Once you have created a style (or more) in the Page Builder Ck component, you can select it in any article or page to apply the customization to your content. Edit your article and click on the Load a style icon in the left panel, it will show you the list of styles that you can use. For each style you can check the box to tell the program that you want to apply this style to the current article or page.
In our example we can select the Pink button big that we previously created :
Once the style(s) are selected, they are automatically and instantly loaded in your Joomla article or Page Builder CK page. At any moment you can choose to update it, select or unselect any style in the list.
Now you can add an addon in your content, for example a button. You can see that it does not inherit the selected style, this is because every addon has some default styles applied. You just have to remove that using the Clear the styles icon in the top of the edition of the addon :
Now that you have cleared the styles, the addon (the button in this case) will inherit the globla styles that you have defined :
This is easy to do and it has some advantages :
- you don't need to create or duplicate the stlyes for any item, just load the styles and apply it everywhere in the same way
- you can manage your website styles in a global way. Imagine that you want to update the color of the buttons, just edit the style and it will apply to any button using it
Setup some default styles for all the pages and articles
Now that you know how to apply a style in a Joomla article or a page, imagine that you need to do that for each article / page. ... Fortunately there is another setting available in the component options. Go in the Page Builder CK component >> options
You will get access to the settings of the component, you find the option called Styles to load. This is a select list where you can choose one or more styles that will automatically be loaded on each new page or article that you will create. When you start a new Joomla article, the style from the list Pink button big will be loaded.
You can still go in the styles list and deactivate it for one or more articles. If you change that choice into an article, it will be stored for that article, this means that you can override the default options.
If you want to select/deselect multiple styles, just use the CTRL key on your keyboard.
News