DE
FR
Welcome to the EtchCMS Component Guide
Introduction
Welcome to the Component Guide! The purpose of this page is to illustrate various content options which are available to you on this website.
When you're 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 any lengthy sections of text in a question and answer format.
-
Simply click on the question and the answer is revealed underneath.
-
No! Use as many as needed.
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 #2
Feature #3
Feature #4
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.
Grid Block
This can also be displayed as a carousel, if desired.
Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Iframe Block
Much like the Embed block, the Iframe block allows an embed of another website but via an iframe. Not intended for use with videos (see 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
Logos Block
The Logos Block, as the name suggests, provides a simple way of displaying a grid of company logos with optional links.
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.
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.
Reusable Content Example
This is an example Text Block within a Reusable Content Block! Just like any other multi-column section, it's possible to add multiple rows containing a maximum of two blocks.
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.
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. 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.
- 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!