Particles Documentation

About this release (2.0.1)

We’ve rebuilt our Gantry5 Particles/Atoms from the ground up to be simpler, fully responsive, easy customizations and truly useful particles & atoms for Gantry5 framework.

With version 2.0.1, it’s easier than ever to build the content via layout manager with ready-to-use 70+ particles/atoms made from UIkit3 components, like Gallery, Feature box, buttons, cards, Grid, accordions and much more.

In the future We plan to have the particles/atoms 2.0.1 for all our Gantry5 based themes, this will bring a great user experience and ease of use for customers.

Considering the point above, we’ll implement our Gantry5 particles version 2.0.1 for all existing Gantry5’s based themes. This was and still is a massive undertaking since we basically had to recreate all our Gantry5 particles/atoms from scratch so I want to thank you for your patience in the past few weeks.

Implement I recommend you use the new release version 2.0.1 for new website only, however, you can implement the new particle for existing theme without problem, please take a look the copying Particles to existing theme section below for more info. We are working hard to implement the new release for all our existing Gantry5’s based themes.

At the moment, our Gantry5 based themes using the particles version 1.x. if you wish to update to new version 2.0.1, please follow the section copying Particles to existing theme  or wait for our themes update 🙂

What’s Next

Now that our Gantry5 particles have been improved, we will focus on adding new themes and new particles you have all been waiting for. Again, We want to thank you for your patience in the past few weeks. We tested the new particles extensively, but since the structure is completely rewritten from scratch, there may be new regressions. Please report the bugs in the ticket support system, so we can fix them right away.

I’ll edit this documentation as we continue with the updates. Thank you.


Availability

Our gantry5 particles/atom are currently available for WordPress, Joomla and Grav


Requirements

Gantry requires two major parts to function. The first is the Gantry framework itself, a collection including the Gantry component, library, and associated plugins. This is the base by which the second part, a Gantry-powered theme functions.

  • Gantry 5: This contains the Gantry 5 framework and its associated bits and pieces (library, component, and plugins).
  • Theme: This contains just the theme/template.

Also take a look at the Gantry5 installation.


Browser Support

The following list displays browser versions that Particles have been tested on. “Latest” means that it works just fine on all recent versions of that browser. With many browsers moving towards a rolling release strategy, pinning down browser support to a specific version has become a little tricky in recent years. Long story short, Our Gantry5 Particles will work on pretty much any modern browser.

Chrome

Latest

Firefox

Latest

Edge

Latest

IE

11+

Safari

9.1+

Opera

Latest


The UIkit Framework

Our Gantry5 Particles/Atoms are based on the front-end framework UIkit. This means HTML written in particles/atom are using classes and attributes from UIkit. They are prefixed with uk- so that they can easily be identified. Meanwhile, elements in the particles are based on UIkit components, like the Slideshow particle which is built on the Slideshow component.

Installation

Getting Particles/Atoms up and running takes no longer than a minute.

There are three ways to install Our Gantry5 Particles:

  • Install theme only for a clean start. (The theme already included all particle/css/js files)

  • Install the quickstart demo package (if you would like to have a peek at how everything is put together)
  • Copying Particles to Another Theme (use this option if you already have Gantry5 based theme)


Install theme Only

Install Gantry5 Framework and download just the theme g5_hydrogen.zip for a clean start. You can see full documentation for Gantry5 installation here Installing the Gantry Framework.

Note g5_hydrogen.zip theme package is same as the Hydrogen theme you see at Gantry5 official website. All particles are added for this theme in the templates/TEMPLATE_DIR/custom/ folder. 

The key to overriding files is the /custom folder within the main theme folder. This folder is where you can put any overrides and additional files that you would like to add to the theme without risking breaking or losing this data during a theme update.

Install Joomla Template

Video tutorial


Install the Quickstart Demo

A demo package is a full Joomla installation. It includes Joomla, the theme and sample data responsible for the layout and setup of our demo. This is great if you don’t want to start from scratch or if you would like to have a peek at how everything is put together. After the installation, your website will adopt the whole look of the particle demo website, including its content and particles/atoms settings. you can start modifying the demo website with all the layouts, particles, photos and style.

