Skip to main content

Design Studio

Quickly update and customise your website's appearance to match your brand using a visual editor.

Grace avatar
Written by Grace
Updated yesterday

Overview

Design Studio is a user-friendly tool that allows you to quickly update and customise your website’s appearance to align with your brand. This guide will help you find and use Design Studio effectively.

Key benefits

Some benefits of using Design Studio are:

  • Easy to Use: No training required.

  • Save time and money: Make changes instantly without needing a developer.​

  • Keep Your Website Fresh & Professional: Polish your brand and styling to attract candidates and clients.

🤓Tip: Regularly updating your website helps maintain user engagement and improves your search engine rankings.

Find Design Studio

Follow these steps to enter and use Design Studio:

  1. Log in to the admin area.

  2. Click your profile name in the top-right corner.

  3. Select Design Studio from the drop-down menu.

  4. Alternatively, access the Design Studio from the front-end of your website by clicking the orange cog button to open the editing interface.

Watch our video guide

Please watch the video tutorial below for additional guidance:

Don't see Design Studio?

If Design Studio isn’t available in your menu, you may need access. Request a Design Studio demo here, and our team will assist you.

Additional troubleshooting steps

If you can't find the Design Studio in your menu:

  • Verify Access from the Admin Area: Log in and navigate to your admin area, click on your profile name, and select "Design Studio" from the dropdown menu. Alternatively, access the Design Studio from the front-end by clicking the orange cog button, which opens the editing interface.

  • Staging vs Live Site: Ensure you're not working on a staging URL since the Design Studio is not compatible. Log out from the staging site, navigate to the live site, log in, and then access the Design Studio from there.

  • Check for System Updates: Design Studio may be temporarily unavailable during system updates. Contact your administrator or support team to confirm accessibility.

Start customising your website

Once inside Design Studio, you can update your website’s design with ease. Explore the following guides to get started:

📌Note: Click on the link ➤ to expand the section you're interested in:

Edit your site logo

Updating our site logo is a great way to refresh your website’s identity and branding. Follow the steps below to change your site logo in Design Studio:

  1. Log in to the admin area.

  2. Find and enter Design studio with the steps above.

  3. Click the Site Identity icon in the navigation bar on the right.

    • 🤓Tip: Click the expand navigation menu icon at the bottom if the menu is collapsed.

  4. Click the red Change Logo button.

  5. Select and open your new logo file from your device.

  6. Click Preview to review the changes.

  7. Once satisfied, click the red Publish button to save and apply the new logo.

Please watch our video guide for a visual walkthrough.

Change your brand colours

Your brand colours are essential for maintaining a consistent and recognisable identity. Follow the steps below to update your brand and font colours using Design Studio:

  1. Log in to the admin area.

  2. Find and enter Design studio with the steps above.

  3. Click the Colours icon in the navigation bar on the right.

    • 🤓Tip: Click the expand navigation menu icon at the bottom if the menu is collapsed.

  4. You can see a list of brand and typography colours, including:

    • Primary Colour

    • Secondary Colour

    • Tertiary Colour

    • Quaternary Colour

    • Background Light

    • Background Dark

    • Base White Colour

    • Base Black Colour

    • Font Colour

    • Main Colour

  5. To change a colour, click the coloured square next to the relevant colour type.

  6. Choose your new colour using the hex code, RGBA code, or colour chart.

  7. Click Preview to review your changes.

  8. Once satisfied, click the red Publish button to apply the new colours.

Please watch our video guide for a visual walkthrough.

Change your global fonts

Choosing the right font enhances brand identity, readability, and accessibility. Follow the steps below to change your website’s fonts using Design Studio:

  1. Step 1: Log in to the admin area.

  2. Step 2: Find and enter Design studio with the steps above.

  3. Step 3: Click the Fonts icon in the navigation bar on the right.

    • 🤓Tip: Click the expand navigation menu icon at the bottom if the menu is collapsed.

  4. Step 4: Use the drop-down menus to adjust the below:

    • Font Family

    • Secondary Font

    • Font Size

    • Line Heights

    • Font Weight

      • 🤓Tip: You can change font colours in the Colours section in Design Studio.

  5. Click Preview to review the changes.

  6. Once satisfied, click the red Publish button to apply the new font settings.

