Concrete5: Advanced Blocks

Concrete5 is a content management system that runs portions of the Museum web site. Concrete5 uses a concept called "blocks" that are essentially containers for different types of content on a web page. These videos will show you how to work with blocks (creating, moving, deleting) and the different kinds of blocks available (content, videos, forms, image galleries, etc).

The Content block is appropriate for displaying text and images in most situations and is the most commonly used block. Please see the Concrete5: Basic Editing page to view in-depth videos about the editing interface for the Content block, which include text formatting, links, images and documents.

Videos on this page:

youtube controls tip

TIP: Having a hard time seeing the details? We recommend turning on the highest video quality possible and making the video full screen. Both of these controls are visible at the bottom right corner of the player after the video has been started.


Concrete5 - Introduction to Page Blocks

Concrete5 uses a concept called "blocks" which are containers that hold different types of content on a web page. You can add, move and delete blocks. This overview video will show you the basics of working with blocks in Concrete5.

Topics covered:
0:00 - intro
0:10 - begin example
0:20 - turn on page Editing mode
0:28 - dotted lines indicated editable areas
0:42 - why you cannot edit the side menu
0:55 - you need to add "blocks" first that you put page content into
1:12 - adding a Content block to hold text and images
2:00 - editing blocks after saving, and why fewer blocks are better if you can
3:37 - other types of blocks you can add
3:30 - adding a second block to the page (Expander used in example)
3:45 - blocks can only stack vertically
4:00 - copying and pasting existing blocks with the Clipboard
4:32 - when it is appropriate to split blocks of the same type
4:48 - you can only add new blocks at the bottom of the page
5:05 - moving blocks around on the page
5:40 - deleting a block
5:55 - exit Editing mode, write Version Comments, Publish


A Deluxe Image Gallery block will take a file set of photos, automatically generate (or re-generate!) thumbnails (with or without captions) and add an elegant lightbox feature that will show a slideshow of the large images (with or without captions) over a dimmed window.

Topics covered:
0:00 - intro
0:12 - how to have an empty File Set created
0:28 - stop here and upload your image files to a File Set
0:38 - checking to see it end up in the right files set
0:50 - how banners work - be careful what you add
1:11 - first example
1:20 - confirming the right files are in the right set
1:30 - navigate to page and put in Edit mode
2:17 - adding a new Deluxe Image Gallery block
2:35 - choosing a File Set
2:55 - changing the thumbnail order
3:20 - number of columns
3:40 - choosing thumbnail width
3:48 - always check "Enable Cropping" for uniform thumbnails
4:05 - Enable Lightbox effect
4:30 - approx. zoomed width (800px wide)
4:38 - choose transition effect (fade)
5:05 - adding captions (inside position)
5:15 - displaying thumbnail titles (optional)
5:32 - Titles & Captions tab
5:58 - adding thumbnail captions
7:00 - adding (longer) captions under the lightbox
7:55 - one last check and add gallery
8:16 - saving the page and publishing to view the lightbox effect
8:50 - changing the size of the thumbnails on the fly
9:40 - moving the Gallery block between other blocks
10:20 - save block changes, exit Editing mode, write Version Comments, Publish


Concrete5 - Expander Block

Use the Concrete5 Expander block to add "toggles" to your site that will show/hide pieces of content when clicked. This is a good option to use when you have a long list of items with descriptions, such as summer camps or book summaries.

Topics covered:
0:00 - intro
0:12 - example page with Expander blocks
0:29 - good uses for the Expander block
0:49 - begin first example
0:58 - put page in Editing mode
1:05 - adding an Expander block
1:22 - added the title
1:40 - selecting visual style
2:06 - open or closed by default
2:22 - speed
2:30 - content area
3:00 - Publish page to see it in action
3:18 - begin second example
3:30 - if you change layout style, all other blocks will update
4:18 - add block and save page changes
4:58 - why you might want to add a headline above first Expander block for better spacing
5:11 - moving block order on the page
5:17 - add headline to go above Expander blocks
6:07 - moving content block with headline above Expander blocks
6:30 - save block changes, exit Editing mode, write Version Comments, Publish