To set up a demo installation, download the package Gantry5-Particles-Quickstart-J3x.zip and unzip it to your web server directory. Now just follow the regular Joomla installation instructions.

Note A demo package basically is a complete website and includes Joomla/Wordpress itself. That’s why you can’t install it into an already existing Joomla/Wordpress installation.


Copying Particles to existing theme

What Particles are made of

A particle is made up of these things:

  • A YAML (plain text) file that tells Gantry 5 what fields the particle uses
  • A TWIG (plain text) file that uses those fields to render output on your page
  • A SCSS (plain text) file that contains the SASS/CSS to style the rendered particle on your page
  • One or more Css/JS (plain text) files that contain JavaScript/Css code to make the particle work.

This tutorial shows you the safe way to implement JoomLead particles for your EXISTING themes/templates that won’t be overwritten again by theme updates. 

First, you need to download and extract the particles.zip package which downloaded from JoomLead website, open particles folder -> choose the particle or atom you wish to implement for your existing site then following the steps below:

  • Copy particle_name.html.twig and particle_name.yaml to THEMENAME/custom/particles

  • Copy all js files (if any) to THEMENAME/custom/js and all css files (if any) to THEMENAME/custom/css

  • Copy particles/_jlparticles.scss to THEMENAME/custom/scss.

The next thing you need to do is to ensure that the SCSS for the particle is loaded too. We do this by including it into our custom SCSS file.

Open custom.scss file then add


@import "dependencies";
@import "jlparticles";

Note If you don’t have a custom.scss file already then you need to create one (plain text file). Your custom.scss file should be put in THEMENAME/custom/scss.

You do not prefix the jlparticles with an underscore, the final code look like so

Import SCSS

Go to the base outline Styles tab and click on Recompile CSS.

That’s it! Now you should be able to use the particle in your new theme.

Note If you have a lot of particles in theme custom folder, you can avoid the particle duplicate name by renaming the particle, for example, rename featurebox.yaml and featurebox.html.twig to jlfeaturebox.yaml and jlfeaturebox.html.twig (simply add jl prefix to make a unique particle name) 

You can see the video tutorial below, we will show you how to imlement Uikit3 for Gantry5 framework and implement the Featurebox particle for existing theme

Particles Library

The JoomLead particles come with a collection of ready-to-use particles/atoms to build your content(Over 70+ Gantry5 particles/atoms). If you are new with Particle/Atom, please take a look the Introduction to Particles

There are two ways to working with Gantry5 Particles:

Accessing via layout manager

Go to the Go to template settings -> Layout tab . The Particles section (which appears along the left-hand side of the Layout Manager) is where you will find draggable Positions and Particles. You can perform a quick search in the Filter field to narrow down the list to find just the option you are looking for.

Once you have decided on an item you would like to apply to the layout, simply drag and drop it to the desired place on the Layout. Take quick look Layout Manager for Gantry5

New Gantry 5 Particle

Accessing via module

Using Particles in Module Positions (Joomla).

The first step to doing this is, of course, creating a module position in your layout. You can do this by selecting and dragging the Module Position particle from the sidebar to your desired location in the Layout Manager. Once you have done this, you will want to give it a key (and/or a particle name) that you can easily associate with that space.

Next, Go to the Joomla Modules Manager -> Add New Joomla module -> Gantry5 Particle -> Pick a Particle. (The Particles Library will open in a lightbox) and select the particle by clicking the particle name. Assign the Module to the module position you have created before.

Pick Up a Gantry5 Particle


Using Particle Collections

Collections are an important part of many Gantry 5 particles. They are essentially the line items, or sub-items within a particle. For example, in the Feature Box particle a collection is used to organize different content types within the particle (for example: a title, meta and description text as well as an image, a link and so on).

This enables you to easily create or remove specific Feature Box items, reorder them as you please, and to keep them separate from the main settings that impact the particle as a whole, such as the particle’s main title, sub-title, etc.