Please watch our video guide for a visual walkthrough.

🎯 Fonts and Accessibility:

  • The fonts available in Design Studio are sourced from Google Fonts, which prioritise accessibility.

  • Consider the following when selecting and adjusting fonts:

    • Contrast: Ensure text has sufficient contrast against the background.

    • Size: Use scalable font sizes to accommodate users with visual impairments.

    • Weight: Avoid overly light or extremely bold fonts that may hinder readability.

    • Spacing: Adjust line height and letter spacing to enhance readability, particularly for long-form content.

🆕Adjust font weights for headings and paragraphs

You can now set font weights individually for headings (H1 to H6) and paragraph text, directly within Design Studio. This gives you more freedom to fine-tune your typography and match your brand's style.

What you can do

  • Customise font weight for each heading level (H1-H6) and paragraph text

  • Font weight options match what's available for your selected fonts

  • Live preview shows changes immediately on the page

How to adjust font weights

  1. Open Design Studio from your admin panel

  2. Go to Typography, then select Font Weights

  3. Choose the font weight you want for each heading level and paragraph text

  4. Preview your changes directly on the page

  5. Click Publish when you're ready to apply them to your site

🤓Tip: Use contrasting font weights (like 300 vs. 700) to create clearer visual hierarchy.

Edit your page sections

Rearranging, hiding, and deleting sections allows you to refresh your website’s look effortlessly.

There are two ways to edit sections: via the navigation menu or directly on the page. Follow the steps below:

Edit via the navigation

  1. Log in to the admin area.

  2. Find and enter Design studio with the steps above.

  3. Click the Sections icon in the navigation bar on the right.

    • 🤓Tip: Click the expand navigation menu icon at the bottom if the menu is collapsed.

  4. To rearrange sections, click and hold the drag-and-drop icon, then move the section into place.

  5. To hide a section, click the eye icon.

  6. To delete a section, click the X icon and confirm by clicking Delete section in the pop-up window.

    • 📌Note: Once published, deleted content can't be undone.

  7. Click Preview to review your changes.

  8. Once satisfied, click the red Publish button.

Edit directly on the page

  1. Log in to the admin area.

  2. Find and enter Design studio with the steps above.

  3. Point to the relevant page section.

  4. Find the red icons near the top centre of the section.

  5. To move a section, click and hold the move section icon, then drag it into place.

  6. To hide a section, click the eye icon.

  7. To delete a section, click the X icon and confirm by clicking Delete section in the pop-up window.

    • 📌Note: Once published, deleted content can't be undone.

  8. Click Preview to review your changes.

  9. Once satisfied, click the red Publish button.

Please watch our video guide for a visual walkthrough.

Add and duplicate page sections

Expanding and customising your website is easy with the ability to add and duplicate sections.

There are two ways to do this: via the navigation menu or directly on the page. Follow the steps below:

Add sections via the navigation

  1. Log in to the admin area.

  2. Find and enter Design studio with the steps above.

  3. Click the Add Sections icon in the navigation bar on the right.

    • 🤓Tip: Click the expand navigation menu icon at the bottom if the menu is collapsed.

  4. Find and select the section from the template list.

  5. Click and hold the section, then drag it onto the page. A Drop section here box will appear to guide you.

    • 🤓Tip: Use the Sections area to edit or rearrange the section once added to the page.

  6. Click Preview to review your changes.

  7. Once satisfied, click the red Publish button.

Add and duplicate section on the page

  1. Log in to the admin area.

  2. Find and enter Design studio with the steps above.

  3. Point to the relevant page section.

  4. Find the red icons near the bottom centre of the section.

  5. Select the plus icon to add a new section via the navigation.

  6. Select the copy icon to duplicate an existing one.

  7. Use the steps above to edit the section on the page.

  8. Click Preview to review your changes.

  9. Once satisfied, click the red Publish button.

