MTElements for PolyCMS - Advanced Landing Page Elements Module

342.85 ms
$19
Verified Coupons & Special Deals Save up to 20%
1 deals
2 sold 1 downloads 271 views
SKU mtelements_polycms
Category
1 DOWNLOADS
·
0 ACTIVE DEVICES
mtelements v1.2.0 Jul 22, 2026
TODAY 0/0
7 DAYS 0/0
30 DAYS 0/0
Download & Activity Trend (14 Days)
Description Updates & Roadmap FAQ's Non-profit Support Ratings Comments

MTElements is an extensible component suite for PolyCMS Landing Page Builder, providing high-converting interactive blocks including animated hero headlines, lucky spin wheels, before/after image sliders, and smart search inputs designed to maximize your marketing conversion rates.

Modular Element Control Architecture

Enable or disable individual landing page components independently from PolyCMS Admin Settings. Fully responsive designs engineered for fast page loading speed and seamless brand customization.

<!-- Floating Connection Labels HTML Overlay -->
<div class="mtx-labels-layer absolute inset-0 w-full h-full pointer-events-none z-10"></div>

                
    <div class="absolute mtx-media-item" data-item-index="0" style="width: 18%; height: auto; z-index: 70; top: 0px; bottom: auto; left: 9.4%; right: auto; transform: rotate(-2deg)">
        <!-- Floating Badge Indicator -->
                        <div class="absolute -top-3 left-1/2 -translate-x-1/2 z-30 pointer-events-none whitespace-nowrap px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-900/80 text-white backdrop-blur border border-white/20 shadow-md flex items-center gap-1.5 animate-pulse">
                <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
                <span>1. UI/UX Wireframe &amp; Design Tokens</span>
            </div>
        
        <div class="w-full h-auto ">
                                <div class="w-full h-auto block rounded-xl shadow-xl transition-transform duration-300 hover:scale-105 overflow-hidden border border-white/10">
                                                                        <img src="https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?auto=format&amp;fit=crop&amp;w=500&amp;q=80" alt="Showcase Media" class="w-full h-auto block rounded-xl" loading="lazy" decoding="async" class="polycms-lazy-img" onload="this.classList.add('polycms-loaded')">
                                        </div>
                        </div>
    </div>
                
    <div class="absolute mtx-media-item" data-item-index="1" style="width: 18%; height: auto; z-index: 60; top: 24px; bottom: auto; left: 41.6%; right: auto; transform: rotate(1deg)">
        <!-- Floating Badge Indicator -->
                        <div class="absolute -top-3 left-1/2 -translate-x-1/2 z-30 pointer-events-none whitespace-nowrap px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-900/80 text-white backdrop-blur border border-white/20 shadow-md flex items-center gap-1.5 animate-pulse">
                <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
                <span>2. PolyCMS Core &amp; Custom Fields</span>
            </div>
        
        <div class="w-full h-auto ">
                                <div class="w-full h-auto block rounded-xl shadow-xl transition-transform duration-300 hover:scale-105 overflow-hidden border border-white/10">
                                                                        <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&amp;fit=crop&amp;w=500&amp;q=80" alt="Showcase Media" class="w-full h-auto block rounded-xl" loading="lazy" decoding="async" class="polycms-lazy-img" onload="this.classList.add('polycms-loaded')">
                                        </div>
                        </div>
    </div>
                
    <div class="absolute mtx-media-item" data-item-index="2" style="width: 18%; height: auto; z-index: 50; top: 102px; bottom: auto; left: 75.4%; right: auto; transform: rotate(-1deg)">
        <!-- Floating Badge Indicator -->
                        <div class="absolute -top-3 left-1/2 -translate-x-1/2 z-30 pointer-events-none whitespace-nowrap px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-900/80 text-white backdrop-blur border border-white/20 shadow-md flex items-center gap-1.5 animate-pulse">
                <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
                <span>3. Responsive Frontend &amp; Animation</span>
            </div>
        
        <div class="w-full h-auto ">
                                <div class="w-full h-auto block rounded-xl shadow-xl transition-transform duration-300 hover:scale-105 overflow-hidden border border-white/10">
                                                                        <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&amp;fit=crop&amp;w=500&amp;q=80" alt="Showcase Media" class="w-full h-auto block rounded-xl" loading="lazy" decoding="async" class="polycms-lazy-img" onload="this.classList.add('polycms-loaded')">
                                        </div>
                        </div>
    </div>
                
    <div class="absolute mtx-media-item" data-item-index="3" style="width: 18%; height: auto; z-index: 40; top: 415px; bottom: auto; left: 76.7%; right: auto; transform: rotate(2deg)">
        <!-- Floating Badge Indicator -->
                        <div class="absolute -top-3 left-1/2 -translate-x-1/2 z-30 pointer-events-none whitespace-nowrap px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-900/80 text-white backdrop-blur border border-white/20 shadow-md flex items-center gap-1.5 animate-pulse">
                <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
                <span>4. Speed 100/100 &amp; Redis Caching</span>
            </div>
        
        <div class="w-full h-auto ">
                                <div class="w-full h-auto block rounded-xl shadow-xl transition-transform duration-300 hover:scale-105 overflow-hidden border border-white/10">
                                                                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&amp;fit=crop&amp;w=500&amp;q=80" alt="Showcase Media" class="w-full h-auto block rounded-xl" loading="lazy" decoding="async" class="polycms-lazy-img" onload="this.classList.add('polycms-loaded')">
                                        </div>
                        </div>
    </div>
                
    <div class="absolute mtx-media-item" data-item-index="4" style="width: 18%; height: auto; z-index: 30; top: 523px; bottom: auto; left: 39.6%; right: auto; transform: rotate(-1deg)">
        <!-- Floating Badge Indicator -->
                        <div class="absolute -top-3 left-1/2 -translate-x-1/2 z-30 pointer-events-none whitespace-nowrap px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-900/80 text-white backdrop-blur border border-white/20 shadow-md flex items-center gap-1.5 animate-pulse">
                <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
                <span>5. SEO Schema &amp; Search Indexing</span>
            </div>
        
        <div class="w-full h-auto ">
                                <div class="w-full h-auto block rounded-xl shadow-xl transition-transform duration-300 hover:scale-105 overflow-hidden border border-white/10">
                                                                        <img src="https://images.unsplash.com/photo-1432888498266-38ffec3eaf0a?auto=format&amp;fit=crop&amp;w=500&amp;q=80" alt="Showcase Media" class="w-full h-auto block rounded-xl" loading="lazy" decoding="async" class="polycms-lazy-img" onload="this.classList.add('polycms-loaded')">
                                        </div>
                        </div>
    </div>
                
    <div class="absolute mtx-media-item" data-item-index="5" style="width: 18%; height: auto; z-index: 20; top: 365px; bottom: auto; left: 6%; right: auto; transform: rotate(1deg)">
        <!-- Floating Badge Indicator -->
                        <div class="absolute -top-3 left-1/2 -translate-x-1/2 z-30 pointer-events-none whitespace-nowrap px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-900/80 text-white backdrop-blur border border-white/20 shadow-md flex items-center gap-1.5 animate-pulse">
                <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
                <span>6. Production SSL &amp; Live Launch</span>
            </div>
        
        <div class="w-full h-auto ">
                                <div class="w-full h-auto block rounded-xl shadow-xl transition-transform duration-300 hover:scale-105 overflow-hidden border border-white/10">
                                                                        <img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?auto=format&amp;fit=crop&amp;w=500&amp;q=80" alt="Showcase Media" class="w-full h-auto block rounded-xl" loading="lazy" decoding="async" class="polycms-lazy-img" onload="this.classList.add('polycms-loaded')">
                                        </div>
                        </div>
    </div>
                
    <div class="absolute mtx-media-item" data-item-index="6" style="width: 50%; height: auto; z-index: 10; top: 186px; bottom: auto; left: 25%; right: auto">
        <!-- Floating Badge Indicator -->
        
        <div class="w-full h-auto ">
                                <div class="w-full h-auto text-slate-800 dark:text-slate-100" style="font-size: 1.25rem; color: #ffffff;">
                    <div class="text-center select-none"><span class="px-3.5 py-1 rounded-full text-[11px] font-extrabold bg-slate-900/90 text-emerald-400 border border-emerald-500/30 mb-2 inline-block shadow-lg">● Bespoke Website Engineering</span><h2 class="text-2xl md:text-4xl font-black text-white leading-tight tracking-tight drop-shadow-md">Bespoke Website Engineering<br/><span class="italic text-emerald-400 font-serif">High Speed · SEO First · Production Ready</span></h2><p class="text-xs text-slate-300 mt-1 max-w-md mx-auto">Complete website engineering workflow from Figma wireframes to 100/100 speed score launch</p></div>
                </div>
                        </div>
    </div>