Concrete5 - Form Block

A form block gives you several options for formatting questions, including radio buttons, check boxes, drop-downs, etc. Submitted forms will be emailed to one or more people. When the form is submitted you can display a brief message on the screen, or redirect them to another page when completed (more likely to be read by user since it doesn't fade away).

IMPORTANT! Do not ask for financial or sensitive personal information of any kind! (Social security numbers, bank account, credit card numbers, etc.) This form is for non-sensitive correspondence only. General contact information is okay (name, email, phone).

Topics covered:
0:00 - intro
0:08 - this is not a secure form!
0:44 - put in Edit mode and add new Form block
1:00 - begin sample form
1:12 - using text fields (one line)
1:30 - making questions required and adding more
1:45 - using text areas (lots of text)
2:33 - radio buttons (round, only one item can be selected)
3:30 - select boxes (drop-down, only one item can be selected)
4:40 - checkboxes (square, multiple items can be selected)
5:33 - file upload (disabled)
6:00 - email address, send form from this address (check)
6:50 - remaining options are simple text fields
7:27 - making changes on the Edit tab
7:50 - changing question order
8:04 - view Preview tab to see form
8:30 - Options tab
8:32 - add form name (be specific)
8:40 - brief on-screen thank you message option
9:06 - adding destination email address(s)
9:28 - using CAPTCHAs (squiggly letter tests) to prevent spam
10:22 - redirecting visitors to a page when completed (recommended)
11:12 - uploading to file sets (disabled)
11:28 - add form and save then publish page to see form
11:53 - demonstration of text areas, radio buttons, selects, etc.
12:40 - see a CAPTCHA on live site
12:55 - info about reCAPTCHA project
13:30 - how to select a different reCAPTCHA to solve

Fun Fact: CAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart.


Concrete5 - RSS Displayer Block

Learn how to add an RSS feed to your Concrete5 web page using the RSS Displayer block.

Topics covered:
0:00 - intro
0:08 - what RSS is useful for
0:17 - example RSS feed
0:33 - page editing mode
1:00 - add RSS Displayer block
1:20 - finding the feed source URL
2:06 - date format
2:17 - feed title
2:25 - display items amount and title options
2:42 - uncheck open in new window
3:11 - save feeds on page
3:30 - edit later, title-only vs summary listing example
4:35 - save changes, exit Edit mode, make Version comments, Publish


Concrete5 - YouTube Video Block

Learn how to add a YouTube video to your Concrete5 page using the YouTube Video block. Note: This is the easiest way to embed a video, but you cannot block the suggested videos at the end if you use this method.

Topics covered:
0:00 - intro
0:15 - put page in editing mode
0:28 - adding a new YouTube Video block
1:03 - adding video title
1:18 - how to find and paste the YouTube URL
1:45 - changing the width and height settings
2:40 - choosing a player type (iframe recommended)
3:15 - video disabled in edit mode
2:25 - save block changes, exit Editing mode, write Version Comments, Publish


Concrete5 - Alternate YouTube Method to Avoid Suggested Videos

Learn how to copy embed code from a YouTube page and paste it in a Concrete5 page using the HTML editor in the Content block. This method will allow you to disable the suggested videos at the end of a movie (since you can't control what shows up and some may be inappropriate), but it does require editing a little bit of the HTML directly.

Topics covered:
0:00 - intro
0:15 - why disable suggested videos?
0:49 - put page in editing mode
1:00 - why you cannot use a standard YouTube block
1:25 - edit content block
1:30 - getting the embed code from YouTube page
1:55 - uncheck "show suggested videos" setting
2:10 - copying code
2:23 - do not paste code into visual editing screen
2:25 - turning HTML editing mode on
2:24 - where to paste the HTML in the code screen
3:18 - save content block
3:35 - exit Editing mode, write Version Comments, Publish