The Events Calendar
National Association of Scholars
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.
New York, USA
Civics education in the USA
Education, Liberal Arts
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.
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.
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.
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.
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.
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.