Simple color text/photo block

When to use this block

The “Simple color/Text/Photo” block is a very useful option when you want to draw attention to one topic or to drive traffic to a blog or external webpage. As it’s name implies, it’s simple and has minimal features which make it a great design element that requires little fuss or forethought.

Explore the different features of this block

You are currently viewing an example of the “Simple color/Text/Photo” block. Though it is modest in it’s customizability, it offers a complete package with it’s options to include a header, sub-header, photo, paragraph(s), a CTA link, and a background color.

One of the benefits of this block is that no matter how much content you want to include in the “Text” section, the block will wrap the text around the photo to appear like an article excerpt.

See an example of this block in action

Video Tutorial

In this video, we will be discussing the proper usage of the Simple Color Text/Photo block in the NAU21 Gutenberg editor. A great use for this block would be for story snippets that could link to an external page or to a news/blog article.

Watch the video tutorial: Simple color text photo block

Self-guided tutorial

Setting up your block

To begin, let’s add the block to our page by clicking the small black box with a plus sign and searching “simple”. Select the NAU Article: Simple Color Text/Photo.

Headline

Next, insert a Headline you would like to title the block with. You may also insert a subheader if needed. Please note that this headline will display inside of the block, like a title, vs other blocks we’ve seen where the headline is outside of the text box.

Type “NAU Flagstaff Campus’ into the Headline text box and “Enjoy our beautiful mountain campus” into the subheader text box

Content

Input your content in the text box, making sure the grammar and punctuation is acceptable.

Insert the following campus information into the text box: “At 6,950 ft (2,120 m) above sea level, NAU is one of the highest-elevation four-year college campuses in the country. The main campus is surrounded by the largest contiguous ponderosa pine forest in the world and enjoys a four-season climate, with the host city of Flagstaff averaging 90.1 inches of snow per year”

Photo

You also have the opportunity to insert a photo into this block from the media library, although this feature is optional if no relevant photo is provided.

Find a picture in the media library of the NAU campus covered in snow and insert it into the block

Next, you can decide on what type of caption you would like for your image: no caption, the media gallery caption, or a custom caption. The media gallery caption will be taken directly from the description of the image found in the media library, whereas a custom caption will reveal a new word box for you to type your own personal caption. If the custom caption option is chosen, a new text box will appear to allow you to type your caption.

Hover the mouse over each caption selection while describing them, ending by clicking the custom caption option and inserting the text “NAU is a winter wonderland” into the text box that appears

Color scheme

The customization continues with the ability to select which color scheme you want the box to be. Choose whichever one you think looks best!

Select the “True-Blue Background” option.

Link and HTML anchor

Finally, finish the block by uploading a link to an outside page for further detail and type in an HTML anchor if you established a manual left navigation.

Paste in this link: https://news.nau.edu/stay-in-the-know-for-snow/

Type in “Snow” into the HTML anchor box.