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.
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:
- Pasting complicated HTML structures, like large table layouts, which might be more challenging in a content block.
- 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
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.
- 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.
- 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.
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.
- Supported Formats: Accepts JPG, PNG, SVG, and non-animated GIF images.
- File Manager Access: "Choose Image" button opens the file manager for easy selection.
- 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
- 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.
- 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.
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.
- File Manager: "Choose File" button for selecting the file to link.
- Customizable Text: Set the text for the file link.
- Force Download: Option to prompt a "Save As" dialog instead of opening the file in-browser.
- Tracking: File downloads are tracked in the File Manager, accessible through the Dashboard.
Horizontal Rule Block
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.
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.
- 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.
- 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
The Feature Link Block is similar to the Feature Block, but with more display fields.