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.
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!
By default, the first tab Blueprint Design will be selected.
- The layout Type we need is the Slider, which is selected by default.
- For a slider you should always set Limit Posts to Yes.
- And set the Limit number of posts to show to to 5. Five is a good number for things like featured posts.
- 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.
- 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).
- 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
- 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.
- Change the Transition Type to Slide
- 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)
- 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.
- Set the Order by to Date
- Set Order direction to Descending (i.e. newest first, oldest last)
- Switch to the Content Layout screen
- Enable/Disable Components to show. For this slider, we'll just use Title, Excerpt and Feature
- Title will be 100% wide already, resize Excerpt to 100% as well
- We want the featured image to fill the whole backround, so we set the Feature location to Background
- You can set the Components area position to appear where ever you want. In this example, set it to Bottom
- And finally, nudge it up a bit with the Nudge components area up/down controller. 10% is nice value to start.
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
- Switch to the Featured Images/Videos tab
- 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.
- 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%
- 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).
- For sliders, we want the image Margins to all be zero
- 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.
- Switch to the Content Styling screen
- For most sliders, you will want to remove the Panels Padding.
- 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%
- So our text is not right up against the edge of the components area, we need to set a Padding for the Components group
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
- Switch to the Excerpts tab
- Set an appropriate Font Side and Line Height
- Choose a Font Color.
- 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.
- You may need to style the Read more text font sizing as well
- As Read more is a link, you should style its Link settings
- 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
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. As we have set the Blueprint to a maximum width of 600px, make sure this block is no larger than that.
- Open its settings and in the Blueprint tab, choose the Blueprint to display
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
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.
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.