Getting started

Install the PixBuilder module ( see Installing and uninstalling ).

A new breed of page builder

The first thing to know about PixBuilder is its purpose. PixBuilder is a sort of page builder, utilising the Joomla! core: It is a module that displays articles. This is an important aspect for a couple of reasons.

First off, we at Pixpro like the design principle of separating presentation and content. A lot of available page builders mix these parts to achieve flexibility when setting up layout designs. The downside is that it becomes harder for the content writers to administrate the content without disrupting the layout. By having the content in Joomla! articles, content writers will have a single, familiar place to work in.

Second, by using Joomla! core as much as possible, the website becomes easier to manage and administrate. It is also easier to switch between ways of displaying content within Joomla! if everything is located where intended, and any related functionality in Joomla! can be utilised as well.

The basics: Selecting articles

There are two basic uses for PixBuilder: Setting up single pages with a complex layout and specific content, perhaps a landing page of some sort; and creating lightweight structures for repeated pages with a complex layout or intricate relationships.

The former primarily utilises the more static ways in PixBuilder to set up an article selection. For a set of specific articles, just simply select the corresponding article IDs. For a set of articles from a specific group, use the tag or category settings. Watch this live on our Pixpro Labs Demo site.

The latter instead makes use of the dynamic ways in PixBuilder to set up an article selection. This will utilise data available in the pages and menu items where the module is shown. With this possibility, the number of modules needed for a repeated page layout is reduced from one set per individual page to one set per page layout, which can greatly reduce the structure needed for a large website. Watch this live on our Pixpro Labs Demo site.

Selecting articles in PixBuilder can be done dynamically or more statically.

The basics: Setting up a layout

As PixBuilder is a module, some of the possibilities for a layout comes from the template used on the website. This includes module positions and rendering of the modules. Find a template that is as flexible as possible, without having to be too complicated. A good basic set of module positions and full rendering of the modules within these is all that is needed. Full rendering refers to things as rendering the module title, using the Advanced parameters for the module and such.

Independent of the type of page that is being created, the procedure is the same. Divide the page into sub layouts by identifying similarly styled sections of content, and in the case of creating a lightweight structure for repeated pages, identifying the sections with dynamic content. Depending of the content for the section, each sub layout can now be created with a PixBuilder module. Since the module is able to display multiple articles, sections with multiple blocks of same styled content can be created from a single module and multiple articles.

An example of both these types of pages is our own Pixpro Labs extension pages. These are landing pages of sort, and they are also pages with a repeated layout - one page for each extension. The image below illustrates a singular PixBuilder module displaying 3 articles in a grid. This module can be used on all the pages by utilising the dynamic article selection in PixBuilder. The setup works by combining tags and categories, and having IDs for these set in the respective menu item. The best options for this is probably Category Blog and Tagged Items.

The Pixpro Labs extensions pages showcase PixBuilder.

To create a clean page for us to build our layout on, we utilise the feature of hiding the system output for these pages. This feature comes with the excellent Yootheme template we use for our website.

The basics: Designing a layout

When the layouts are in place, they need some designing. This can be done in multiple steps, varying from super easy to a bit more difficult, depending on the coding skills available.

First off, the content that is to be displayed is chosen from within each PixBuilder module by selecting the corresponding options on the Display Options tab. This tab is made as comprehensive as possible, while still having a great user experience. The available options displayed are altered by each choice made, so that only the options that actually will have an effect are shown.

PixBuilder has a helpful user interface (UI).

When all the content is in place, the sub layout is chosen by selecting a corresponding Alternative Layout under the Advanced tab. There are a couple of layout templates available already, except for the default one, that uses the UIkit framework included in templates from Yootheme. It is also possible to create new alternative layouts by editing the default template. Basically, the only thing needed for this is to copy the default.php and default_items.php files, rename them and then edit the HTML in the default_items.php file. The file is very developer friendly with commented sections and clean code.

A more accessible way of making minor changes to the layout is to use the options available under the Advanced tab. Again, only options that will have an effect are shown. The options available are selecting the tag for each element in the layout and adding CSS classes to them. This can greatly modify the way the finished result looks like, and will lessen the need for super specific Alternative Layouts. Watch this live on our Pixpro Labs Demo site.

PixBuilder has options to alter the layout.