Freemius

DeoThemes

Introducing Envision Blocks, a collection of creative and unique Elementor widgets and addons designed to enhance your website. With over 16 free Elementor widgets at your disposal, you have the power to customize and optimize your site to your heart’s content. Plus, you can easily switch off any widgets that you don’t need, improving your site’s performance and loading speed. Elevate your website with Envision Blocks today!
💻 <a href="https://envision-blocks.deothemes.com/?utm_source=wordpress.org" rel="nofollow ugc">Demo</a> | 👩🏼‍💻 <a href="https://deothemes.com/?utm_source=wordpress.org" rel="nofollow ugc">View Other Products</a>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/5X0tglobaXM?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<h4>Why Choose Envision Blocks?</h4>
<ul>
<li>Modern and User friendly design</li>
<li>Creative widgets not available in other addon plugins</li>
<li>Unique animations, sliders and parallax effects</li>
<li>Turn off unused widgets for improved performance</li>
<li>Dark mode ready (Pro)</li>
<li>Works with Elementor free</li>
</ul>
<h4>Envision Blocks Free Widgets</h4>
<ol>
<li><a href="https://envision-blocks.deothemes.com/animated-text" rel="nofollow ugc">Animated Text</a> – display creative headlines with typing animation text.</li>
<li><a href="https://envision-blocks.deothemes.com/before-after" rel="nofollow ugc">Before & After</a> – show a comparison between two images, one before and one after.</li>
<li><a href="https://envision-blocks.deothemes.com/contact-form-7" rel="nofollow ugc">Contact Form 7</a> – display a Contact Form 7 to stay in touch with your users.</li>
<li><a href="https://envision-blocks.deothemes.com/graph" rel="nofollow ugc">Graph</a> – display and visualize data in the form of a graph or chart.</li>
<li><a href="https://envision-blocks.deothemes.com/google-maps" rel="nofollow ugc">Google Maps</a> – advanced Google Map with multiple skins.</li>
<li><a href="https://envision-blocks.deothemes.com/hero-slider" rel="nofollow ugc">Hero Slider</a> – showcase content with a background image or video in a sliding carousel.</li>
<li><a href="https://envision-blocks.deothemes.com/hotspot" rel="nofollow ugc">Hotspot</a> – add interactive hotspots on images.</li>
<li><a href="https://envision-blocks.deothemes.com/icon-box" rel="nofollow ugc">Icon Box</a> – icon alongside text to highlight key features or services.</li>
<li><a href="https://envision-blocks.deothemes.com/testimonials-feed" rel="nofollow ugc">Testimonials Feed</a> – display a masonry grid feed of customer video testimonials.</li>
<li><a href="https://envision-blocks.deothemes.com/mailchimp-form" rel="nofollow ugc">MailChimp Form</a> – display MailChimp forms to collect subscribers.</li>
<li><a href="https://envision-blocks.deothemes.com/marquee" rel="nofollow ugc">Marquee</a> – scroll text or images horizontally or vertically.</li>
<li><a href="https://envision-blocks.deothemes.com/parallax" rel="nofollow ugc">Parallax</a> – creative parallax scrolling effect with background image.</li>
<li><a href="https://envision-blocks.deothemes.com/posts" rel="nofollow ugc">Posts</a> – display a list or slider of blog posts with featured post.</li>
<li><a href="https://envision-blocks.deothemes.com/vertical-tabs" rel="nofollow ugc">Vertical Tabs</a> – display vertical tabs in a tabbed content for easy navigation.</li>
<li><a href="https://envision-blocks.deothemes.com/video-lightbox" rel="nofollow ugc">Video Lightbox</a> – play button that opens YouTube or Vimeo videos in a popup lightbox when clicked.</li>
<li><a href="https://envision-blocks.deothemes.com/product/linen-blend-mini-dress" rel="nofollow ugc">Share Buttons</a> – allow users to share a post or a page.</li>
</ol>
<h4>Premium Widgets</h4>
<ol>
<li><a href="https://envision-blocks.deothemes.com/creative-cards-carousel" rel="nofollow ugc">Creative Cards Carousel</a> – display a carousel with background image or video and cards.</li>
<li><a href="https://envision-blocks.deothemes.com/creative-cursor" rel="nofollow ugc">Creative Cursor</a> – creative cursor with captivating animation effect.</li>
<li><a href="https://envision-blocks.deothemes.com/dark-mode" rel="nofollow ugc">Dark Mode</a> – dark color scheme toggle for your website.</li>
<li><a href="https://envision-blocks.deothemes.com/expanding-cards" rel="nofollow ugc">Expanding Cards</a> – expand and reveal image content on hover.</li>
<li><a href="https://envision-blocks.deothemes.com/interactive-quiz" rel="nofollow ugc">Interactive Quiz</a> – allow your users to take interactive quizzes on the website.</li>
<li><a href="https://envision-blocks.deothemes.com/image-hover-menu" rel="nofollow ugc">Image Hover Menu</a> – display an image when hovering over a menu.</li>
<li><a href="https://envision-blocks.deothemes.com/header-builder" rel="nofollow ugc">Menu Icon</a> – search, shopping cart, account, and wishlist icons.</li>
<li><a href="https://envision-blocks.deothemes.com/menu-photo-reveal" rel="nofollow ugc">Menu Photo Reveal</a> – full screen images that reveal when hovering over a menu items.</li>
<li><a href="https://envision-blocks.deothemes.com/header-builder" rel="nofollow ugc">Nav Menu</a> – create a navigation menu for your website.</li>
<li><a href="https://envision-blocks.deothemes.com/header-builder" rel="nofollow ugc">Site Logo</a> – displays your website’s logo.</li>
<li><a href="https://envision-blocks.deothemes.com/sticky-scroll-section" rel="nofollow ugc">Sticky Scroll Section</a> – keep a section of content visible even when scrolling.</li>
<li><a href="https://envision-blocks.deothemes.com/offcanvas" rel="nofollow ugc">Offcanvas</a> – create an off-canvas menu or content panel.</li>
<li><a href="https://envision-blocks.deothemes.com/parallax-carousel" rel="nofollow ugc">Parallax Carousel</a> – a widget that combines the parallax effect with a carousel of images or content.</li>
<li><a href="https://envision-blocks.deothemes.com/portfolio/sneakers" rel="nofollow ugc">Post Title</a> – dynamically shows the title of the current blog post or custom post type.</li>
<li><a href="https://envision-blocks.deothemes.com/portfolio/sneakers" rel="nofollow ugc">Post Navigation</a> – links to navigate between previous and next posts.</li>
<li><a href="https://envision-blocks.deothemes.com/portfolio-widget" rel="nofollow ugc">Portfolio</a> – showcase your projects with an Ajax filter and load more pagination.</li>
<li><a href="https://envision-blocks.deothemes.com/table" rel="nofollow ugc">Table</a> – present and group information in a beautiful table.</li>
<li><a href="https://envision-blocks.deothemes.com/testimonials-slider" rel="nofollow ugc">Testimonials Slider</a> – display customer testimonials in a sliding format.</li>
</ol>
<h4>WooCommerce Widgets</h4>
<ol>
<li><a href="https://envision-blocks.deothemes.com/products" rel="nofollow ugc">Woo Products</a> – display products from your WooCommerce store.</li>
<li><a href="https://envision-blocks.deothemes.com/product-categories" rel="nofollow ugc">Woo Product Categories</a> – display product categories from your WooCommerce store.</li>
<li><a href="https://envision-blocks.deothemes.com/product/linen-blend-mini-dress" rel="nofollow ugc">Woo Product Image</a> – show the product image from your WooCommerce store.</li>
<li><a href="https://envision-blocks.deothemes.com/product/linen-blend-mini-dress" rel="nofollow ugc">Woo Product Title</a> – display the title of a product from your WooCommerce store.</li>
<li><a href="https://envision-blocks.deothemes.com/product/linen-blend-mini-dress" rel="nofollow ugc">Woo Product Price</a> – show the price of a product from your WooCommerce store.</li>
<li><a href="https://envision-blocks.deothemes.com/product/linen-blend-mini-dress" rel="nofollow ugc">Woo Product Add To Cart</a> – show add to cart from your WooCommerce store.</li>
<li><a href="https://envision-blocks.deothemes.com/product/linen-blend-mini-dress" rel="nofollow ugc">Woo Product Short Description</a> – display a short description of a product from your WooCommerce store.</li>
<li><a href="https://envision-blocks.deothemes.com/product/linen-blend-mini-dress" rel="nofollow ugc">Woo Product Tabs</a> – display product tabs from your WooCommerce store.</li>
<li><a href="https://envision-blocks.deothemes.com/product/linen-blend-mini-dress" rel="nofollow ugc">Woo Product Related</a> – showcase related products from your WooCommerce store.</li>
<li><a href="https://envision-blocks.deothemes.com/product/linen-blend-mini-dress" rel="nofollow ugc">Woo Product Rating</a> – display the rating of a product from your WooCommerce store.</li>
<li><a href="https://envision-blocks.deothemes.com/product/linen-blend-mini-dress" rel="nofollow ugc">Woo Product Stock</a> – show the stock availability of a product from your WooCommerce store.</li>
<li><a href="https://envision-blocks.deothemes.com/product/linen-blend-mini-dress" rel="nofollow ugc">Woo Product Additional Information</a> – display additional information about a product from your WooCommerce store.</li>
<li><a href="https://envision-blocks.deothemes.com/product/linen-blend-mini-dress" rel="nofollow ugc">Woo Product Meta</a> – show meta information about a product from your WooCommerce store.</li>
<li><a href="https://envision-blocks.deothemes.com/product/linen-blend-mini-dress" rel="nofollow ugc">Woo Product Upsell</a> – suggest upsell products from your WooCommerce store.</li>
<li><a href="https://envision-blocks.deothemes.com/product/linen-blend-mini-dress" rel="nofollow ugc">Woo Product Notices</a> – display notices related to a product from your WooCommerce store.</li>
<li><a href="https://envision-blocks.deothemes.com/product/linen-blend-mini-dress" rel="nofollow ugc">Woo Product Breadcrumb</a> – show the breadcrumb navigation for a product from your WooCommerce store.</li>
</ol>
<h4>Premium Features</h4>
<ul>
<li>Dark Mode</li>
<li><a href="https://envision-blocks.deothemes.com/#demos" rel="nofollow ugc">Starter Sites</a></li>
<li>Header & Footer builder</li>
<li>WooCommerce product builder</li>
<li>Mega Menu builder</li>
<li>Elementor templates</li>
<li>Custom fonts</li>
<li>ACF Pro included</li>
</ul>
<h4>Copyright</h4>
Envision Blocks, Copyright 2024, DeoThemes https://deothemes.com 
Envision Blocks plugin is distributed under the terms of the GNU GPL.
<h4>Use of 3rd Party or External Services</h4>
This plugin utilizes the following 3rd party services to enable sharing functionalities. Below is a list of the services, the purpose they serve, and the relevant links to their terms of use and privacy policies.
Facebook, URL: https://www.facebook.com/sharer/sharer.php, Terms of Use: https://www.facebook.com/terms.php, Privacy Policy: https://www.facebook.com/policy.php
Twitter, URL: https://twitter.com/intent/tweet, Terms of Use: https://twitter.com/en/tos, Privacy Policy: https://twitter.com/en/privacy
Threads, URL: https://www.threads.net/intent/post, Terms of Use: https://www.threads.net/tos, Privacy Policy: https://www.threads.net/privacy
Linkedin, URL: https://www.linkedin.com/shareArticle, Terms of Use: https://www.linkedin.com/legal/user-agreement, Privacy Policy: https://www.linkedin.com/legal/privacy-policy
Pinterest, URL: https://pinterest.com/pin/create/button, Terms of Use: https://policy.pinterest.com/en/terms-of-service, Privacy Policy: https://policy.pinterest.com/en/privacy-policy
Reddit, URL: https://www.reddit.com/submit, Terms of Use: https://www.redditinc.com/policies/user-agreement, Privacy Policy: https://www.redditinc.com/policies/privacy-policy
VK, URL: https://vk.com/share.php, Terms of Use: https://vk.com/terms, Privacy Policy: https://vk.com/privacy
Odnoklassniki, URL: https://connect.ok.ru/offer, Terms of Use: https://ok.ru/help/7/terms, Privacy Policy: https://ok.ru/help/3/privacy
Tumblr, URL: http://tumblr.com/widgets/share/tool 
– Terms of Use: https://www.tumblr.com/policy/en/terms-of-service 
– Privacy Policy: https://www.tumblr.com/policy/en/privacy
Telegram, URL: https://t.me/share/url, Terms of Use: https://telegram.org/tos, Privacy Policy: https://telegram.org/privacy
Pocket, URL: https://getpocket.com/save, Terms of Use: https://getpocket.com/tos, Privacy Policy: https://getpocket.com/privacy
Xing, URL: https://www.xing.com/spi/shares/new, Terms of Use: https://www.xing.com/terms, Privacy Policy: https://privacy.xing.com/en/privacy-policy
WhatsApp, URL: https://www.whatsapp.com/send, Terms of Use: https://www.whatsapp.com/legal/terms-of-service, Privacy Policy: https://www.whatsapp.com/legal/privacy-policy
<h4>Use of Google Maps API Integration</h4>
This plugin utilizes the Google Maps API to provide mapping and location services. Below is the relevant information including the purpose, URL for the API, and links to Google’s terms of use and privacy policy.
Google Maps API 
– Purpose: Provide mapping and location services 
– URL: https://maps.googleapis.com/maps/api 
– Terms of Use: https://cloud.google.com/maps-platform/terms 
– Privacy Policy: https://policies.google.com/privacy

