echoplugins

Our Elementor widgets are designed for writers. We make it easy to write detailed instructions, step-by-step guides, manuals and detailed documentation.
<h4>Built for Writers</h4>
We have a lot of experience creating documents, articles, knowledge bases and FAQs. We offer the most popular <a href="https://wordpress.org/plugins/echo-knowledge-base/?utm_source=wp-repo&utm_medium=link&utm_campaign=readme" rel="ugc">Knowledge Base plugin</a>. Now we have added Elementor widgets to complement it.
<h4>Pre-Designed Presets</h4>
The preset option adjusts the widget to a specific look. Each preset has a unique style and design so you can choose the one that works for your needs. Every widget comes with several preset options.
<h4>Completely Customizable</h4>
Each widget has large number of settings for fine tuning. Start with one of its presets and adjust as many settings as you need.
<h4>Be More Productive</h4>
Creative Addons for Elementor page builder will enhance and speed your productivity for WordPress pages, posts and articles. It improves your editing and productivity capabilities, taking them to a whole new level. Sometimes you need to write articles and instructions very quickly and efficiently, and we can help with that.
<h4>Other Features</h4>
<ul>
<li>Support for RTL, WCAG accessibility and WPML</li>
</ul>
<h4>Widgets Currently Available</h4>
✅ <a href="https://www.creative-addons.com/elementor-widgets/advanced-heading/" rel="nofollow ugc">Advanced Heading</a>
<ul>
<li>Add attractive and prominent headings for sections in your documents.</li>
<li>Supplement headings with HTML anchors anywhere on the page. Add a tag.</li>
</ul>
✅ <a href="https://www.creative-addons.com/elementor-widgets/steps/" rel="nofollow ugc">Steps</a>
<ul>
<li>Auto generates numbers, so you don’t have to.</li>
<li>Provide easy, step-by-step instructions with a single widget.</li>
<li>Complement each step with image and distinguishable step number.</li>
</ul>
✅ <a href="https://www.creative-addons.com/elementor-widgets/image-guide/" rel="nofollow ugc">Image Guide</a>
<ul>
<li>Create instructions for screenshots and images and connect them to a sequence of image hotspots.</li>
<li>Add a note for each hotspot as part of the instructions about the screenshot and image.</li>
</ul>
✅ <a href="https://www.creative-addons.com/elementor-widgets/text-image/" rel="nofollow ugc">Text and Image</a>
<ul>
<li>Add text and image easily with one widget.</li>
<li>Set width of the image relative to the text using presets.</li>
</ul>
✅ <a href="https://www.creative-addons.com/elementor-widgets/notification-box/" rel="nofollow ugc">Notification Box</a>
<ul>
<li>Inform, Warn, or Suggest to your readers with boxed instructions.</li>
<li>Choose your icon and add ‘Learn More’ link.</li>
</ul>
✅ <a href="https://www.creative-addons.com/elementor-widgets/features-list/" rel="nofollow ugc">Feature List Widget</a>
<ul>
<li>Showcase your product features, team and pros/cons in a list format.</li>
<li>Apply various styles to showcase the features list.</li>
</ul>
✅ <a href="https://www.creative-addons.com/elementor-widgets/code-block/" rel="nofollow ugc">Code Block</a>
<ul>
<li>The Code Block widget is a useful tool for developer blogs, tutorial sites, manuals, and software documentation. It helps to display formatted (highlighted) code of almost any language as it supports over fifty programming, scripting, and mark up languages. We provide 11 different color themes with both white and black backgrounds.</li>
<li>Show code examples in CSS, HTML, JS, PHP, C# and more.</li>
</ul>
✅ <a href="https://www.creative-addons.com/elementor-widgets/advanced-lists/" rel="nofollow ugc">Advanced Lists</a>
<ul>
<li>Create lists of items with indents.</li>
<li>Choose from numeric, alpha, Rome and other list types.</li>
</ul>
✅ <a href="https://www.creative-addons.com/elementor-widgets/knowledge-base/" rel="nofollow ugc">Echo Knowledge Base</a>
<ul>
<li>Add the full Knowledge Base page of categories and articles.</li>
<li>This requires a free <a href="https://wordpress.org/plugins/echo-knowledge-base/?utm_source=wp-repo&utm_medium=link&utm_campaign=readme" rel=" ugc">Echo Knowledge Base plugin</a></li>
</ul>
✅ <a href="https://www.creative-addons.com/elementor-widgets/knowledge-base-recent-articles/" rel="nofollow ugc">KB Recent Articles</a>
<ul>
<li>List recent articles from your Echo Knowledge Base.</li>
<li>This requires a free <a href="https://wordpress.org/plugins/echo-knowledge-base/?utm_source=wp-repo&utm_medium=link&utm_campaign=readme" rel=" ugc">Echo Knowledge Base plugin</a></li>
</ul>
✅ <a href="https://www.creative-addons.com/elementor-widgets/knowledge-base-categories/" rel="nofollow ugc">KB Categories</a>
<ul>
<li>List specific categories from your Echo Knowledge Base.</li>
<li>This requires a free <a href="https://wordpress.org/plugins/echo-knowledge-base/?utm_source=wp-repo&utm_medium=link&utm_campaign=readme" rel=" ugc">Echo Knowledge Base plugin</a></li>
</ul>
✅ <a href="https://www.creative-addons.com/elementor-widgets/knowledge-base-search/" rel="nofollow ugc">KB Search</a>
<ul>
<li>Let reader search through your Echo Knowledge Base.</li>
<li>This requires a free <a href="https://wordpress.org/plugins/echo-knowledge-base/?utm_source=wp-repo&utm_medium=link&utm_campaign=readme" rel=" ugc">Echo Knowledge Base plugin</a></li>
</ul>
<h4>Expert Support</h4>
We have an extraordinary support team ready to help you. We provide friendly and timely support.
<blockquote>
⭐ OUR FREE COMPLEMENTARY PLUGINS ⭐
✅ <a href="https://wordpress.org/plugins/echo-knowledge-base" rel="ugc">Echo Knowledge Base</a> is a documentation plugin for WordPress. Create knowledgebase, docs, FAQs, and wikis easily. <a href="https://wordpress.org/plugins/echo-knowledge-base" rel="ugc">Learn More</a>
✅ The <a href="https://wordpress.org/plugins/help-dialog/" rel="ugc">Help Dialog</a> offers a chatbot-like dialog for better customer support and increased leads and sales. The Help Dialog includes FAQs, search, and a contact form. <a href="https://wordpress.org/plugins/help-dialog/" rel="ugc">Learn More</a>
✅ <a href="https://wordpress.org/plugins/echo-show-ids/" rel="ugc">Show IDs</a> reveals IDs on admin screens that list posts, pages, custom post types and taxonomies, and others. <a href="https://wordpress.org/plugins/echo-show-ids/" rel="ugc">Learn More</a>
✅ The <a href="https://wordpress.org/plugins/echo-knowledge-base" rel="ugc">Content Down Arrow</a> is coming soon.
</blockquote>
Please stay tuned! We have amazing widgets coming!

