Your Step-By-Step Guide to Using Web Studio

Web Studio is Agility CMS’s visual editor that makes it easy for content editors to build, manage, preview, and publish pages without needing to touch code. As CMS Critic puts it:

…is a heckuva lot more than just a WYSIWYG editor…[it’s] entire experience feels intuitive, elegant, lightweight, and easy to navigate…while providing easy access to all the essential tooling.

Sounds great, doesn’t it? And using Web Studio is even better. Here’s how you can start. Click each image below to view a larger version in a new window.

Step 1: Log Into Agility CMS

• Access your instance of Agility CMS.
• Optional but recommended:
  • Download the Web Studio SDK to unlock advanced features like decorating components and running your project locally. This step will require developer assistance.

Step 2: Access Web Studio

• On the left-hand menu, locate WEB EXP. From there, you can:
  • Click Pages to find the page you want to edit via sitemap, or,
  • Click Web Studio to open the visual editor (you still have access to the sitemap).

Step 3: Become Familiar with Web Studio

• The Left Panel displays the link tree with all the pages of your website.
• The Central Panel is the main canvas, displaying a real-time preview as you build or edit your page.
• The Right Panel shows all the components that make up your page.

Step 4: Add Components to Your Page

• Click + Component button atop the Right Panel.
• Select the component you would like to add to your page.
  • If you know the component’s name, type it in the search bar to pull it up quickly.
  • If you don’t know the component you want, scroll through the component list to find one you’d like to use.
• Drag-and-drop your selected component onto the page wherever you want.

Step 5: Edit Your Component

• Click on any component that’s on your page.
  • You can click on the component from the Centre Panel (there’s an edit icon in the top right-hand corner of each component), or,
  • You can click on the component in the Right Panel
• Once the component is opened, you can edit and update as you see fit.
  • Any changes you make will be reflected in real-time in the Centre Panel

 Step 6: Reorder Your Components (If You Want)

• Click and drag the components and rearrange them in any order you like.
• Or don’t, it’s totally up to you.

Step 7: Preview Your Changes

• The Centre Panel shows your changes as they happen, but there are other ways to preview your changes:
  • At the top of Web Studio, you’ll see Website https://yourwebpage with a dropdown.
  • Select the dropdown and you’ll see an icon which, when you hover over it, displays Open This Deployment in a New Tab
  • Click that icon and your page will open in a new tab, showing you how it will appear once it’s live.
• Make any changes you wish.

Step 8: Save, Publish, Celebrate

• After you’ve updated a component, save it by clicking the Save button that’s located at the top of component model.
• When ready, click the Publish button, located to the left of the + Component button atop the Right Panel.
  • You can request approval for your page prior to publishing if necessary.
  • You can also schedule your page to publish (and even unpublish) by selecting ⋮ (sometimes called a Kebab Menu) that’s to the right of the  + Component button.
  • Select Schedule from the dropdown menu that appears and use the date picker to select when you want your page to go live and be taken down (if required).
  • If your page will be taken down, you’ll have the option of selecting a redirect URL, so that users won’t go to a broken, missing, or 404 page.
• Your page is now live. Great job!

Step 9: Do It Again

• Follow these steps to update any other pages on your website.
• If you need to create a brand new page, click + New Page, which is located atop your site map.
  • Choose a folder, page model, and give your page a name.
  • Edit in Web Studio just like you would any other page.

-Tips for Success-

• Copy Existing Pages: Instead of manually creating a page in Web Studio, copy an existing page and edit that. To copy a page:
  • Click the Kebab Menu (⋮ ) to the right of the + Component button.
  • Select Copy Page.
  • Choose where you would like to copy the page to.
  • The page is copied and ready for editing.
• Save Pages as Favourites: Speed up future work by favouriting pages for quick access:
  • Click the Star Icon ☆ that’s located above the Right Panel to favourite it.
  • To access favourited pages, click the Star Icon ☆ in the Left Side Bar (it appears underneath the Agility logo).
  • A list of your favourite pages will appear, click the one you’d like to edit and you’ll be taken to it.
• Collaborate: Multiple team members can work together inside Web Studio and tag each other using Draggable Visual Comments for greater collaboration and efficiency.

Step 10: Ready to See What You Can Build?

• Sign Up for a FREE Trial of Agility CMS to check out Web Studio – and all the great features, capabilities, and value – of Agility.
• Not ready for a free trial but still want more information? We’ve got you covered:
  • Get a Demo and have one of our experts guide you through the platform – including Web Studio.
  • Send Us Your Questions or Comments and we’ll reply ASAP with your answers.