The Layouts add-on will provide a library of fully responsive layout templates ready for use on your website.

Apply new designs to your website content effortlessly by selecting a custom built responsive layout for your Ajax Load More repeater template.

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 completely custom responsive grid and well designed templates will give users the ability to update the look and feel of their website in a matter of seconds.


Layouts

Select from five different layouts: Call to Action, Card Flip, Default, Gallery and Column Grid. Each layout is available for use in a one to 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.

The alm-cta image size is used with the CTA layout.

Call to Action Layout Example

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.

The alm-gallery image size is used with the Card Flip layout.

Card Flip Layout

Default »

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

The alm-thumbnail image size is used with the Default layout.

Default Layout Template

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.

The alm-gallery image size is used with the Gallery layout.

Gallery Layout Example

Column Grid

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

Note: The column Grid layout is recommended for developers only.


Layout Selection

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

Ajax Load More layout selection menu

Click the ‘Apply Layout‘ button to display the list of available layout templates.

Beside the name of each layout there will be clickable grid icons which represent the amount of columns to use when displaying the layout – all layout have one, two and three column options.

Select a layout template by choosing a column value – once selected, the markup for the layout will be inserted into your Repeater Template.

Click the ‘Save Template‘ button to save the updated Repeater Template.

Please note: Editing a layout after it’s been inserted into a Repeater Template does not overwrite the layout value. Any changes made will only affect the current 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 you to create your own 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.


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

alm-thumbnail is part of the core Ajax Load More plugin and cannot be removed with this example.


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.

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

layouts-css


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).
License Key Example

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 contact form on this website.