Layouts

How It Works

The Layouts add-on works by providing users with a library of predefined, unique and fully responsive layouts templates that are ready to implemented on the users website – It’s as simple as selecting and applying a layout while building 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 title, excerpt, post date and author in a CSS Grid layout and works best in a two or three column grid.

Note: You must set layouts=”true” in your shortcode to initiate a CSS Grid on this layout.

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.

Note: You must set layouts=”true” in your shortcode to initiate a CSS Grid on this layout.

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.

Note: You must set layouts=”true” in your shortcode to initiate a CSS Grid on this layout.

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 over to reveal more infomation about the post.

Gallery

The Gallery layout will display your posts and content with the look and feel of 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 based template. The premise behind this layout is essentially a blank canvas – users will be required to add their own 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.

Note: Changes to a layout after it’s been inserted only affect that specific template and is not a global change.

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

layouts	Enable Layouts with this Ajax Load More instance.(true/false)
layouts_cols	The number of desktop columns.(1-6)
layouts_gap	The spacing for the CSS grid gap.(sm, md, default, none)

Example Shortcode[ajax_load_more layouts="true" layouts_cols="4" layouts_gap="md"]

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 images sizes in the various layout templates – each image size is set to fully crop at the dimensions below.

alm-thumbnail	[150px x 150px] – Used with Default and Blog Card layouts.
alm-cta	[800px x 450px] – Used with Call to Action and Overlay layouts.
alm-gallery	[800px x 600px] – Used with the Gallery layout.

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.

Pro Tip: Use the Regenerate Thumbnails plugin to batch process your previously uploaded media library images – don’t forget to back up your site prior to running the process.

Removing Custom Image Sizes

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

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 your confirmation/purchase receipt email and license key, please check your spam/junk folder and if you still cannot locate the email please contact me at darren [at] connekthq.com or use the Product Support form on the website.