Please watch our video guide for a visual walkthrough.

Customise page sections

Edit the design of any individual page section directly in Design Studio using built-in tools no developer needed.

Customise a section

📌 Note: Only certain sections, with clear design elements can be styled. Options vary by theme

  1. Log in to the admin area.

  2. Open Design Studio on the page you want to update.

  3. Add or locate the section you want to edit.

  4. Click the pencil icon ✏️ in the top-right corner of the section.

  5. The style menu will appear on the left.

  6. Click the arrow icon 🔽 to expand a settings group (e.g. General Settings).

  7. Use the available controls:

    • Toggles

    • Sliders

    • Dropdowns

    • Colour pickers

  8. To change the layout, click Change Section Option and choose a new preset.

  9. Click Preview to check your changes.

  10. Click Publish to save your updates.

What you can customise

You can adjust the following elements:

  • Layout presets

  • Background colours

  • Padding (top and bottom)

  • Full-width display toggle

  • Overlay colours

  • Body content visibility

  • Image shape and size

📌 Note: These options are defined globally and cannot be customised per site

⚠️ Important: All changes are responsive. Always preview your design in desktop, tablet, and mobile views before publishing.

Description

Image

Drag-and-Drop a section to Pages

Click pencil icon in the top-right corner of the section - screenshot - Design Studio - Access Volcanic

Click pencil icon in the top-right corner of the section

Section's style menu bar displays on left menu

Click Change Section Option to expand a preset style - screenshot - Design Studio - Access Volcanic

Click to expand the different group setting

Click Change Section Option to expand a preset style

🆕Edit your header and footer

You can now edit the header and footer of your website directly in Design Studio—just like any other page section. This update gives you complete control over your site's layout, from top to bottom.

What you can do

  • Edit navigation, logos, links, layout, and more—without code

  • Preview header and footer changes in real time

  • Apply your updates instantly with Save & Publish

How to edit headers and footers

  1. Open Design Studio and choose the page you want to edit

  2. Click on the header or footer section to begin editing

  3. Update the content, layout, or styling as needed

  4. Click Save and Publish to apply the changes live

Things to keep in mind

  • Full editing capabilities may depend on your site's current setup

  • If your header or footer appears but has limited editing options, you can still update the content

  • If you don't see a header or footer in Design Studio, reach out to our support team for help

Duplicate custom pages

You can quickly create a copy of any custom landing page in Design Studio. This is helpful when you want to reuse an existing layout and structure.

📌Note: Only custom pages can be duplicated. Other pages are excluded, for example, your:

  • Homepage

  • Jobs page

  • Blogs page and posts

  • Disciplines page or detail pages

How to Duplicate a Page

  1. Open Design Studio and select the page menu.

  2. In the Page List, find the page you want to duplicate.

  3. Click the Duplicate icon beside the page name.

  4. In the Add New Custom Page panel:

    • Enter a new Page Title.

    • Confirm or adjust the template.

    • Optionally update the permalink.

    • Select Indexable or Hidden.

    • Click Add New Page.

📌Note: Page duplication is only available in Design Studio.

Please watch our video guide for a visual walkthrough.

Undo and redo changes

Experimenting with new designs is easy with the Undo and Redo features in Design Studio. Follow these steps to revert or restore changes:

  1. Make content changes in Design Studio (e.g., adding a section).

  2. To undo a change, click the Undo icon at the top centre of the navigation bar.

  3. To redo a change, click the Redo icon to restore the last undone action.

  4. Click Preview to review your changes.

  5. Once satisfied, click the red Publish button to apply the new colours.

    • 📌Note: You can't undo changes after they have been published, so always preview before publishing.

Please watch our video guide for a visual walkthrough.

Navigate between pages

