Optimizely SaaS CMS Concepts and Terminologies

Whether you're a new user of Optimizely CMS or a veteran who have been through the evolution of it, the SaaS CMS is bringing some new concepts and terminologies to you. The introduction of our latest feature, the Visual Builder via the SaaS CMS, a fresh editor interface, has ushered in several unique concepts and terminologies into our CMS offering.

Let's go on a journey of creating a website using the SaaS CMS and explore some of these new concepts.

Applications

First, we have Applications. Applications is a replacement of what we used to call "Websites" in the settings. The idea here is still the same, you're able to create multiple websites and manage all the content in the same CMS. The biggest difference here is that we want to make it clear that our CMS is flexible, not just websites, but multi-channel. You'll be able to configure "applications" so you can chose which URLs to use, which languages to use, which content is shared, and many more.

So, as a first step of our website creation journey, we have set a URL for the new site we'll be creating.

Experience

Now, let's start building content for our website. One of the first things you'll probably do is to create a page. However, you'll quickly notice that there is now a new option for "Create Experience". So what is Experience? Experience is basically the same as a Page, and to be more technical, it's an extension of a Page. From the end user's perspective, what's different about Experience and a Page is that, Experience gives you access to the Visual Builder, where you'll have access to Outline and other features that comes with Visual Builder. From a developer's perspective, Experience gives you access to the Layout System and UnstructuredData.

Let's create our first blank experience by selecting the triple ellipsis/dots that shows up when you hover over "Root", and click on "+ Create Experience". From here, you can either chose "Blank Experience", or any blueprints you may have created before (we'll explain what blueprints are later).

Outline

We mentioned Outline in the Experience section earlier. So what is it? Outline provides end users with a list view of all the sections on the page. This is where you'll be able to add/manage content of a page. You can drag and drop the different content to reorder them, click on each content to edit them, control the style of the content, or saving the content as blueprints.

You can start by adding a new Section to the outline for your first piece of content.

Section

Now that we're starting to add a new Section to our Outline, we need to understand what it is and what it does. Section is a visually distinct segment of your webpage, or think of it as a "chunk" or a "group" of content on a page. You can also think of them as "blocks" in the PaaS CMS, since it is an extension of a Block, but also having access to the Layout System and UnstructuredData.

Section use rows and columns in a grid layout to structure content, this gives us a lot of control and flexibility in how we want to organize and arrange our content. Try adding some sections, rows, and columns to get a sense of how the structure works.

Element

When you get to the Column level, you'll be able to add Elements. Elements are the smallest building blocks you have within the Visual Builder for creating content. You can define them in "Settings" > "Content Types", where you'll be able to create an "Element Type".

Element can be things like Heading, Call To Action, Image, Quotes, Testimonials, anything. You can create them as simple as you want it to be like a Heading with only requires a single text input field, or something more complex like a Testimonial with customer names, locations, pictures, and text. Although Element does not have layout controls because they are the smallest building blocks, you are still able to style them.

If you don't have any elements yet, try creating a new one first, and then add it to your column.

Blueprint

Blueprint has been mentioned multiple times before, what is it? Blueprints are reusable templates that you can create directly from the Visual Builder. You can save existing experiences and sections as blueprints and reuse them whenever you want.

Style

And finally, Style. Since we have only focused on content so far, you must be thinking, "How do I control the way my content looks?" That's where Style comes in. The spacing, alignment, color, width, anything to do with the appearance, the visual aspect of your content, as long as the developer has define the styling options for your content, you'll be able to control all of it through the Visual Builder.

You're ready to go!

Hope this has helped you understand the new key concepts and terminologies we have introduced through the Visual Builder in the SaaS CMS. You've got this! Break a leg!

Resources

Developer Doc

• Visual Builder - https://docs.developers.optimizely.com/content-management-system/v1.0.0-CMS-SaaS/docs/visual-builder

User Doc

• Visual Builder concepts - https://support.optimizely.com/hc/en-us/articles/27875480610445-Visual-Builder-concepts
• Elements in Visual Builder - https://support.optimizely.com/hc/en-us/articles/27875804069773-Elements-in-Visual-Builder
• Create an experience from scratch - https://support.optimizely.com/hc/en-us/articles/27875424766349-Create-an-experience-from-scratch
• Select styles - https://support.optimizely.com/hc/en-us/articles/27875497007117-Select-styles
• Save as blueprint - https://support.optimizely.com/hc/en-us/articles/27875431780877-Save-as-blueprint