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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
More Case Studies
Explore our other projects
European Bank for Reconstruction and Development ‘20
MetaGeeks
European Bank for Reconstruction and Development ’19
PEARL iZUMi Cycling Gear
Transform Your Vision
Request your website now
Over 900 companies trust us with their online presence
Belov Digital are true professionals and worked diligently within the timeframe we had to diagnose the problems I was having with my website. Super responsive and attentive. My new go-to for anything web-dev agency. Thank you!
All members of the team communicated quickly and clearly. They were great to work with and completed my project quickly. I will hire them again when needed.
I appreciate all the work Belov has done on my site. The team is very prompt, and delivers. I also appreciate that they explains everything very well. I would very much recommend Belov Digital and will hire them again. Thank you!
