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 update your website to maintain user engagement and improve SEO.
Find Design Studio
Follow these steps to enter and use Design Studio:
Log in to the admin area.
Click your profile name in the top-right corner.
Select Design Studio from the drop-down menu.
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.
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
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:
Log in to the admin area.
Find and enter Design studio with the steps above.
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.
Click the red Change Logo button.
Select and open your new logo file from your device.
Click Preview to review the changes.
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
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:
Log in to the admin area.
Find and enter Design studio with the steps above.
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.
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
To change a colour, click the coloured square next to the relevant colour type.
Choose your new colour using the hex code, RGBA code, or colour chart.
Click Preview to review your changes.
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
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:
Step 1: Log in to the admin area.
Step 2: Find and enter Design studio with the steps above.
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.
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.
Click Preview to review the changes.
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.
Edit your page sections
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
Log in to the admin area.
Find and enter Design studio with the steps above.
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.
To rearrange sections, click and hold the drag-and-drop icon, then move the section into place.
To hide a section, click the eye icon.
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.
Click Preview to review your changes.
Once satisfied, click the red Publish button.
Edit directly on the page
Log in to the admin area.
Find and enter Design studio with the steps above.
Point to the relevant page section.
Find the red icons near the top centre of the section.
To move a section, click and hold the move section icon, then drag it into place.
To hide a section, click the eye icon.
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.
Click Preview to review your changes.
Once satisfied, click the red Publish button.
Please watch our video guide for a visual walkthrough.
Add and duplicate page sections
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
Log in to the admin area.
Find and enter Design studio with the steps above.
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.
Find and select the section from the template list.
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.
Click Preview to review your changes.
Once satisfied, click the red Publish button.
Add and duplicate section on the page
Log in to the admin area.
Find and enter Design studio with the steps above.
Point to the relevant page section.
Find the red icons near the bottom centre of the section.
Select the plus icon to add a new section via the navigation.
Select the copy icon to duplicate an existing one.
Use the steps above to edit the section on the page.
Click Preview to review your changes.
Once satisfied, click the red Publish button.
Please watch our video guide for a visual walkthrough.
✨Customise page sections
✨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
Log in to the admin area.
Open Design Studio on the page you want to update.
Add or locate the section you want to edit.
Click the pencil icon ✏️ in the top-right corner of the section.
The style menu will appear on the left.
Click the arrow icon 🔽 to expand a settings group (e.g. General Settings).
Use the available controls:
Toggles
Sliders
Dropdowns
Colour pickers
To change the layout, click Change Section Option and choose a new preset.
Click Preview to check your changes.
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 | |
Section's style menu bar displays on left menu | |
Click to expand the different group setting | |
Click Change Section Option to expand a preset style |
Duplicate custom pages
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
Open Design Studio and select the page menu.
In the Page List, find the page you want to duplicate.
Click the Duplicate icon beside the page name.
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
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:
Make content changes in Design Studio (e.g., adding a section).
To undo a change, click the Undo icon at the top centre of the navigation bar.
To redo a change, click the Redo icon to restore the last undone action.
Click Preview to review your changes.
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
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:
Log in to the admin area.
Find and enter Design studio with the steps above.
Click the drop-down menu near the top left. It should be labelled Editing: [page title] (e.g., Editing: Homepage).
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).
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
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:
Log in to the admin area.
Find and enter Design studio with the steps above.
Find the red device icons at the top centre of your screen.
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.
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
Preview, publish and exit Design Studio
Once you've finished designing, use these options to finalise and exit:
Preview your changes
Click the Preview button (top right).
View your design in desktop, tablet, or mobile mode.
Click Back to Edit to continue.
🤓Tip: Preview before publishing to ensure everything looks right.
Publish your changes
Click Publish (top right).
Confirm with Yes, Publish to push your changes live.
📌Note: Publishing is final—changes can’t be undone.
Exit Design Studio
Click the Exit icon (top left).
Choose to exit without saving or return to publish changes.
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.
Additional resources
As you customise your website, you may encounter some restrictions or have questions. Check out these resources:
📌Note: Click on the link ➤ to expand the section you're interested in:
Design Studio Roadmap
Design Studio Roadmap
Stay up to date with the latest phases and upcoming features of Design Studio.
Phase | Description | Key Features |
Phase 01 | A Great Editing Tool |
|
Phase 02 | Enhanced Page Management |
|
Phase 03 | Save Drafts and More |
|
Phase 04 | Enhanced Styling Tools |
|
Beyond | Future Enhancements |
|
📌Note: Roadmap content is subject to change. Keep an eye out for updates in product communications or speak with your Customer Success Manager if you’re on a Premier CSP plan.
Give feedback on Design Studio
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 rachel.kirton@theaccessgroup.com
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 restriction
Edit restriction
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:
/jobsCandidate dashboard:
/dashboard404 error page: Not found pages
User registration:
/users/register/new/registrationLegal documents
Job applications page:
/job/*/applyApplication confirmation page:
/job/*/apply/completed
📌Note: These restrictions may change over time—look out for updates from our team.
Upcoming Improvements to Restrictions
The following editing capabilities are currently not available without custom development work, but are planned for upcoming releases:
Limitation improved: Edit a Page Without Affecting All Pages
What's changed
Previously, editing a page meant editing the underlying template, which impacted all pages using that template. Now, you can:
Duplicate a custom page, which automatically creates a new, unique template.
Make edits to the duplicated page, and changes will only apply to that individual page.
This gives you the choice: edit the shared template for global changes, or duplicate a page to make custom edits that don’t affect others.
📌Note: This feature is available for custom pages only. It doesn't apply to system-managed pages like blogs or disciplines.
Limitation improved: Duplicate a Full Page
What's changed
You can now duplicate entire custom pages in just one step, no more rebuilding layouts section by section.
What You Can Do:
Quickly create new pages based on existing layouts and content.
Save time by reusing designs across campaigns, audiences, or test versions.
Maintain consistent styling while tailoring content for specific use cases.
Just select the custom page you want to duplicate, and Design Studio will create a full copy with its editable template.
Thumbnail Previews for Add a Section
Current limitation: When adding sections, you can only view them by name. There is no visual preview unless you add them to the page.
Coming soon: Thumbnail previews for pre-built sections will allow you to see what they look like before inserting.
Key benefits of improvements
Greater control to customise individual pages without site-wide impact.
Easily create consistent layouts across multiple pages.
Improves usability by making section selection more visual and efficient.
🤓Tip: Stay tuned for announcements on these enhancements!
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:
Log in as an Admin.
Click your profile.
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?
Answer: Yes, you can now duplicate custom pages in Design Studio.
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 rachel.kirton@theaccessgroup.com with browser info, device type, and if possible, a screen recording.
Q12: Can I duplicate other pages such as my Homepage?
Answer: No, you can only duplicate custom pages that appear in the Pages section of the admin area. Other pages such as Homepage or Blogs cannot be duplicated.
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.