Getting started on Editor X

Welcome to the ultimate web creation platform for the pros. We’ll run through the basics of creating a site on Editor X. Before we get started, let’s take a look at your workspace.

Workspace

Choose from one of our in-house designed templates, or start from scratch with a blank canvas.

Your canvas is wide and intuitive, with a smooth drag and drop interface.

The top bar of your canvas is filled with tools and functions to help you manage your site and access our resources.

Under Site, you can see your site history, transfer your site ownership to someone else, open your dashboard and more.

The Tools tab gives you access to your design libraries—customizable collections of typography, color themes and design assets that you can save, share and reuse on any site in the same account. They’re great for keeping brand identities aligned and encouraging team collaboration.

Here, you can turn on Dev Mode. This gives you access to Editor X’s fully integrated open development platform. You can build and deploy web applications efficiently, using your own JavaScript code on a built-in IDE. And you can also work with APIs to add custom functionality and site interactions.

Under Help, you’ll find access to resources like the help center, our Community X forum, and our educational hub Academy X. Share your feedback directly with the product team, or Contact Customer Care to request any help.

Your blank canvas, by default, contains a header, section and footer.

Sections are large flexible containers that can hold many elements from complex layouts to images and text. To begin customizing your section, Click Add an Element.

This brings us to the creation bar. First up is the Add panel. From here, you can add elements, saved design assets, compositions, layout tools and more. You can also add text, buttons, custom menus, media, decorative elements, forms, and embedded HTML code and social icons.

Underneath, you’ll find all your built-in business solutions. You have blogs, stores, bookings systems, event managers and a members areas. And lastly, you’ll find the Editor X content manager.

Next, you have the Layers panel. This is where you can see the hierarchy of all the elements on your page and how they’re ordered. The hierarchy defines how the elements interact with one another.

Head over to the Masters panel to save and reuse headers, sections and footers on multiple pages. To streamline your creation flow, changes you make to one master will apply everywhere it’s used on the site.

Use the Pages panel to add and navigate between the pages on your site. Select the 3 dots to rename, duplicate and edit a page.

Let’s move on to the Theme Manager. This is where you can view, edit and save typography and color themes to your site, or add them to your design libraries.

Under the Apps panel, you can explore our App Market to browse through a variety of professional solutions, and use the App Manager to manage and delete your installed apps.

And this is where you can add an integrated, code-free Content Manager. Use it to manage dynamic site content.

Moving forward, this dropdown let’s you manage and navigate between the pages of your site.

These icons represent your breakpoints. To style for specific devices, you can jump from desktop...to tablet...to mobile.

You can also create your own custom breakpoints......and use the resize handles on either side of your canvas to see and design your site at every viewport.

Before we dive in, let’s take a look at the site we’ll be creating. We’re going to build a landing page for a mobile app called Cyclo.

Inspector Panel

There are many ways to structure each section of your site. You can add elements directly to the section, or divide up the space using simple containers, CSS Grid or Layouters, which are based on flexbox technology.

For this site, we’ll start by applying a 2x1 grid to lay out our elements, and adjust the row height.

Now we’ll add a background image to the left side and stretch it to fill the entire cell, and then we’ll grab another image for the right side and stretch it too.

We’ll take a look at how to work with grids in more detail later on, but for now, let’s add more elements to this section.

From the Add panel, under Media you can choose from a selection of curated images, or from your own personally uploaded files. We'll choose this one and drag it into place.

Select the icon on the top right to open the Inspector panel. This is where you can control the size, position and behavior of all elements on your site.

Notice how this element scales proportionally to the screen size as we move the resize handles. That’s because this element is set to fluid, meaning it will resize and scale relative to its parent container, viewport width or height.

If we set this image to fixed, it will keep the same size no matter the screen size. You can see that fixed elements are measured in pixels, while fluid elements use relative units of measure to their parent container, like percentages.

Using our smart docking system, when you drag an element onto your canvas, it automatically docks to the closest edges of its parent container, indicated by these blue dotted lines. You can override this and manually set your docking from the Inspector panel.

