Front End Edit Instructions

Edit page text, tables, and documents right on the live site — no dashboard required.

Front end editing lets logged-in editors change certain page content directly on the live site — no need to open wp-admin. Look for a small pencil (✎) button near anything editable. Depending on the site's settings, that button either appears only when you hover over the content, or is always visible.

What can be edited from the front end

  • Content Snippets
    Short pieces of text — a headline, a paragraph, a callout — marked as editable directly on the page they appear on. Click the pencil, edit the text in a small popup, and save. The page updates immediately, with no navigation and no page reload.
  • Tables
    Data tables built with the Table Importer and Editor tool. Clicking the pencil ("Edit Table") takes you to that tool with the table already loaded, ready to edit in the Manage Table screen.
  • Custom Documents
    Rich-text documents built with the Custom Document Builder tool. Clicking the pencil ("Edit Document") takes you to that tool with the document already loaded, ready to edit in the Manage Document screen.

Hover or always visible?

Whether these pencil buttons show only when you hover over the content, or are always visible on the page, is controlled by a single sitewide setting — "Frontend Edit Button Visibility" — under the SQSA->Theme Options menu in wp-admin. It applies the same way to snippets, tables, and documents.

Editing a content snippet

  • Click the pencil button near the text.
  • A small popup opens with the current text in a plain text box.
  • Make your changes and click Save.
  • The popup closes and the page updates right away — no reload needed.
  • Click Cancel, or press Escape, to close the popup without saving.

Editing a table or document

  • Click the pencil button ("Edit Table" or "Edit Document") near the item.
  • You're taken to the matching builder tool, with that table or document already loaded in the Manage Table / Manage Document screen.
  • Make your changes there and save — see that tool's own instructions for details.
  • Tables and documents can also be deleted from that same screen (moved to Trash, recoverable from wp-admin).

Who can see edit buttons

Only logged-in users with Editor-level access or above ever see pencil buttons or editable-content styling. Regular site visitors — and anyone not logged in — see only the finished content, exactly as if none of this existed.
 

Important notes

  • Snippet edits save instantly, in place, on the page you're viewing.
  • Table and document edits happen on their respective builder pages, not in the popup — saving there updates every page that displays that table or document.
  • Changes are live as soon as they're saved. There is no separate "preview" step.
Click to learn how to add an editable section to a page

This section is for whoever builds or edits pages in Divi — it explains how to mark a piece of content as an editable Content Snippet. Tables and Documents are placed differently; see "How tables are placed on pages" and "How documents are placed on pages" in the Table Importer and Custom Document Builder instructions for those.

Making text editable

No shortcode and no plugin setup is needed. Inside a Divi Text or Code module, just add class="sqsa-snippet" to the element you want editors to be able to change:

<p class="sqsa-snippet">Text to edit here</p>

That's the entire setup. No extra attributes, IDs, or shortcodes are required — the class alone is enough.

  • Which tags work
    Any block-level element works — <p>, <h2>/<h3>, <div>, and similar. Put the class directly on the element that should become editable, not on a wrapper around it.
  • How it stays attached to the right element
    The system automatically works out a stable identifier for each snippet based on its original text, so you don't need to add an ID or key yourself. Reordering content on the page, or adding new snippets elsewhere, won't disturb a saved edit.
  • If you rewrite the default text later
    If you go back into Divi and directly change the original text inside a sqsa-snippet element, that counts as a new snippet — any previously saved edit for the old text is left in place but no longer used, and the page will show your new default text until someone edits it again.
  • Multiple identical snippets
    If two snippets on the same page start out with the exact same default text, each is still tracked separately — editing one won't change the other.

If you're unsure whether a piece of content should be a Content Snippet versus a Table or Document, ask the site administrator.

Ready to Write Your Story on the Ice?

Join a community that celebrates every skater — from first glide to gold medal. Come see us at Parade Ice Garden.