Sky Addons for Elementor

⌘K
  2. Home
  4. Docs
  6. Sky Addons for Elementor
  8. Extensions
  10. Grid Canvas

Grid Canvas

How to use Grid Canvas Extension of Sky Addons for Elementor

Sky Addons Grid Canvas is a pure-CSS Elementor extension that paints a decorative grid-line overlay behind any Section, Container, or even the whole page. Draw vertical columns, horizontal rows, or a full grid, then style the lines with a single color or a smooth start-to-end gradient, fade them with a gradient mask, and bring them in with a scroll-triggered entrance — all without a single line of JavaScript. Grid Canvas is the effortless way to add the modern “blueprint” or “graph-paper” backdrop seen on premium SaaS and agency landing pages. This documentation will guide you through enabling and configuring the Grid Canvas extension on your website.

Features:

  1. Vertical, horizontal, or full-grid line layouts with per-breakpoint column and row counts
  2. Single line color or a smooth gradient that blends from a start color to an end color across the grid
  3. Optional column fill, adjustable line width, max width, opacity, blend mode, and z-index
  4. Gradient mask that fades the grid in any direction for a soft, framed look
  5. Scroll-triggered entrance animations — Fade In and Draw In — plus a looping Pulse, all in pure CSS
  6. Works on Sections and Containers, or across the entire page from Page Settings, with an option to exclude chosen areas

Enable the Grid Canvas Extension

Grid Canvas ships with Sky Addons as an extension you switch on from the dashboard. To confirm it is active:

  1. Navigate to your WordPress Dashboard and locate “Sky Addons” in the left sidebar menu
  2. Click on the “Extensions” (Modules) tab within the Sky Addons dashboard
  3. Find “Grid Canvas” in the extensions list
  4. Ensure the toggle switch is in the “On” position
  5. Save your changes if you made any adjustments

Once enabled, the controls appear in two places. On any Section or Container, open the Style tab and find the Grid Canvas section (marked with the Sky Addons icon) right after the Background section. To cover the whole page, open Page Settings (the gear icon at the bottom-left of the editor) and find the Grid Canvas section under the Style tab.

Grid Canvas Controls

The grid is drawn as a decorative layer behind your content. By default it sits at the back (z-index -1), so it shows through transparent areas and is hidden behind sections that already have a solid background or image.

  1. Enable – Activates the grid overlay on the selected Section, Container, or page
  2. Line Type – Choose Vertical (columns), Horizontal (rows), or Both (a full grid)
  3. Columns – Number of vertical divisions (2–24), set per device for desktop, tablet, and mobile
  4. Rows – Number of horizontal divisions (2–24), shown for Horizontal and Both line types, per device
  5. Line Start Color – The line color. On its own, all lines use this single color
  6. Line End Color – Optional. When set, the lines blend smoothly from the Start Color to this color across the grid. This overrides the Column Fill
  7. Column Fill – Optional tint for the space between the lines. Hidden while a Line End Color is set
  8. Line Width – Thickness of each line in pixels (1–10), set per device
  9. Max Width – Constrains the grid to a centered band of this width (px or %). Leave empty for full width
  10. Opacity – Overall transparency of the grid (0–1)
  11. Blend Mode – How the grid blends with what is behind it (Normal, Multiply, Screen, Overlay, Lighten, Color Dodge)
  12. Z-Index – Stacking order of the grid (default -1, behind content). Raise it to place the grid in front

Gradient Mask

The Gradient Mask fades the grid so it dissolves toward one edge, giving a soft, framed finish instead of a hard rectangle.

  1. Enable – Turns the fade mask on
  2. Direction – The direction the grid fades (Top → Bottom, Bottom → Top, Left → Right, Right → Left)
  3. Visible Until – The point (0%–100%) up to which the grid stays fully visible before it starts fading
  4. Hidden From – The point (0%–100%) at which the grid has fully faded out

Animation