Moving between different pages while editing in Design Studio is seamless using the drop-down menu or your website’s own navigation menu. Follow these steps:

  1. Log in to the admin area.

  2. Find and enter Design studio with the steps above.

  3. Click the drop-down menu near the top left. It should be labelled Editing: [page title] (e.g., Editing: Homepage).

  4. Find the list of available pages:

    • Homepage – Click to edit your homepage.

    • Pages – Click to view a list of your dynamic pages.

      • For parent pages, click the plus icon to expand and view child or sub-pages.

      • Hidden pages will also be listed.

      • Page templates appear in black text boxes (e.g., gen-sub).

  5. Click the edit icon next to any page to open it in Design Studio.

    • 📌Note: This menu only displays pages from your Pages section and Homepage. To edit other pages, navigate to them first using your own site’s menu, then enter Design Studio.

Please watch our video guide for a visual walkthrough.

Preview in different screen sizes

Ensuring your website looks great across all devices is crucial for a responsive design.

Design Studio allows you to preview pages in desktop, tablet, and mobile views. Follow these steps:

  1. Log in to the admin area.

  2. Find and enter Design studio with the steps above.

  3. Find the red device icons at the top centre of your screen.

  4. Click the relevant device icon to switch views

    • Desktop: Click the desktop icon to see how your page appears on larger screens.

    • Tablet: Click the tablet icon to preview your page in tablet resolution.

    • Mobile: Click the mobile icon to check how your page looks on mobile devices.

  5. Click the red Back to Edit button to exit preview mode.

    • 📌Note: You cannot edit your page in preview mode. However, use this feature to ensure your design is responsive. If you notice issues, such as elements not displaying correctly on mobile, please raise a support case

Watch our video guide for step-by-step instructions.

Preview, publish and exit Design Studio

Once you've finished designing, use these options to finalise and exit:

Preview your changes

  1. Click the Preview button (top right).

  2. View your design in desktop, tablet, or mobile mode.

  3. Click Back to Edit to continue.

    • 🤓Tip: Preview before publishing to ensure everything looks right.

🆕 Publish your changes

When you're ready to make your changes live, Design Studio makes the publishing process quick and straightforward.

  1. Click Publish (top right)

  2. You'll see a message confirming the publishing is in progress

  3. You can continue making other edits while this happens

  4. Confirm with Yes, Publish to push your changes live

  5. Once complete, your changes will appear on your live site

📌 Note: Publishing is final—changes can't be undone.

🤔 Tip: Save and publish frequently to avoid losing work.

Exit Design Studio

  1. Click the Exit icon (top left).

  2. Choose to exit without saving or return to publish changes.

  3. You’ll be redirected to the front-end of your homepage.

    • 🤓Tip: Before publishing, always preview your work across devices. This helps you catch display issues and ensure consistency for all users.

Watch our video guide for step-by-step instructions.

Best practices

Follow these guidelines to get the most out of Design Studio:

  • Use contrasting font weights (like 300 vs. 700) to create clearer visual hierarchy

  • Preview font changes before publishing to ensure they look great across all devices

  • Keep your header and footer simple, clean, and consistent with your brand

  • Save and publish frequently to avoid losing work

  • Regularly update your website to maintain user engagement and improve search engine rankings

Design Studio improvements

Design Studio is continuously evolving with new features and enhancements to give you more control over your website. This article is regularly updated to reflect the latest improvements, so check back often to stay informed about what's new.

🤓Reach out to your Account Manager or Customer Success Manager (if you have one) for help staying up to date with product changes and improvements.

Recent improvements

Here are the latest enhancements to Design Studio:

  1. Font weight controls for headings and paragraphs

    You can now set font weights individually for headings (H1 to H6) and paragraph text. This gives you more freedom to fine-tune your typography and match your brand's style without needing developer support.

  2. Improved publishing experience

    Publishing changes in Design Studio is now faster and more reliable. Design Studio only publishes what has changed, speeding up the process. You'll receive clearer feedback during publishing, and you can continue editing while your site is publishing. Your updates appear live automatically when the publish is complete.

  3. Header and footer editing

    You can now edit the header and footer of your website directly in Design Studio: just like any other page section. This gives you complete control over navigation, logos, links, and layout without writing any code.

Give feedback on Design Studio

