Feast+ Patterns

How to Use Blocks & Patterns

Once you have your Feast+ settings configured, it's time to start adding the new block patterns! This page goes over how to use blocks & patterns throughout the site.

What are Patterns? Feast Patterns are pre-designed building blocks that form the layout of your site. You can mix and match them to create a unique, customized layout tailored to your content needs.

Jump to:

How to Use Block Patterns

You can find the Feast+ patterns in the block editor > [+] > Patterns. Think of these patterns as pre-designed "building blocks" of your site.

Some of the patterns you'll find are:

  • featured recipe
  • full width search block
  • about author
  • tip box
  • reader review
  • instructions grid
  • travel patterns (see below)

While travel blogs can use any of the Feast+ patterns, we've organized curated travel patterns in a separate tab to make them easier to find:

Design Kits

Need some inspiration to kickstart your website's look? We've provided new design kits with pre-set branding settings (color combinations, font choices, etc.), homepage templates, and coordinating brand graphics to help you create a cohesive website!

Grouping Blocks

To take maximum advantage of Feast+, you'll need to group all your content into group blocks to define sections. This will create a cleaner layout, as well as allow you to apply the background color to any Feast+ pattern or pattern you create.

Note: Patterns you insert from the Feast+ library are already grouped. You do not need to regroup those unless you add a new element to them.

Selecting the group block provides you with styles that can be applied:

Remove Space Between Blocks

To remove the white space between two blocks, select the Group block, then open the Block → Styles panel and adjust the margin settings. (See video below for a walkthrough.)

Note: This requires “Enable Block Options” to be enabled in your Feast Plugin Settings.

Video Tutorial:

Full-Width Post Header

If you'd like to display your post header in a full-width banner (instead of on a white background next to the sidebar), you can enable that in Feast+ Branding > Post Header:

Result:

Applying a branded background color

Depending on individual block design & its purpose, the background may or not be automatically applied.

If you would like to add a background to a Feast+ pattern that does not have one: Select the group block > Then select the Group style. Feast Full Width will extend to the edges of the screen while Branding Background will just add color to the box.

Note: You can use this background style on any group of blocks, whether a Feast+ pattern or your own set of grouped blocks. You just need to be using a group block in order for this Styles tab to appear.

Removing the background color

To remove the background color, Select the group block > then select the Default style in the sidebar.

Update April 2024: In light of the new Styles tab, we've depreciated the need to add manual classes to the Additional CSS field. If your backgrounds aren't removing, remove the feast-no-background or full-width-feature-wrapper class and use the Styles tab instead.

Applying a custom background pattern

You can now choose a fun pattern to add to group blocks! We recommend adding this to blocks that you want to stand out and draw more attention to.

  1. Go to Feast Plugin > Branding (Feast+) > Custom Background
  2. Choose your desired background pattern and hit "SAVE".
  3. You can now manually add this style to Group blocks of your choosing by selecting "Feast Full Width Custom Background".

Changing block background colors

It is not recommended practice to change colors on an individual basis using this selector. If you want to change the background colors, you should do so using the Group styles above.

You can now add your Feast+ branding palette to the editor color swatches by going into Feast+ Branding > Add my brand colors to the block editor color palette.

Note that while these are "tied" to your branding swatches (meaning, they will change if you update your Feast+ color palette), you will be responsible for managing text accessibility when using these.

Next Steps

Once you understand the basics of Feast+, move onto reviewing the individual Feast+ Patterns so that you can best utilize everything that is available!