With the Toolset Grid block, you can easily organize your content into responsive columns and grids. You can create a website that will look great on desktops, tablets, and phones.
You can also set a different layout for each device type. Of course, you can many Grid blocks on your page.
Each grid consists of rows that have cells in it. In each cell, you can place one or more blocks. The first step after inserting a Grid block is to set the number of columns.
Once you have your columns in place you can easily adjust the width by dragging the column border.
The Grid block settings
The Grid block has multiple useful options:
- You can change the number of columns at any time. When you reduce the number of columns, your content automatically shifts.
- You have full control over the gap (space) between columns and rows.
- You can have different columns per screen size. On wide screens, place several columns. On tablets fewer and usually, one column is great for phone screens.
- You can reverse the column order for sensible image positions. This allows you to control when “floating” images appear on phones. Reverse the column order for right-floating images to come before the text on phones.
Using grid features in Views and archives
The features of the Toolset Grid block are also available when you create Views and design archives. The grid layout makes your lists of posts look great on narrow screens.
Changing the grid options for a View
To change grid options for your View, select the View Loop block and expand the Grid Settings section. Tweak the options for your View’s grid output.
Changing the grid options for a WordPress Archive
To change grid options for your WordPress Archive, select the WordPress Archive Loop block and expand the Grid Settings section. Tweak the options for your archive’s grid output.
Cree diseños totalmente adaptables
Related topics
- Filtering Custom Lists of Posts
- Filtering Toolset Views by Dates
- Enabling Legacy Version of Toolset Views
- Displaying Images with Toolset
- Styling Custom Searches
- Styling a Site Header and Footer
- Styling Views and Archives
- Styling Single-post Templates
- How to Design and Choose Images and Illustrations
- Choosing and Applying Colors in Your Site
- Using Typography for Better Website Readability
- WordPress Site Identity
- Where a WordPress Sites Design Comes From
- Adding Custom CSS to Templates, Archives and Views
- Assigning Templates to Posts Conditionally
- Passing Arguments to Views
- Adding Custom JavaScript to Views, Templates and Archives
- Displaying Search Results on a Different Page
- How to Create Custom Searches and Relationships for Users
- Display Dynamic Sources Inside all Text Blocks
- Searching Texts in Custom Fields with Toolset and Relevanssi
- YouTube Videos with Advanced Options
- Displaying Form Data
- Creating templates to display members-only content
- Creating and Displaying Repeatable Field Groups
- Styling Front-End Forms
- Displaying a Map on A Single Post Template
- Displaying a List of Posts on A Map
- Creating a Custom Search
- Creating a Hero Section
- Creating Sliders with Dynamic Post Content
- Adding Dynamic Content to Your Homepage
- Creating a View
- Creating a Custom Archive Page
- Creating Templates to Display Custom Posts
- Creating Responsive Designs
- Advanced Styling with Container Blocks
- Display Content Conditionally
- Using Third-Party Hidden Fields
Envía tus comentarios a nuestro equipo de documentación