Feature Box 1

If you hover your cursor over a specific item, you will find access to Delete, Duplicate, and Change Name options. These enable you to remove a specific item, duplicate it and use the duplicate as a base for a new item, and change the item’s name which (depending on how the particle is configured) may be reflected on the front end or used to help you to better organize items in the back end.

Featurebox 2

Clicking the item’s name will open a new popup with the item’s settings. These settings will change how that specific item appears, the content it contains, and any options you wish to configure.

Gantry 5 content types

In the above screenshot, you will notice several different types of input fields are present in our Gantry5 Particles, here the short overview about these input fields.

Content Field Description
Title A text field used for headings.
Meta A text field used for meta text like the author or publication date.
Description A text field for the main text blocks.
Image An image field with an image picker.
Image ALT An text field with to enter the image’s alt attribute (SEO Purpose).
Icon An icon field with an icon picker.
Video A video field with a video picker.
Button Link A URL field with link and file picker.
Date A datetime field for dates.

Note These content fields are different for each particle.

Selecting the Edit All Items option opens a popup with all of the items and their settings at one time. It’s a great tool for people that are configuring multiple items at once and want to save time.

Here the short Video Intro about Using Particle Collections (you can add multiple items, rename, sort, delete, duplicate or change item settings at ONE TIME)


List Gantry5 Particles by JoomLead 

Including both Free and Premium particles.

