How to Insert Fixed HTML Into Gantry 5 Particles Without Breaking Your Layout

Everyone thinks HTML is easy, which is somewhat true. However, most people find it difficult to add custom HTML to the Gantry 5 layout while building websites with static content. Why?

Well, simply because the insertion of custom HTML into the Gantry 5 layout often disrupts the theme’s structure or results in a loss of flexibility. So, whether you’ve faced this issue or not, if you’re curious about the flawless integration of custom HTML with Gantry 5 particles, this is the only guide you will ever need.

In this blog post, we’ll take an in-depth look at how to insert fixed HTML into Gantry 5 particles. Although the nature of this topic states that it’s not only suitable for tech geeks, we’ll still break it down in the easiest possible manner. So, let’s dive in!

How to Insert Fixed HTML Into Gantry 5 Particles? — 3 Possible Ways

Generally, web developers rely on three different techniques to add custom HTML particles in Gantry 5. Here is the step-by-step explanation of what you need to do in each method:

Strategy # 1: Use the Custom HTML Particle

This first method is the simplest and quickest way you will ever find to insert fixed HTML into Gantry 5 particles. So, in order to approach this technique, simply follow these instructions:

1. First, navigate to the Gantry 5 admin panel and choose your theme from there.
2. Then, click on the ‘Layout’ tab and pick the sections where you want to add the HTML, such as
   1. Header.
   2. Footer
   3. Main Content, etc.
3. Next, it’s time to add the ‘Custom HTML’ particle. So, simply drag and drop it into your preferred section.
4. Then, open the settings of the added ‘Custom HTML’ particle by clicking on it. From there, focus on the ‘Content’ field and paste the following lines of code:

<div class="custom-html-block">

    <h2>Welcome to My Website</h2>

    <p>This is a fixed HTML content inside a Gantry 5 Particle.</p>

</div>

5. Finally, save and apply the changes by clicking on ‘Save Layout.’

Note: You may have to clear the Gantry cache to reflect the changes. So, once you’ve done it, simply refresh the front end to see your content live.

Strategy # 2: Create a Custom Particle With Fixed HTML

Imagine a use case where you need to create reusable fixed HTML content. Well, doing so requires making a custom particle. In fact, following this approach will help you manage your HTML content more efficiently and use it across multiple sections. So, here’s how to actually use the second technique of this ‘how to insert fixed HTML into Gantry 5 particles’ guide:

1. First, navigate to the particle directory of your theme.
2. Then, create a new Particle YAML file. Here is how its path should look:

/user/themes/your-theme/custom/particles/fixedhtml.yaml

3. After that, add the following YAML content to define the newly created particle:

name: Fixed HTML

description: A particle to display fixed HTML content.

type: particle

configuration:

  fields:

    enabled:

      type: input.checkbox

      label: Enabled

      description: Toggle to enable or disable the particle.

      default: true

4. Next, create a corresponding Particle Twig file. Here is how its path should look:

/user/themes/your-theme/custom/particles/fixedhtml.html.twig

5. After that, add your static HTML content by wrapping it into a conditional check through the following lines of code:

{% if particle.enabled %}

  <div class="custom-fixed-html">

      <h2>Welcome to My Website</h2>

      <p>This is a static block of content inside a Gantry 5 Particle.</p>

  </div>

{% endif %}

Hint: Implementing step 5 will make sure that it only appears when the particle is enabled.

6. Lastly, you just have to add the Particle to your Layout. To do so, simply do these:
   1. Open the ‘Gantry 5 Layout Manager.’
   2. Drag and drop your ‘Fixed HTML’ particle into a section.
   3. Then, save the changes.

Note: You will have to refresh the front end to view your static content.

Strategy # 3: Embed HTML Inside a Module (Joomla) or Widget (WordPress)

For people using Joomla or WordPress, the last method of this guide will be useful. So, if you are one of them, all you have to do is embed HTML inside a ‘Text widget’ or ‘Custom HTML module’ and then place it within the Gantry 5 layout. Doing so will give you flexibility to manage static content in different sections of your site.

WordPress

If you use WordPress, follow these steps:

1. Navigate to the WordPress admin panel.
2. Then, go from ‘Appearance’ to ‘Widgets.’
3. After that, add a ‘Custom HTML widget’ to a Gantry-supported widget area, such as the Footer, Sidebar, etc.
4. Inside the ‘Custom HTML widget,’ enter the following fixed HTML code:

<div class="custom-html-block">

    <h2>Welcome to My Website</h2>

    <p>This is fixed HTML inside a WordPress Custom HTML Widget.</p>

</div>

5. Lastly, open the ‘Gantry 5 Layout Manager’ and drag a ‘Widget Position’ particle into the desired section. Don’t forget to set its position to match the widget area.

Joomla

If you use Joomla and want to learn how to insert fixed HTML into Gantry 5 particles, replicate the following procedure:

1. Navigate to the Gantry 5 admin panel.
2. Then, head over to the ‘Base Outline’ < ‘Page Settings’ < ‘Custom CSS/SCSS.’
3. Use the following lines of code to add custom styles to style the fixed HTML block:

.custom-html-block {

    background-color: #f4f4f4;

    padding: 20px;

    border-radius: 8px;

}

Final Thoughts

All in all, in order to insert fixed HTML into Gantry 5 particles, follow one of the above-mentioned methods. Remember, each technique serves a unique purpose, depending on your needs. For instance, if you’re looking for a quick way to insert static content, the ‘Custom HTML particle’ is the simplest option. But if you want more structured and reusable HTML blocks, creating a ‘Custom Particle’ will give you better control. So, choose the approach that best fits your workflow and ensures seamless content management in Gantry 5.