</div>
<style> @keyframes mtxDashFlow { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } } .mtx-animated-line { animation: mtxDashFlow 1.2s linear infinite; } /* GPU Hardware Acceleration for Smooth 60fps Video & Embed Animations */ #group-media-6a7e036e892e8 .mtx-media-item, #group-media-6a7e036e892e8 .poly-anim-float-y, #group-media-6a7e036e892e8 .poly-anim-float-x { will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } #group-media-6a7e036e892e8 iframe, #group-media-6a7e036e892e8 video, #group-media-6a7e036e892e8 embed, #group-media-6a7e036e892e8 object { will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } @keyframes polyAnimFloatY { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } } @keyframes polyAnimFloatX { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(8px, 0, 0); } } </style> <script> (function() { function renderMTxFlowConnections() { const container = document.getElementById("group-media-6a7e036e892e8"); if (!container) return; const svgGroup = container.querySelector('.mtx-paths-group'); const labelsLayer = container.querySelector('.mtx-labels-layer'); if (!svgGroup || !labelsLayer) return; const rawConnections = container.getAttribute('data-connections'); if (!rawConnections) return; let connections = []; try { connections = JSON.parse(rawConnections); } catch (e) { return; } svgGroup.innerHTML = ''; labelsLayer.innerHTML = ''; if (!Array.isArray(connections) || connections.length === 0) return; const containerRect = container.getBoundingClientRect(); const items = container.querySelectorAll('.mtx-media-item'); connections.forEach(function(conn) { const fromIdx = parseInt(conn.from); const toIdx = parseInt(conn.to); const elFrom = items[fromIdx]; const elTo = items[toIdx]; if (!elFrom || !elTo) return; const rectFrom = elFrom.getBoundingClientRect(); const rectTo = elTo.getBoundingClientRect(); // Calculate center points relative to container const x1 = (rectFrom.left + rectFrom.width / 2) - containerRect.left; const y1 = (rectFrom.top + rectFrom.height / 2) - containerRect.top; const x2 = (rectTo.left + rectTo.width / 2) - containerRect.left; const y2 = (rectTo.top + rectTo.height / 2) - containerRect.top; const dx = x2 - x1; const dy = y2 - y1; // Bezier control points for smooth MTxFlow curves const cx1 = x1 + dx * 0.5; const cy1 = y1; const cx2 = x1 + dx * 0.5; const cy2 = y2; const pathData = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`; const color = conn.color || 'rgba(148, 163, 184, 0.45)'; const strokeWidth = conn.width || 2; const dashStyle = conn.dash || 'solid'; const isAnimated = conn.animated !== false; // Create SVG path element const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttribute('d', pathData); path.setAttribute('stroke', color); path.setAttribute('stroke-width', strokeWidth); path.setAttribute('fill', 'none'); path.setAttribute('stroke-linecap', 'round'); if (dashStyle === 'dashed' || isAnimated) { path.setAttribute('stroke-dasharray', '6 6'); } else if (dashStyle === 'dotted') { path.setAttribute('stroke-dasharray', '2 4'); } if (isAnimated) { path.classList.add('mtx-animated-line'); } svgGroup.appendChild(path); // Optional line badge label if (conn.label) { // Calculate midpoint along curve (cubic bezier midpoint at t=0.5) const mx = 0.125 * x1 + 0.375 * cx1 + 0.375 * cx2 + 0.125 * x2; const my = 0.125 * y1 + 0.375 * cy1 + 0.375 * cy2 + 0.125 * y2; const labelEl = document.createElement('div'); labelEl.className = 'mtx-flow-label absolute -translate-x-1/2 -translate-y-1/2 px-2.5 py-1 rounded-full text-[10px] font-bold bg-slate-950/80 text-slate-200 border border-slate-700/60 shadow-lg backdrop-blur flex items-center gap-1.5'; labelEl.style.left = mx + 'px'; labelEl.style.top = my + 'px'; labelEl.innerHTML = `${conn.label}`; labelsLayer.appendChild(labelEl); } }); } function autoAdjustHeight() { const container = document.getElementById("group-media-6a7e036e892e8"); if (!container) return; const items = container.querySelectorAll('.mtx-media-item'); let maxBottom = 0; items.forEach(function(el) { const bottom = el.offsetTop + el.offsetHeight; if (bottom > maxBottom) { maxBottom = bottom; } }); if (maxBottom > 0) { const currentMin = parseInt(container.style.minHeight) || 0; if (maxBottom + 50 > currentMin) { container.style.minHeight = (maxBottom + 60) + 'px'; } } } function init() { autoAdjustHeight(); renderMTxFlowConnections(); const handleResize = function() { autoAdjustHeight(); renderMTxFlowConnections(); }; window.addEventListener('resize', handleResize); // Bind image load events to auto-adjust height when images render const container = document.getElementById("group-media-6a7e036e892e8"); if (container) { container.querySelectorAll('img').forEach(function(img) { if (!img.complete) { img.addEventListener('load', handleResize); } }); } if (window.mtx && window.mtx.Diagram) { document.querySelectorAll('.mtx-diagram-instance:not([data-initialized])').forEach(function(el) { el.setAttribute('data-initialized', 'true'); try { const rawData = el.getAttribute('data-diagram'); const data = JSON.parse(rawData); new window.mtx.Diagram({ target: el, data: data, readonly: true }); } catch (e) { console.error("Failed to render MTxFlow Diagram:", e); } }); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } setTimeout(init, 200); setTimeout(init, 600); setTimeout(init, 1200); })(); </script>