We welcome your thoughts, suggestions, and feedback on Design Studio! Here's how to share your insights with our Product team:

Contact Our Product Team

Send your feedback directly to our Product Manager, Rachel Kirton, at [email protected]

What to Include with Your Feedback

To help us troubleshoot or improve your experience, please include your:

  • Browser type and version

  • Operating system

  • Device (desktop, tablet, mobile)

Use this simple tool to gather your details:

  • Step 1: Open your internet browser (e.g. Chrome, Firefox, Edge, or Safari).

  • Step 2: Go to WhatIsMyBrowser.

  • Step 3: Click Copy Link or Share your Browser Info.

  • Step 4: Paste the link into your feedback email.

📌Note: Share screen recordings (e.g. with Loom) or describe the steps leading to the issue. This helps us reproduce and resolve problems faster.

Edit restrictions

Design Studio helps you make quick, impactful updates to your site, but there are a few areas you currently can’t edit.

Restricted page templates

Some templates are shared across all Volcanic websites and currently can't be edited to avoid affecting other customers. These include:

  • Job search page: /jobs

  • Candidate dashboard: /dashboard

  • 404 error page: Not found pages

  • User registration: /users/register/new/registration

  • Legal documents

  • Job applications page: /job/*/apply

  • Application confirmation page: /job/*/apply/completed

📌Note: These restrictions may change over time - look out for updates from this article.

FAQs

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

Q1: What is Design Studio?

  • Answer: A visual editor in Volcanic that lets you customise your site’s design without developer help.

Q2: Who can use Design Studio?

  • Answer: Anyone with admin access to your website—no coding skills required.

Q3: How do I access Design Studio?

To access Design Studio, follow the steps below:

  1. Log in as an Admin.

  2. Click your profile.

  3. Select Design Studio.

Q4: Why can’t I edit certain pages?

  • Answer: Pages like job search or registration use shared templates and can’t be edited to prevent site-wide changes.

Q5: Can I undo changes after I publish them?

  • Answer: No. Use the Preview feature before publishing, as changes are final once live.

Q6: How do I duplicate a page?

Q7: Can I create a new page template?

  • Answer: Not directly within Design Studio. New page templates currently require development support, but features to improve template flexibility are in development.

Q8: Will I be able to edit just one page without affecting others?

  • Answer: You can edit individual custom pages by duplicating them first. Then you can customise the duplicate page without affecting the original one or others.

Q9: Why can’t I see previews of sections before adding them?

  • Answer: Thumbnail previews are not yet available but will be introduced to improve usability.

Q10: Can I use Design Studio on mobile or tablet?

  • Answer: Use it on desktop for best results. Mobile/tablet views are for preview only.

Q11: How do I give feedback or report a bug?

  • Answer: Email [email protected] with browser info, device type, and if possible, a screen recording.

Q12: Can I duplicate other pages such as my Homepage?

Q13: Can I save my styled section as a reusable template?

  • Answer: Not currently. However, you can duplicate the section within the same page to reuse your styles.

Q14: Why are some style options missing or greyed out?

  • Answer: Some themes or sections limit the editable settings. Only exposed options are available to customise.

Q15: Will my section style changes appear on mobile?

  • Answer: Yes. Design Studio applies all styling updates responsively across devices.

Q16: Can I undo section style changes after publishing?

  • Answer: No. Once published, you’ll need to re-edit the section or restore a previous version if your site supports history.

Q17: Why is my Design Studio temporarily unavailable?

  • Answer: The Design Studio might be undergoing system updates or maintenance. Contact your support team or system administrator to confirm accessibility during this time.

Q18: Why doesn’t the orange cog button respond when clicked?

  • Answer: This issue is typically caused by using a staging URL instead of the live site. Log out of the staging site, navigate to the live site, and try accessing Design Studio again.

Related Articles
Change brand colours in Design Studio Video Guide
Change your fonts in Design Studio Video Guide
Edit page sections in Design Studio Video Guide
Add and duplicate sections in Design Studio Video Guide
Preview, publish and exit in Design Studio Video Guide
Did this answer your question?