Layouts

How It Works

The Layouts add-on provides users with a library of predefined, unique, and fully responsive layout templates – It’s as simple as selecting and applying a layout while creating a Repeater Template.

A custom responsive CSS grid and well-designed responsive templates give users the ability to update the look and feel of their website in a matter of seconds.

Available Layouts

Select from seven different layouts: Blog Card, Blog Card #2, Call to Action, Card Flip, Default, Gallery, and Column Grid – each layout is available for use in a one to three-column grid format.

Blog Card

The Blog Card layout displays the title, excerpt, post date, and author in a CSS Grid layout and works best in a two or three-column grid.

Blog Card #2

This layout displays a featured image, title, excerpt, post date, and author in a CSS Grid layout and works best in a two or three-column grid.

Blog Card #3

This layout displays a featured image, title, excerpt, post date, and author in a CSS Grid layout and works best in a two or three-column grid.

Call to Action

The Call to Action layout has a classic image and text design. This layout works best in a two or three-column grid with bold and beautiful imagery.

Card Flip

The Card Flip layout is for users looking for something a little different. Hovering over the image card will flip and animate the card to reveal more information about the post.

Gallery

The Gallery layout will display your posts and content with the look and feel of a traditional photo gallery. This layout succeeds when you have high-quality visuals to accompany your posts.

Default

The Default layout is the base Ajax Load More template re-engineered to be fully responsive and adjust to any screen size.

Column Grid

The Column Grid layout is a column-only template. The premise behind this layout is essentially a blank canvas – users will be required to add their own custom markup and styling to take advantage of the responsive grid provided by the Layouts add-on.

Layout Selection

Selecting a layout is quick and painless – on the Repeater Templates screen in the WordPress admin, there will be an ‘Apply Layout‘ drop menu that contains a list of all the available layouts.

Click the ‘Apply Layout‘ button to display the list of available layout templates and then click the name of the layout you wish to apply to the Repeater Template.

Click the ‘Save Template‘ button to save the contents of your updated template.

Additional Layouts & Features

We will be adding additional layouts to the collection in the near future – we are also developing a custom filter that will allow for the creation of custom layout templates and have them displayed in the list of layouts.

Do you have a layout you would like to see added to the list? Please feel free to request layout templates by sending us an email with a link to the example.

Shortcode Parameters

The following groups of shortcode parameters are available with the Layouts add-on. These shortcode parameters are required to initiate a CSS grid layout on the Ajax Load More containers.

Shortcode Builder

Once installed, the Layouts add-on provides the following options in the Ajax Load More Shortcode Builder.

Image Sizes

Layouts use three main image sizes in the various layout templates – each image size is set to fully crop at the dimensions below.

If you wish to replace the alm-{name} image with a custom image size from your theme simply update and save the the_post_thumbnail(‘your-image-size-name-here’) function in the repeater template.

Removing Custom Image Sizes

To remove the alm-cta and alm-gallery image sizes,  add the following code to your themes functions.php file.

<?php
// functions.php
function alm_remove_image_sizes() {
   global $alm_layouts;
   remove_filter( 'after_setup_theme', array( $alm_layouts, 'alm_layouts_image_sizes' ) );
}
add_action( 'after_setup_theme', 'alm_remove_image_sizes', 1 ); 

Visit the FAQ to find out how to remove the alm-thumbnail image size.

CSS Styling

We’ve done our absolute best to ensure that the CSS written for the Layouts add-on will integrate seamlessly with your theme. However, every site is different and you may be required to enter some custom CSS to patch compatibility and styling issues that arise.

For this, we’ve provided a custom CSS textbox on the Ajax Load More setting screen to enter any custom CSS override styles.

Installation

Upon purchase of this add-on you will receive a confirmation/purchase receipt email. Your receipt will contain a direct link for downloading your copy of Ajax Load More: Layouts and a license key.

After downloading the add-on, upload the unzipped files to your /wp-content/plugins/ directory or visit your plugins dashboard and upload the downloaded .zip under Add New.

License Activation

To activate your add-on and receive updates directly in your WordPress plugins dashboard users are required to enter the license key that was included with their purchase receipt.

To activate a license key:

1. Visit the Licenses section within the Ajax Load More plugin.
2. Enter the product key and click Activate License.
3. If the status indicator turns green your add-on has been successfully activated (example below).

If you did not receive a confirmation email containing your license key, please check your spam/junk folder. If you still cannot locate the email, contact me at darren [at] connekthq.com or use the Product Support form.