Skip to main content

Using Content Blocks

Updated over 5 months ago

Basker's content editor uses a flexible, block-based system to build pages. This allows you to add, arrange, and customize different types of content to create rich, dynamic layouts without writing any code.

This guide provides an overview of the two main types of blocks available: Basker Blocks, which are standard and available on all sites, and Theme Blocks, which are custom-built for your specific website theme.


Basker Blocks

These are the standard blocks included with Basker.

Basic Content & Layout

These are the fundamental building blocks for most pages.

  • Content Block: The most essential block for writing and formatting text.

    • Content: A rich text editor for adding headings, lists, bold/italic styling, and links.

    • Columns: A setting to control the width of the content column on the page.

  • Media Block: A flexible block for showcasing visual media.

    • Media Type: Choose to display a single Image, a Video, or a Gallery of multiple images.

    • Image/Video/Gallery: Upload your media. For videos, you can typically provide a URL from a service like YouTube or Vimeo.

    • Caption: Add an optional caption to display below the media.

  • Button Block: Used to create one or more call-to-action buttons.

    • Buttons: For each button, you can configure the following:

      • Label: The text that appears on the button.

      • URL: The page or external website the button links to.

      • Variant: The visual style of the button (e.g., Primary, Secondary), which is determined by your site's theme.

  • Layout Block: A structural block for organizing other blocks into columns.

    • Layout: Choose a column structure (e.g., 50/50, 33/67, 67/33, or three equal columns).

    • Columns: Drag and drop other blocks into the designated column areas.

  • Well Block: A simple container that visually groups content within a colored background, helping it stand out from the rest of the page. You can place other blocks inside it.

  • Iframe Block: Allows you to embed content from another website directly into your page.

    • URL: The URL of the content you want to embed (e.g., a Google Map, a YouTube video, a SoundCloud player).

    • Height: The height of the embedded content frame in pixels.

Promotional & Feature Blocks

These blocks are designed to highlight specific content and engage users.

  • Hero Block: A large, visually prominent block typically used at the top of a page.

    • Media: Add a background Image or Video.

    • Headline & Sub-headline: Add large, prominent text over the media.

    • Content: Add a paragraph of descriptive text.

    • Buttons: Include one or more call-to-action buttons.

  • Call to Action (CTA) Block: A distinct section designed to grab attention.

    • Layout: Choose from different layouts to position the text and buttons.

    • Headline & Content: Add a title and descriptive text.

    • Buttons: Add one or more call-to-action buttons.

  • Banner Block: A full-width banner for displaying important announcements.

    • Content: The message to be displayed in the banner.

    • Banner Type: Choose a style (e.g., Info, Warning, Error) which applies different pre-set colors.

    • Icon: Optionally add an icon to the banner.

    • Enable Dismiss: Allow users to close or hide the banner.

  • Carousel Block: Creates a rotating slider or slideshow.

    • Slides: For each slide, you can add an Image, a Headline, descriptive Content, and an optional Button.

Dynamic & Collection Blocks

These blocks automatically pull in content from other areas of your site.

  • Collection Block: Displays a list of items from any collection.

    • Intro Content: Add an optional title or text to appear above the list.

    • Populate By:

      • Collection: Automatically displays the most recent items. You can set a Limit and, for Posts, filter by Category.

      • Individual Selection: Manually pick specific items to feature.

    • Collections to Show: Select the collection you want to display (e.g., Events, Posts, People).

  • Form Block: Embeds a pre-built form onto a page.

    • Form: Select a form from the dropdown list. The forms themselves are created and managed in the Forms section of the CMS.

Ticketing & Event Blocks

These blocks are specifically for managing event bookings and calendars.

  • Booking Block: Integrates with your ticketing system for a specific event.

    • Event: Choose the event you want to feature.

    • Display Mode: Select Calendar to show a full calendar of available dates or List to display upcoming performances in a simple list. The block automatically shows the available performances for the selected event.

  • Calendar Block: Displays a full-page, interactive calendar of all your published events, allowing users to browse by month and click on events for more details.

Specialized Blocks

These blocks provide advanced, specific functionality.

  • Donation Block: Integrates with a payment provider to accept donations.

    • Content: Add a title and description to encourage donations.

    • Suggested Amounts: Define pre-set donation amounts for users to choose from.

    • Configuration: This block must be configured by an administrator to connect to a payment provider (like Stripe).

  • Membership Block: Displays membership levels and allows users to purchase them.

    • Intro Content: Add a title and description for the membership section.

    • Membership Levels: Select the membership levels (which are created in the Memberships collection) that you want to offer. The block will automatically display them with their prices and benefits.


Theme Blocks

Beyond the standard Basker Blocks, your website can have its own set of custom-designed Theme Blocks.

  • What they are: Theme Blocks are custom blocks created by your website developer specifically for your site's design and needs. They will appear in the block selector alongside the standard Basker Blocks. Examples might include a "Testimonial" block, a "Staff Grid," or a uniquely styled "Product Feature" block.

  • How to use them: The fields, options, and appearance of Theme Blocks are unique to your theme. For guidance on the custom blocks available to you, please consult your theme's documentation or contact your web developer.

For Developers: To learn how to create custom blocks for a Basker theme, please refer to the official developer documentation at basker.dev.

Did this answer your question?