Building your first Architect Slider layout

  • Contents

    • This tutorial will help you build a slider using Architect.

    There is a strong school of thought against the use of sliders on websites for various reasons.

    One of the main reasons is later slides don’t get viewed as often as the first couple.

    Therefore, it is wise when using sliders to order the slides in descending value or importance. For example, in featured post sliders, you would have the newest (and least read post) first, and the oldest (and most read post – that has already been the first slide, at the end).

    If all the slides have equal importance, then a slider may not be the best way of ensuring your viewer sees all their content.

     

    This document can be viewed online at: https://architect4wp.com/codex/building-your-first-architect-slider-layout/

    Goal: a featured posts slider

    The goal of this tutorial is a standard featured posts slider with bullet navigation

    Create a new Blueprint

    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

    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

    Blueprint Design

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

    1. The layout Type we need is the Slider, which is selected by default.
    2. For a slider you should always set Limit Posts to Yes.
    3. And set the Limit number of posts to show to to 5. Five is a good number for things like featured posts.
    4. For this slider, set Panels across, to 1 for all breakpoints. Breakpoints are preset but can be changed in Architect > Options > Responsive. If you set higher than 1, you will get a carousel style slider.
    5. When we have a slider layout, we usually don't want any margin between the Panels, so set Panels Margins to 0. (In a carousel you would though).
    6. For a slider that is not going to fill the width the container holding our Blueprint, we want to limit the width. This should equal to or less than the maximum width you want images to be. For this example, we will set Blueprint max width to 600px. For ful width sliders, leave this on 100%.
    Setting slider navigation and behaviour

    Setting slider navigation and behaviour

    1. Switch to the Sliders & Tabbed tab. We will leave most of the settings here on their defaults, but this is a great place to start experimenting after you finish this tutorial.
    2. Change the Transition Type to Slide
    3. To make it an auto running slideshow, give it an Interval. Set it high enough for the viewer to read the slide and not be annoyed by rapid changing, but low enough that they get shown the first couple of slides. (Please note, currently auto running slide shows on reaching the end, will reverse back thru the slides. A future update will allow them to either stop or skip back to the first slide)
    Select Content source

    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 Posts content source. If your site doesn't have any content yet, use the Dummy content source, and skip the next step.
    Ordering posts

    Ordering posts

    1. Switch to the Settings tab. Remembering new posts are always being added, our slider will show the most recent posts as per our filters (set in the next main step). We therefore want to ensure the newest post displays first.
    2. Set the Order by to Date
    3. Set Order direction to Descending (i.e. newest first, oldest last)
    Set category filter

    Set category filter

    1. Switch to the Filters tab
    2. Select the category of your featured posts in Include categories
    Content layout

    Content layout

    1. Switch to the Content Layout screen
    2. Enable/Disable Components to show. For this slider, we'll just use Title, Excerpt and Feature
    3. Title will be 100% wide already, resize Excerpt to 100% as well
    4. We want the featured image to fill the whole backround, so we set the Feature location to Background
    5. You can set the Components area position to appear where ever you want. In this example, set it to Bottom
    6. And finally, nudge it up a bit with the Nudge components area up/down controller. 10% is nice value to start.
    Set Title options

    Set Title options

    1. Switch to the Titles tab
    2. Set Link Titles is set to Yes so anyone clicking the title will be taken to that post.
    Set Content/Excerpts options

    Set Content/Excerpts options

    We don't need to change anything in the Body/excerpt tab

    But you may come back later when refining this slider, and consider changing some of these, especially the Responsive settings for small screens.

    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

    Set Feature options

    1. Switch to the Featured Images/Videos tab
    2. In a situation where you can't be certain there'll always be a featured image set, Architect allows you to use a Filler image from lorempixel.com. You can choose from a dozen categories, or let it use a random category.
    3. Set the Maximum dimensions for you images to match that of your Blueprint width. In both cases this is a maximum only. The image will adjust its size for different screen sizes. For full width sliders, this should be set to at least 2600px. For a full width slider, you will also set the Blueprint width to 100%
    4. Effect on screen resize let's us choose the image behaviour as the slider shrinks on smaller screens. For full width sliders (where Blueprint width is kept at 100%) Scale is better, but for fixed width sliders, I tend to prefer Trim. Experiment to see which you prefer. If you set it to None, it will inherit the theme's default image behaviour (which is usually some form of scaling).
    5. For sliders, we want the image Margins to all be zero
    6. The Link to behaviour is a personal preference. I set it to None for sliders usually, so the use doesn't inadvertently click thru to the post.
    Save regularly!

    Save regularly!

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

    Content Styling

    Content Styling

    1. Switch to the Content Styling screen
    2. For most sliders, you will want to remove the Panels Padding.
    3. We want the Components Group Background to have some colour so that our text is more readable. For this example, I've set it to black with the opacity adjustment set to 60%
    4. So our text is not right up against the edge of the components area, we need to set a Padding for the Components group

    Notes:

    Architect Blueprints have very limited default Content styling and will inherit a lot text (titles, meta, content etc) content styling from your theme.

    Any changes in Content Styling will override your theme's styling

    The Content Styling screen can be turned off in Architect > Options if you want to style Blueprints using your own stylesheets or in the Headway Visual Editor, Design Mode.

    Also, 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

    Style Titles

    Style Titles

    1. Switch to the Titles tab
    2. Adjust your Font Size and Line Height to something appropriate for your slidehow
    3. Add a little extra space below the titles using a bottom margin
    4. Because we have set the titles to link to the post, we need to style their colours in the Links section.
    Style Excerpts

    Style Excerpts

    1. Switch to the Excerpts tab
    2. Set an appropriate Font Side and Line Height
    3. Choose a Font Color.
    4. Some themes set the font size independently for both excerpt content overall, and excerpt paragraphs. you may find you will need to repeat your font sizing.
    5. You may need to style the Read more text font sizing as well
    6. As Read more is a link, you should style its Link settings
    Blueprint styling

    Blueprint styling

    1. Switch to the Blueprint Styling screen

    Architect Blueprints have very limited default Blueprint styling preset so as not to clash with your theme.

    2. To style the navigation for your slider to match your theme, switch to the Sliders and Tabbed tab

    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.

    Also, yo 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

    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. As we have set the Blueprint to a maximum width of 600px, make sure this block is no larger than that.
    2. Open its settings and in the Blueprint tab, choose the Blueprint to display
    3. Save
    Display using a shortcode

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

    View the results

    If everything works as expected, you should now see the Blueprint displayed after reloading the page it is on. The image below was from the shortcode version. You can see how it fits nicely into the flow of our page.

    (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.)

    Note: This particular post is using a styled excerpt - as can be seen clearly seen - so unlike the one at the top of this tutorial, it does not display our read more tag. Excerpts shorter than our word limit will also not display a read more tag.

    Next steps

    Next steps

    Having completed this tutorial, it is time to experiment.

    • Try different arrangements and sizes for the components in Content Layout
    • Try different navigation types in Blueprint Design > Sliders & Tabbed
    • Try changing the styling to see how it overrides

    And so on.

    Have fun!

    Browse documents by tag

    404 actions advanced beginner block blueprint blueprints builder categories conflict custom fields custom taxonomies desktop developer editor featured image filtering filters galleryplus grids headway hooks images intermediate layouts masonry memory meta navigation ordering permalinks php.ini plugin presets pricing table responsive sharing shortcode slides sorting styling support troubleshooting updates widget