Content & Block Types

Typography • Content & Block TypesIconographyBlock Regions

Drupal is a database-driven content management system. We've built out the infrastructure of your Drupal content management system in such a way that, when you select the type of content you want to create (i.e. blog post, basic page, event, etc.), the system will select the right template to design the page, based on your choice. In some cases, your content will also be automatically placed on your website in a location designed for that piece of content. For example, if you create a blog post using the Article content type, it will automatically appear on the blog listing page as well as in blocks that show recent posts.

This page will give you an understanding of the different content options you can use throughout your website.

Content Types

Content types are different pages that have a templated layout associated with them. When you create a page of content from a content type, it will create a page with a URL. The basic approach of creating and editing each type of content is the same. You'll see different options available to you depending on what that content type will allow.

Overview of managing content.
How to add new pages of content.
How to add to & manage menus.

Content Type Description
Basic Page Basic Pages are used for simple, static pages of content. Additional elements such as sidebar blocks or full-region elements above or below the content of the page can be added in regions using blocks.
Article Articles are generally used for pages considered time-sensitive. Examples are news articles, press releases, or blog posts. By default, the article content type doesn't distinguish between different categories or topics, but tags can be added to differentiate types of content and enable listing pages depending that display certain types of content.
Pillar Navigation
Example Page
The top of a pillar page functions exactly like a basic page. Below the main content, you can add sections which allow for three design options: banner, background, and icon. You can upload an image and add blocks of text to help users navigate to other sections or pages of the site.

Landing Page
Example Page

A landing page can be used for something as simple as a contact page or can be the core of your digital marketing campaign. You can redirect people to a custom thank you page when they have completed the form. The top of a landing page functions exactly like a basic page, with a few added options. The most important option is to add a webform. You'll need to create the webform before you can add it to the page. The other two options are: (1) Hide the navigation. This is useful if you want the site visitor to focus on your desired action (filling out the form). (2) Have the form stacked or side-by-side.

How to create forms on your website.

Block Types

Block types are similar to content types in that they are unique pieces of content that have templates associated with them. They differ from content types in that they create blocks that can be put into regions on a page instead of creating a page. You can have blocks that go into any region but some of the blocks below are best suited for certain regions.

Regions and blocks overview.
How to add a block to a page.
How to add an advanced block to a page.

Block Type Description
Address Block The address block allows for displaying your address in the proper format. Typically it will be used in the footer for your full address but can be placed just about anywhere. Often, we'll use this for your phone number in places like the header and it will automatically make it clickable for mobile devices. The title of the block is always hidden regardless of the display title selection when configuring the block.
Basic Block The basic block is literally the most basic of block types. It only has a title and a body. You can add whatever you like and put it in whatever location you would like. The title of the block is visible based on the display title selection when configuring the block.
Card Block The card block is an advanced block that allows a variety of styling options. The card settings provide for spacing and text alignment. You'll have three card styles to choose from: (1) Bootstrap's basic card style, (2) Bootstrap's image cap style, (3) Simplified Card Style. Card blocks are great for calls-to-action. Depending on the spacing setting, you can likely put this block in most regions. The title of the block is always hidden regardless of the display title selection when configuring the block.
Simple Block A simple block functions much like a basic block but adds an image upload field. When using this image upload field it appears in the same spot each time and has the same styling applied each time. The title of the block is visible based on the display title selection when configuring the block.
Social Link The social link block type provides a simple menu where you can select the social icons you deem appropriate. Your administrator can add additional icon options to meet your needs. The title of the block is always hidden regardless of the display title selection when configuring the block.
Vertical Middle Sometimes you need a block vertically aligned in a region. You'll be able to set the height of this block and then whatever is included in the body will be vertically centered. Usually this will be used in full-width regions such as a postscript-region. The title of the block is always hidden regardless of the display title selection when configuring the block.
Video If you'd like a video link in a sidebar that pops out into a window for playing, this block type will do that for you. You'll add a YouTube link and YouTube will provide a thumbnail. When the visitor clicks on the thumbnail, the video will pop-up and play.
Hero Banner
Standard Images
The hero banner is the main banner of a fully designed page. The most common usage of a hero banner is the home page. This hero banner block includes a static image (including alignment settings for mobile devices), static messaging and call-to-action links. It's recommended that this only appear in the banner region at the top of pages. It will likely work fine in other full-width regions. The background image will stay full-size regardless of the screen size but will simply crop the image. Use this hero banner if you do not have multiple images for each of the screen sizes as it will automatically align the background image for you. The title of the block is always hidden regardless of the display title selection when configuring the block.
Hero Banner 2
Responsive Images
Hero banner 2 is an advanced alternative to the hero banner. The key difference is that you have the ability to upload different image sizes for the different screen sizes. It takes a little more planning and photoshop work but it allows you control over how the image crops at different screen sizes. You are required to upload images for a minimum of the XL and LG screen sizes but it's recommended you upload a different image for each of the 5 screen sizes. The title of the block is always hidden regardless of the display title selection when configuring the block.

Address Block

208.489.0123
136 East Idaho Ave Suite 100
Meridian, Idaho 83642

Card Block

Card Image Cap

Card Image Cap

Card text will go here. You should limit this text to 150-200 characters.

Simple Style

Simple Style
Card text will go here. You should limit this text to 150-200 characters.

Basic Card

Basic Card
Card text will go here. You should limit this text to 150-200 characters.

Social Links Block

Vertical Middle Block

This is a sample of a vertical middle alignment.

The styling options are super simple. This example has style 4 applied.

Maybe a Link

Video Block

If you need content below the block, you can add it here.