Particle Description
Alert Display an error message.
Code Display multiple lines of code in a preformatted text block.
Countdown Display a countdown timer to a specific date.
Divider Display a horizontal divider.
Heading Extend the design of the advanced heading particle with different styles for headings to create beautiful typography.
Block Reveal Atom Ideas for revealing content in a schematic box look as seen around the Web lately. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers some content underneath.
Icon Display a scalable vector icon.
Image Display an image with an optional link and different styles.
Quotation Display a quotation.
Social share Add share buttons to your Joomla/Wordpress/Grav page.
Text Display plain text. A collection of useful text utility classes to style your content.
To Top Display an icon which scrolls back to the top of the page.
Video Display a local video or a YouTube or Vimeo video.
Accordion Display an accordion with a list of items.
Button Display one or multiple buttons aligned horizontally.
Description List Display a description list.
Gallery Display multiple Overlay elements within a grid.
Grid Display multiple Card elements within a grid.
List Display a list of text.
Open Street Map Display a map with markers from OpenStreetMap.
Popover Display an image with markers, which open popovers.
Slideshow Display an image slideshow.
Subnav Display a horizontal navigation.
Faq Display a tabbed navigation which transitions through content slides. You can use this particle to create beautiful FAQ page. 
Table Display a table with responsive and different styles support
Data Tables Build the table and place any content in the cells, rows and columns to add the schedule or the list to the layouts built with Gantry5
Image Compare This particle allows you to display the before and after versions of an image by simply sliding over them
Simple Counter Paticle that counts up to a targeted number when the number becomes visible.
Animated Text Extend the design of the advanced heading particle with different styles for headings to create beautiful typography.
Calendar Create Beautiful Calendar with custom event
Call To Action Create Beautiful Call To Action That Drive Engagement (Multiple layout support)
Card Display text with an image optionally styled like a card.
Carousel Create a responsive carousel slider with overlay, multiple grid layout support
Filter Gallery A super easy way to create beautiful and responsive portfolio filter gallery for your Joomla/WordPress/Grav websites. Filter gallery is fully responsive work with all devices.
Overlay Create an image overlay, which comes in different styles and animations. The Overlay particle displays its content fields in an overlay on top of the image
Tab Create a tabbed navigation with different styles. 
Flipster Create content or images with ‘cover flow’ effect
Feature Box Use the Feature Box particle that lets you add custom style or predefined styles, image icon or font icon, grid mode or slider mode, background color or background image with blend mode customization. Full layout control and mobile friendly design. All this in just a single particle. 
Search Easily create nice looking search forms for Joomla/Wordpress or Grav with different styles and layouts.
Paypal Donate  Create a Paypal Donate Form with custom or fixed amount for your website
Instafeed Add Instagram photos to your website with grid layout, parallax on scroll
Progress Bars Defines progress bars that indicate how far along a process is. Progress Bar can be used for showing skills and projects progress.
Light Gallery A customizable, modular, responsive, lightbox gallery particle for Gantry5 based themes/templates. Overlay, grid layout with parallax and Masonry layout support
Intense Gallery A simple Gallery particle to view large images up close using simple mouse interaction, and the full screen.
Pricing Table Pricing Table – It allows you to display not just the cost, but also the features you wish to portray. 
DotNav Create a dot navigation to scroll to different page sections with smooth scroll
Content Slider Content Slider empowers you to build stunning Joomla content sliders in just a few clicks – no coding necessary! Automatically create content sliders from your existing categories.
Content Grid We believe that a beautiful grid and list of articles with make your Joomla site stand out and keep visitors engaged. That’s why we built Content Grid Particle, a Gantry5 particle that’s EASY and POWERFUL.Content Grid helps you to create beautiful recent articles grid and other types of grid for your Joomla site in minutes, WITHOUT any line of code!
Testimonial The Testimonial particle provides large number of options to customize the slider to control navigation, animation speed, delay between slides, pause on hover/action, grid, list layout, etc.
News Ticker This particle help you to view the latest posts or page on your website.
Tiles Joomla This particle will assist you in adding your articles to the website’s page in the form of beautiful tiles block with immaculate layout and precise style.
Content Toggle Hide, switch or change the appearance of different contents/particles through a toggle.
Timeline Easy-to-make, beautiful timelines for telling stories in a timeline format
Timline Joomla Timeline Joomla lets you display events, posts or products with cool progress effect on scroll via existing Joomla categories.
Modal Module Create modal dialogs with different styles and transitions for any Joomla module.
Inline Svg Add any SVG file such as an icon or artwork and change it’s colour and size. 
Facebook Button Get the ultimate Facebook widgets pack to help you grow your social media presence
Facebook Page Place your Facebook page in a Like box across your website, to get more Likes and followers.
Facebook Embed Share facebook videos/posts/comments on your sites to get them to perform even better and get more views 
Team Member Show team members of your organization or an agency in a multi-column grid or slider.
Price List Keep convincing the visitors in the powerful benefits of your services and products using the simple and stylish Price list particle for Gantry5, made for showcasing the pricing information.
Cookie Consent Cookie Consent is a Gantry5 Atom for alerting users about the use of cookies on your website.
Offcanvas Content Create an off-canvas sidebar with your custom content (menu items, text or social icons)that slides in and out of the page, which is perfect for creating mobile navigations.
Notification Atom Create toggleable notifications that fade out automatically.
Particle Js Atom ParticleJS is Gantry5 Atom that can help you create particle systems.
HeadRoom Atom Make Navigation remain at the top of the viewport, like a sticky navigation.
Preloader Atom Create a simple preloader on the screen while the rest of the page’s content is still loading.

Note Scroll smoothly added automatically to internal link field that contains a URL fragment to add the smooth scrolling behavior. For example, if you add the # or #about to link text field, the smooth scroll will be added automatically, this idea is useful if you want to link the button to special section inside a page.

Note All Gallery particles allow creating lightbox galleries with images. Open images inside a lightbox by clicking an item from a Gallery and navigate between items from within the lightbox.


Common Particle Settings

The Common Particle Settings included General, Parallax and Background Parallax tab settings for all particles.

Note Hovering the name of a setting will show a tooltip with a brief explanation on the left side.

General Settings

The Settings tab contains all the specific settings for a particle. These are different for each particle. Typically related settings are grouped into small sections.

Particle General Settings

Note Hovering the name of a setting will show a tooltip with a brief explanation on the left side.

General settings, which are the same across all particles, are grouped in a General tab. Here is a short overview.