In general, margins are used to create space around elements. You can add margins to maintain a set distance between an element and the edges of the container it’s docked to. Let’s add a top margin.

You can also edit the scroll effect, rotate the element and add an anchor.

Breakpoints

Now we’ll explore how to view and customize the site across breakpoints. Let’s head back to the Add panel to add some title text to our page. We’ll use text scale to set a minimum font size and a maximum. This will make sure the text gradually scales in relation to the screen size.

Now let’s change the text color to grey. When we move to tablet, you can see the title appears grey too. This is because it follows the cascading rule—any style changes you make to one breakpoint will cascade down to smaller breakpoints, but not the other way around.

So if we change the text color back to black on tablet, when we view the mobile version, the text will also appear black, yet on desktop, the text will remain grey. Changes in hierarchy, however, such as re-parenting an element by removing it from its container, are reflected across all breakpoints.

Stack

Now we’ll explain how to use stack to maintain the vertical order of your elements. First, let’s add some more text from the Add panel, and drag it into place. Great.

Next we’ll go to the Decorative tab of the Add panel to grab a horizontal line for our design.

From the Add panel, you can use the Quick Add section to grab a common element. Let’s grab a button, and customize it. We’ll change the font, adjust the size, and set the width.

While we already sized and positioned our elements on this breakpoint, you can see that as the screen gets smaller, they don’t have any spatial relationship between them.

Use Stack to maintain the vertical margins between elements and prevent overlap on smaller screens. Press the Shift key to multi-select the elements and click Stack. This places them inside a responsive flexbox container that maintains the margins between them.

The vertical margins are indicated by these blue strips.

Let’s use the Inspector panel to make final tweaks to the margins and positioning of our text and button.

Now when we resize the screen, you can see the elements maintain clear vertical margins between each other.

Grid

We’ll use this blue plus icon to add a new section to our page, and choose Grid. CSS grid is useful for creating intricate layouts. You can precisely position your elements within a 2 dimensional space.

We’ll create a custom grid of 2x4 and click Apply.

To edit your grid, select Adjust Grid, then Edit Grid. Choose the row you want to edit on the left hand side.

Grid rows and columns can be sized using units like fractions, viewport height and viewport width—or by pixels. We’ll use viewport width here to scale the grid proportionally with the width of the screen. Next, click Done.

Sections and containers have a minimum height to prevent them from collapsing while they don’t have any content in them. To make sure our section takes the height of the grid instead, we’ll remove its minimum height.

Then we’ll add horizontal lines from the Add panel to outline our grid.

Let’s go to the Add panel to fill in these grid cells with text.

We’ll edit our text and use the Inspector panel to align it to the middle and set the left margin to 8%.

The elements in a grid dock to the nearest grid line, as opposed to the nearest edge of their section.

Let’s fill out our grid by duplicating the text and repeating the same actions for the other 4 text boxes.

Then we’ll head to our previously uploaded media to add an arrow shape.

We’ll give it a width of 7%, align it to the right, dock it to the right, and add a right margin of 6.5%.

Let’s do the same for the rest of the cells in our grid.

Next we need some content in the first and second rows of our left column. Ok now we'll set the text to scale from 10 to 50....and use the inspector panel to adjust the size and positioning.

In these bottom 2 rows on the left, we’ll add an image and stretch it across both these cells.

We don’t want the image to cover the divider-lines, so from the Layers panel, we’ll drag the image so it’s beneath the other elements in the section.

Again, let’s double check the responsive behavior. OK nice.

For mobile, let’s edit the grid to better fit our design. Note, we’re working at a viewport width of 750px, for a better view of the canvas.

So first, we’ll add 2 more rows, then for our Row Height, we’ll choose the Min/Max unit. Now we can give each row a minimum height of 80px. This means that no matter the screen size, the height of each row will never fall below this value.

On mobile, we want this image to fill the top 2 rows on the right. So we can use the GRID AREA tool in the Inspector panel to set this position.

