Using Blocks

Blocks are little pieces of content like a text paragraph, a header, a gallery, a slideshow or many others. You can even add dynamic content like pagelists, filelists or custom snippets. The block editor provides an intuitive editing experience and enables users to freely compose a post from several blocks. Depending on the template in use, there can be one ore more block editors for different sections of the page. Block editors also support embedded content of certain services like YouTube, Vimeo and others by simply pasting an URL.

Adding Blocks

To add the first block, simply click somewhere in the block editor area. More blocks can be added anywhere in the editor by hitting the Enter ⏎ key. That will add a new block at the position of the cursor and you will be able to select a block type by either clicking the little  icon or using the Tab ⇥ key.

Note that blocks can be arranged by dragging them anywhere in the editor using the litte handle in their upper right corner.

Block Types

You can use the Enter and the Tab keys to navigate in the block editor and add new blocks. Note that every block also has its own little settings menu in the to right corner. Find below a list of the available blocks as well as an overview over all supported embed services.

• Paragraph: This is the default block and contains basic text.
• Section: Sections can be used to create more complex layouts based on flexbox. They can contain any other type of block, can be nested and styled. A section can also be used to create a typical card.
• Heading: Headings levels 1-6.
• List: A list of items, either ordered or unordered.
• Table: A table builder with flexible amounts of rows and columns.
• Quote: A quote block including an author field.
• Delimiter: A horizontal line that can be used as a delimiter bewteen blocks.
• Image: A single image.
• Gallery: Multiple images can be combined in a fexible and responsive masonry layout including a lightbox feature.
• Slideshow: Multiple images can be combined in an interactive carousel.
• Buttons: A set of up to two customizable buttons to create outstanding action links.
• Pagelist: Pagelists can used to render templates for each page in a configured set of pages to create blog or portfolio pages.
• Filelist: Similar to Pagelists, Filelists can be used to render snippets based on a set of files.
• Table of Contents: A simple, nested table of contents including headings of levels 2-4.
• Code: A block to display source code snippets.
• Markdown / HTML: A block for raw Markdown or HTML markup.
• Email Form: A customizable email form to create contact pages.
• Custom Snippet: A block the can be used to render snipptes of Automad's template language within the block editor.

Block Samples ⟶

Embeds

The block editor is able to recognize certain pasted content including code blocks, headlines, links, image URLs, video and music embeds. The follwing sites and services are supported for embedding content by just pasting an URL into the editor:

• Youtube
• CodePen
• Vimeo
• Imgur
• Instagram
• Dailymotion
• Giphy
• Mixcloud
• Soundcloud
• Twitter

Sections

By default, all blocks — depending on the theme in use — are simply placed in the center of a page with a certain maximum width. Some types can also be stretched to the full width of their parent container.

Now this is where sections come in. Sections can be used to create flexible and unique layouts directly within the dashboard without the need of touching the template itself. They act as a kind of nested block editor that can contain multiple blocks of any kind, including even deeper nested sections. The contained blocks can have their own width and can be justified in many ways.

Section Samples ⟶

Cards

Sections can also be used to create cards consisting of one or more associated blocks that are styled to become one outstanding unit of content. They can have background images, borders, rounded corner, shadows and so on.

Custom Snippets

Custom snippet blocks provide a very powerful way to display any kind of content on a page. Even more complex extensions like the Airmad Airtable integration can directly be embedded and customized from within the dashboard. Snippet blocks support all features of the Automad template language and can even use snippet files that are shipped with other packages.