Have something to say?

Tell us how we could make the product more useful to you.

On Roadmap πŸ‘

Allow Custom HTML IDs (Stable Selectors) for Sections/Rows/Elements in GemPages v7

Please add the ability to set a custom, human-readable HTML ID for any Section/Row/Element (e.g., #cds-contact-form). Right now GemPages auto-generates internal IDs/classes, which makes it hard to create reliable anchor links, custom CSS/JS, and tracking. A built-in β€œCustom ID” field would be a huge workflow + UX win. Use case example: I want my contact section to have a stable ID like: #cds-contact-form So I can: Link from buttons/menus: /pages/contact-us#cds-contact-form Create β€œScroll to contact form” CTAs reliably Target the section with CSS/JS without depending on auto-generated selectors that are hard to maintain Current problem: GemPages assigns internal auto-generated selectors (e.g., .i2le03ff99d82) which are not human-readable. These selectors can become painful when: duplicating blocks/pages rebuilding sections collaborating with teammates maintaining custom CSS/JS over time We often end up using custom code or third-party apps just to achieve stable anchors and reliable targeting. Requested feature: Add an β€œHTML ID” field (and ideally also a β€œCustom selector” helper) in Advanced settings for: Section Row Column Element Requirements / behaviour: Custom ID field User can set an ID like: cds-contact-form GemPages outputs it as: id="cds-contact-form" Provide validation + auto-sanitization (lowercase, hyphens, remove invalid characters) Warn if duplicate ID exists on the same page Easy usage in the editor Show the custom ID in Layers panel (next to the element name) One-click β€œCopy selector” (copies #cds-contact-form) Optional: search/filter layers by ID Anchor link & UX improvements Support smooth scrolling (optional toggle) Allow interactions β€œScroll to element” to target custom IDs easily Improves accessibility (clear skip links / deep linking) Why this is valuable (UX + SEO + maintenance): Better UX: deep links and clear navigation paths inside long landing pages (FAQ, specs, contact form). Better maintainability: stable selectors for custom CSS/JS and analytics events. Less reliance on custom apps/code for basic site structure features. Aligns GemPages with common website-builder/editor capabilities. Note (clarity): CSS Class (.class) is great for styling groups. HTML ID (#id) is essential for anchors and unique targeting. Both are useful β€” but the missing piece is a dedicated, stable β€œCustom ID” feature.

Dima Chernyshov 3 months ago

2

πŸ’‘ Feature Requests