Civics Alliance

Services

Gutenberg blocks 

PHP, JavaScript

WordPress development

Gravity Forms

The Events Calendar

Client

National Association of Scholars

Year

2021

About The Client

Civics Alliance is a project by the National Association of Scholars aimed at improving America’s civics education. The Association itself is a non-profit organization that seeks to reform higher education, specifically liberal arts.

Location

New York, USA

Competence

Civics education in the USA

Industry

Education, Liberal Arts

Problem

Our task was to develop 8 pages based on the design provided: Home, Bill Tracker, Board, Contacts, FAQ, Single Post, Events and Single Event Post. The Events page had to load the events from the Eventbrite site. Additionally, we needed to design a theme cover image and a favicon.

Single posts had to have to display options: with and without a cover image (with a colored placeholder). Similarly, the Board page had to have a different member cards grid depending on whether or not they have photos.

Solution

We’ve made the site absolutely flexible. It allows admins to select from multiple layout options, and it also adapts to different content automatically. All the necessary page templates ensure the site layout looks balanced both with and without cover images and photos. Text pages may have sidebar menus of a selected type.

On all pages, we’ve developed a total of 10 custom Gutenberg blocks. Some of them display content automatically while for the others, the admins choose the preferred posts, images, etc.

Civics Alliance - Header & hero section

Home page - Header and Hero Section

The home page starts with a header that transforms into a hamburger menu in mobile versions. The hero section below it has a Sign To Join button that leads to the Sign In page. Admins can edit all the content from the dashboard.

Civics Alliance - Resources Mentioned

Post sections - Resources Mentioned

The design didn’t imply any separate page dedicated to the blog posts. However, the site has 4 different blocks with posts: Related, Featured, The Latest and Resources Mentioned on the sidebar. While the first three of these blocks display links only to internal posts, the Resources Mentioned block may contain external links. Admins specify the links for this section from the admin dashboard.

Civics Alliance - Featured and The Latest

Post sections - Featured and The Latest

The Featured block on the home page shows a post of the admins’ selection. More specifically, there’s the post excerpt with the cover image above and a Read More button below, linking to the post’s page. The Latest section left of Featured displays the posts automatically: it takes the three most recently published ones.

Civics Alliance - Related

Post sections - Related

At the bottom of the post’s page, the Related section shows three posts from the same category as the post itself (or fewer, if there are fewer than three available). This block displays the posts automatically.

We’ve created two templates for the single post pages: for when there is a cover image and when there isn’t. If a post contains no cover image, the colored block takes its place.

Civics Alliance - Post Templates (with image)

Post Templates

Posts (as well as any other text page on the site) have two possible layout options – with or without the sidebar navigation menu. The admins can select not only whether or not the page should have a menu but also which type of menu it should be and what items it should contain. The menu, if selected, appears on the left.

Civics Alliance - Events

Events Page

The page imports events from the Eventbrite site with The Events Calendar plugin for WordPress. Same as posts, single events have different display options – with a cover image or without it.

Civicss Alliance - Bill Tracker

Bill Tracker page

The key part of this page is an interactive map of the USA. A click on a state opens the information about civics legislation and the status of current legislation projects. Users can interact with the map itself as well as with the dropdown menu right beneath the map. Both options highlight the state selected, and a hover over a state triggers a popup with the state name.

Civics Alliance - Board

Board Page

The Board page displays the cards with the members of the board. The page has two layout options: for the cards with photos or without them. The former displays the cards by 3 in a row and the latter – by 4. Each card’s content is fully editable from the admin dashboard.

Civics Alliance - FAQ

FAQ Page

The Learn More button in the Our Mission block on the home page takes users to the FAQ page. This page has a two-column accordion block with popular questions. It allows having multiple items expanded at the same time: item contraction occurs only on-click.

Result

We’ve developed the site with lots of templates for different types of content. Many of the 10 custom blocks we’ve built display the content automatically, others are fully editable for the admins.

The site has lots of interactive elements, which we’ve supplemented with the necessary focus state effects. Additionally, our design team created a theme cover for this site’s theme and a favicon.