Now we’ll set the positioning of all of the text using the same GRID AREA method, and we’ll reposition our border-lines.

We don’t want these arrows to get too small — or squashed close to the edge of the viewport… so we’ll set them to Fixed, with a size of 24px — and a right margin of 26px.

Now let’s re-adjust the text boxes inside each cell. In this top cell, we’ll change the font size to 17, and use the inspector panel to size and position the text accordingly. Note, we’ve chosen a Fixed size to make sure the text break stays the same.

Let’s dock the text boxes to the left, and set a left margin of 30px.

Now our grid will look great on all mobile devices.

Layouter

Let’s take a look at the final design for our next section. To achieve this design, we’ll use a Layouter—a smart layouting tool made up of a collection of responsive containers.

First let’s add a new bank section to our page.

From the Add panel, under Layout Tools, you’ll find a selection of Layouters from customizable blank wireframes, to designed layout suggestions. We’ll choose this one.

Built with flexbox technology, a Layouter is perfect for designing modular layouts with boxes that wrap at different screen sizes. The responsive boxes within your layouter are called Items. For our design, we don’t need this bottom item so we’ll select it and hit delete.

Use the plus and minus icons to adjust an item’s width by increments of 20%. Let’s make this item a bit wider so that it takes up the entire row.

Use the blue breadcrumbs to select the layouter.

From the floating action bar, we’ll change the layout by removing the horizontal and vertical margins, and stretch it to fill the section.

Let’s go to our media library to add an image to the top item.

We’ll attach it to the item and center it. We want the image to always fill the width of the item, so we’ll set the width to 100%, but keep it at a fixed height of 420px.

Alt: We’ll attach it to the item and center it. We want the image to always fill the width of the item, so we’ll set the width to 100%, but keep it at a fixed height.

Now we’ll add another image, attach it to the bottom left item, center it, and set the width to 100% so that it’s exactly half the width of the item above, yet the same fixed height of 420px.

From the breadcrumbs, we’ll select the section and set the minimum height to none so that the height of the section will be determined by the layouter instead.

Let’s see how it adapts across viewports. Excellent.

We’ve already added some vector icons, so let’s now add some text to these items.

First we’ll add a title, change the font, and adjust the size and positioning. Then we’ll add a description to go underneath, customize it and stack both the title and description together to control their relative positioning. Great.

Now, when we transition between viewports, you can see the items in the layouter seamlessly wrap as they adapt to the new screen size.

To adjust the layout on mobile, we’ll use the blue breadcrumbs to select our layouter, and click Change Layout.

To optimize space on smaller screens, let’s display the content in Rows and reduce the height of the image to 233px.

Repeater

Moving on to our final section where we’ll explore the power of a repeating layout. First, we’ll add another blank section.

And we’ll use the Quick Add shortcut to drag a repeater onto our canvas. A Repeater is a multi-box flex layouting tool that is especially useful for displaying dynamic content with uniform styling. Great use cases would be team profiles, feature listings, or projects.

We’ll select Change Layout to remove the horizontal and vertical margins, and stretch it to fill the entire section.

Then we’ll select the left item of the repeater and apply a 1x2 grid. Style changes you make to one item will automatically reflect on all items in a repeater.

From Edit Grid mode, we’ll set the height of the first row to 48vw, and the height of the second row to 13vw.

Now we’ll grab an image, drag it into place and stretch it to fill the entire row. Notice how this image automatically repeats across all items.

Let’s add some text to the bottom of our row, change the font, set the text to scale from 5 to 36, change the text color to white and align it to the center.

By default, the Repeater appears with a grey background color. To remove this, we’ll use the floating action bar, under design, and decrease the background opacity to 0%.

To add more text to our Repeater, we’ll grab a paragraph textbox from the Add panel…. and attach it to the item.

We’ll choose a font and set the text to scale from 4 to 32.

From the Inspector panel, we’ll center it, make sure it’s docked to the center and set the width to 80%.

Now that we’ve finished making our style changes...let’s see what our Repeater looks like at different breakpoints.

Looks good, but we still need to customize the contents of our repeater.

