Block Editor
The WordPress Block Editor transforms creating web pages into a much simpler process.
Elements of websites such as paragraphs, headings, images are referred to as ‘blocks’ and can be arranged in a variety of ways to suit the needs of the user. Blocks can be accessed by pressing the blue plus button. Patterns are also reached this way, which are sets of blocks used to create a section of a website. For example, a header with a navigation block and a site logo.
The 3 lines open the list view and the outline view. The list view shows a list of all the blocks while the outline view gives an outline of the page using the headings present.
Options on the right change depending on what is currently being edited. There are options such as text size, text color, letter spacing, etc for Paragraph blocks. However, for a separator block, those options become style, margin, and background color
Other Notes
Categories & Query Loops
- Categories are filterable and can be used to build navigation. For example, to categorize student work, the categories could be: Course, Software/Tech, Genre (subcategories: Drafting, Architecture), and Events
- Query loops are blocks that display different posts based on set parameters
Themes For Client Website
Inspiration
Our client provided us with these websites:
In addition, on our figjam board, we have sections dedicated to what content will be used for which page. I kept this information in mind (but is subject to change in the future).
Research
As a result of my research into finding themes that could be suitable for our client’s website, I found two that could work.
Grabber
Grabber uses the block editor and has several templates and patterns. It’s a template for a business that sells products, but it already has most of the parts we need.
Our client wants a hero image on nearly every page. The portion shown above can be altered to have a slide show and the buttons can be deleted. The social media icons and number at the top can be moved.
Other content such as the description about the department, the video and information about studying abroad will mainly be static.
The same is said with this page where this information is static. The pattern below can be used to give information that doesn’t take much up space as policy, prices, and hours. The buttons and headings can be deleted.
It’s clear that the student showcase of work was the most important part of the website. Over time that showcase of work will become longer so I assume that these images should be organized in a blog-looking format.
This pattern for articles can be used for events on the homepage or for the gallery page.
Our team also liked the use of color to break content into sections that Carnegie Mellon University has on their website (https://www.architecture.cmu.edu) which this template can certainly emulate.
This portion can be used on the About page for information regarding staff or testimonials (which may or may not become part of the website).
Below is the footer. There are icons for social media already there which can link to the department social media. ‘Get In Touch’ can display the contact information. In addition, the small bit of text underneath ‘theme test’ (which can become a link back to the home page) can be a place to add the MCC design program and any other links that aren’t social platforms.
Travelsite
The second theme I found also uses the block editor and was designed for a travel company. It has nearly 100 patterns and many of them could be used for what we need.
The very top of the page is this full screen banner which, if you look back at the content for the home page, goes along with the clients wants. The buttons can be removed and the extra space in the navigation could be used to add a site logo.
These three images can be used for events or the student showcase. Here are my ideas:
Image 1 & 2 – These may be more suitable for student showcase images. Image 1 can be on the full student showcase page with a smaller caption than what’s being displayed since less information will be written such as the student’s name, the class it was created in, or the date. Image 2 could be a snippet of the student showcase that’s on the home page and if you hover over one of the images the course name (ex: DESN 101) pops up.
Image 3 – This pattern is suitable for the events section.
Unlike Grabber, this theme has many more patterns that can be utilized. An example is this pattern (below) that isn’t used on the initial home page that appears when you first download the theme. As said, our client wants a hero image on nearly every page so a pattern for an about page that already has a hero image is helpful.
