itsmanzur

Sekkei is the all-in-one workflow tool designed specifically for Elementor page builders. It integrates directly into the Elementor editor as a sliding side panel, or works as a standalone tool from your WordPress dashboard.
Stop switching between apps and browser tabs – plan, design, and organize everything in one place, right next to your Elementor canvas.
<h4>Key Features</h4>
Section Planner – Plan your page structure before building. Add sections with names, types, CSS classes, notes, dependencies, and health warnings. Sync Elementor containers into the planner, rename linked sections safely, and export a clean page outline for client approval.
Design Checklist – Never miss a step. 30+ checklist items across 5 categories: Before Design, Structure, Design, Mobile, and Handover. Add custom items and groups. Track progress with a live progress bar.
Color Palette – Save and organize your brand colors. Group colors by palette (Brand, Dark Mode, etc.). Click any swatch to copy the hex code. Assign roles like Primary, Accent, Background.
Font Pairing – 10 curated font pairings (including Bengali fonts). Filter by style: editorial, modern, minimal, bold. Copy CSS and Google Fonts links. Save custom pairings.
CSS Generator – Generate Elementor-ready custom CSS snippets. 6 presets (Section, Container, Typography, Button, Card, Responsive). Auto-fill from your Section Planner. Save and reuse snippets.
Project Notes – Client feedback, revision history, TODOs all in one place. Quick insert tags for common patterns. Date stamps and structured formatting.
Pre-Publish Audit – Scan your Elementor page for common issues before publishing. Detect placeholder text, broken links, missing image alt tags, and layout hierarchy issues. Locate elements with a single click.
Export – Export your entire project as formatted text or JSON. Download .txt for client handover. JSON backup/import for portability.
Multiple Projects – Manage separate projects with independent data. Switch between projects instantly.
<h4>How It Works</h4>
<ol>
<li>
In Elementor Editor: A floating “Sekkei” button appears. Click it to open the tool as a sliding side panel. Use keyboard shortcut <code>Ctrl+Shift+P</code> for quick access.
</li>
<li>
In WordPress Admin: Navigate to Sekkei Open Tool for a full-screen experience.
</li>
<li>
Data Storage: All data is saved in your browser’s localStorage no server requests, no database load, instant performance.
</li>
</ol>
<h4>100% Free & Unlocked</h4>
Sekkei is 100% free and open-source. Every feature is included with no paywalls, subscriptions, or license keys:
<ul>
<li>Section Planner: Add unlimited sections and use all pre-made workflow templates.</li>
<li>Design Checklist: Add unlimited custom checklist items and custom item groups.</li>
<li>Color Palette: Build and save multiple custom color palettes with roles.</li>
<li>Font Pairing: Access all 10 curated pairs (including Bengali fonts) and customize pairings.</li>
<li>CSS Generator: Generate, edit, and save Elementor-ready custom CSS snippets from all 6 presets.</li>
<li>Multiple Projects: Create, name, and switch between separate design projects.</li>
<li>JSON Export: Export and import your full workflow data in JSON format for backup or migration.</li>
</ul>
<h3>Third-Party Libraries</h3>
Sekkei uses the following third-party libraries, included in the plugin package:
<h4>Tabler Icons</h4>
<ul>
<li>Version: Latest stable</li>
<li>License: MIT License</li>
<li>License URI: https://opensource.org/licenses/MIT</li>
<li>Source: https://tabler.io/icons</li>
<li>Location: assets/vendor/tabler-icons/</li>
<li>Purpose: Icon set used inside the standalone tool interface (assets/tool/index.html)</li>
</ul>
<h4>Syne (Font)</h4>
<ul>
<li>Version: Latest stable</li>
<li>License: SIL Open Font License 1.1</li>
<li>License URI: https://scripts.sil.org/OFL</li>
<li>Source: https://fonts.google.com/specimen/Syne</li>
<li>Location: assets/vendor/fonts/syne-700.woff2</li>
<li>Purpose: Display/heading font in the standalone tool interface</li>
</ul>
<h4>DM Sans (Font)</h4>
<ul>
<li>Version: Latest stable</li>
<li>License: SIL Open Font License 1.1</li>
<li>License URI: https://scripts.sil.org/OFL</li>
<li>Source: https://fonts.google.com/specimen/DM+Sans</li>
<li>Location: assets/vendor/fonts/dm-sans-400.woff2, dm-sans-500.woff2</li>
<li>Purpose: UI body font in the standalone tool interface</li>
</ul>
<h4>DM Mono (Font)</h4>
<ul>
<li>Version: Latest stable</li>
<li>License: SIL Open Font License 1.1</li>
<li>License URI: https://scripts.sil.org/OFL</li>
<li>Source: https://fonts.google.com/specimen/DM+Mono</li>
<li>Location: assets/vendor/fonts/dm-mono-400.woff2</li>
<li>Purpose: Monospace font for CSS code output in the standalone tool interface</li>
</ul>

