Building your first Architect layout – a 3×3 grid layout

  • Contents

  • 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.

    Create a new Blueprint

    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
    Enter Title, Short name and Description

    2: Enter Title, Short name and Description

    1. Enter a descriptive Title that will make it easier for you and anyone else understand what this Blueprint is for.
    2. 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.
    3. The Description is optional but is very useful for documenting the purpose of the Blueprint
    4. Publish now and Update often!
    Blueprint Design

    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.
    Select Content source

    4: Select Content source

    1. In the Steps box, change to step 2, Content Selection
    2. In the Source tab, select a Content source. For this example we'll use the Dummy content source.
    3. With the Dummy content, you need to tell it the Number of dummy records to create.
    Content layout

    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
    Set Title options

    6: Set Title options

    The Titles options let you set a prefix - e.g. a bullet or a thumbnail - and choose whether to link the title to the post or page.

    1. Make sure Link Titles is set to Yes
    Set Meta options

    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.

    Set Content/Excerpts options

    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.

    Set Feature options

    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.

    Save regularly!

    10: Save regularly!

    In WordPress, the save button will say Publish the first time, and Update thereafter. Use it often!

    Content Styling

    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

    Blueprint styling

    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

    Display using Headway

    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
    View the results - Headway

    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

    Display using a shortcode

    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
    View in TwentyThirteen

    16: View in TwentyThirteen

    Switch to TwentyThirteen and displaying the Blueprint using the Architect shortcode, we can see it's looking pretty good as well.

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

    View in Genesis

    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.

    Other themes

    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

    Next steps

    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!