Content Blocks for Covenant House

Covenant House New Jersey is a large organization that does so much great work. They needed a website that better provided help and services, while encouraging engagement and donations. We worked with Yeeboo Digital to build them the solution.

Yeeboo Digital came to us with a challenge for the site. With such a large variety of content, we needed to build a site that allowed for flexibility and fluidity on a page per page basis. We needed a way to display content in differing layouts to ensure each pages’ story was told in a strong and moving way. We wanted to build user friendly layouts to enabled visitors to find information quickly. The challenge started in the hands of Yeeboo Digital, where they planned and designed some beautiful templates and blocks with the client. These plans were next handed off to our development team to build them out.

While building the client a dynamic WordPress site, the challenge was to ensure:

  • The content blocks could be used anywhere within a page
  • The blocks were easy to use in the WordPress backend, even for users who knew nothing about code.
  • There was flexibility built-in, so blocks could be used differently on each page in order to build exciting and dynamic layouts on the fly

We used a mix of custom built blocks, shortcodes and styled up the built in Gutenberg blocks to ensure these worked together to display their content.

Let’s dig deeper into a few of the many blocks we used here and how they helped display content.

Full width statistic bar shortcode

Full width content bar for Covenant House NJ

Covenant House New Jersey has some incredible statistics that needed to jump off the page in a highlighted way to ensure they had a large impact on readers. Yeeboo Digital’s designs paved the way to ensure they had a visible grab. We chose to build the client an easy-to-use shortcode. This shortcode allows the client to customize:

  • the placement of the block
  • the background colour of the block
  • and the content of the block itself.

This easy to use block was a huge success and was used across the Covenant House New Jersey’s site. You can see it in action on Covenant House New Jersey’s Understanding Our Young People Page.

Custom Accordion Block

Covenant House New Jersey Accordion Block

When receiving Covenant House New Jersey’s content we realized we needed an easy way to group large amounts of similar information without overloading our readers. We chose to build them an accordion block. This accordion block was built as a custom Gutenberg Block using Advance Custom Field’s repeater fields. Using a repeater field here meant the client can have as many or as few accordions as they needed to fit with the content. Using a custom Gutenberg block, meant we could build this to meet the client’s custom needs and styles, while allowing the block to be used anywhere within a page, for dynamic and effective layouts.

The custom accordion blocks really helped streamline information on the clients sites, especially in sections where many steps were involved. A reader could easily see all steps before clicking in to see more information. See this live on Covenant House New Jersey’s do it yourself Fundraising page.

Styling the Built in Gallery Block

Covenant House New Jersey's Gallery Grid Block

Covenant House New Jersey runs many yearly events, and each of those events had an extensive gallery of images from previous years. We wanted an engaging way to display these images on each of the events pages. We chose to style the photos using the Gutenberg Gallery block. We styled on top of the default look and feel of the blocks to ensure they fit with the sites designs. Using the built-in blocks allowed us to customize the grid on a page per page basis, and took advantage of the built-in power this block contains.

In using Gutenberg blocks and special customizations we were able to ensure Covenant House New Jersey walked away with a well organized and easy to update site.  💥

 

Want more? Learn about our favourite built in Gutenberg blocks , or learn how to build your own custom blocks!

 

Want help building reusable, easy to update blocks for your site? Contact us!