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.

  • Aligned: they will be aligned horizontally (default behavior)
  • Stacked: they will be aligned vertically
  • Hidden: the whole row and all the elements inside will be hidden

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.

Newsletter

Fast and powerful creation, customizable and responsive.

Read More

Favorites extensions

logo maximenuck 110 logo pagebuilderck 110 logo slideshowck 110template creator ck large 449