Welcome to the EtchCMS Component Guide
🗒️ Notes for content editors
Welcome to the Component Guide! The purpose of this page is to illustrate various content options which are available to you on this website.
Throughout this Component Guide, you'll find many useful tips for:
- What blocks could (or should) be used based upon the content being used
- Estimated word counts for various elements (e.g. headings and buttons)
- Ensuring links and buttons are actionable and accessible
- Making use of theming and block settings
When creating content from scratch, you'll first create a Section. Sections offer a variety of layout options, allowing you to specify the space in between content, how content is aligned within the Section, and the overall width of the Section. Sections can also have Themes (which apply colour changes to the background, and sometimes text), and can be given an Image or Video background if desired.
Blocks are placed into Sections, and by dragging from the edge of a Block, you can specify the individual width of the Block within the Section. There are a wide variety of Blocks you can use, which are showcased below, in alphabetical order. Happy building!
Accordion Block
-
The accordion block lets users show and hide sections of related content on a page. It's great for FAQs, or breaking up lengthy sections of text in a question and answer format. Simply click on the question and the answer is revealed underneath.
-
For questions/headings, we recommend keeping it to a single-line of text where possible. If using an Accordion Block within a multi-column section, please be aware that would further reduce the number of words that would keep it to a single line. For answers, there is no limit, but if going beyond three or four paragraphs then perhaps this should be broken up further.
-
No! Use as many as needed (within reason).
Carousel Block
-
This is an example of a Carousel Block slide with an Image Block on the left, and a Text Block on the right
The amount of text used within this block should ideally match or be less than the height of the adjacent image. If all that's needed is a simple image carousel then the Gallery Block is recommended instead.
-
This is an example of a Carousel Block slide with a Text Block on the left, and an Image Block on the right
The amount of text used within this block should ideally match or be less than the height of the adjacent image. If all that's needed is a simple image carousel then the Gallery Block is recommended instead.
-
This is an example of a Carousel Block slide with an Image Block on the left, and a Text Block on the right
The amount of text used within this block should ideally match or be less than the height of the adjacent image. If all that's needed is a simple image carousel then the Gallery Block is recommended instead.
-
This is an example of a Carousel Block slide with a Text Block on the left, and an Image Block on the right
The amount of text used within this block should ideally match or be less than the height of the adjacent image. If all that's needed is a simple image carousel then the Gallery Block is recommended instead.
Content Feed Block
Content Feed blocks are used for displaying summaries of multiple content items. Provide a parent source, and it will display an excerpt/thumbnail for each child item (if one is available).
Other options include the ability to specify how many items to display, pin specific items to the top of the list, skip a number of items, and limit the items to specific content types. Pagination is also available for extensive feeds. Content feeds could be used to make a basic news listing section, or for listing any numerous content type that may exist on the site, which could include, for example, products, services, staff, or job openings.
Embed Block
The Embed Block is useful for embedding third-party JavaScript snippets anywhere on a page. Simply paste the code provided into the Embed Code field and that's it! There is no example shown here as there are endless possibilities to what can be embedded.
Empty Space Block
Used for creating empty space, in a variety of sizes.
There's an empty space above this! ☝️
Features Block
Feature #1
This is an example of a Feature with an icon, title and short description
Feature #2
This block is useful for creating grids of icons with accompanying captions
Feature #4
Titles should be no more than two lines, and descriptions no more than 20 words (ideally)
Form Block
Need to embed an Umbraco Form into the page? Simply choose one from a list of available forms. To create more forms, navigate to Forms from the main menu in the Umbraco back office.
Gallery Block
The Gallery Block allows a selection of images (and videos with thumbnails) to be displayed in a grid.
Images can be enlarged with a single click, and videos will play enlarged when their thumbnails are clicked. You can also turn this into a carousel if desired. There is no limit to the number of images or videos that can be included, but page performance should be considered if the Gallery Block contains more than 40 items or so!
Grid Block
As the name suggests, the Grid Block provides the ability to create a grid-based layout of content "cards" containing an image, heading, short description and a button/link.
By clicking the cog, the number of columns can be changed between a 1-4 column layout and can also be displayed as a carousel, if desired. Depending on how many columns are in use, headings and button text should be kept to a single line where possible. Descriptions can be longer, but try to keep those consistent in length with the other Grid Block items, and ideally between 100-200 characters.
Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Group Block
The Group block is used solely to group other blocks, and allows for the creation of elaborate layouts.
This is an example of a Group block containing an Image block and a Text block.
This is another example of a Group block containing an Image block and a Text block. But unlike the example on the left, this one is the other way around.
Iframe Block
Much like the Embed block, the Iframe block allows an embed of another website but via an iframe. 🚨 This block is NOT intended for use with videos (see the Video Block below for more info).
Image Block
The Image Block is useful for adding a single image to the page.
Link Block
Used for adding links in a variety of specified styles. Note that any links or buttons should ideally contain between one to four words, and try to avoid them breaking onto two lines.
Logos Block
The Logos Block, as the name suggests, provides a simple way of displaying a grid of company logos with optional links. These can also be displayed in a rotating "marquee" if desired.
Map Block
Embed a Google Map with an optional marker in the centre.
The map location is calculated via latitude and longitude. The map zoom level can also be customised.
Quote Block
A Quote block is similar to a Text block but intended for adding prominence to a quote or testimonial. It's also possible to include the name of the person the quote is attributed to. Depending on the layout, a quote is ideally 3-4 lines of copy (30-50 words).
Steven Hart, Frontend Development Lead at Etch
Reusable Content Block
The Reusable Content Block, as the name suggests, allows the use of any reusable content specified via the repository in the Site Settings node.
Social Links Block
This is an example of the Social Links block. As the name suggests, it allows the population of a list of links to social media sites.
Stats Block
A useful block for displaying rows of statistical data. Each statistic can be in any format.
100%
100%
100%
Tabbed Content Block
The Tabbed Content Block allows for the choice of one or two column blocks of content using a number of different repeatable block types. The difference here is that multiple blocks can be contained within a tabbed layout, as per the example below...
Tabbed Content Example
This is an example Text Block within a Tabbed Content Block! Just like any other multi-column section, it's possible to add multiple rows containing a maximum of two blocks.
Tabbed Content Example
This is an example Text Block within a Tabbed Content Block! Just like any other multi-column section, it's possible to add multiple rows containing a maximum of two blocks.
A Quote Block is similar to a Text Block but intended for adding prominence to a quote or testimonial. It's also possible to include the name of the person the quote is attributed to.Steven Hart, Frontend Development Lead at Etch
Team Block
Similar to the Grid Block, the Team Block allows the creation of a grid of team/staff members, with added job title/role, biography and contact links.
By clicking the cog, the number of columns can be changed between a 1-4 column layout and can also be displayed as a carousel, if desired. If used as a team block then try to keep to first and last names so the name and job title fits onto one line each ideally (although at time this won't be possible). The description filed can be much longer at 30-50 words but still try to be succinct.
Steve Hart
Lead Frontend Developer
Myles Broomes
Backend Developer
Text Block
The Text Block does exactly what it says on the tin. A simple WYSIWYG editor allowing for formatted text, lists, tables etc. Particularly useful in combination with other blocks in a two column layout.
Any buttons should ideally contain between one to four words, and try to avoid them breaking onto two lines. Headings can be longer, but again try to avoid them breaking onto multiple lines where possible. Links that appear within body text can be longer; 60-80 characters is ideal.
Text Blocks allow the creation of following elements...
Heading 2
Heading 3
Heading 4
Heading 5
Paragraph text (this is the default text style if nothing is selected within 'Formats'). Throughout the 17th and 18th century and into the early 19th century, interior decoration was the concern of the homemaker, or an employed upholsterer or craftsman who would advise on the artistic style for an interior space. Architects would also employ craftsmen or artisans to complete interior design for their buildings.
Buttons copy 1-4 words (ideally)
- Bullet (unordered) List - Item 1
- Bullet (unordered) List - Item 2
- Bullet (unordered) List - Item 3
- Indented I
- Indented II
- Indented III
- We're really indenting now!
- Ok, that's enough
- Numbered (ordered) list - Item 1
- Numbered (ordered) list - Item 2
- Indented...
- And again
Some italic text
Some bold text
| This | Is | A | Simple | Table | Example |
|---|---|---|---|---|---|
| Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell |
| 01234 | 01234 | 01234 | 01234 | 01234 | 01234 |
| A | Table | Containing | Some | Data | Here |
Video Block
The Video Block, as the name suggests, provides a simple way of embedding a video straight from YouTube or Vimeo. Simply paste in the URL to the video and EtchCMS will do the rest!
Further reading
For more in-depth reading around writing good content, here are some useful links...
🔗 Semrush's 14 Tips for Writing Awesome Website Content
🔗 5 Rules for Choosing the Right Words on Button Labels
🔗 Using the Title Attribute to Help Users Predict Where They Are Going