But the reality is that a lot of people will view your site on an only 3-inch wide screen. Yes, it’s easier to design beautiful web pages on a wide-screen monitor larger than most people’s TVs in the early 2000s. Other than a slow website, there’s not much else that will anger a web visitor as quickly as a non-responsive page.
#Responsive columns in wordpress plugin how to
So, if you use a lot of tables on your site, you need to learn how to create a responsive table in WordPress. Description Show Responsive Columns in Posts with Widgetsĭo you want to arrange widgets horizontally? If so, this plugin may be the solution for you.Īdd desired widgets to the custom sidebar the plugin creates and set up an auto-insert.That’s what your website visitors think when they stumble on a page that’s not formatted for mobile. If you are a developer and looking for an easy way to render some outputs in responsive columns, this plugin will be handy. Enable Auto-insert or insert the shortcode.Then the plugin will take care of it for you. The plugin will let you display widgets horizontally with a grid system. When the browser width changes, it automatically adjusts the layout. This is important for tablet and mobile visitors. You can flexibly set the number of columns in each row. Set Number of Columns by Screen Widthįlexibly set the number of columns by browser width. In other words, you can control the number of columns for particular screen widths. Take advantage of the Auto-insert feature which automatically inserts the defined widget box to your desired location.
#Responsive columns in wordpress plugin code
Use PHP code in the theme template or the shortcode in posts. Sidebars defined by your theme also can be displayed in columns. Create Complex ColumnsĪchieve more advanced complex design by taking advantage of the options that the plugin provides. With the widget that the plugin provides, the whole sidebar contents can be embedded as a widget item into another sidebar.Ĭolumn spans are configurable so that you can set wider widget areas. If you can code, you can pass an array to the plugin’s filter so that your array contents can be rendered in multiple columns instead of widgets. To display the added widgets in a post, there are mainly two different means.You’ll see a new custom sidebar box named Responsive Custom Widgets. Option B: use the auto-insert feature by enabling the Enable Auto-insert option in the plugin setting page, New / Edit.
Specify Different Number of Columns in Each Rowīy default, the widgets are displayed in 3 columns. It can be changed by setting the columns parameter. Optionally, if you like to change the number of columns in each row, use sequential numbers separated by commas.įor instance, will show the widgets in 3 columns in the first row, 2 columns in the second, and 5 to the third. Change the numbers accordingly for your needs. To set the number of columns for each screen max-width, use the pipe (|) character as the delimiter and place the width in pixel followed by a colon (:). For instance, will show the widgets in 5 columns when the browser widths is greater than 800, and 4 when the browser width is 800 to 601, and 2 when the browser width is 600 to 481, and 1 when the browser width is less than or equal to 480. The widget box can be displayed outside post/pages. Putting a PHP code into the theme is one way of doing it. #Css for responsive columns in wordpress page code# Use the ResponsiveColumnWidgets() function.įor instance, ?php if ( function_exists( 'ResponsiveColumnWidgets' ) ) ResponsiveColumnWidgets( array( 'columns' = 5 ) ) ? will display the widgets in 5 columns. columns – the number of columns to show.There are other parameters besides columns. If you want to specify the number of columns in each row, put the numbers separated by commas. For instance, 3, 2, 4 would display 3 columns in the first row and 2 columns in the second row and four columns in the third row and so on. The rest rows follow the last set number. To set the number of columns by screen max-width, use the colon(:) character after the width, and use the pipe (|) character to delimit each set of number of columns. If the pixel is omitted, it is considered no limit. If the pipe delimiter is not present, the plugin will add 600: 1 internally by default.įormat: column value | pixel: column value | pixel: column value |. sidebar – the ID of the sidebar to show.The following example displays widgets in 5 column when the browser width is greater than 800, and four when the width is 601 to 800, and three when the width is 481 to 600, and one when the width is 1 to 480.
maxwidgets – the allowed number of widgets to display.įor the twenty-twelve theme, sidebar-1, would show the default first sidebar contents.#Css for responsive columns in wordpress page code#.
0 kommentar(er)
