{"id":15621,"date":"2018-09-18T16:28:50","date_gmt":"2018-09-18T20:28:50","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=15621"},"modified":"2023-06-14T14:44:36","modified_gmt":"2023-06-14T18:44:36","slug":"columns","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/page-builder\/columns\/","title":{"rendered":"Working with Columns"},"content":{"rendered":"\n

$\"post$ <\/p>\n

The Post and Page Builder, BoldGrid’s WordPress page builder<\/a>, uses the Bootstrap system of Sections, Rows, and Columns to layout your website elements. This article will discuss the controls specific to Columns<\/strong>. If you’re looking for a more general overview, you can read about how to use the Post and Page Builder<\/a>.<\/p>\n

<\/iframe><\/p>\n<h2 id=\"how-to-use-columns-in-the-post-and-page-builder\">How to Use Columns in the Post and Page Builder<\/h2>\nColumns<\/b> contain one or more elements, or can be left empty if the design calls for it. Columns allow content elements like text and images to reside next to each other in a single row.<\/p>\nThe Post and Page Builder makes it easy to build your website by adding extra controls that appear on hover, called Drag Handles<\/b> or Popovers<\/b>. Once you click into the column you want to work with, these popovers will appear.<\/p>\n<h3 id=\"sections--rows--columns--elements\">Sections > Rows > Columns<\/strong> > Elements<\/h3>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-28045 size-full lazy\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/ppb-edit-column.png\" alt=\"Columns popover\" width=\"200\" height=\"294\">Columns are inside of rows.<\/p>\nEach <a href=\"https:\/\/www.boldgrid.com\/support\/page-builder\/rows\/\">row<\/a> on the page is comprised of one or more columns. To open the available options for the column, click the  Blue <\/b><\/span> popover that appears at the top of the column.<\/p>\nThe Directional Arrow<\/b> on the left allows you to drag and drop the column left or right in the current row, or into another row.<\/p>\nThe Hamburger Menu<\/b> icon on the right brings up a menu with controls for that specific column, as discussed below.<\/p>\n<table style=\"width: 70%; border: 1px solid black; border-spacing: 5px;\">\n<tbody>\n<tr style=\"border: 1px solid black;\">\n<th style=\"padding: 2px 2px 2px 5px; border: 1px solid black;\">Clone<\/th>\n<td style=\"padding: 5px 2px 2px 5px;\">Creates a duplicate of the existing column.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid black;\">\n<th style=\"padding: 2px 2px 2px 5px; border: 1px solid black;\">Delete<\/th>\n<td style=\"padding: 5px 2px 2px 5px;\">Removes the entire column and all its content.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid black;\">\n<th style=\"padding: 2px 2px 2px 5px; border: 1px solid black;\">Clear Contents<\/th>\n<td style=\"padding: 5px 2px 2px 5px;\">Removes the content but does not remove the column.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid black;\">\n<th style=\"padding: 2px 2px 2px 5px; border: 1px solid black;\">Insert Media<\/th>\n<td style=\"padding: 5px 2px 2px 5px;\">Opens the Media Library to select or upload an image<\/td>\n<\/tr>\n<tr style=\"border: 1px solid black;\">\n<th style=\"padding: 2px 2px 2px 5px; border: 1px solid black;\">Vertical Alignment<\/th>\n<td style=\"padding: 5px 2px 2px 5px;\">Sets the alignment of the column to either top, center, or bottom of the row. This alignment is relative to the content in the rest of the columns in the row.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid black;\">\n<th style=\"padding: 2px 2px 2px 5px; border: 1px solid black;\">Change Background<\/th>\n<td style=\"padding: 5px 2px 2px 5px;\">Brings up the background panel to use a color, image, or pattern. This background will only be applied to this specific column.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid black;\">\n<th style=\"padding: 2px 2px 2px 5px; border: 1px solid black;\">Shape<\/th>\n<td style=\"padding: 5px 2px 2px 5px;\">Style this column with a shape, examples are shown below.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid black;\">\n<th style=\"padding: 2px 2px 2px 5px; border: 1px solid black;\">Advanced Control<\/th>\n<td style=\"padding: 5px 2px 2px 5px;\">Adjust padding, margin, border, animation, and more.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 id=\"column-shape\">Column Shape<\/h3>\nThe Post and Page Builder includes over 30 Column Shapes<\/b> to choose from, or click the Customize Design button at the bottom of the panel to modify any starting design into your own. Created designs are saved in the top My Designs<\/b> section for easy reuse.<\/p>\nTo open this panel you can use the column menu discussed above, or click the Layout<\/strong> icon in the DropTab at the top of the editor.<\/p>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-shape-icon-droptab.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-28084\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-shape-icon-droptab.png\" alt=\"Column Shape control in the Post and Page Builder\" width=\"295\" height=\"86\"><\/a><\/p>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-shape-panel.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28085\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-shape-panel.png\" alt=\"Column Shape designs in the Post and Page Builder\" width=\"295\" height=\"566\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-shape-panel.png 327w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-shape-panel-156x300.png 156w\" sizes=\"auto, (max-width: 295px) 100vw, 295px\" \/><\/a><\/p>\n<h2 id=\"faqs\">FAQs<\/h2>\n<h3 id=\"how-many-columns-does-each-row-need\">How many columns does each row need?<\/h3>\nIn the Bootstrap system, each row needs to have 12 columns. This can be divided into one or more columns as illustrated here:<\/p>\n<img decoding=\"async\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/10\/10467-01-gridsystem.png\" alt=\"Bootstrap grid system\"><\/p>\nHow each row is divided up can change on different screen sizes <a href=\"https:\/\/www.boldgrid.com\/support\/page-builder\/tablet-mobile-views\/\">using the responsive controls<\/a> in the Post and Page Builder, which are found in the WordPress toolbar above the DropTab. Drag each column’s width as needed for each device.<\/p>\nFor example, if you have a row with 3 \/ 3 \/ 3 \/ 3 on desktop you may want to use 6 \/ 6 \/ 6 \/ 6 on tablet. A new row will automatically be created anytime the total columns are more than 12, so what is one row on desktop will become two rows on tablet. On mobile, we recommend each columns uses all 12, as there isn’t much screen size available.<\/p>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/ppb-device-icons.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-28086\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/ppb-device-icons.png\" alt=\"Device previews in the Post and Page Builder\" width=\"146\" height=\"78\"><\/a><\/p>\n<h3 id=\"how-do-i-put-space-between-column-backgrounds\">How do I put space between column backgrounds?<\/h3>\nThere are two basic types of column backgrounds. You can have the background of each column fill the entire column, so consecutive column backgrounds touch each other, as shown here:<\/p>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-backgrounds-touching.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28097\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-backgrounds-touching.png\" alt=\"Column design sides touching\" width=\"600\" height=\"198\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-backgrounds-touching.png 805w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-backgrounds-touching-300x99.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-backgrounds-touching-768x254.png 768w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\nIf you want the columns to have space between them, you will need to adjust the margin in the advanced settings. Don’t worry, this isn’t as hard as it sounds! Start by clicking into the column you want to change. From here you can click the Layout<\/strong> icon in the DropTab, then the Customize Design<\/strong> button at the bottom of the panel to open the advanced settings.<\/p>\nClick into the 2nd option – Margin.<\/strong> If your design has negative values for Right and Left like shown here, update them to 0.<\/p>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-shape-margin.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28091 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-shape-margin-e1602267813686-274x300.png\" alt=\"post and page builder advanced margin controls\" width=\"274\" height=\"300\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-shape-margin-e1602267813686-274x300.png 274w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-shape-margin-e1602267813686.png 327w\" sizes=\"auto, (max-width: 274px) 100vw, 274px\" \/><\/a><\/p>\nThen you will see a space between the columns:<\/p>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-backgrounds-separate.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28096\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-backgrounds-separate.png\" alt=\"Column design space between\" width=\"600\" height=\"223\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-backgrounds-separate.png 771w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-backgrounds-separate-300x111.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/column-backgrounds-separate-768x285.png 768w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\nCongratulations!<\/span><\/p>\nNow you know how to work with Columns in the Post and Page Builder. Next, you may want to learn <a href=\"https:\/\/www.boldgrid.com\/support\/page-builder\/images\/\">how to work with images<\/a> or <a href=\"https:\/\/www.boldgrid.com\/support\/page-builder\/create-block-structure\/\">how to create a BoldGrid Block<\/a>.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"The Post and Page Builder, BoldGrid’s WordPress page builder, uses the Bootstrap system of Sections, Rows, and Columns to layout your website elements. This article will discuss the controls specific to Columns. If you’re looking for a more general overview, you can read about how to use the Post and Page Builder. How to Use […]<\/p>\n","protected":false},"author":529,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[148],"tags":[],"class_list":["post-15621","post","type-post","status-publish","format-standard","hentry","category-page-builder"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15621","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/529"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=15621"}],"version-history":[{"count":15,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15621\/revisions"}],"predecessor-version":[{"id":92153,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15621\/revisions\/92153"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=15621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=15621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=15621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}