0
Welcome Guest! Login
0 items Join Now

Isotope: Simple Content Particle

Your Guide to Recreating Elements of the Isotope Demo for Grav


Introduction

The Simple Content particle makes it easy to create smooth, modern sliders for your website.

Here are the topics covered in this guide:

Configuration

Main Options

These options affect the main area of the particle, and not the individual items within.

Option Setting
Particle Name The name of the particle for organizational use in the backend.
CSS Classes CSS Class(es) you would like to have apply to the particle's content. In the front page of our demo we used: fp-flexslider-slideshow.
Title Title of the particle as it will appear on the front end.
Layout Select a layout style to apply to the particle. Choose Layout, Slideshow, or Showcase.
Thumbnail Width Set the width (in pixels) of the image's thumbnail.
Autoplay Enable or Disable autoplay for the particle.
Autoplay Speed Set the speed (in milliseconds) of the particle's animation.
Pause on Hover Enable or Disable the pause-on-hover effect for the particle.
RTL Mode Enable or Disable RTL mode.

Item Options

These items make up the individual featured items in the particle.

Option Description
Name Enter a name for your item. This only appears on the back end.
Background Image Set a background image for the item.
Overlay Image Set an overlay image for the item.
Overlay Parallax Enable or Disable parallax for the item's overlay.
Parallax Ratio Set the ratio for the parallax. Usually this is 0.5.
Title Enter a title for the item.
Description Enter a description for the item.
Testimonial Image Select a testimonial image for the item. Used in the Testimonial layout type.
Testimonial Name Enter a name for the person giving testimony. Used in the Testimonial layout type.
Testimonial Position Enter a position (job title or employer) for the person giving testimony. Used in the Testimonial layout type.
Link Enter a link for the item.
Link Text Enter text that appears as the link for the item.
Target Select between Self and New Window for the link's target.
Button Class Insert and CSS class(es) you want to have apply to the button.

Found errors? Think you can improve this documentation? Please edit this page. You can also view the history of this page.