Medium (Tablet Landscape) – for screen sizes from 992px to 1200px.Large (Desktop) – for screen sizes larger than 1200px.You can control width, offset and visibility settings.ĭevice option allows you to set different column behaviors on different screen sizes: Here you can adjust columns for different screen sizes. The option works proportionally and you can set fractures of the whole column width which contains 12 portions, or you can use predefined percentage values for column width. This option will be the default option for the next set of options in the Responsiveness section. Use this option to set the default column width in all browser window sizes. Here’s a brief guide through the options available here. In addition, you can also Hide columns on specific device types if you wish to prevent a specific block from being displayed on mobile devices which have a certain screen size. These settings allow you to set the column width and offset for the default column size, and for other devices/screen sizes as well. You can do that from the Responsive Options tab which can be found in settings for any of the columns. If you like this post, share it with your friends and colleague.WPBakery Page Builder plugin allows you to control columns across multiple devices. Hope you find this article helpful if you have any question please ask in the comment. This method works for both Visual Composer and WPBakery to Reverse Column Order for Desktop version and the same order for Mobile. You can see the Desktop layout in the screenshot belowįor Mobile devices, All Rows will be the same First Image then text. Then, It will be displayed like Row 1 = Image + Text, Row 2 = Text + image, Row 3 same as Row 1, Row 4 Same as Row 2. Do the same to 4th row, 6th row, all the even rows. This will Reverse the Column and move the left column to move right. Now, Edit the second row and add class vc_col-sm-push-6 to the first column then edit the second column and add the class vc_col-sm-pull-6 to the second column of the second row, as seen on the screenshot (if you want to display text top and image bottom in mobile then add text to the first column and the image to the second column.) In the above screenshot, you can see the image in the first column and text in the second column in each row.
WPBAKERY PAGE BUILDER RESPONSIVE COLUMNS HOW TO
Now, for mobile device, if you want to display the image on top and text on the bottom to each section, or text on top and image on the bottom to each section you to use 2 classes vc_col-sm-push-6 and vc_col-sm-pull-6 to Reverse Column Order in Visual Composer How to Reverse Column Order or Swap Columns Order in Visual Composerįirst, add a row of two columns then add the image to the first column and text to the second column (if you want to display image top and text bottom in mobile), add another row and do the same. But, if you see in mobile the layout will be fist image then text in the first section and first text then image in the second section as you can see in the mobile layout screenshot below This will create the same layout as you see in the first screenshot above. Then again add the second row make it 2 columns, add text to the 1st column and add an image to the 2nd column. If you are using Visual Composer or WPBakery page builder and wondering to create a two columns section like 1st column is the image and 2nd column is text then 1st column is text and 2nd column is the image as seen in the screenshotĪpparently, you can do this layout by adding first a row, make it 2 columns, add an image to the 1st column and add text to the 2nd column.
0 kommentar(er)