Sekkei – Section Planner & Workflow Toolkit for Elementor

Elementor workflow toolkit - plan sections, run a design checklist, save color palettes & font pairs, and generate CSS, right beside your canvas.

mosaiclifecreative

Doohickey’s Dev Tools puts a full suite of developer utilities right inside your WordPress admin. No more juggling browser tabs and bookmarking random websites — everything you need is one click away.
<h4>Free Tools</h4>
CSS Tools 
* Gradient Generator — Linear and radial gradients with unlimited color stops 
* Box Shadow Generator — Visual box-shadow builder with layered shadows 
* Border Generator — Shorthand and per-side border controls 
* Border Radius Generator — Per-corner radius with visual preview 
* Clip-Path Maker — Polygon, circle, ellipse, and inset clip paths 
* Flexbox Generator — Visual flexbox playground with container controls 
* CSS Grid Generator — Set columns, rows, gaps, and alignment visually
Color Tools 
* Color Picker — HSV color picker with HEX, RGB, and HSL output 
* Contrast Checker — WCAG 2.1 AA/AAA compliance testing 
* Color Converter — Convert between HEX, RGB, HSL, and CMYK
Code Tools 
* String Utilities — Case conversion, reverse, slug, character/word count 
* Encoder / Decoder — Base64, URL encoding, HTML entities, and more
Generators 
* Placeholder Image — Custom-sized placeholder images for mockups 
* Lorem Ipsum — Paragraphs, sentences, or words of filler text 
* QR Code Generator — Instant QR codes from any text or URL
SEO & Meta 
* Schema.org Generator — Structured data for Article, Local Business, and FAQ 
* Meta Tag Generator — SEO meta tags, Open Graph, and Twitter Cards
Converters 
* SVG to PNG — Client-side SVG conversion with scale options 
* HTML to Markdown — Convert HTML markup to clean Markdown 
* Markdown Preview — Live Markdown editor with rendered preview 
* Aspect Ratio Calculator — Calculate ratios from dimensions, scale with locked ratios, common size presets
<h4>Pro Version</h4>
Upgrade to Doohickey’s Dev Tools Pro for additional tools and features:
<ul>
<li>Palette Generator — Interactive color wheel with 7 harmony modes. Export as CSS or SCSS variables.</li>
<li>Code Formatter — Auto-format JSON, HTML, CSS, JavaScript, and SQL</li>
<li>Diff Checker — Side-by-side text comparison with highlighted differences</li>
<li>HTML Table Generator — Visual table builder with CSV import</li>
<li>Test Data Generator — Generate realistic fake data (names, emails, addresses, etc.)</li>
<li>Flexbox — Per-item controls (flex-grow, flex-shrink, flex-basis, align-self, order)</li>
<li>CSS Grid — Templates (Holy Grail, Dashboard, 12-Col, etc.), custom definitions, per-cell spans</li>
<li>Placeholder Image — Social media presets and Data URI export</li>
<li>Schema.org — 5 additional types (Product, Person, Organization, Event, Recipe)</li>
<li>QR Code — Custom logo overlay</li>
</ul>
<h4>Why Doohickey’s Dev Tools?</h4>
<ul>
<li>Zero external dependencies — Everything runs client-side in your browser</li>
<li>No data leaves your site — Your code and content stay private</li>
<li>Copy-ready output — One-click copy for all generated CSS, HTML, and code</li>
<li>Consistent interface — Every tool follows the same clean, intuitive layout</li>
<li>Lightweight — Single JavaScript bundle, loads only on the tools page</li>
</ul>
<h3>Source Code & Build Instructions</h3>
The full source code for this plugin, including uncompiled JavaScript and CSS, is available at: 
https://github.com/mosaiclifecreative/doohickeys-dev-tools
To build from source:
<ol>
<li>Clone the repository</li>
<li>Run <code>npm install</code> to install dependencies</li>
<li>Run <code>npm run build</code> to compile the production bundle</li>
<li>The compiled files are output to the <code>build/</code> directory</li>
</ol>
The project uses <code>@wordpress/scripts</code> for building. Source files are in <code>admin/js/</code> (JSX) and <code>admin/css/</code> (CSS).

Doohickey's Dev Tools

Essential web development utilities right in your WordPress dashboard — CSS generators, color tools, code formatters, and more.

Sekkei – Section Planner & Workflow Toolkit for Elementor vs Doohickey's Dev Tools