Edit the text, images, links and page information of an existing HTML page in a focused workspace, and choose which fields other editors may change in CMS Mode.
Content Workspace is a focused way to update what a page says and shows. Click something on the page and edit just its content: text, links, images, form wording and page information. You don't need to find the element in the Tree or touch the HTML, and the page's structure and styling stay as they are.
Content Workspace is new in Pinegrow 10 and is available in Pinegrow Desktop and Pinegrow Online. It works on existing HTML pages without any setup, because Pinegrow finds the editable content in the page for you.
Open Content Workspace
Open a page and click Content in the toolbar. You can also use Window › Workspace › Open Content workspace.
The workspace has three parts:
- The content outline on the left lists the editable content of the page, grouped into sections such as Page information, Header, Main content and Footer.
- The field editor in the middle shows the fields of the item you selected.
- The page preview on the right is the live page.
To return to your previous panel layout, click Content again or choose Window › Workspace › Exit Content workspace. Pinegrow remembers the workspace, so it opens again the next time you open the page.
Edit content
Click the content you want to change, either on the page or in the outline. Its fields open in the field editor, and the element is highlighted on the page. Type in a field and the page updates right away.
Styled headings, labels, links and buttons that contain line breaks, styled spans or an icon are split into separate text parts. Each part is its own field, so you can change the words while the line breaks, spans and icons around them stay intact.
Use the arrows at the top of the field editor to step to the previous or next item, and click the item title to jump to one of its neighbors. On narrow panels, use the back arrow to return to the outline.
Rich text
Paragraphs and other text blocks can be edited as rich text. Click the A button on a field to switch it to rich text editing, then use the toolbar for bold, italic, underline, strikethrough, links and lists.
Links
A link has a text field and a URL field. Click the link icon on the URL field to open the Edit link helper. Choose the link type (URL, Email, Phone or Page anchor), fill in the details and click Save changes. For an email link you can also add a subject, a message, and Cc and Bcc recipients. Pinegrow builds and encodes the link for you.
If a link or button contains an SVG icon, the icon gets its own Icon field, where you can choose another SVG or edit its code.
Images
Image fields show the image source and its alternative text. Use Image actions to choose another file, open the image browser, or Crop & resize the image. Edit with AI is also available when AI image generation is set up in AI Assistant. Crop & resize and Edit with AI work with local image files and save the result as a new image.
Forms
Form labels, placeholders and button captions are editable too. Click a form field on the page to edit its label and placeholder, or click a button to change its caption.
Page information
Expand Page information in the outline to edit the page title, the meta description and, when the page has them, the social title, description and image.
Find content
On long pages, type in the Search box above the outline. Search matches both field names and their content. Click a result to open its fields.
Pages with more than 250 fields open in large page mode: choose a section in the outline to see its fields.
What becomes a field
Pinegrow creates fields from ordinary HTML:
- Headings, paragraphs, lists, quotes, captions, buttons and link text: text or rich text fields.
- Links: link text and URL, with the Edit link helper.
- Images, videos and picture sources: image source and alternative text.
- Inline background images that cover or contain their element: background image.
- Inline SVG graphics: SVG image or Icon fields.
- Forms: labels, input placeholders and button captions.
- Page head: page title, meta description and Open Graph social tags, under Page information.
Scripts, styles, templates and hidden inputs are never shown as fields.
Repeated items
Some content can be added, duplicated, reordered or removed with the collection buttons in the field editor. These actions appear only for repeated items that are defined as a collection, either as Pinegrow CMS repeat items or with Pinegrow's content collection attributes. Ordinary repeated HTML is edited item by item.
Set up editing for other people
Content Workspace is also where you decide what other people can change when they edit the site in CMS Mode. All fields are locked until you make them editable.
Open the options menu next to the Search box and choose Configure Editable Fields.
While configuring:
- Name content. Click the pencil next to a field or group and type a clear name, such as Booking headline. Press Enter to confirm or Escape to cancel. Editors see these names instead of generic ones like Heading 2.
- Group related fields. Select an element and click Create content group in the field editor header. Its fields are shown together under the group name.
- Choose what can be edited. Click the lock next to a field to make it editable in CMS Mode, and click it again to lock it. Each section shows how many of its fields are editable. Right-click a section to make all its fields editable or to lock them all, or use Make all content editable and Lock all content in the options menu.
Click Done when you are finished.
Pinegrow stores these choices in the page's HTML as data-pg-name, data-pg-content-group and data-pgc-edit attributes, the same attributes Pinegrow CMS uses for editable areas.
Test the editing experience
Open the options menu and choose Test CMS Mode › Quick Test to try the page as an editor would, without restarting Pinegrow. Only the fields you made editable are listed and can be changed. Click Exit Quick Test to return to normal editing.
Quick Test checks field permissions only. To try everything, including the project's CMS Mode settings, choose Test CMS Mode › Restart Pinegrow in CMS Mode…. Pinegrow restarts with the project open in CMS Mode. When you are done, click Exit Test… in the Content panel to restart into normal editing. Content edits you saved during the test are kept.
The restart test and Configure CMS Mode… are available in Pinegrow Desktop. Use Configure CMS Mode… in the same menu to choose which tools editors get in CMS Mode (for example inserting elements, AI Assistant or publishing) and which pages they can open.
Save your changes
Content edits are normal page edits: you can undo them like any other edit, and save the page with File › Save or Cmd/Ctrl+S. To keep a restore point, create a revision in the History panel. See Visual change review and revisions.