• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

2 Dogs Media - NJ Web Design & SEO

  • Work
  • Services
  • About
  • We Recommend
  • Blog
  • search 2 dogs design
Analytics Blogging Gutenberg Nonprofits Reviews Search Engine Optimization Web Design Tips Website Speed Tutorials Wordpress Tips Wordpress Resource Lists

Disclaimer: Yes, there may be affiliate links in this post – but it is because we love some tools & services we use that much! We may get a small commission if you click on these links and make a purchase. We will NEVER recommend something that we have not used – puppy promise.

Keep America Beautiful Launch: Gutenberg Galore

November 13, 2019 by Jill Caren 4 Comments

0shares

We are beyond thrilled to announce the launch of the new and improved Keep America Beautiful (KAB) website!

2 Dogs Media was incredibly honored to have been part of this project since they do such amazing work and have a mission that we believe in! They are an amazing organization working very hard to help us have a more beautiful place to call home – so please, give them a peak and see what they are about – and get involved if you can!

On to the project!

About The Project

Keep America Beautiful was previously on an outdated version of Drupal and had a design and hierarchy that did not offer a good user experience or align with their brand.

A complete redesign was done and 2 Dogs Media was hired on as the development team to rebuild the website using WordPress.

Below is what the website looked like before the redesign. A hidden navigation in a mobile toggle, disjointed navigation, no cohesive color scheme and lack of clear call to actions were just some of the immediate issues they had.

KAB Before Redesign

The Features & Functionality

There are a whole lot – and we loved every minute of making it all happen!

The site was completely rebuilt on WordPress using ACF Pro and Gutenberg to allow the client the easiest management of content possible. We are looking forward to the WordPress 5.3 update to even have more improvements to have some fun with!

We migrated all the content from Drupal to WordPress including an affiliate database of almost 700 members. All of this data was then reformatted to work in the new design.

Below we will talk about the best parts of the development.

Easy Content Management

Content management was critical to the team as they wanted the ability easily add or update content but also have some flexibility to create pages in unique ways. Using Gutenberg with ACF Pro gave them exactly what they needed!

Most of the pages are pre-formatted so the client can easily update them, but as they grow familiar with the website they have the option to prepare more creative pages for the various programs they offer using standard Gutenberg blocks or Kioken Blocks which we have included for them.

The home page of the website was all done with Kioken Blocks and a few of the custom Gutenberg blocks we are showcasing below.

Custom Gutenberg Block Area

This is the part we are most excited about – we pimped out some Gutenberg blocks!

We really worked with what Gutenberg has made available to provide the client some flexible content blocks that will allow them to promote various pieces of their organization wherever they want!

The first thing we did was create a unique block category called “KAB Custom Blocks“, this will allow the client to easily pick and choose the blocks they want without digging around! You can see below that they have a whole separate area where the blocks they use most often reside for easy access!

My only gripe is that I was not able to find a way to have this group of blocks show at the TOP of the dropdown of blocks – so if anyone has any ideas, please let me know!

Custom block category just for the clients custom Gutenberg blocks

Event Call To Action Block

We actually created this block as a standard block they can insert and edit as needed to promote a certain event – as well as a reusable block so they can showcase a specific event (like their annual meeting) throughout the website giving them the ultimate in flexibility.

So they enter their content in the block fields which is shown below.

The result on the front end of the website is what you see below.

Cool right?

So now they have a block they can put on a specific page to promote a singular event for one of their programs – or they can use the reusable event block to showcase an event on multiple pages but change the content easily on all of the instances of the block via the reusable block area.

3 Block Grid

This is a unique grid that features 2 horizontal blocks and 1 vertical block which creates a great landing page design. The client can have the vertical block on the left or right allowing them to create an engaging page with a little bit of variation on each row.

They can choose the colors for the blocks, add text and a link as well as an image.

The Gutenberg block fields are shown below and the resulting front end block area is below that.

Gutenberg 3 Grid Block fields
3 Block Gutenberg Grid block on the front end.

Image Text Block

This is the block they are using the most as we are using it to create “landing” pages for parent menu items to help users navigate the site in a more aesthetically pleasing way.

The block contains a text area with an image and the client can select a color accent for each block. The text background color dropdown is populated with their brand colors so that the team does not stray from those colors, but you can also use a color picker in this area as well.

Image Text Block fields in WordPress admin

Donation Block

