Tips, Tricks, and Solutions

If your SVG icons look slightly different on the website (especially curves or rounded edges), the issue is usually caused by how strokes are rendered after export. Browsers can interpret SVG strokes differently than Illustrator, which leads to small visual distortions.

This solution is used when creating dynamic FAQ sections in Elementor using ACF fields. When FAQ fields are left empty, Elementor still outputs blank accordion items. This script automatically removes empty items and hides the entire FAQ section if no valid FAQs exist. It improves user experience, keeps the layout clean, and eliminates the need for manual cleanup on every post.

If your WordPress admin is slow, pages are timing out, or Elementor keeps crashing, the fixes below will solve most issues. These settings apply to any WordPress site hosted on Cloudways.

This creates a floating button with an arrow

Use Elementor page builder to add animation to 2-3 “Services” boxes

How to Add Responsive Clamp Typography in Elementor

You can use this CSS code to add a separator between widgets that are in a row.

These instructions explain how to add light gray vertical dividers

Create a custom WordPress Dashboard for your clients. Video link available in Tip Content.

Learn how to create fluid containers for Elementor using CSS clamp for responsive padding.

Align + sign at top in Elementor Accordion

Make sure to use same CSS Class ID

Hide the entire Related Posts section on single post pages when Elementor’s Loop Grid finds no related items.

This will make the underline of navigation menu items 50% shorter

Create a pulsating Button to attract visitors by adding CSS

This CSS will make the underline under nav menu Items shorter

This CSS code will fix the left and right wiggle on iPhone

Use this code if the footer doesn’t stick at the bottom of the page when pages have very short content.

Elementor paragraphs has a default 20px gap below them. This tip/solution will remove that gap.