Schedule

The Block Library

Below is a sampling of what your Block Library will look like. This is how we combat Design Drift. All your elements, pre-styled, in a single place. Now, you don’t have to stare at a blank screen for too long.

Icon Pods

Navigate to Patterns and select Icon Pods. This is a templated pattern that can be edited directly in the Block Editor.

This block utilizes Font Awesome icons. At the top of each pod, there is an HTML block where you can copy/paste a Font Awesome icon code. Our site primarily uses Thin icons from Font Awesome. If Duotone is selected, a color will be automatically applied.

Custom web design

Every website we build at Classic City Consulting is custom-built. There is a time and a place for templates, but that’s not our specialty. We’ve created our own baseline theme that works with the WordPress Block Editor that cuts website editors’ time in half.

Learn more

Website content writing

A website that doesn’t convert typically has one of two problems: (1) a poor user experience or (2) writing that doesn’t connect with the audience. When thinking about a website redesign, we want to define the key pages a typical customer will view and craft them to line up with your message.

Learn more

Responsive web design

Mobile devices have been around forever at this point. However, the mobile version of a lot of websites needs some love. We will look at your analytics, determine what types of devices your customers are viewing your site and make sure we are designing with the right screen sizes in mind.

Learn more

eCommerce functionality

There are a lot of eCommerce platforms that you can design your website in (Shopify and WooCommerce being two of the larger ones). If you are in the eCommerce space, we will work to pair you with the right eCommerce platform that will serve your needs for years to come.

Learn more

Landing page design

Without landing pages, marketing is meaningless. And, if those landing pages don’t convert, then what is the point? When we work together month-over-month, we’ll partner with your marketing team to understand the goals of each campaign and craft the appropriate landing pages for your website.

Learn more

WordPress design

WordPress is our CMS of choice. We have a talented team of developers who have spent years customizing WordPress to ensure that your team can maintain your site for years to come. WordPress gives you the long-term flexibility to add in features, while still being a robust management system to run everything through.

Learn more

Bubbles

A common component on this site is the “rounded edge block with a background color.” All you need to do to create this is to create a Group, add a Background Color, and add 2 levels of padding.

If you want there to be a border and dropshadow, In the Styles section of the Block settings, select Box. The sample below has Box selected.

Some basic text right here. Some basic text right here. Some basic text right here. Some basic text right here. Some basic text right here. Some basic text right here. Some basic text right here. Some basic text right here. Some basic text right here. Some basic text right here. Some basic text right here.

Monopoly Cards

This is an individual element, best used inside of a Grid block (using Grid will force each card to be the same height). Monopoly Cards are a simple Pattern in the library. They are customizable using the WP Block Editor. To change the color of the header, select the Paragraph inside of the Stack, and edit it’s Background Color like you normally would in the Block Editor.

Depending on what you want the cards to do on mobile, you’ll want to add the appropriate CSS class from the Add-on CSS classes list below.

Finished a rebrand

You just finished working with an amazing agency who took your new message and gave your brand aesthetic a needed lift.

Finished a rebrand

You just finished working with an amazing agency who took your new message and gave your brand aesthetic a needed lift.

Finished a rebrand

You just finished working with an amazing agency who took your new message and gave your brand aesthetic a needed lift.

Double Header

Use the standard Header block and select H2. Push SHIFT+ENTER where you want the line break to be. On the lower line, highlight the text and BOLD and ITALICIZE it.

Here is the big header
This is the small

Heading with an icon

We have redefined a single style for headings. Use the standard Heading block. In the Styles section of the Block settings, select Bolt.

Heading with Bolt

Pre-heading text

Use the standard Paragraph block. In the Styles section of the Block settings, select Above Header. Below this block, use a standard Heading block (the margins will automatically be adjusted).

Pre-heading text

Standard heading

Three Image Divider

This is a Pattern. Search for Three Image Divider and the appropriate CSS class will be automatically added in. Don’t worry about sizing on the editor – it will automatically look correct on the front end. Replace each image with a square image of your choice.

Custom bullets

We have pre-defined a couple different styles for bullet points using Font Awesome. Use the standard List block (not Numbered). Once you’ve typed out your list, make sure the parent-level List block is selected. In the Styles section of the Block settings, select one of the options:

Checks

  • Here is some sample content
  • Another bullet of content
  • And lastly, the final piece for this example

Right Arrow

  • Here is some sample content
  • Another bullet of content
  • And lastly, the final piece for this example

Icon Header

This is a Pattern that can be added. It contains two elements: Heading and a Font Awesome icon. To change the color, select the Icon Header group, and add one of the following CSS classes: is-green, is-blue, is-red.

Are we the right fit?

Dashed Line Dividers

This is a Pattern. You can search in the Block Library for Dashed Line and this will come up. In the HTML code, you’ll see a modifier CSS class for the color. Feel free to modify that color to make it match what you’re looking for: is-green, is-blue, is-red, is-purple, is-orange, is-base.

Caption Callouts on Images

Simply add a caption to an image like you normally would. I recommend selecting the Style for the image as Rounded. Select the image and add a CSS Class called: ccc-caption. This will make the caption styled as you see below. You may also add one of the color modifier classes to color it: is-green, is-blue, is-red, is-purple, is-orange, is-base.

Here is a caption

Add-on CSS classes

ccc-hanger

Apply this to the last Group within a Group to have it hang over the bottom edge slightly.

ccc-mobile-horizontal-scroll

Used mostly on Grid blocks, this will force all the cards in the grid to scroll horizontally on a mobile device.

Let’s build a Block Library for your site

Every company starts at a different place. On our call, we’ll get a handle on what stage you are currently in and what makes sense for your next best step.

Sometimes that’s growing your current website. Other times, it is building a new site to be the foundation for your marketing efforts. I’ll get a handle on what drives ROI for you and walk you through what it would look like to work with us.

By the end, you’ll have items to take back to your team to implement and know whether or not we’re the right fit.