Customize the particle title style

Setting Description
Title A text input for customize the particle title
Title Style Select the heading styles for particle title. Heading styles differ in font-size but may also come with a predefined color, size and font.
Title Decoration Decorate the headline with a divider, bullet or a line that is vertically centered to the heading.
Title Alignment Center, left and right alignment for Particle title.
Predefined Title Color Select the text color. If the Background option is selected, styles that don’t apply a background image use the primary color instead.
Title Color Customize the text color for particle title instead using predefined title color mode.
Title Font Size Customize the particle title font size.
Title HTML Element

Choose one of the elements to fit your semantic structure.

General particle settings

Setting Description
Text Alignment Center, left and right alignment may depend on a breakpoint and require a fallback.
Text Alignment Breakpoint Define the device width starting from which the alignment will apply.
Text Fallback Define an alignment fallback for device widths below the breakpoint.
Max width Set the maximum content width.
Max Width Alignment Define the alignment in case the container exceeds the element’s max-width.
Max Width Breakpoint Define the device width starting from which the element’s max-width will apply.
Margin Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. The first element’s top margin and the last element’s bottom margin are always removed. Define those in the grid settings instead. Margins of an element can be removed from the top and bottom.
Animation

Apply an animation to elements once they enter the viewport. This will animate all elements inside the section. It’s also possible to Delay element animations so that animations are slightly delayed and don’t play all at the same time. Slide animations can come into effect with a fixed offset or at 100% of the element’s own size.

Visibility Define when the element should be hidden. Empty rows or sections will never be shown. When all elements are hidden, the whole row or section will be hidden automatically.

Parallax Settings

The Parallax settings allow you to animate an element depending on the scroll position of the document. To configure a parallax animation, set the Animation to Parallax in the General tab Animation -> Parallax.

Parallax Animation Settings

Basically, the parallax effect simply animates a number of CSS properties from a start value to an end value. You can use the provided text fields to enter a value manually. Here is a list of all properties which can be animated. Take a look parallax animation for Uikit here

Setting Description
Horizontal Animate the horizontal position (translateX) in pixels.
Vertical Animate the vertical position (translateY) in pixels.
Scale Animate the scaling. 100 means 100% scale, 200 means 200% scale, and 50 means 50% scale.
Rotate Animate the rotation clockwise in degrees.
Opacity Animate the opacity. 100 means 100% opacity, and 0 means 0% opacity.

There are additional options to control how the parallax animation behaves.

Setting Description
Easing Determine how the speed of the animation behaves over time. A value below 1 is faster in the beginning and slower towards the end while a value above 1 behaves inversely.
Viewport Set the animation end point relative to the viewport height, e.g. 50 for 50% of the viewport. It is very useful to stop the animation of a text when it’s in the middle of the screen.
Target Animate the element as long as the section is visible. This is very useful when multiple elements in same section are animated. Use this setting to make sure that their animations all happen at the same time even if they have different heights and different positions inside the section.
Breakpoint Display the parallax effect only on this device width and larger. It is useful to disable the parallax animation on small viewports.

Parallax Background Settings

The Parallax Background tab contains settings for adding background image into a section with parallax animation on scroll.

Global Parallax Background

Setting Description
Background Image An image field with an image picker to select a background image for section.
Image Size Determine whether the image will fit the section dimensions by clipping it or by filling the empty areas with the background color. By default, the image will not be resized.
Image Position Set the initial background position relative to the section layer. By default, the image is centered.
Image Visibility

 Display the image only on this device width and larger. This is useful to hide background images if the content becomes illegible on small viewports.

Parallax Breakpoint

Display the parallax effect only on this device width and larger.

Background Color

Use the background color in combination with blend modes or a transparent image to fill the area if the image doesn’t cover the whole section.

Blend Mode

 Determine how the image or video will blend with the background color.

 Overlay Color   Set an additional transparent overlay to soften the image.
 Horizontal   Animate the horizontal position (translateX) in pixels.
 Vertical   Animate the vertical position (translateY) in pixels.
 Add Container  If you use fullwidth section with background image, you can use this option to add the container width for content inside section.
