Blocks can be added through the Block layout tab's "Place block" buttons or through the Custom block library tab's "Add custom block" button.
Adding a block and placing it in a region of the page
- Go to Structure > Block layout.
Image

- Choose the region where you want to add a block and click the Place block button next to it.
Image

- In the modal dialog, click Add custom block. (If you are adding an existing block, find it in the list and click the Place block button and skip to Step 7.)
Image

- If more than one custom block type is available, select the type of custom block. If only one custom block type is available, the "Basic" type will be selected by default.
Image

- The add block screen will display.
Image

- Block description: A brief description that will show on the Custom block library administration page. Use a description that will be memorable/recognizable for your future self or other staff who manage the website.
- If your block will house mainly HTML code (such as an embed code provided by a 3rd-party service), scroll down below the Block body. Under Text format, select Full HTML.
- Block body: Enter the block content.
- Click Save.
- If you initiated the new block from the Place blocks screen, you will have the option to configure the block.
Image

- Title: enter a title for the block. This title will appear on the Block layout administration page and display on the page with the block content.
- Display title: Optionally, you may choose not to display the title with the block by un-checking this setting.
- Visibility settings: Enter the proper selection(s) to determine which page(s) your block will be displayed on.
- To show a block on all pages, accept the default setting for Pages (Keep the Pages box blank; keep "Show for the listed pages" selected).
- If you are listing specific pages on your site, use internal Drupal paths (e.g. /online-resources) instead of full paths (e.g. https://www.example.org/online-resources).
- Region: Select the region of the page where the block should display.
- Click Save block.
- Check the page(s) where you expected to see the block to verify that it is set correctly and to make sure you are satisfied with how it is displaying.
I added a block and it looks horrible. Help!
- If a block is placed a region where it was never part of the original site design, your theme may not include styling to improve this new block's appearance. Refer to Overriding Sitewide Theme Styling.
- Extra blank space at the bottom of the block: Check the HTML code in the Block body and eliminate extra blank paragraphs or line breaks in the HTML source code that may have been added automatically.