The option works proportionally and you can set fractures of the whole column width which contains 12 portions.
Wp plugin for responsive columns series#
(to find out more about what are these columns, please check this out) This option will be the default option for the next series of options in the Width and Responsiveness tab.
That's where the reverse option of Nimble Builder is useful.Use this option to set the default width for column in all browser window sizes. There are cases when you need to change this order and display the last column on top. This concept is illustrated with the picture below ( this is an example for non RTL language site, like English ) For example, in a row of 3 columns, the default behavior is that the first column on the left ( for non RTL sites ) goes on the top, and the last one goes at the bottom. Nimble Builder allows you to change the order of columns when re-organized vertically on mobiles. Reversing the column direction on mobile devices Note : when custom breakpoints are defined both sitewide, and specifically for a section, the section breakpoint "wins". Open the breakpoint tab and set your custom breakpoint.Sitewide custom breakpoint for all sections You can customize it for your entire site, and by sections. That's why the Nimble Builder allows you to customize the responsive break-point of the columns in your sections. This is the default value used by the Nimble Builder.īut there are sections for which the columns have to stay in a row for all devices, and not be rearranged vertically. On the web, the usual default value for this break-point is 768px. In web design, this is called the break-point value, and expressed in pixels. This is the default behavior for mobiles. On a smartphone mobile device, a row of columns is rearranged vertically into a single column layout. Open the visibility tab and set your visibility options.Ĭustomizing the responsive column break-point.But the process is exactly the same for a column or a section.
Wp plugin for responsive columns how to#
The example hereafter describes how to use this option for a module. The Nimble Builder allows you to decide on which device a block of content ( section, column or module ) has to be displayed. There are 3 majors types of devices on which your visitor will visit your website : desktops, tablets and smartphones. Setting the visibility of a content element for a specific type of device ( desktop, tablet or smartphone ) Switching devices with the Nimble Builder Font size The user interface of the plugin includes a device switcher allowing you to customize options like the font size for each type of devices. This problem can be easily solved with the Nimble Builder.
The font size is a good example of a web design option that can hardly be identical for a desktop computer and a smartphone. Some design options like font sizes, padding or alignments have to be customized specifically for desktops, tablets or smartphones, depending on what you need to achieve. The option is located in the global Nimble options. That's why Nimble Builder includes an option to load your images only when they become visible while scrolling. Side note : if you worry about speed performances on mobile, you're totally right. You can also customize the break-point for responsive columns. The Nimble Builder let you customize some options by devices, like font sizes, or decide if a block of content has to be hidden or visible for a type of device.
This documentation explains how the plugin helps your designing your site for mobile devices in live preview. The Nimble Builder is built on a responsive CSS framework foundation ensuring that your the sections and columns adapts nicely and automatically to desktop, tablets and smartphones. Designing for mobile devices in WordPress with Nimble Builder