Simple Call Out

version 1.0

Documentation Anchor Link

last updated 05/26/2017

Requirements: Concrete5 version 8.1 (or newer)

Simple and easy callout area block for your concrete5 website.

All of the below are example callouts:

Callout Title

This is a callout block that includes a title, image, and content area.

Simple Callout in a full-width block area.  This block has the grid container disabled so it stretches the whole length of screen ( this functionality may vary depending on your theme ).

Content is input using ck editor, meaning you can edit the look of the text with the full content WYSIWYG editor.

Data Types

The block includes a title text field, a rich text content editor, and a file manager image select.

Layout & Design Options

The block includes an option tab with many settings controlling the look of the callout area.  Choose from a background color overlay to the internal padding an margins of the block.  Even set a max width to the content within.  All while keeping things simple.

The block scales within a full width area or within individual columns.

The block only outputs information you give it.  If you don't choose a background image you will simply have a background-color to work with.

Main callout area content here!

Simple Callout Documentation

This block is used to make callout areas with ease.  Provide a title, content, and an image and the block takes care of the rest.

Available options from the editing form are:

Content Max Width
Vertical Padding
Horizontal Padding
Horizontal Margin
Vertical Margin
Minimum Height
Border Radius
Background Color
Background Size
Background Position
Background Repeat
Content Color
Span Color
Content Link Color
Content Link Hover Color
H3 Font Size
H3 Line Height
Title Color
Title Margin Bottom
Link
Link Overlay Opacity
Milliseconds of link hover transition

Tutorials

Enabling full width callout:

After creating block, click the block then click Design & Layout, click the last button on the right then select "Disable Grid Container".  Only works if your theme supports grid containers.   Otherwise simply add to a static full width area in your theme.

Create a callout area using this block:

Simply add the block to an area and select your content.

Customizing the layout and design:

Play with the options available in the options tab until you get what you're looking for.
Covers margin, padding, content and title color, and alignment settings.

Link Options:

Turn the whole block into a link and set your opacity and transition settings.

Additional content styling options:

New features for title color, span color, and content link colors are shown here.