Creative Addons for Elementor

Write articles and documents faster and more easily using our powerful and practical Elementor widgets.

Theme-X

🚀 NEW: Elementor Theme Builder (Header & Footer) 
Elematic now includes a built-in Elementor Theme Builder, allowing you to create custom headers and footers visually using Elementor, without editing theme files or writing code.
You can: 
– Design global or conditional headers and footers 
– Edit header, content, and footer layouts seamlessly 
– Use Elementor widgets and Elematic widgets inside headers and footers 
– Replace theme headers and footers safely, even on block themes
This makes Elematic a complete layout solution, not just a widget pack.
Elematic is a fast, lightweight addon for the Elementor page builder, designed for modern WordPress websites. It includes beautifully animated widgets inspired by Webflow and Framer, giving you motion-design freedom directly inside Elementor.
Whether you’re building a landing page, business website, portfolio, SaaS layout, blog, or WooCommerce store, Elematic gives you everything you need to design clean, interactive, and high-converting layouts.
The plugin is built with performance first in mind. Assets load only when widgets are used, ensuring fast page loads, strong Core Web Vitals, and excellent Google PageSpeed scores.
🚀 With Elematic, you can build: 
– Custom Elementor headers and footers 
– High-engagement landing pages 
– Animated portfolios and creative layouts 
– Modern SaaS and agency websites 
– Interactive product and marketing pages
👉 Perfect for: 
✔ Designers 
✔ Agencies 
✔ Developers 
✔ Bloggers 
✔ WooCommerce stores 
✔ Elementor users who want more control and better animations
<h3>Key Highlights</h3>
<ul>
<li>Elementor Theme Builder (Header & Footer)</li>
<li>Webflow & Framer-style animations</li>
<li>Performance-optimized architecture</li>
<li>Clean HTML and minimal CSS output</li>
<li>Works with Elementor Free & Pro</li>
<li>Fully responsive and SEO friendly</li>
</ul>
<h3>Elementor Theme Builder (Header & Footer)</h3>
Elematic includes a visual Theme Builder that lets you design headers and footers using Elementor.
Features: 
– Create unlimited headers and footers 
– Assign display conditions (global, pages, posts, archives) 
– Edit headers/footers directly from the frontend 
– Compatible with classic and block themes 
– No theme file overrides 
– Safe, lightweight, and cache-friendly
This brings Elementor Pro-style header/footer editing into a lightweight, developer-friendly plugin.
<h3>Included Widgets</h3>
<ul>
<li>
<a href="https://themes.network/elematic/3d-carousel/" rel="nofollow ugc">3D Carousel</a> 
Bring your images to life with realistic depth and perspective. This new widget creates a striking 3D rotating stage with dynamic scaling, custom slide labels, and elegant shadow details.
</li>
<li>
<a href="https://themes.network/elematic/accordion/" rel="nofollow ugc">Accordion</a> 
Clean collapsible FAQ sections with icons and smooth animation.
</li>
<li>
<a href="https://themes.network/elematic/animated-heading/" rel="nofollow ugc">Animated Heading</a> 
Dynamic title animations (typed, sliding, or looping) to highlight key headlines.
</li>
<li>
<a href="https://themes.network/elematic/animated-shape/" rel="nofollow ugc">Animated Shape</a> 
Modern motion shapes and blobs to add subtle, looping background animation to sections and hero areas.
</li>
<li>
<a href="https://themes.network/elematic/banner/" rel="nofollow ugc">Banner</a> 
Create modern hero banners with image, title, subtitle, and CTA buttons with animations, perfect for landing pages and marketing sections.
</li>
<li>
<a href="https://themes.network/elematic/breadcrumbs/" rel="nofollow ugc">Breadcrumbs</a> 
SEO-friendly dynamic breadcrumbs for pages, posts, archives, and WooCommerce.
</li>
<li>
<a href="https://themes.network/elematic/button/" rel="nofollow ugc">Button</a> 
Customizable button with icons, hover effects, and full control over typography, spacing, and borders.
</li>
<li>
<a href="https://themes.network/elematic/chart/" rel="nofollow ugc">Chart</a> 
Responsive, animated charts (bar, line, pie, radar, horizontal, vertical, etc.) powered by your data, with full color and typography control for dashboards and stats sections.
</li>
<li>
<a href="https://themes.network/elematic/circle-info/" rel="nofollow ugc">Circle Info</a> 
Interactive circular feature widget with auto/manual rotation and clickable icons revealing detailed content in the center.
</li>
<li>
<a href="https://themes.network/elematic/circle-progress-bar/" rel="nofollow ugc">Circle Progress Bar</a> 
Animated circular progress indicator with percentage display and full styling control for dashboards, skills, and achievement counters.
</li>
<li>
<a href="https://themes.network/elematic/circle-text/" rel="nofollow ugc">Circle Text</a> (Webflow + Framer style) 
Create rotating circular text around logos or icons with smooth Webflow/Framer-style animation for badges, seals, and hero sections.
</li>
<li>
<a href="https://themes.network/elematic/contact-form-7/" rel="nofollow ugc">Contact Form 7</a> 
Style Contact Form 7 forms inside Elementor with custom spacing, colors, and typography without touching CSS.
</li>
<li>
<a href="https://themes.network/elematic/countdown/" rel="nofollow ugc">Countdown</a> 
Create animated countdown timers for launches, sales, or events with full control over layout, labels, and expiry actions.
</li>
<li>
<a href="https://themes.network/elematic/counter/" rel="nofollow ugc">Counter</a> 
Animate numbers from any start/end value with icons, prefixes, and suffixes to highlight key stats or milestones.
</li>
<li>
<a href="https://themes.network/elematic/dual-button/" rel="nofollow ugc">Dual Button</a> 
Create side-by-side CTA buttons with separate links and icons, featuring 50 built-in gradient presets for instant modern styling.
</li>
<li>
<a href="https://themes.network/elematic/features/" rel="nofollow ugc">Features</a> 
Create flexible feature sections with custom items or fully dynamic content pulled from any post type. Supports images, titles, descriptions, meta info, and multi-column layouts for building service lists, feature highlights, or dynamic content showcases.
</li>
<li>
<a href="https://themes.network/elematic/flip-box/" rel="nofollow ugc">Flip Box</a> 
Create interactive cards that flip on hover with zoom, up/down, left/right and other 3D flip effects to reveal extra info or CTAs.
</li>
<li>
<a href="https://themes.network/elematic/gallery/" rel="nofollow ugc">Gallery</a> 
Responsive, filterable image gallery with hover effects, spacing control, and built-in lightbox/popup modal for clean portfolio and showcase layouts.
</li>
<li>
<a href="https://themes.network/elematic/grid/" rel="nofollow ugc">Grid</a> 
Flexible multi-column content grid with image, icon, title, description, read-more link, and optional image lightbox for services, features, or portfolio cards.
</li>
<li>
<a href="https://themes.network/elematic/highlight-text/" rel="nofollow ugc">Highlight Text</a> (Webflow + Framer style) 
Scroll-triggered highlight text effect inspired by Webflow and Framer, animating your headings or paragraphs as they enter the viewport.
</li>
<li>
<a href="https://themes.network/elematic/horizontal-timeline/" rel="nofollow ugc">Horizontal Timeline</a> 
Display milestones and events in a scrollable horizontal timeline with 4 layout styles, custom icons, images, dates, and an animated progress line — perfect for history sections, roadmaps, and process flows.
</li>
<li>
<a href="https://themes.network/elematic/hotspot/" rel="nofollow ugc">Hotspot</a> 
Lets you add clickable markers over images with tooltips or popups, perfect for product highlights, maps, and interactive storytelling.
</li>
<li>
<a href="https://themes.network/elematic/icon-box/" rel="nofollow ugc">Icon Box</a> 
Lets you showcase features in 3 layouts using icon or image, with full-box hover effects for highly interactive service or feature blocks.
</li>
<li>
<a href="https://themes.network/elematic/image-animate/" rel="nofollow ugc">Image Animate</a> 
Adds smooth left-right and up-down reveal animations to your images for simple, lightweight scroll-based motion effects.
</li>
<li>
<a href="https://themes.network/elematic/image-box/" rel="nofollow ugc">Image Box</a> 
Displays an image with title, description, and optional button in multiple layouts, ideal for feature/service cards and promo blocks.
</li>
<li>
<a href="https://themes.network/elematic/image-comparison/" rel="nofollow ugc">Image Comparison</a> 
Add an interactive draggable before/after slider with hover, smoothing, and label controls for showcasing transformations or visual changes in horizontal and vertical orientation.
</li>
<li>
<a href="https://themes.network/elematic/image-hover/" rel="nofollow ugc">Image Hover</a> 
Add 30+ modern hover effects to images with title, description, and overlay controls for eye-catching rollovers.
</li>
<li>
<a href="https://themes.network/elematic/image-mask/" rel="nofollow ugc">Image Mask</a> 
Clip images into 80+ ready-made artistic shapes (ink, blobs, badges, etc.) for instant Webflow-style image frames.
</li>
<li>
<a href="https://themes.network/elematic/image-scrolling/" rel="nofollow ugc">Image Scrolling</a> 
Create smooth horizontal or vertical image scrolling effects for product shots, long screenshots, or parallax-style image reveals.
</li>
<li>
<a href="https://themes.network/elematic/image-slide/" rel="nofollow ugc">Image Slide</a> (Webflow + Framer style) 
Create smooth looping image strips that slide left, right, up, or down for modern Webflow/Framer-style hero and gallery sections.
</li>
<li>
<a href="https://themes.network/elematic/info-link/" rel="nofollow ugc">Info Link</a> 
Create an interactive tab-style content switcher with icons where text changes dynamically on click for cleaner layouts and better UX.
</li>
<li>
<a href="https://themes.network/elematic/logo/" rel="nofollow ugc">Logo</a> 
Dynamic site logo widget with responsive images and title/tagline support.
</li>
<li>
<a href="https://themes.network/elematic/lottie/" rel="nofollow ugc">Lottie</a> 
Add lightweight JSON animations with full playback controls, autoplay, loop, speed adjustment, and scroll-based animation support.
</li>
<li>
<a href="https://themes.network/elematic/marquee/" rel="nofollow ugc">Marquee</a> (Webflow + Framer style) 
Create smooth, looping marquee rows for text or logos with controllable speed, direction, and hover pause, inspired by Webflow and Framer motion rails.
</li>
<li>
<a href="https://themes.network/elematic/menu/" rel="nofollow ugc">Menu</a> 
Advanced Elementor navigation menu for headers and layouts.
</li>
<li>
<a href="https://themes.network/elematic/page-title/" rel="nofollow ugc">Page Title</a> 
Dynamic page, archive, author, and WooCommerce titles.
</li>
<li>
<a href="https://themes.network/elematic/post-alter/" rel="nofollow ugc">Post Alter</a>. Display blog posts in an alternating left-right layout with featured images, meta info, excerpt. Perfect for storytelling-style blog layouts.
</li>
<li>
<a href="https://themes.network/elematic/post-grid/" rel="nofollow ugc">Post Grid</a>. Display posts in a customizable grid with category filters, numbered pagination and AJAX “Load More” button without page reload.
</li>
<li>
<a href="https://themes.network/elematic/post-tab/" rel="nofollow ugc">Post Tab</a> 
Display posts in a tabbed layout organized by any taxonomy, with left/top/right tab positions, click or hover trigger, and a responsive multi-column grid — ideal for browsing blog content by category on a single page.
</li>
<li>
<a href="https://themes.network/elematic/post-tiled/" rel="nofollow ugc">Post Tiled</a> 
Modern tiled post layouts with 13 styles layout.
</li>
<li>
<a href="https://themes.network/elematic/progress-bar/" rel="nofollow ugc">Progress Bar</a> 
Show elegant vertical or horizontal progress indicators for skills, stats, or milestones with full color and animation controls.
</li>
<li>
<a href="https://themes.network/elematic/service-list/" rel="nofollow ugc">Service List</a> (Webflow + Framer style) 
Display modern, animated service rows with icons, descriptions, title, subtle and hover image inspired by Webflow and Framer layouts.
</li>
<li>
<a href="https://themes.network/elematic/table/" rel="nofollow ugc">Table</a> 
Create responsive, styled data tables with headings, rows, and typography controls for pricing, feature comparison, or structured content layouts.
</li>
<li>
<a href="https://themes.network/elematic/team/" rel="nofollow ugc">Team</a> 
Team member profiles in 4 styles with social links and hover effects.
</li>
<li>
<a href="https://themes.network/elematic/timeline/" rel="nofollow ugc">Timeline</a> 
Visual timeline with custom or dynamic posts, alternating layouts, dates, images, and smooth milestone animations.
</li>
</ul>
<h3>Global Module</h3>
<ul>
<li>Wrapper Link (Module) 
Add a clickable link to entire widgets, columns, or containers, enabling full-area linking without custom code.</li>
</ul>
<h3>Features</h3>
<ul>
<li>Elementor Theme Builder (Header & Footer)</li>
<li>Works with Elementor Free and Pro</li>
<li>Loads assets only when needed</li>
<li>Translation ready (.pot included)</li>
<li>Compatible with caching and optimization plugins</li>
<li>Optimized for Core Web Vitals and Lighthouse scores</li>
</ul>
<h3>Support</h3>
For support, please visit the <a href="https://wordpress.org/support/plugin/elematic-addons-for-elementor/" rel="ugc">plugin support forum</a>.
<h3>Credits</h3>
Developed by <a href="https://theme-x.org/" rel="nofollow ugc">theme-x</a>

Elematic — Elementor Addons, Header Footer Builder & Animations

Modern Elementor addons with Webflow-style animations, advanced widgets, and a powerful Elementor Theme Builder to create custom headers and footers.

Creative Addons for Elementor vs Elematic — Elementor Addons, Header Footer Builder & Animations