• ♡ Sponsor

    Using Blocks

    #Blocks #Content

    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.


    Related

    User Guide

    Automad ships with an intuitive and clean user interface called the Dashboard. While it is recommended to use the dashboard to edit content and pages, it is also possible to use Automad with just a text editor and a file browser.

    User Guide  ⁄
    Creating Pages — User Guide

    Managing pages using the dashboard is quite self-explanatory. Pages can be added by hitting the  button on the right side of the navigation bar on top. To navigate to an existing page, you can browse the site tree on the left sidebar or start typing some letters of the page ...

    User Guide  ⁄
    General Data and Files — User Guide

    Basically general or shared content is just content without a page context. Usually that is the place to store site logos and content which is identical on all pages across your website. You can also choose your globally used theme here. Conceptually, shared content can be seen ...

    User Guide  ⁄
    Linking to Files and Pages — User Guide

    There are multiple places where you need to specify URLs to pages or paths to media files within your content. That may be a link within your markdown or a parameter for a tool or extension represented by a variable. Most of the times you would just use the buttons in the editor ...

    User Guide  ⁄
    Resizing Images — User Guide

    To optimize the speed of your website it is required to use images of an appropriate size. Images can be resized inline or by using the file manager. When using the image selection dialog, it is therefore possible and recommended to add the appropriate dimensions in pixels.

    Template Language  ⁄
    Variables — Template Language

    The actual value of a variable is depending on the current context. In most cases the context is the currently requested page. However, control structures can change the context to any other page during runtime, for example when iterating over a list of pages. In case a variable ...

    Variables  ⁄
    Reserved Variables — Variables

    Some variables have reserved names and are always defined. They can be found on top of the page/shared data section in the dashboard. Reseverd variables can be used like normal page variables.

    Building Themes  ⁄
    Block Layouts — Building Themes

    Aside from just stacking blocks on top of each other, Automad's block editor provides some handy features to create flexible layout directly in the block editor. It is possible to stretch a block to the full with of the parent container to make it stand out as well as to arrange ...

    Building Themes  ⁄
    Customizing Blocks — Building Themes

    Most of the blocks only consist of pure HTML tags without classes and just inherit theme styles when being displayed. However the default styling of more complex blocks like the mail form or the gallery block might not be matching a theme out of the box. You can use CSS custom ...

    • Automad
    • User Guide
    • Using Blocks
    Discuss
    Packages
    Release Notes
    Support
    Terms of Use
      Become a Sponsor
      GitHub
      Twitter
      Facebook
      Instagram
      2013-2022 by Marc Anton Dahmen
    Released under the MIT license

    A faceless machine, creating one's portrait in the internet.
  • Automad
  • Getting Started
  • System
  • User Guide
  • Developer Guide
  • Headless Mode
  • Discuss
  • Packages
  • Creating Pages
  • Using Blocks
  • General Data and Files
  • Linking to Files and Pages
  • Resizing Images
  • Key-Combos