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.
2.0.2, it’s easier than ever to build the content via layout manager with ready-to-use 70+ particles/atoms made from UIkit3 framework, like Gallery, Feature Box, Buttons, Cards, Grid Card, Accordions and much more.
In the future We plan to have the particles/atoms
2.0.2 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.2 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.
2.0.2for 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 🙂
NOTE Starting from version 2.0.2, we changed the prefix from
jl. This even allows to use multiple versions (2 and 3) of UIkit alongside each other.
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.
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.
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.
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)
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
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.
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.
We are using Duplicator plugin to create the backup for WordPress sample data, please do following this tutorial to install the sample data for WordPress
- Upload installer.php and Archive zip file to your web server
- Browse to installer.php and install (Open a web browser (i.e Chrome, Firefox, IE) and browse to the ‘installer.php’ file such as:
admin/admin, you can change the username/password after restoring the package.
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
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 all js files (if any) to
THEMENAME/custom/jsand all css files (if any) to
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
You do not prefix the jlparticles with an underscore, the final code look like so
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
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
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:
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
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.
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.
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.
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.
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.
|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)
Including both Free and Premium particles.
|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.|
|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.
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.
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.
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
||A text input for customize the particle title|
||Select the heading styles for particle title. Heading styles differ in font-size but may also come with a predefined color, size and font.|
||Decorate the headline with a divider, bullet or a line that is vertically centered to the heading.|
||Center, left and right alignment for Particle title.|
||Select the text color. If the Background option is selected, styles that don’t apply a background image use the primary color instead.|
||Customize the text color for particle title instead using predefined title color mode.|
||Customize the particle title font size.|
Choose one of the elements to fit your semantic structure.
General particle settings
||Center, left and right alignment may depend on a breakpoint and require a fallback.|
||Define the device width starting from which the alignment will apply.|
||Define an alignment fallback for device widths below the breakpoint.|
||Set the maximum content width.|
||Define the alignment in case the container exceeds the element’s max-width.|
||Define the device width starting from which the element’s max-width will apply.|
||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.|
Apply an animation to elements once they enter the viewport. This will animate all elements inside the section. It’s also possible to
||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.|
The Parallax settings allow you to animate an element depending on the scroll position of the document. To configure a parallax animation, set the
Parallax in the General tab Animation -> Parallax.
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
||Animate the horizontal position (translateX) in pixels.|
||Animate the vertical position (translateY) in pixels.|
||Animate the scaling.
||Animate the rotation clockwise in degrees.|
||Animate the opacity.
There are additional options to control how the parallax animation behaves.
||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.|
||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.|
||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.|
||Display the parallax effect only on this device width and larger. It is useful to disable the parallax animation on small viewports.|
Parallax Background tab contains settings for adding background image into a section with parallax animation on scroll.
||An image field with an image picker to select a background image for section.|
||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.|
||Set the initial background position relative to the section layer. By default, the image is centered.|
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.
Display the parallax effect only on this device width and larger.
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.
Determine how the image or video will blend with the background color.
||Set an additional transparent overlay to soften the image.|
||Animate the horizontal position (translateX) in pixels.|
||Animate the vertical position (translateY) in pixels.|
||If you use fullwidth section with background image, you can use this option to add the container width for content inside section.|
This setting acts the same as Viewport but minus 50% in height.
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
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 is available here + a more in-depth walkthrough tutorial as well!
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
If you install Hebrew language for Joomla and set it as default language
The front-end result will be changed to RTL mode automatically like this
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.
This section includes helpful tips and information used in issues during the installation process (you may also take a look the Gantry5 documentation here)
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.
||This is the amount of data in a single form submission using the POST method.|
||This is the size of an individual file uploaded.|
||This is the number of seconds a script is allowed to run before it is terminated by the parser.|
||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
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
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.