Basics

Content Block Functionality

Basic Text and Image Handling

The content block in Concrete CMS is ideal for managing basic text and images. It's straightforward and akin to using a word processor, suitable for headers, paragraphs, and more.

In-Context Editing

When a content block is added:

A toolbar and text area appears on the page for on-site editing.
It replaces the typical pop-up form seen in other blocks.
You can directly type, format text, add links, and insert images.

Link Options with CKEditor

CKEditor, the default text editor has many common editing tools including:

URL: To add external links.
Anchor Link: To create page-specific anchors.
Email: For mailto: links that open the user's email client.
Phone: To create tel: links for direct dialing.
File Download: Via "Browse Server" to select files for download.
Sitemap: To link internal pages, auto-updating if the page moves.

HTML Block Functionality

The HTML block in Concrete CMS lets you insert code directly onto your page. It's particularly useful for:

Embedding code such as JavaScript snippets.
Pasting complicated HTML structures, like large table layouts, which might be more challenging in a content block.

Key Features:

The block maintains the integrity of your code, without attempting to clean up or format it.
It offers code highlighting and suggests fixes as you type, enhancing the coding experience.

Hero Image Block

Overview

The Hero Image Block in Concrete CMS is designed to create impactful, large-scale images usually placed prominently at the top of a webpage. It's often used for showcasing key content, like a featured image with overlaid text or call-to-action buttons.

Features

Large Display: Designed to display high-resolution images prominently.
Overlay Text: Allows adding text over the image, useful for headlines or brief descriptions.
Clickable Elements: Supports adding buttons or links, making it interactive and functional for directing users to other parts of the website.
Customization: Offers options to adjust image alignment, text positioning, and styling to fit the overall design of the page.

Best Practices

High-Quality Images: Use high-resolution images for clarity and impact.
Concise Text: Keep overlay text short and impactful for immediate user engagement.
Mobile Responsiveness: Ensure the image and text display well on various devices.
Load Time Consideration: Optimize image size for quick loading while maintaining quality.

Image Block

Overview

The Image Block in Concrete CMS provides a streamlined method to add images to your page. It offers more controlled placement compared to the Content block, making it ideal for precise image positioning.

Key Features

Image Selection

Supported Formats: Accepts JPG, PNG, SVG, and non-animated GIF images.
File Manager Access: "Choose Image" button opens the file manager for easy selection.

Image Hover

On-State Image: Optional feature to select a second image for hover effects.
Format Restrictions: Works with JPG, PNG, and non-animated GIF images. The primary and on-state images must be in these formats.

Image Link Options

No Link: Image without any hyperlink.
Page Link: Link to another page within your site, accessible through "Choose a Page" option.
External URL: Link to an external website, typically starting with http or https.
File Link: Link to a downloadable file, selected via "Choose File".
Open in New Window: Checkbox option for opening image links in a new tab or window.

Alt Text and Title

Alt Text: Essential for SEO and accessibility, describes the image's appearance and function.
Title: Appears as a tooltip on hover, providing additional information about the image.

Image Resizing and Cropping

Resize Options: Images can be resized or cropped. Unconstrained images use <picture> elements, while constrained ones use <img> elements.
Constrain Image Size: Resize while maintaining aspect ratio, requiring Max Width and/or Max Height settings.
Crop Image: Resize and crop from the center, requiring both Max Width and Max Height. Setting either to 9999 prevents resizing in that dimension.

Best Practices

Image Quality: Use clear, appropriately sized images.
Alt Text: Always set descriptive alt text for accessibility.
Resizing and Cropping: Use these features judiciously to maintain image integrity while fitting your layout.

File Block

Overview

The File Block in Concrete CMS simplifies creating download links for files. It's primarily used for linking to downloadable files, though similar functionality is available in the Content Block.

Key Features

File Selection

File Manager: "Choose File" button for selecting the file to link.

Link Text

Customizable Text: Set the text for the file link.

Download Options

Force Download: Option to prompt a "Save As" dialog instead of opening the file in-browser.

File Statistics

Tracking: File downloads are tracked in the File Manager, accessible through the Dashboard.

Horizontal Rule Block

Functionality

The Horizontal Rule Block adds a simple horizontal line to your page, serving as an elegant separator for content. It's straightforward, requiring no edit form—just place it where needed.

Feature Block

Overview

The Feature Block offers a quick way to combine a title, description, and icon in an attractive format. It's designed for common site needs, providing an alternative to image-based icons.

Features

Icon Selection

Icon Library: Choose from a dropdown of Font Awesome icons.
Preview: Displays the selected icon for reference.

Title and Description

Title: Displayed as an H4 heading.
Paragraph: Rich text field for detailed description under the title.

Link Options

No Link: Title remains unlinked.
Internal Page Link: Links to another page on the site, chosen via "Choose Page".
External URL: Links to an outside website, typically starting with http or https.

Feature Link Block

Functionality

The Feature Link Block is similar to the Feature Block, but with more display fields.