{"id":10494,"date":"2017-11-06T16:30:28","date_gmt":"2017-11-06T21:30:28","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=10494"},"modified":"2020-05-01T13:52:28","modified_gmt":"2020-05-01T17:52:28","slug":"create-block-styles","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/page-builder\/create-block-styles\/","title":{"rendered":"How to create BoldGrid Blocks – Styling The Content"},"content":{"rendered":"\n

This article is part of a series about creating a custom Block with the BoldGrid Post and Page Builder plugin for WordPress<\/a>. See part 1<\/a> and part 2<\/a> of this series.<\/p>\n

Now that you have added images to a Block, it is time to style your content<\/strong>. The following guide will walk you through adding inline styling to the elements directly, then later move those styles to custom CSS<\/b> classes once have customized it to fit your needs.<\/p>\n

Currently, the breakpoint for tablet has the possibility to be wider than the images we are using here, so you will notice in that mode, the preview shows them not properly filling the width of the screen completely. To adjust this, we are going to create a custom CSS class<\/b> to center it, which will help remedy the issue.<\/p>\n

Using Inline CSS to Style Your Content<\/h2>\n
    \n
  1. \n
      \n
    1. \"img<\/a>With the editor opened in text mode, locate the img tags created earlier\n
      <\/div>\n<\/li>\n
    2. \"Inline<\/a>Apply an inline style to center all 4 of your images: style=”display: block; margin-left: auto;margin-right: auto;”\n
      <\/div>\n<\/li>\n
    3. \"Publish\"<\/a>Select Publish\n
      <\/div>\n<\/li>\n
    4. \"View<\/a>Select View Page to preview your changes\n
      <\/div>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
      <\/div>\n

      Congratulations! You now know how to style the content within a column using inline CSS. Now we are going to take that inline style, and move it to a custom CSS class that can be called with a simple selector.<\/p>\n

      Adding your Inline Style as a Custom Class<\/h2>\n

      To accomplish moving your CSS to a custom class, first you want to write the CSS in a legible format. Here is an example of the code we used inline to center the element previously, with an added custom class selector called my-img-class.<\/p>\n