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:

1. 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

2. 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

3. 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.