Building your first Architect layout – a 3×3 grid layout
Goal: A 3×3 grid of excerpts
The goal of this tutorial is a three by three grid of excerpts, using the dummy content type as shown.

This document can be viewed online at: https://architect4wp.com/codex/building-your-first-architect-layout/
2: Enter Title, Short name and Description
- Enter a descriptive Title that will make it easier for you and anyone else understand what this Blueprint is for.
- Enter Short name. The Blueprint Short name is used internally by Architect and can only contain letters, numbers and dashes. It is compulsory. It is also what you include in the Architect shortcode and is very important when using custom CSS.
- The Description is optional but is very useful for documenting the purpose of the Blueprint
- Publish now and Update often!
3: Blueprint Design
By default, the first tab Blueprint Design will be selected.
- The layout Type we need is the Grid, which is selected by default.
- We will keep the Limit posts option enabled for this example. If you turn this off, you may need to enable Pagination settings or else you could end up with a very long page.
- And set the Limit number of posts to show to to 9.
- In Panels across, is where we set how many Panels of posts across will be displayed at each breakpoint on Responsive Design websites. Breakpoints are preset but can be changed in Architect > Options > Responsive.
- When we have a Grid layout, we usually need a margin between the Panels. I prefer using percentage units here so the gap scales as well.
5: Content layout
- Enable/Disable Components to show. For this example, we want to display the categories. This can be done using any Meta field, but we will use Meta2. We will keep the rest as is, so enabled components are: Title, Excerpt, Feature, Meta1 and Meta2.
- Drag and drop Meta2 to where we want to display it. We will keep its width at 100% as we don't want anything else on the same row.
- Notice when you hover over a component, as well as being draggable, a resize handle appears on the right
- Resize the Feature and Excerpt components. In this example we will make it the Feature one third, or 33%, of the width of the panel area and the Excerpt the other 67% so it appears on the same row.
- For this example, we will keep the Feature location to In Components Group. With this setting, the area under the image will be empty. Use In body/excerpt left or In body/excerpt right if you want the text to wrap around the image. If you are creating a slider, you would often set the feature location to Background
7: Set Meta options
Often, the default Meta configs will suffice. For this example we've changed their contents just for demonstration purposes. Note the use of the HTML in Meta1. Simple HTML is valid.
Available tags are %author% %email% %date% %categories% %tags %commentslink% %editlink% %id%.
For custom taxonomies, prefix with ct:. e.g. To display the Woo Testimonials category, you would use %ct:testimonial-category%.
Use shortcodes to add custom functions to meta. e.g. [add_to_cart id="%id%"]
Note 1: Enclose any author related text in // to hide it when using excluded authors.
Note 2: The email address will be encoded to prevent automated harvesting by spammers.
8: Set Content/Excerpts options
Like Meta and Title, you won't always need to change anything in the Contents/Excerpts options.
For this example,have changed a couple if fields as highlighted.
Note: Excerpt trimming only applies to posts without manually entered excerpts. Those ones will retain all the content the author has entered.
9: Set Feature options
- We will leave the Maximum dimensions as they are; however, it is important to understand their role. This the maximum size the image will display. See below for an explanation.
- For layouts with the feature in the components area, you will need to give the Feature a Margin so it doesn't push up against the excerpt. This setting is in percent as it's deducted from the width of the Feature set in the layout.
Although for this example we will leave other Feature settings as is, there is a lot to explore here.
About Maximum dimensions
When setting the Maximum dimensions, it is important to set these to what you expect the maximum size they will ever been seen at. When only displaying one Panel across, this is pretty easy to know.
However, when using a grid of multiple columns, the image could be larger at a lower breakpoint than a higher one, so you will have to consider this.
If this is a Panel is to be used in a full screen width Blueprint, you maximum width will need to be at least as large as the commonest largest desktop - i.e. around 2600px.
In the future, Architect will support different Maximum dimensions for the different breakpoints.
Setting the Maximum dimensions too low will make the images smaller than the area set for Features. Setting it higher than necessary, will make for slower loading of the page than it should.
For example, if you wanted to display an image the full width (100%) of a 900px wide panel, then a setting of 400px wide woutdn't fill that width.
Alternatively, if you know the widest your panels will ever be is 300px, then - for a 100% wide image - set the maximum image width to 300px.
11: Content Styling
Architect Blueprints have very limited default Content styling and will inherit some general content styling from your theme.
Any changes in Content Styling will override your theme's styling
The Content Styling button can be turned off in Architect > Options if you want to style using your own stylesheets or in the Headway Visual Editor, Design Mode.
To save yourself time, you should setup some default styling that wil be used by all new unstyled Blueprints. This is done in Architect > Styling Defaults
12: Blueprint styling
Architect Blueprints have very limited default Blueprint styling so as not to clash with your theme
Blueprint styling is not inherited from your theme - since these are all Architect specific items being styled.
The Blueprint Styling button can be turned off in Architect > Options if you want to style using your own stylesheets or in the Headway Visual Editor, Design Mode.
To save yourself time, you should setup some default styling that wil be used by all new unstyled Blueprints. This is done in Architect > Styling Defaults
13: Display using Headway
If you're using Headway, you can display Architect Blueprints using the Architect block.
- In the Headway Visual Editor, got to the Layout you want the Blueprint to appear on and add an Architect block
- Open its settings and in the Blueprint tab, choose the Blueprint to display
- Save
14: View the results - Headway
If everything works as expected, you should now see the Blueprint displayed after reloading the page it is on.
(The number one cause of things not appearing as expected is caching. Some WP caching plugins can be set to be very aggressive in their caching, doggedly hanging onto old page designs. So the first thing to do is empty the WP cache by whatever method your system implements that.)
You can see how this is inheriting the Headway default styling
15: Display using a shortcode
For other themes, there are a several ways of displaying Blueprints. For this tutorial, we'll use a shortcode.
- Position your cursor in the page where you want to display the Blueprint, and select it from Insert Architect Blueprint dropdown
- The shortcode will appear in your body content
18: Other themes
Yes I chose TwentyThirteen and Genesis because they didn't require any tweaks. Others I tried had minor styling issues, like underlined titles, extra image and paragraph padding.
Usually, you will need to tweak the styling and layout a little for your specific theme - since every theme is different
19: Next steps
Having completed this tutorial, it is time to experiment.
- Try different arrangements and sizes for the components
- Try more or less panels across
- Try changing the styling to see how it overrides
And so on.
Have fun!