We can manually edit our content directly from the canvas, or use a content manager to add and edit content without touching our design. Let’s take a closer look at how to use a content manager.

Content Manager

The content manager is our integrated CMS that lets you manage dynamic content behind the scenes of your site using collections. We’ll connect our repeater to a content collection. So first, from the creation bar, let’s Add a Content Manager.

You can choose from a variety of dynamic page templates, or select Blank to design it from scratch. We don’t need a whole new page — we just want to populate our repeater, so we’ll close this window for now, and create a new collection.

Let’s go for Blank and set it up from scratch.

We’ll rename our collection and start creating.

From here, we can start creating our collection. First, we’ll set the subject for each field, and then we can add our content.

Now, when we head back to the editor, and select our Repeater from the breadcrumbs, you’ll notice the data icon has appeared in the floating action bar. This indicates that we can now connect the Repeater to our data collection.

So the next step is creating a dataset. Click the dataset icon, select Create Dataset, then from the dropdown, choose the collection we just made, and click Create.

Now, we need to connect each item in our repeater to a field in our collection.

For example, we’ll connect the Image to the Image field in our collection, and this text, to the Name field of our collection.

Then our final text field, to the testimonial text field.

Now this green icon indicates that all these fields are connected.

Hit Preview to see your content displayed in the Repeater.

Right now, the changes we made aren’t visible on the live site. But once you’re ready, click Sync Sandbox to Live. This publishes the changes, so on your live site, the Repeater will display all the content from your collection.

Menu

Now let’s create a custom menu with anchors to help us navigate through the sections of our page. To add an anchor, select a section or any element, and from the Inspector panel under Anchor, toggle on and rename.

We’ll do the same thing for the next two sections.

Next we’ll go to the Add panel to select a pre-designed horizontal menu and drag it into the header. Since we created our site from a blank canvas, the menu will display a ‘Home’ item by default.

Let’s change the width and height to 100%, center it, and make sure it’s docked to the center.

Now we’ll select Manage Menu to add more items. First we’ll use the 3 dots to link our first item, and select Anchor to choose exactly what part of the page we want to link it to.

To add another item, select the link icon at the bottom, click Anchor and choose again where you want to link it to.

Don’t forget to rename your item each time you add it to the menu. We’ll repeat the same steps for our last item, and rename it.

Under Design, we’ll choose a font, adjust the text size, change the hover color to teal, and the click color to match.

On the mobile viewport, you’ll find a hamburger menu in the top right corner by default. In the Layers panel, you’ll see the previous horizontal menu component is hidden for you automatically. Make sure you don’t delete it, as it will remove the menu from your entire site.

Masters

Now let’s take a look at Masters, and how they can accelerate your creation flow. Notice that when we hover over our header and footer, they are highlighted in green. This indicates that they are Masters.

Changes you make to a Master will be reflected everywhere it’s in use on your site. For example, when we add a new page, it will automatically display our designed header and footer.

You can turn any section into a Master. Just select it, right click and choose Set as Master. Next you’ll need to indicate whether it’s a header, a main section or a footer. This last step is important for accessibility.

From the Masters panel, you can then choose which pages you want to display your Master on.

Publish

Once you’re done designing, click Publish to go live.

Dashboard

Now let’s go to the site Dashboard to explore how to manage the site.

The site dashboard is the homebase of operation for your site. From the dropdown you can view, rename, duplicate, transfer the site and more.

Below, you’ll see an organized checklist created to walk you through our features and help you maximize your creations.

Let’s take a closer look at the sidebar menu. Under Customer Management, go to CRM Home to use integrated business and customer management tools like contact lists, automations, reminders and more.

Under Marketing & SEO, you’ll find tools like email marketing, social posts and video maker.

Go to the Analytics & Reports tab to check the site visitor stats and create customized site traffic reports.

Under Settings, you view and manage site settings ranging from general information to roles & permissions, monitoring tools and more.

Editor X is an advanced creation platform. To learn more about the features covered in this video, watch our series of video tutorials on Academy X.