1: Create a new Blueprint

Architect provides two means of creating a new Blueprint.

For this tutorial, we are going to start with a blank Blueprint, rather than one of the Presets.

1. Go to Architect > Blueprints
2. Click Add new blank Blueprint

3: Blueprint Design

By default, the first tab Blueprint Design will be selected.

1. The layout Type we need is the Grid, which is selected by default.
2. 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.
3. And set the Limit number of posts to show to to 9.
4. 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.
5. 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

1. 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.
2. 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.
3. Notice when you hover over a component, as well as being draggable, a resize handle appears on the right
4. 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.
5. 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.

9: Set Feature options

1. 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.
2. 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

13: Display using Headway

If you're using Headway, you can display Architect Blueprints using the Architect block.

1. In the Headway Visual Editor, got to the Layout you want the Blueprint to appear on and add an Architect block
2. Open its settings and in the Blueprint tab, choose the Blueprint to display
3. Save

15: Display using a shortcode

For other themes, there are a several ways of displaying Blueprints. For this tutorial, we'll use a shortcode.

1. Position your cursor in the page where you want to display the Blueprint, and select it from Insert Architect Blueprint dropdown
2. The shortcode will appear in your body content

17: View in Genesis

And again, switching to the default Genesis theme, also displayed using the shortcode, things are still looking great and inheriting the theme's styling.

Again I've only shown the first six because it is in a narrower container so much longer.

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!