page builder

  • You can use Page Builder CK and Image Effect CK together to add amazing effects to your images !

    Add an image in your page using the image addon that you can drag and drop in your page anywhere. Select your image using the options in the left panel.

  • Use Page Builder CK to create amazing animated numbers ! You can set up the options to make it look as you want. You can play with the color, circle diameter and width, start and end number value, and many more. See the details explanations.

  • Basic usage

    To go to the Page Builder CK you can go in the Admin menu >> components >> Page Builder CK

    In this interface you can manage your pages

    • Create
    • Edit
    • Delete
    • Copy
    • Import
    • Export

    Once you have created your page you can

    • Create a new menu link to this page : use the menu item type Page Builder CK - Single Page
    • Add this page into an article using the pagebuilderck tag

    Create your pages into your articles

    You can directly create and edit your pages from the article editor without having to swith between multiple windows. Look at the explanations about "Manage the page in your article"

    Use the editor button

    Page Builder CK comes with a button editor that allows you to easily and quickly add and edit your pages from your editor.

    When you are in the edition interface of your page, you can use the left menu to drag and drop any element into the page (1).

    You can add rows, and also columns for each row. In each column you can add an element from the menu.

    If you mouseover an element you will be able to edit it using the icon in the toolbar that appears in the left corner (2).

    pbck edit
  • You can define a set a 5 colors that you can use when creating your content. This is called the color palette.

    Your color palette in Page Builder CK has 3 features :

    • Set up manual colors for the current page / article / module
    • Set up the colors in the component options (shared between every page / article / module)
    • Automatically retrieve the colors from the template created with Template Creator CK (since version 4.0.22)
  • When using a website with multiple users, you may want them to access to the edition to publish some content. But what about the medias upload ? The best solution is to get one media folder per user, and you can do that with Page Builder CK.

  • When you are editing your content using Page Builder CK, you must use the left panel and all the buttons from the interface. We will explain the main features here.

  • Créez un impressionant blog pour afficher vos articles. I suffit de glisser et déposer l'élément de type blog dans votre page et le tour est joué ! Sélectionnez ensuite le nombre d'articles, la catégorie source, le nombre de colonnes, etc...

  • The most recent designs are using even more full width areas to show everything. Sometime the background color is full width but the content is boxed and limited to a standard width, and sometimes the content is as large as the page (example for a slideshow). You can do all that with Page Builder CK.

    This article will explain you how to do that, but it will especially explain you that the "fullwidth" design is also related to your template. Of Couse Page Builder CK is fully compatible with Template Creator CK.

    On each row (of first level) you can choose how do you want it to be :

    • Fullwidth (by default)
    • Fullwidth with Javascript (forces to the screen size)
    • Fixed content width : value by default in the component option, or specific value for each row
    • Fixed content width, automatic with the template created with Template Creator CK
  • Créez votre propre galerie d'images avec Page Builder CK et l'addon Gallery.

  • How to use the Googlemap API Key

    To use the Google Map service you must have a Google account and ask for an API Key.

    First, login here :

    Then click on the "Google Maps Javascript API"

    Follow the steps to create a project for your website and ask for a "Server Key". Once you have your key you must activate it.

    Now you have your KEY to load a Google Map. But you can still not search for locations. To use the automatic geolocation (which retrieves the Latittude and Longitude using a Location name), you must also activate the "Google Maps Geocoding API"

    That's all, you can know copy / paste your API Key given by Google into the field in Page Builder CK.

  • Create your own image gallery with Page Builder CK and the addon Gallery.

  • Use Page Builder CK to create unlimited designs. You can have nested rows (rows in rows) with an unlimited number of imbricated levels.

    Just drag and drop your new Row from the left panel into the parent row, and that's it.

    You can :

    • Add a row in the page container
    • Add a row in another row
    • Manage the columns in every row
    • Move a row from the page container to another row
    • Move a row from a parent row to the page container
    • Move a row from a parent row to another row
  • When using Page Builder CK, you have to drag and drop the addons from the left panel into your content. By default the addons are not in a defined order.

  • You can use the tabs to show your content and give the user the ability to select what to read by clicking each tab. But how to do if you want to give the direct url that opens the desired tab ? You can do it using Page Builder CK !

  • Nowadays you can not create a website without taking care about how your SEO score. To help you in improving your SEO, Page Builder CK introduces a new feature to compile the CSS. This means that all the CSS fields and the inline styles generated from the component will be stored into one single file (per page). This reduces the number of server requests.

  • You shall know about the template override in Joomla! that allows you to change the html code that is rendered in the page. This technique is based on files that you shall put in your template and that will be used instead of the ones from the extension. Since the version 2.1.0 of Page Builder CK, you can now use an override technique to control the output from your template !

  • Plugin development - Overview

    You can develop a Page Builder CK plugin to extend the functionnality of the interface and add your own element type. For example if you want to add an element to show a Google Map.

    You will have to create the main plugin file with the needed functions :


    This will render the item in the menu to drag and drop in the page.

    	public function onPagebuilderckAddItemToMenu() {
    // load the google map API (must be unique in the page)
    $doc = JFactory::getDocument();
    // load the language files of the plugin
    // create the menu item
    $menuitem = new stdClass();
    $menuitem->type = $this->type;
    $menuitem->title = JText::_($this->context . '_MENUITEM_TITLE');
    $menuitem->description = JText::_($this->context . '_MENUITEM_DESC');
    $menuitem->image = JUri::root(true) . '/plugins/pagebuilderck/googlemap/assets/images/map.png';

    return $menuitem;

    Here we create an object $menuitem that will be used to create automatically the menu item in the interface.

    There is also a call to the google map api script. This could also be launched in the constructor function.

    onPagebuilderckLoadItemContent[plugin name]()

    This function will return the html code to put in the interface when the user drag and drop the item. This is what will be shown in the page in edition mode.

    	public function onPagebuilderckLoadItemContentGooglemap() {
    // ckstyle and inner classes are needed to get the styles from the interface
    $input = JFactory::getApplication()->input;
    $id = $input->get('ckid', '', 'string');
    <div id="<?php echo $id; ?>" class="cktype" data-type="<?php echo $this->type ?>">
    <div class="ckstyle">
    <div class="googlemapck inner">
    <img style="display:block;margin: 0 auto;" src="/<?php echo JUri::root(true); ?>/plugins/pagebuilderck/googlemap/assets/images/google_map_exemple.jpg" width="100%" height="auto" />
    <div class="googlemapmarkertitleck"></div>
    <div class="googlemapmarkercontentck"></div>

    The variable "ckid" is automtically sent by the interface to be sure that there is no duplicate ID in the page. Then you can create the html structure that you want.

    To use the automatic styling of the interface for the block, you must have add the "inner" css class to the html tag that is directly under the <div id="<?php echo $id; ?>" /> element and and add also the <div class="ckstyle" /> under it.

    The data-type attribute is used to identify which type of element is in the page. This is needed on your main tag.

    onPagebuilderckLoadItemOptions[plugin name]()

    This will load the interface with all options to manage the item features. Mainly it will load the file "edit_[plugin name].php" located in the folder "layouts" of the plugin. But you can write the html directly into the function or call another file.

    It will render what the user see when clicking on the edit button of the item.

        public function onPagebuilderckLoadItemOptionsGooglemap() {
            // load the language files of the plugin
            // load the interface for the options
            $tpl = JPATH_SITE . '/plugins/pagebuilderck/googlemap/layouts/edit_googlemap.php';
            return $tpl;

    Here we are just calling the "edit_googlemap" file where all options are displayed and managed. The structure of this file can be found here.

    onPagebuilderckRenderItem[plugin name]()

    This will manage the frontend rendering. You can choose to show exactly what has been created in the interface page, or to show something totally different based on the options.

    If you want to render exactly the same as what is shown in the interface (for example usefull for text, image, anything what does not need to be reworked) you can use the following function :

        public function onPagebuilderckRenderItem[plugin name]($item) {
            $html = $item->innertext;

            return $html;

    Else you can render what you want based on the item element that is in the interface. Example with the google map, which gets the infos and then render a real map instead of the interface where there is only an image.

        public function onPagebuilderckRenderItemGooglemap($item) {
            // load the helper to help us to use the parameters
            include_once JPATH_ADMINISTRATOR . '/components/com_pagebuilderck/helpers/pagebuilderckfront.php';

            // load the google map API (must be unique in the page)
            $doc = JFactory::getDocument();

            // ckstyle and inner classes are needed to get the styles from the interface
            $ckstyle = $item->find('.ckstyle');
            $styles = count($ckstyle) ? $ckstyle[0]->innertext : '';

            // get the content of the marker
            $content = $item->find('.googlemapmarkercontentck');
            $content = count($content) ? $content[0]->innertext : '';

            $mapattrs = $item->find('.tab_map'); // this is the tab id in the interface which contains the map options
            $params = PagebuilderckFrontHelper::createParamsFromElement($mapattrs);

            $html = '<style>
              #googlemap'.$item->attr['id'].' {
                width: ' . $params->get('mapwidth', '500px') .';
                padding-bottom: ' . $params->get('mapheight', '400px') .';
                height: 0;
                overflow: hidden;
            <div class="ckstyle">
                '. $styles . '
            <div class="googlemapck inner">
                <div id="googlemap'.$item->attr['id'].'"></div>
            function ck_map'.$item->attr['id'].'_initialize() {
                var mapCanvas = document.getElementById("googlemap'.$item->attr['id'].'");
                var mapOptions = {
                    center: new google.maps.LatLng(' . $params->get('latitude') . ', ' . $params->get('longitude') . '),
                    zoom: ' . (int) $params->get('mapzoom', 8) . ',
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                var map = new google.maps.Map(mapCanvas, mapOptions);
                var marker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng(' . $params->get('latitude', '44.5403') . ', ' . $params->get('longitude', '-78.5463') . '),
                    title: \'' . $params->get('markertitle', '') . '\'
                if (\'' . $content . '\') {
                    var infowindow = new google.maps.InfoWindow({
                        content: \'' . $content . '\'
                    marker.addListener(\'' . $params->get('markershowon', '') . '\', function() {
              , marker);
            google.maps.event.addDomListener(window, "load", ck_map'.$item->attr['id'].'_initialize());
            return $html;

    The $item variable sent to this function is a simple_html_dom element. You can find more infos on how to use here on the project page

    For example you can search for an element like this

    $ckstyle = $item->find('.ckstyle');

    and then return its content


    To get the params (options set by the user in the interface) you can use this

    $mapattrs = $item->find('.tab_map'); // this is the tab id in the interface which contains the map options
    $params = PagebuilderckFrontHelper::createParamsFromElement($mapattrs);
    $params->get('mapwidth', '500px')

    First you have to know in which edition tab you have put the options (see the file "edit_googlemap.php"). Here we are looking for the "tab_map" tab which is in fact the html ID of the container element where the options are shown.

    Just call the function "createParamsFromElement" to create automatically the Object from the options. Then you can get the value with the "get" function like any other Joomla! JRegistry element.

    Here you can see the typical plugin strcuture with the files and folders. It would be good to follow this structure to have a global way to do for all plugins.

  • Create some amazing web designs using the Shape divider

    Shape divider are graphical parts that you can add to separate the sections of your page. Hereafter is a preview of the shape dividers that are available into Page Builder CK.

     Examples of shape dividers

    shape asymetric slope shape cloud shape clouds shape drip shape ellipse shape mountain shape multiple slope shape multiple v3 slope shape multiple v slope shape multiple waves shape paper shape slope shape triangle shape triangle 3 shape triangle small shape v slope shape wave shap bridge


    How to add a shape divider

    Create at least 2 sections (rows) in your page.

    2 sections

    Edit the CSS styles of the bottom section

    css edition

    You will open the left panel where you will find the tab for the Shape divider

    edition panel

    List of options

    • Shape : select the shape that you want to use in the list
    • First color : this is the main shape color to fill the shape with
    • Second color : you can force the second color (mainly like a background color). In many cases you don't need it
    • Position : choose if you want the shape to take place at the top of the bottom of your section
    • Flip : normal or inverse, choose what you want
    • Placement : this will put the shape under the content (for example text over the shape), or the shape over the content (for example that cuts an illustration)
    • Height : this value can be set in % or px. By default it will be 100px, you can play with it to get the desired result
    • Width : this value can be set in % or px. By default it will be 100px, you can play with it to get the desired result. Note that a width in % will stretch the shape as a width in px will keep the shape ratio and cut it off


    Hereafter you will get the options to create a simple cloudy divider :

    shape coulds simple

    Example with 100% width

    demo clouds percent

    Example with 1000px width

    demo clouds 1000

Outil de création rapide, puissant et responsive.

En savoir plus