Height

None By default, the height of a section is expanded by the height of its content.

Viewport If the section height is smaller than the viewport height, the section is expanded to fill the viewport height. A section that directly follows the header will subtract the header’s height from it.

Viewport (Minus 20%) This setting acts the same as Viewport but minus 20% in height.

Viewport (Minus 50%)

This setting acts the same as Viewport but minus 50% in height.

Expand On short pages a section can be expanded to fill the viewport height. This is useful if the page doesn’t have a scrollbar and the document background color is shown below the last section.

Inverse Color

By default, content looks great on any section style. There are two cases when you might want to adjust the text color.

After picking a background image, you have to select the appropriate Text Color depending on whether it’s a dark or a light image or video. Only choose Light or Dark if Default doesn’t look good.

If a viewport height is set, the Vertical Alignment setting becomes available to align the section content vertically. This will only come into effect if the section height is larger than the content itself; otherwise, it will be exactly as high as its content.


Detailed documentation

Detailed documentation is available here + a more in-depth walkthrough tutorial as well!


RTL Support (Multi-language)

You can find a tutorial explaining the basic process of selecting a language in the official Joomla documentation.

Our Gantry 5 Particles support right-to-left languages and allow you to switch the orientation of all design particles, the RTL layout will be applied for particles automatically based on the Joomla language you use.

For example the default layout (English language) look like the screenshot below

RTL Joomla Support

If you install Hebrew language for Joomla and set it as default language

Joomla RTL support

The front-end result will be changed to RTL mode automatically like this

Gantry 5 RTL Support

The Uikit3 for Gantry 5 atom will check for the page Direction (If any) and add the uikit-rtl.min.css automatically, It’s useful for your Joomla Multilingual Site with different layout/content types.


Troubleshooting

This section includes helpful tips and information used in issues during the installation process (you may also take a look the Gantry5 documentation here)

Installation Issues

Most of the time installation problems occur due to limited resources, for example on shared hosting servers. Here’s an overview of the PHP configuration settings you should check and increase if needed.

Setting Description
post_max_size This is the amount of data in a single form submission using the POST method.
upload_max_filesize This is the size of an individual file uploaded.
max_execution_time This is the number of seconds a script is allowed to run before it is terminated by the parser.
memory_limit This is the amount of memory in bytes that a script is allowed to allocate.

You may need to allocate more resources for PHP by modifying the php.ini file. If this is not possible, you can try setting the PHP settings through a .htaccess file on your web server. However, this also depends on your hosting server and whether it allows the usage of .htaccess overrides.

php.ini

To change the PHP configuration through the php.ini file, use the following syntax.

# example of recommended settings
post_max_size = 8M
upload_max_filesize = 8M
max_execution_time = 60
memory_limit = 128M

.htaccess

To change the PHP configuration through a .htaccess file, use the following syntax.

# example of recommended settings
php_value post_max_size 8M
php_value upload_max_filesize 8M
php_value max_execution_time 60
php_value memory_limit 128M

File Permission Issues

Learn how to handle file permission issues.

There are two ways of accessing files when working with Joomla: either directly via your web server or through an FTP client. Different files and directories have permissions specifying who can read, write or access them. Sometimes the permission settings of your web server and your FTP client can collide, so that when trying to install a theme or extension, you are suddenly confronted with an error message, or you may not be able to save theme settings.

To resolve these issues, you need to change the permissions of the affected files or directories. We recommend 755 for directories and 644 for files.

Take a look at the Joomla documentation for more information.

If you have any specific request or feedback as well as suggestions, feel free to drop us a line in Ticket System. We’ll try to cover them all.

Let us know in the Ticket System

GET 35% OFF on Joomla Templates & Gantry5 Particles - Use Coupon Code JL35 at Checkout Join Us Now
Hurry up before it's too late. Enjoy 50% Summer discount on all JoomLead products! Use coupon code: SUMMER50 Join Us Now