Install the WordPress Demo

WordPress Particle Quickstart Installation

We are using All-in-One WP Migration for WordPress Migrations and Backups. Find more detail about All-in-One WP Migration here

This tutorial contains details about:

• Install Instructions for All-in-One WP Migration Plugin
• All-in-One WP Migration Backups Page
• Import Using All-in-One WP Migration tool

Install Instructions for All-in-One WP Migration Plugin

Installing All-in-One WP Migration plugin is a simple process. By following the steps in this tutorial, you can download, install and successfully use the plugin for creating backups of your website and import them in any other WordPress website.

Login to WordPress admin dashboard -> Plugins -> Add New -> then search for All-in-One WP Migration

Then search for All-in-One WP Migration -> Install Now and Active the plugin

Import Demo site using All-in-One WP Migration

Unzip the package JoomLead-Gantry5-Particles.zip -> then select WordPress folder, you will see an archive file with the .wpress extension, which then you can import in any WordPress site.

To use import functionality go to Import page from the all-in-One WP Migration dropdown menu:

Choose IMPORT FROM -> click the dropdown button and select FILE

Choosing a backup (file_name.wpress) to restore starts the import process:

For more information about All-in-One WP Migration Guide, please refer to: https://help.servmask.com/knowledgebase/all-in-one-wp-migration-user-guide/.

Install the Grav Demo

• Download JoomLead-Gantry5-Particles.zip → Extract the file → navigate into Grav folder. Here you can see the default_site_backup–*.zip installation package
• Upload and Extract the default_site_backup–*.zip zip file into your web server directory.
• Point your browser at your local/live webserver: http://yoursite.com

---

Copying Particles to existing theme

This tutorial shows you the safe way to copy JoomLead’s particles to your themes that won’t be overwritten again by theme updates. To learn more about Copying Particles to Another Theme, see the corresponding documentation.

Unzip the particles.zip package, navigate inside /particles/ folder then choose the particle or atom you wish to implement for your existing site then following the steps below:

• Joomla
• WordPress
• Grav

• • 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 _jlparticles.scss to THEMENAME/custom/scss.

  Note The _jlparticles.scss is global scss file for JoomLead particles.

  The next thing you need to do is to ensure that the SCSS for the particle is loaded too. To do this, navigate in the directory structure to THEME_DIR/custom/scss and create a file called custom.scss if one doesn’t already exist.

• • 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 _jlparticles.scss to THEMENAME/custom/scss.

  Note The _jlparticles.scss is global scss file for JoomLead particles.

  The next thing you need to do is to ensure that the SCSS for the particle is loaded too. To do this, navigate in the directory structure to THEME_DIR/custom/scss and create a file called custom.scss if one doesn’t already exist.

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

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

  • Copy _jlparticles.scss to /user/themes/THEMENAME/custom/scss.

  Note The _jlparticles.scss is global scss file for JoomLead particles.

  The next thing you need to do is to ensure that the SCSS for the particle is loaded too. To do this, navigate in the directory structure to /user/themes/THEMENAME/custom/scss and create a file called custom.scss if one doesn’t already exist.

If the /scss/ directory doesn’t exist within your custom folder, you will need to create that, too. If it already does, just open it and make your additions/changes directly to the file.

Open custom.scss file then add

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

Note You do not prefix the PARTICLENAME with an underscore_. Here an example:

Go to the base outline Styles tab and Hit Recompile CSS button in the upper right corner. For detailed information on how to add a Custom Style Sheet, please refer to the Gantry documentation.

Important Some particles using their custom scss files for custom styling, if you use one of these particles, make sure to import the particle’s scss file name. Otherwise, it has no visual effect.

Particles Scss

Here is a list of particle using their custom scss files:

Deprecated: From 2.2.4(updated February 12, 2023), _jlvideo.scss, _jltoggle.scss,_backtotop.scss, _jlteammember.scss, _jlsocialshare.scss, _jlcalendar.scss are deprecated, importing these scss files into custom.scss file are not needed.

Particle	Scss File name
Back To Top	_jlbacktotop.scss Use @import "jlbacktotop"; in your custom.scss file to import it. Deprecated
Social Share	_jlsocialshare.scss Deprecated
Team Member	_jlteammember.scss Deprecated
Calendar	_jlcalendar.scss Deprecated
Content Toggle	_jltoggle.scss Deprecated
Video	_jlvideo.scss Deprecated

Please note: _jlteammember.scss, _jlcalendar.scss and _jltoggle.scss are not included for Free version, if you are using free package, just ignore these scss files white importing scss in custom.scss file to avoid the scss compiler issue. Here an example to import all particle scss files (FREE version)

Here an example to import all particle scss files:

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

First Steps

Important Our Gantry5 Particles/Atoms are built on the Uikit 3 front-end framework, to get started right away, you need to enable the Uikit 3 for Gantry 5 in your Gantry 5 Atom setting. See detailed documentation for the atom here: Uikit3 For Gantry5.

Enable Uikit 3 Gantry5 Atom

After install the theme/template or copying the particles to existing theme, you need to check and enable the Uikit3 for Gantry 5 atom FIRST.
Go to Extensions → Template Manager, select the Base Outline → tab Page Settings, and scroll down to Atom section in the bottom then enable it.

---

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: Title, Meta, Content, Image and Link.).

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.

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

General particle settings

---

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.

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

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

---

Parallax Background Settings

---

Detailed documentation

Choose the particle or atom that you are working on, click documentation button to see all particle configuration settings, file structure and more.

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.

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

---

Multilingual Site

Follow the detailed documentation to config the Multilingual site for Joomla/Wordpress/Grav with Step by Step

Multilingual Site (Joomla) Multilingual Site (WordPress) Multilingual Site (Grav)

---

RTL Layout Support

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

For example Joomla: 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 replace the jluikit.min.css with jluikit-rtl.min.css automatically, It’s useful for your Joomla/Wordpress/Grav 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.

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