Skip to main content

Edit Mode

Learn how to edit content on the front end of your website via edit mode.

Grace Ndabananiye avatar
Written by Grace Ndabananiye
Updated over 3 weeks ago

Overview

Edit Mode allows admins to make live content changes directly on the page - no need to go into the Admin Area. With a visual, intuitive interface, you can update text, images, forms, and more in real time.

Key Benefits

  • Edit Content in Real-Time: No backend access needed.

  • Simplify Content Management: Easy updates for text, images, and media.

  • Speed Up Workflows: Make quick fixes on the go.

  • Visual Confidence: See changes as you make them.

  • Non-Technical Friendly: Blue tooltips provide on-page editing guidance.

🤓Tip: Combine Edit Mode with Admin Area for deeper content control.

Use Edit Mode

Follow these steps to enter and use Edit Mode:

  1. Log in as an admin.

  2. Click your profile icon (top-right corner).

  3. Select Back to Website.

  4. Click the orange cog icon.

  5. Select Edit Mode.

  6. Point to page elements (like Lava Boxes).

  7. Make your changes.

  8. Click Save Changes, then click Exit.

Watch the video below for your visual guidance.

accessing Edit Mode via admin area - GIF - Access Volcanic

🤓Tip: Use blue tooltips in Edit Mode for specific, site-tailored editing guidance.

Editable Elements and Customisable Options

Editable Page Elements

  • Perforated Boxes: Highlight editable content areas.

  • Lava Boxes: Add/edit text, forms, images, and more.

  • Lava Images: Orange-outlined placeholders for images.

  • Site Logo: Easily updated via the blue image icon.

What You Can Change

  • Text & Formatting: Adjust font, size, alignment, colour, and lists.

  • Hyperlinks: Add internal/external links.

  • Forms & Embeds: Insert videos, surveys, and forms.

  • Images: Upload via Media Library in Lava Boxes or Lava Images.

  • Documents: Upload and link files directly from Media Library.

Watch the video below for your visual guidance.

adding an image into a lava image via edit mode - GIF - Access Volcanic

Helpful Tools

Blue Tooltips

  • Custom, developer-added tips tailored to your site.

  • Often include ideal image sizes, layout tips, or component usage.

Edit Mode Toolbar

  • Appears when you click inside editable areas.

  • See full breakdown below.

Understand the Edit Mode toolbar

The Edit Mode toolbar is a powerful tool that allows you to make changes to your website's content and design.

  • It's located at the top of the page when you're in Edit Mode, when you click inside a Lava box, and it contains a variety of options to help you customise your website.

  • Bold: Click to make text bold.

  • Italic: Click to make text italic.

  • Underline: Click to underline selected text.

  • Toggle quotes: Click to turn texts into quotes.

  • Block type: Click and use the drop-down menu to change text sizes.

  • Bullet list: Click to create a list with bullet points.

  • Numbered list: Click to create a list with numbered points.

  • Increase depth: Click to increase the indent of a bullet or numbered list.

  • Decrease depth: Click to decrease the indent of a bullet or numbered list.

  • Align left: Click to position text to the left of centre.

  • Align centre: Click to position text to the centre.

  • Align right: Click to position text to the right of centre.

  • Insert table: Click to add a table.

  • Embed link: Click to add an embed link, e.g. of an uploaded document.

  • Colour picker: Click to change the colour of the selected text.

  • Insert link: Click to create a link or hyperlink for the highlighted text.

  • Reset style: Click to clear any text styling or colours.

  • Flag element: Click to add an anchor text to the page.

  • HTML: Click to add HTML code or scripts. E.g. for videos or third-party forms.

  • Decoration tag: Click to add buttons or preset styled text.

  • Form picker: Click to add a dynamic form.

  • Media library: Click to add images and files.

  • Paste as text: Click to paste text from your clipboard with formatting removed.

  • Undo: Click to undo or revert recent unsaved changes.

  • Redo: Click to redo recent unsaved changes or undo actions.

🤓Tip: Keep an eye out for blue tooltips while in Edit Mode — they offer quick tips and guidance to help you use these customisable options efficiently!

Edit Metadata in Edit Mode

Learn how to update your page's meta title, description, and canonical URL to boost SEO directly from Edit Mode.

Why Metadata Matters

Metadata — like meta titles, descriptions, and canonical URLs metadata tells search engines what your page is about. Optimising this info helps:

  • Improve search rankings.

  • Display accurate previews in search results.

  • Avoid duplicate content issues.

🤓Tip: For recurring pages like job pages, you can edit the metadata in bulk via SEO Settings in the admin area.

Edit Metadata in Edit Mode

To edit Metadata in Edit Mode, please follow the steps below:

  1. Click Page Settings near the top-right of the page.

  2. Use the right-hand panel to update: Meta Title, Meta Description, and Canonical URL.

  3. Click the blue Save button.

  4. Click the blue Submit button to publish your changes.

🤓Tip: Update metadata when launching a new page or improving SEO.

Edit Image Alt Text in Edit Mode

Learn how to update the alt text for your images directly in Edit Mode to support accessibility and SEO.

Why Alt-Text Matters

Alt text, short for “alternative text”,: describes the content and function of an image. It's used by screen readers to make your site more accessible to users with visual impairments and helps search engines understand your visual content.

Optimising alt text improves:

  • Accessibility for all users.

  • Search engine visibility.

  • Image indexing in search results.

Edit Image Alt Text in Edit Mode

To Edit Image Alt Text in Edit Mode, follow the steps below:

  1. Select Image Alt Text from the options.

  2. Enter or update your descriptive alt text.

  3. Click the blue Save button to apply the change.

  4. Click the blue Submit button to publish your changes.

🤓Tip: Make alt-text concise and informative — describe the image’s purpose, not just what it shows.

FAQs

Here are some common questions and issues you might encounter while using Edit Mode, along with simple solutions:

Q1: How do I access Edit Mode on my website?

  • Answer: To access Edit Mode on my website, follow the steps below:

    1. Log in as an Admin.

    2. Click your profile.

    3. Select Back to Website and click the Orange Cog Button to enter Edit Mode.

Q2: Why aren’t my changes showing up immediately?

  • Answer: It can take up to 2 hours due to caching. Try clearing your browser cache or refreshing the page.

Q3: How do I add an image to a Lava Image placeholder?

  • Answer: To add an image to a Lava Image placeholder, follow the steps below:

    1. Click the blue image icon.

    2. Select/upload an image from the Media Library.

Q4: How do I edit metadata on a page?

  • Answer: To edit metadata on a page, follow the steps below:

    1. In Edit Mode, click Page Settings.

    2. Update the meta fields.

    3. Click Save, and then Submit.

Q5: How do I add or edit alt text for an image?

  • Answer: To add or edit alt text for an image, follow the steps below:

    1. Click the image.

    2. Select Image Alt Text.

    3. Add your description.

    4. Click Save and Submit.;

Q6: Why can’t I edit certain sections of the page?

  • Answer: These areas may be controlled by the Admin CMS or built using Design Studio. Contact support if needed.

Q7: What are blue tooltips, and how do I use them?

  • Answer: Blue tooltips are developer-added hints unique to your site. Click or hover to view guidance on custom components.

Q8: Can I make all changes using Edit Mode?

  • Answer: Most content (text, images, forms) can be updated. For layout or structural changes, use the Admin Area or contact support.

Q9: How do I insert documents or downloadable files?

  • Answer: Use the Media Library in the toolbar to upload and link files in Lava Boxes.

Q10: How do I undo or redo a change?

  • Answer: Use the Undo or Redo buttons in the toolbar before saving or submitting.

Did this answer your question?