Envision Blocks – Unique Elementor Widgets & Addons.

Anwar Hossain

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 without writing custom code.
Whether you’re building a landing page, business website, portfolio, SaaS layout, or eCommerce product page, Elematic gives you all the essential visual widgets to design clean, interactive, and high-converting layouts.
This addon focuses on performance, styling flexibility, and usability. Every widget loads only when used, ensuring fast page load, better Core Web Vitals, and a higher Google PageSpeed score.
🚀 With Elematic, you can create:
<ul>
<li>High-engagement landing pages</li>
<li>Animated portfolio and creative UI layouts</li>
<li>Modern SaaS and agency websites</li>
<li>Interactive product presentations</li>
<li>Stunning hero sections with motion graphics</li>
</ul>
👉 Perfect for: 
✔ Designers 
✔ Agencies 
✔ Bloggers 
✔ Developers 
✔ WooCommerce and marketing pages 
✔ Anyone who wants better animations than the default Elementor widgets
🔥 Key Highlights
<ul>
<li>Built for performance (no unnecessary scripts)</li>
<li>Modern UI and clean markup</li>
<li>Works with Elementor Free & Pro</li>
<li>Responsive and SEO friendly</li>
<li>Growing widget library</li>
</ul>
🚀 What You Can Build With Elematic
<ul>
<li>Animated headings and scroll-text reveals</li>
<li>Filterable portfolio galleries with lightbox</li>
<li>Advanced post grids with Load More AJAX pagination</li>
<li>Circular/linear progress bars and skill sections</li>
<li>Marquee text, image sliders, and auto-scroll sections</li>
<li>Data charts for analytics dashboards</li>
<li>Hero banners with rotating text or image strips</li>
<li>Feature hotspots and interactive UI sections</li>
</ul>
Every widget includes granular styling controls for typography, spacing, hover effects, responsive behavior, and color management.
<h3>Included Widgets</h3>
<ul>
<li>
Accordion. Clean collapsible FAQ sections with icons and smooth animation.
</li>
<li>
Animated Heading. Dynamic title animations (typed, sliding, or looping) to highlight key headlines.
</li>
<li>
Animated Shape. Modern motion shapes and blobs to add subtle, looping background animation to sections and hero areas.
</li>
<li>
Banner. Create modern hero banners with image, title, subtitle, and CTA buttons with animations, perfect for landing pages and marketing sections.
</li>
<li>
Button. Customizable button with icons, hover effects, and full control over typography, spacing, and borders.
</li>
<li>
Chart. 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>
Circle Info. Interactive circular feature widget with auto/manual rotation and clickable icons revealing detailed content in the center.
</li>
<li>
Circle Progress Bar. Animated circular progress indicator with percentage display and full styling control for dashboards, skills, and achievement counters.
</li>
<li>
Circle Text (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>
Contact Form 7. Style Contact Form 7 forms inside Elementor with custom spacing, colors, and typography without touching CSS.
</li>
<li>
Countdown. Create animated countdown timers for launches, sales, or events with full control over layout, labels, and expiry actions.
</li>
<li>
Counter. Animate numbers from any start/end value with icons, prefixes, and suffixes to highlight key stats or milestones.
</li>
<li>
Dual Button. Create side-by-side CTA buttons with separate links and icons, featuring 50 built-in gradient presets for instant modern styling.
</li>
<li>
Features. 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>
Flip Box. 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>
Gallery. Responsive, filterable image gallery with hover effects, spacing control, and built-in lightbox/popup modal for clean portfolio and showcase layouts.
</li>
<li>
Grid. 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>
Highlight Text (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>
Hotspot. Lets you add clickable markers over images with tooltips or popups, perfect for product highlights, maps, and interactive storytelling.
</li>
<li>
Icon Box. 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>
Image Animate. Adds smooth left-right and up-down reveal animations to your images for simple, lightweight scroll-based motion effects.
</li>
<li>
Image Box. Displays an image with title, description, and optional button in multiple layouts, ideal for feature/service cards and promo blocks.
</li>
<li>
Image Comparison. 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>
Image Hover. Add 30+ modern hover effects to images with title, description, and overlay controls for eye-catching rollovers.
</li>
<li>
Image Mask. Clip images into 80+ ready-made artistic shapes (ink, blobs, badges, etc.) for instant Webflow-style image frames.
</li>
<li>
Image Scrolling. Create smooth horizontal or vertical image scrolling effects for product shots, long screenshots, or parallax-style image reveals.
</li>
<li>
Image Slide (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>
Info Link. Create an interactive tab-style content switcher with icons where text changes dynamically on click for cleaner layouts and better UX.
</li>
<li>
Lottie. Add lightweight JSON animations with full playback controls, autoplay, loop, speed adjustment, and scroll-based animation support.
</li>
<li>
Marquee (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>
Post Alter. Display blog posts in an alternating left-right layout with featured images, meta info, excerpt. Perfect for storytelling-style blog layouts.
</li>
<li>
Post Grid. Display posts in a customizable grid with category filters, numbered pagination and AJAX “Load More” button without page reload.
</li>
<li>
Progress Bar. Show elegant vertical or horizontal progress indicators for skills, stats, or milestones with full color and animation controls.
</li>
<li>
Service List (Webflow + Framer style). Display modern, animated service rows with icons, descriptions, title, subtle and hover image inspired by Webflow and Framer layouts.
</li>
<li>
Table. Create responsive, styled data tables with headings, rows, and typography controls for pricing, feature comparison, or structured content layouts.
</li>
<li>
Timeline. Visual timeline with custom or dynamic posts, alternating layouts, dates, images, and smooth milestone animations.
</li>
</ul>
More widgets will be added in future releases.
⭐ Who Is Elematic For?
<ul>
<li>You want Elementor widgets that look modern and premium</li>
<li>You like Webflow / Framer-style animations</li>
<li>You need creative UI components Elementor doesn’t provide by default</li>
<li>You want a plugin that won’t slow down your website</li>
</ul>
🔥 Why Users Love Elematic
<ul>
<li>Fluid Webflow-style animations without heavy scripts</li>
<li>Framer-style motion elements for creative websites</li>
<li>30+ essential and premium-quality Elementor widgets</li>
<li>Clean CSS output, no bloat</li>
<li>Works with Elementor Free + Pro</li>
<li>Fully responsive, fast, and SEO-friendly</li>
</ul>
Build interactive content sections, product highlights, service grids, scroll animations, image masking, galleries, before/after sliders, counters, progress indicators, and more — all inside Elementor.
🧩 Growing Library
Elematic continues to evolve. New widgets, presets, effects, and layout packs are released frequently based on community feedback.
<h3>Features</h3>
<ul>
<li>Works with Elementor Free and Pro </li>
<li>Minimal script loading — only loads assets for active widgets </li>
<li>Fully translation ready </li>
<li>Compatible with caching and optimization plugins</li>
<li>Optimized for Google PageSpeed and Lighthouse scores (performance, accessibility, SEO)</li>
</ul>
Fully compatible with Elementor Hello theme and popular themes like Astra, GeneratePress, OceanWP, Phlox, and Blocksy.
<h3>Translation</h3>
This plugin is translation-ready and includes a .pot file.
<h3>Support</h3>
For support questions, please use the WordPress.org support forum. This helps other users find solutions.
If you find a bug or have a feature request, open an issue here: 
https://github.com/xy440/elematic-addons-for-elementor/issues
We actively review requests and publish updates based on real user feedback.
<h3>Credits</h3>
Developed by <a href="https://github.com/xy440" rel="nofollow ugc">Anwar Hossain</a>

Elematic — Addons for Elementor

Modern Elementor addons with Webflow-style animations, AJAX Post Grid, marquee text, circle text, masking, and 30+ creative widgets.

Envision Blocks – Unique Elementor Widgets & Addons. vs Elematic — Addons for Elementor