Bring the grid to life with a pure-CSS animation. Fade In and Draw In are triggered as the element scrolls into view, so they play right where the visitor is looking.

  1. Mode – None, Fade In (On Scroll), Draw In (On Scroll), or Pulse (Loop)
  2. Pulse Speed – For the Pulse mode only, the seconds per pulse cycle (0.3–10). Lower is faster
  3. Delay – For the Pulse mode only, a delay before the animation starts

Fade In gently fades the whole grid in, while Draw In makes the lines grow into place from the top and left as the section enters the viewport. Draw Down (from earlier versions) is treated the same as Draw In, so existing designs keep working. On browsers that do not support scroll-linked CSS animations, the grid simply appears fully drawn.

Whole-Page Grid and Excluding Sections (Page Settings)

To place the grid across the entire page, enable Grid Canvas from Page Settings instead of a single element. The same controls apply to the whole page background. Two extra controls let you keep chosen areas grid-free:

  1. Exclude Selectors – A comma-separated list of CSS selectors (for example header, .site-footer, .no-grid). The grid is hidden inside these elements
  2. Escape Background – The color painted over the grid inside the excluded elements. Set it to match your page background so the grid disappears cleanly there

Save and Preview

  1. Once configured, click “Publish” or “Update” to save your changes.
  2. Preview the page and scroll the element into view to see the Fade In or Draw In entrance.

Best Practices

  1. Use a subtle, low-opacity Line Start Color (a faint white or brand tint) so the grid reads as a backdrop, not the main content.
  2. Pair a Gradient Mask with the grid so it dissolves toward the content and never competes with text.
  3. Set a Line End Color for a modern gradient-line look; remember it replaces the Column Fill.
  4. For a whole-page backdrop, enable it in Page Settings and use Exclude Selectors to keep the header, footer, or busy sections clean.
  5. Use a thicker Line Width or a contrasting color when you want the columns to read clearly; keep it at 1px for a fine graph-paper feel.

Troubleshooting

  1. I don’t see the grid: The grid sits behind content at z-index -1, so it only shows through transparent areas. If your section has a solid background or image, raise the Z-Index or apply the grid to a transparent element.
  2. Column Fill does nothing: A Line End Color is set, which replaces the fill. Clear the Line End Color to use Column Fill.
  3. The scroll animation doesn’t play: Fade In and Draw In trigger as the element enters the viewport — preview the page and scroll to it. On older browsers the grid appears fully drawn instead of animating.
  4. Changes don’t appear on the front end: Elementor caches page CSS. Go to Elementor → Tools → Regenerate CSS & Data, or re-save the page, then hard-refresh.
  5. An excluded section still shows the grid: Check the selector is correct and set the Escape Background to your page background color so the grid is covered cleanly.

Frequently Asked Questions

Does Grid Canvas use any JavaScript?

No. Grid Canvas is entirely CSS — the lines, the gradient color, the mask, and even the scroll-triggered entrance animations run without any JavaScript, so it stays fast and lightweight.

Can I put the grid across my whole page?

Yes. Enable Grid Canvas from Page Settings and the grid covers the entire page background. Use the Exclude Selectors field to keep specific areas, like the header or footer, free of the grid.

How do I make the lines a gradient instead of one color?

Set both a Line Start Color and a Line End Color. The lines then blend smoothly from the start color to the end color across the grid. Note that this replaces the Column Fill.

Why is the grid hidden behind my section?

By default the grid sits behind your content at z-index -1, so a solid background or image on the section covers it. Raise the Z-Index to bring the grid in front, or apply it to a transparent element.

Related Documentation

Conclusion

The Grid Canvas extension by Sky Addons for Elementor adds a modern, zero-JavaScript grid backdrop to any section, container, or full page — with gradient lines, a soft fade mask, and scroll-triggered entrances, all configured visually with no code. Use it to give landing pages that clean, technical “blueprint” feel. If you have any questions, the Sky Addons support team is happy to help.

How can we help?