Available Interactive Elements

The module ships with animated hero headlines featuring typewriter effects, smart search inputs with auto-suggest keywords, floating media groups powered by CSS keyframe animations, OAuth sign-in buttons embedded directly into CTA sections, interactive before/after image comparison sliders, and gamification lucky spin wheels with brand-customizable prize items. See the full element configuration and attribute guide for detailed setup parameters, customization options, and real-world integration examples.

What We're Working On

Interactive Pricing Table block renderer (interactive_pricing_table) (Jul 22, 2026) In Progress

Multi-tier plan comparison tables with monthly and annual billing toggle switches.

Jul 22, 2026
Calculating...

Recent Releases

v1.2.0 — v1.2.0 - Parallax Visual Scene (22/07/2026)
Added Parallax Visual Scene block with multi-layer depth-mapped scrolling, responsive settings grid layout update to 4-column cards, and theme-aware design tokens.
v1.0.0 — Version 1.0.0 - Core Element Suite Launch (21/07/2026)
First release featuring 4 core landing page elements with independent admin toggle controls.
v1.1.0 — v1.1.0 - Interactive Blocks Expansion (20/07/2026)
Added Before/After Image Comparison Slider, Lucky Spin Wheel Gamification, Virtual Cursor Animation Engine, Per-Phrase Typing Colors, Reserve Max Space Anti-Layout Shift, and Admin Guideline Help Modal.

