Print

You can manage the way to show your elements (row, column, item) in 4 responsive resolutions that you can define in px.

To enable the responsive options, click on the Responsive settings button.

responsive toolbar

You can click on the 4 buttons on the top to select which resolution to activate (phone / tablet…).

Custom Responsive resolution (rep. 1)

For each resolution you can give a custom value in px. This value will be used for all pages on the website. Go in the admin menu >> Page Builder CK component and then click on the Options button.

responsive options

Go in the Responsive tab, you will see the 4 resolutions where you can write your own values.

responsive options details

 

Row settings – Aligned / Stacked / Hidden (rep. 2)

In responsive mode, for each resolution you can select how do you want to show the elements in the row.

Note that there is some relation between the resolutions, for example if you set the Tablet/portait to be stacked, all lower resolutions (phone) will also be stacked automatically.

In the same way, for example if you set the row to the aligned on mobile / landscapte, all higher resolutions (tablet) will automatically become aligned too.

 

Column and item settings – Show / Hide (rep. 3 + 4)

For each column and item you can choose if you want it to be shown or hidden for the selected resolution. Just click on the show/hide button to choose.

responsive example

Note that there is some relation between the resolutions, for example if you hide an element on Phone/landscape then it will be hidden for all lower resolutions (phone/portrait) automatically.