This block is also a default block they can use anywhere they way and can be customized to a specific page or they can choose the one from the reusable block area.

So if the are doing a special program for the fall – they can use a donation block to customize the promotional text for that campaign.

The blue box above the dollar amounts are all customized text that shows the impact that each donation amount makes which helps donors see how their donation is making an impact!

The image, background text color and all text is completely changeable by the client just by filling in the fields below.

Donation block text fields
Text fields in custom donation block that populates the text area of the donation block.

Donation block donation amount text fields
Text fields for the donation values on the donation module bar that will help users see the impact their donations can make.
Finished donation block after all fields are populated

Affiliate Search Block

This one is a little different in that the client cannot edit anything in the block – but they can place the block wherever they need to.

Because the Keep America Beautiful affiliates are such a crucial part of their success – they needed to make sure they had a way to promote their search driven affiliate database. This block was custom coded so that when a zip code is entered, it will take you to the affiliate search page where it will show you the KAB affiliates closest to you.

This is useful on so many pages – and it can easily be inserted anywhere they need it to be!

Custom Gutenberg block to search for nearest KAB affiliates

Post List Block

Another important piece of the structure was for the client to have the ability to share content and news throughout the website based on category and tags as well as their mission types.

So we created a custom Gutenberg block that allows them to select a number of posts and from every option in terms of categories and tags they have available! These posts will show as a grid of blocks in 3 columns anywhere they choose to place them.

This is great for their various programs and initiatives allowing them to feature the posts relevant to those specific items.

This block is modeled after our WordPress related posts tutorial.

Gutenberg block to select posts
Three post grid from Gutenberg block post

Other Features

The affiliate search page is a custom coded functionality that allows visitors to find a KAB affiliate near them so they can get involved in the various efforts happening in they community. The list or map options allows visitors to view how they are most comfortable and the search allows them to filter by radius.

Finally – we are working on building out an administrative area that will be filled with reporting functionality for the affiliates so they can track their efforts in making the world a more beautiful place. These reports will integrate with Salesforce so the client has all the data they need for reporting at a different level.

We are incredibly proud of this website – which will be ongoing for us as the KAB team looks to grow and improve the site in 2020! Have questions about anything in this post – leave a comment below and we will be glad to answer!

Categories: 2 Dogs Media News, Website Design

About Jill Caren

Jill Caren brings over 12 years of Wordpress and SEO experience to help you improve and grow your website. She has spoken at several events on SEO and has been published in several top SEO publications. You can contact Jill here.

Reader Interactions

Comments

  1. Lance says:
    November 26, 2019 at 6:36 am

    Nice set of blocks. I design a website for a nonprofit women’s shelter, and they asked me to set up a donation page a weekend before they wanted to start a pledge drive, so people can donate monthly, quarterly, or one-time. I did it, but I am not happy with it. I like your donation block idea. I may have to look into doing something like that for my client.

    Reply
    • Jill Caren says:
      November 26, 2019 at 7:52 am

      Hi Lance – I will do a tutorial for it soon, not sure when though, but it may help you! The donation block is one of my favorite features since they can customize it for various programs and events they may be having – I think this will really be useful for all nonprofits to use!

      Reply
  2. Giacomo Fusaro says:
    November 26, 2019 at 10:10 am

    Really smart way to have an easy and yet flexible backoffice!
    I have just one curiosity: how did you make the pre-formatted pages? Did You just created them in WordPress for the client (that is just updating them) or did you create some sort of template that the client can use even in pages he creates himself?

    Reply
    • Jill Caren says:
      November 27, 2019 at 6:51 am

      Thanks Giacomo – only the more complex pages like staff and board are done with ACF fields and custom templates. All the other pages are done in a way that allows them to use Gutenberg and the custom blocks so they can maximize the options they have. I am going to add a quick video to this post to showcase it better on the backend.

      Reply

Leave a Reply Cancel reply

Your email address will not be published.

Primary Sidebar

Recent Articles

  • Resizing WordPress Images
  • WordPress 5.3 Images: Everything You Need To Know
  • Keep America Beautiful Launch: Gutenberg Galore

Footer

Let’s Work Together!

Ready for a new best friend? Contact us at 800.397.5631 or if you are on the shy side - use our contact form and we will get back to you in a dog's lick.
phone: 732.241.5365
email: bark@2dogsdesign.com

Sign up for our newsletter!

© 2019 ยท 2 Dogs Media LLC
DMCA.com Protection Status