Looking for full roadmap, documentation, or interactive release logs?

Explore Our Project Portal
Why are some modules, plugins, or products not available for direct purchase on the site?

For products sold outside the site - for example, polyxgo on Envato (CodeCanyon.net) - we are the exclusive authors under Envato’s platform. These products can only be sold and supported on Envato. Therefore, you cannot purchase them elsewhere if you wish to receive our official support and updates.

My Envato support period has expired. Can I still receive assistance?

Even if your support period has ended, we will still answer your current technical questions related to the module. However, for any requests that involve bug fixing, troubleshooting, integration, or hands-on assistance, you will need to renew your support first. We hope you understand this requirement. More details: https://help.market.envato.com/hc/en-us/articles/208191263-What-is-Item-Support

Can I get support if I only need to integrate some features from a module or plugin?

Yes. We handle feature integration based on customer requirements and descriptions. If a module has the features you need, you can send a separate request to polyxgo@gmail.com

How do I download and install the product?

You can download the product through the purchase receipt or your account dashboard right after you log in at https://headrandom.com/account/login. Installation steps are included in the documentation folder.

For products on Envato (Codecanyon) access the Download section after you log in.

Do you provide installation or setup support?

Yes, we provide basic installation and setup support for all purchased products.

Can I use the product on multiple sites?

Usage depends on the license type. Standard licenses typically allow one installation per purchase.

How do I receive updates after purchase?

Updates are delivered through your account dashboard or marketplace where you purchased the product.

What should I do if I encounter an error or conflict?

Please send us details, screenshots, and steps to reproduce the issue so our support team can assist you. You can create tickets on the system or email polyxgo@gmail.com.

How long does technical support last after purchase?

Support duration follows the policy of the marketplace or package you purchased, typically 6–12 months.

Do you provide documentation or a user guide?

Yes, all products include documentation to help you install and use the features. The data is connected to the system for each corresponding product project, and the documentation always provides the latest feature information and instructions from the project.

Can I request customization or additional features?

Yes, we offer custom development based on your requirements. For products sold exclusively and features already available on products listed on Envato, we integrate the additional features and update them through Envato. Only completely different features that require separate handling based on specific business workflows will be processed as a standalone service according to your detailed requirements.

Is there a demo site available for testing?

Yes, we provide a live demo so you can test features before purchasing.

How do I renew support after it expires?

You can renew support through your marketplace account or by contacting us directly.

Non-profit organizations, charities, and community initiatives supporting elderly people, children, people with disabilities, and other vulnerable groups are always welcome to reach out to us.

If your organization uses Perfex CRM and requires any of our modules, plugins, or related products, we will gladly provide assistance with installation, customization, training, and long-term operation.

As part of our commitment to supporting meaningful social impact projects, we offer lifetime free support for all products used by eligible non-profit organizations. Our goal is to help you streamline operations, reduce technology costs, and focus more resources on serving your community.

For inquiries and support, please contact us at polyxgo@gmail.com. We will do our best to assist your organization as quickly as possible.

Average Rating

0.0

Based on 0 ratings

Ratings Source Breakdown

Local Website 0.0 ★ (0 reviews)
Merged Total 0.0 ★ (0 ratings)

Loading reviews...

Sign in to your account

Please log in to leave a comment or review.

Or continue with social account
Google GitHub

Related Products

Explore more items in the same category