{"id":205409,"date":"2025-07-19T05:21:51","date_gmt":"2025-07-19T09:21:51","guid":{"rendered":"https:\/\/optinmonster.com\/?p=205409&post_type=optinmonster_docs&preview_id=205409"},"modified":"2025-07-19T08:04:23","modified_gmt":"2025-07-19T12:04:23","slug":"how-to-add-columns-block-to-your-campaign","status":"publish","type":"optinmonster_docs","link":"https:\/\/optinmonster.com\/docs\/how-to-add-columns-block-to-your-campaign\/","title":{"rendered":"How to Add Columns Block to Your OptinMonster Campaign"},"content":{"rendered":"\n

Are you looking to create a well-organized and visually appealing layout for your campaigns? The Columns Block is the key! Think of it as the skeleton of your campaign. It creates the structure that holds all of your other content, like text, images, and buttons.<\/p>\n\n\n\n

In this guide, we\u2019ll walk you through how to use the Columns Block to build and structure your campaign layout whether you’re starting from scratch or customizing a template.<\/p>\n\n\n\n

Build a Campaign Layout with Column Blocks<\/h2>\n\n\n\n

Every campaign is built using blocks, even those created from pre-designed templates. The best way to understand how blocks work is by starting with a blank canvas. This lets you see how column blocks form the foundational structure, or skeleton, of your campaign.<\/p>\n\n\n\n

    \n
  1. From the Campaigns<\/a> screen, select the Create New Campaign<\/strong> button.
    \"The<\/li>\n\n\n\n
  2. Next, a window will pop up asking for your campaign type. Let’s select Popup<\/strong>.
    \"The
    *We’ll use a Popup campaign for this example, but the steps are the same for any     campaign type<\/a>.<\/li>\n\n\n\n
  3. Now, you’ll see Create New Campaign modal. Since we’re starting from scratch, choose the Canvas<\/a><\/strong> template.
    \"The<\/li>\n\n\n\n
  4. Once you\u2019ve selected a template you\u2019ll be prompted to give it a name and assign it to a site in your account. Select the\u00a0Start Building<\/strong>\u00a0button to create the campaign and open it in the builder to customize.
    \"The<\/li>\n\n\n\n
  5. Your Canvas campaign will open in the campaign builder with two default elements; an Image Block<\/a> and a Text Block<\/a>.
    \"The<\/li>\n\n\n\n
  6. Now, hover your mouse over the top right corner of the campaign, then click the trash can icon to delete it.
    \"Hovering<\/li>\n\n\n\n
  7. Your campaign is now empty, showing a large +<\/strong> icon. Go ahead and click this to add your first block.
    \"An<\/li>\n\n\n\n
  8. Perfect! You’ve successfully added your first Columns Block.
    \"The<\/li>\n\n\n\n
  9. With your new Columns Block selected, you can look at the settings in the left sidebar. Under the Content<\/strong> tab, you can choose a layout with a different number of columns.
    \"The<\/li>\n\n\n\n
  10. For this example, let’s click on the 2-column layout. You now have two columns displayed side by side.
    \"The<\/li>\n\n\n\n
  11. You can easily change the width of each column by dragging the slider under Column Widths<\/strong>.
    \"Adjusting<\/li>\n\n\n\n
  12. To add a little breathing room between the columns, just adjust the Column Gap<\/strong> slider.
    \"Using<\/li>\n\n\n\n
  13. To change the look of your columns, click on the Advanced<\/strong> tab. This is where you can style the entire row, like adding a background color or a border.
    \"The<\/li>\n\n\n\n
  14. If you scroll down in the Advanced<\/strong> tab, you’ll see options to style each column by itself.
    \"Scrolling<\/li>\n\n\n\n
  15. Click on a column name, like Column 1<\/strong>, to open up its specific styling settings. This lets you customize each column separately.
    \"Styling<\/li>\n\n\n\n
  16. To build your layout, you can add more rows. Simply drag another Columns<\/strong> Block from the left sidebar onto your campaign.
    \"Dragging<\/li>\n\n\n\n
  17. You can place the new block above or below the existing one. Now you have two rows in your design!
    \"The<\/li>\n\n\n\n
  18. You can repeat this process to add as many rows as you need to create the perfect layout.
    \"A<\/li>\n\n\n\n
  19. Once your skeleton is ready, you can start adding content! For example, drag a Text Block<\/a><\/strong> from the sidebar and drop it into one of your columns. You can learn more about all available blocks by following our guide here<\/a>.
    \"Dragging<\/li>\n\n\n\n
  20. Well done! You’ve now learned how the Columns Block works behind the scenes to shape your campaign layout.
    You can now fill your columns with any other blocks you need, like     Image Block<\/a> or Optin Fields Block<\/a>, to complete your campaign.
    \"A<\/li>\n<\/ol>\n\n\n\n

    Adding Columns Block to a Existing Campaign<\/h2>\n\n\n\n

    What if you’re using one of our pre-built templates? No problem! Our templates are all built with Columns Blocks, and you can easily add more to customize the layout.<\/p>\n\n\n\n

      \n
    1. From the Campaigns screen<\/a>, locate the campaign you would like to edit.<\/li>\n\n\n\n
    2. Next, select the edit icon<\/strong> next to the campaign to open it in the campaign builder.
      \"Edit<\/li>\n\n\n\n
    3. Next, find the Columns<\/strong> Block<\/strong> in the left sidebar and drag it into your campaign design where you want to add new columns.
      \"An<\/li>\n\n\n\n
    4. After you drop the block, your new, empty row of columns will appear, ready for you to customize and fill with other blocks<\/a>.
      \"The
      <\/li>\n<\/ol>\n\n\n\n

      Deleting a Columns Block<\/h2>\n\n\n\n

      Changed your mind about a layout? Deleting a Columns Block is simple and takes just a few clicks.<\/p>\n\n\n\n

        \n
      1. First, move your mouse over the Columns Block you want to get rid of. A blue toolbar will appear at the top right of the block. Click on the trash can icon in the toolbar.
        \"Hovering<\/li>\n\n\n\n
      2. A small window will pop up to ask if you’re sure. Go ahead and click OK<\/strong> to permanently delete the block.
        \"The<\/li>\n\n\n\n
      3. And that’s it! The block and all the content inside it will be removed from your campaign.
        \"The
        <\/li>\n<\/ol>\n\n\n\n

        FAQs<\/h2>\n\n\n\n

        What’s the difference between a Columns Block and other blocks?<\/h5>\n\n\n\n

        Think of the Columns Block as a container or a set of shelves. It doesn’t display anything on its own, but it creates the structure where you can place other blocks like Text, Images, and Buttons. Other blocks hold the actual content your visitors will see and interact with.<\/p>\n\n\n\n

        Can I add columns inside other columns?<\/h5>\n\n\n\n

        No, you can’t nest Columns blocks inside each other. Columns are a top-level layout block and cant be nested.<\/p>\n\n\n\n

        If I delete a column, will I lose the content that was inside it?<\/h5>\n\n\n\n

        Yes, if you delete a column block, any content (like text, images, or buttons) that was placed directly inside that specific Columns Block will be deleted along with it. Always save your changes before making major structural changes.<\/p>\n\n\n\n\n\n

        Troubleshooting<\/h2>\n\n\n\n

        Why do my columns look strange or stacked on mobile devices?<\/h5>\n\n\n\n

        Columns sometimes stack vertically on smaller screens to ensure readability. If they look strange, you might need to adjust their individual padding, margins, or the content within them to better suit the mobile layout. However, we strongly recommend creating separate Mobile-Only<\/a> campaigns specifically for mobile devices.<\/p>\n","protected":false},"excerpt":{"rendered":"

        Are you looking to create a well-organized and visually appealing layout for your campaigns? The Columns Block is the key! Think of it as the skeleton of your campaign. It creates the structure that holds all of your other content, like text, images, and buttons. In this guide, we\u2019ll walk you through how to use …<\/p>\n","protected":false},"author":23255,"comment_status":"open","ping_status":"closed","template":"","documentation\/categories":[8],"documentation\/tags":[31399,32093,31409,31411],"class_list":["post-205409","optinmonster_docs","type-optinmonster_docs","status-publish","hentry","categories-getting-started"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/205409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/types\/optinmonster_docs"}],"author":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/users\/23255"}],"replies":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/comments?post=205409"}],"version-history":[{"count":9,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/205409\/revisions"}],"predecessor-version":[{"id":205447,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/205409\/revisions\/205447"}],"wp:attachment":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/media?parent=205409"}],"wp:term":[{"taxonomy":"categories","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/categories?post=205409"},{"taxonomy":"internal_tags","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/tags?post=205409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}