Changelog

We've updated the cloneables manager to allow you to create, edit and delete cloneables easier and faster.

Cloneables can be reused across project and workspaces. They speed up building especially for freelancer and agencies who build multiple sites that are similar.

Versoly is just HTML, this means you can copy elements from one site and paste them into another site using the same site collections variables. This is useful if you have a section with many for loops, conditional statements and connected variables.

Create

When creating a cloneable you can select it's

The name allows you to search for it in cloneables manager, insert element and insert componet.

The component category will allow it to be shown in insert component. It will be shown at the top by default to easily find.

Type has component, page and layout. Component is used for insert components and can be added to any page. When a page is empty you can set it to a page template or cloneable.

Edit

When editing a component from the cloneables manager you can edit

Name, component category and type are the same as the above and can be easily edited.

HTML can be copied, pasted and edited. For example if you decide to add a background to an element and want that to become the default for the cloneable you can copy the code and paste it into the cloneables manager.

We've added a new responsive typography editor inside the theme manager. It provides a powerful and intuitive way to create, manage, and preview typography classes for your website.

With this tool, you can easily add, edit, and delete typography class names, combining them with Tailwind utility classes for precise and maintable styling control.

Typography class names

Tailwind utility classes

Breakpoints, variant states and dynamic class names

Preview the responsiveness on mobile, tablet, laptop and desktop

Text input for class names

This update focuses on enhancing component development and management within the visual editor. Key improvements include slots, better class name handling, and streamlined workflow for components.

Component Slots

Component Class Names

Component Folders

Component Categories

Component Usage

Property Groups

Visual Mode Property Visibility

Add Component Properties Faster

Examples

Did we miss something you would like adding? Feel free to request it using live chat or inside the visual editor.

We've introduced a new tabbed interface in the visual editor for better organization and navigation between pages and components.

Tabs allow you to easily switch between different pages & components instantly inside of your project

We've introduced a new Playground Mode that allows you to experiment with your website projects in a secure, shareable environment.

With Playground Mode, you can:

Shareable

You can easily share the Playground URL with freelancers, team members, or anyone else you want to collaborate with. No sign-up or account creation is required for them to access and view your project in Playground Mode.

Debug

Playground Mode provides a perfect environment for debugging and troubleshooting your website projects. You can make changes, test different scenarios, and experiment without affecting your live website.

With Playground Mode, you can freely explore new ideas, collaborate seamlessly, and ensure your website projects are thoroughly tested before going live.

Secure mode

Creates a secure URL that only those who are given the link to can access. This can be reset if required.

Fixed URL

A fixed URL is useful if you're creating a project where you want anyone to be able to access it easily. It can be disabled.

Features

The new Xray mode allows you to easily see the element size and borders. It can be useful when you have many elements that overlap or are absolute positioned.

You can also check the margin and padding of any element by hovering it.

When editing a large page or component it can be difficult to find the element you want in the code editor and navigator.

This update auto scrolls to the selected element when the code editor or navigator is open.

Non-technical mode has been made simpler by removing advanced features and reorganizing the elements panel.

It is now clear what mode you're using and can easily swap between non-technical mode for content editing and designer mode for advanced design & structure changes.

After allowing customers to easily edit item and collection settings in the visual editor it became clear the next step was adding new items and duplicating items to improve the workflow even more.

Click any element then in the top navbar you will be able to click the collection and select from the dropdown add or duplicate item.

Editing and previewing collection items workflow before the ability to edit them in the visual developer was complex and could be confusing for new customers.

You can now easily edit collections and items inside the visual developer by double clicking an element that is linked to an item. This also works for elements inside a collection list.

Along side this update we added the ability to view and select related collection pages and components. This will make it faster to navigate to the right place.

Publishing was also cleaned up, you can now publish an item from the visual developer as well as the CMS text editor.

Shortcuts also allow you to quickly access the collection and item settings.

• shift + { for collection settings
• shift + } for item settings

Sliders are popular for testimonials and show casing work. After a lot of demand we decided to add them and use a popular open source JavaScript library to give customers a lot of flexibility.

We use Swiper JS and it comes packed with built-in features such as:

As always it is easy to use to flexible. You can start of with the default settings and if you need to customise it you can do so with the option settings.

Being able to build and launch sites fast is one of the main focuses of Versoly.

Emmet has allowed developers to quickly scaffold HTML structures since 2008.

It comes packed with features to add classes, ids and multiple elements at once. Currently the UI correctly shows 1 element with classes, ids and data attributes. However it supports the full library of Emmet.

A few quick examples of emmet syntax and what it will add to the HTML:

Emmet have a great cheatsheet on their site that is worth checking out.

A lot of you use Google docs to write blog posts and other content. Copy pasting it into Versoly requires manual editing to make sure the formatting is correct.

A year ago we made a lot of updates to clean the HTML and make sure features like lists and images worked when copied across. But there were still some issues.

We have added auto formating for

We're always looking to improve this feature so if you have any requests send them across.

Reusable components allow you to make changes once and have them update everywhere.

Components can also be nested inside each other making them very powerful. As an example a card component with nested tags.

Adding attributes to a component allows you to use the UI to make changes to the component without code.

Every landing page and website has a style guide. It is usually hidden away and hard or impossible to access.

We decided to make the style guide a first class feature that can easily be accessed (shortcut - G).

There are over 15 different components and 10+ pages for colors, typography, and grids.

The style guide will be improved continuous and each site will get the changes for free without having to run updates themselves.

We have added the ability to open a command center using the shortcut CTRL + K.

The command center has 100s of commands that can be searched. It also shows recent commands and allows you to add favourite commands.

Like the shortcut update it will save you from having to click.

The command center makes it possible to not bloat the UI while adding more functionality for power users.

Power user features include wrapping elements in divs and cards.

If you want a command adding feel free to request it.

Versoly already included a few shortcuts while editing text and made it easy to copy and paste elements.

As you use Versoly more clicking can waste a lot of time. Shortcuts can speed up the process of building a site while keeping you in flow.

Shortcuts for opening panels like pages (P), adding elements (A) and themeing (T).

You can also navigate around the page using the arrow keys and move elements while holding control.

With the ability to add custom collections the collection list panel can become cluttered.

All sites have now moved over to the new collection folder system.

To update existing sites press the "Update Collection" button.

It is now possible to edit all date formats for each CMS.

We use moment.js for our date formatting, it is extremely powerful and you can customise the dates using their formatting style. This cheat sheet from Devhints is a great starting point.

Also the locale can be changed for dates so they use your local language instead of English. We support 130+ locales including French, German and Japanese.

Whenever you change the slug of a page or CMS post, we’ll automatically create a 301 redirect for you.

Visitors and search engines will be redirected to the new slug from the old one. This helps keep your search engine ranking.

You will have the option to cancel or you can remove it later from redirect settings.

You can now build sites with no-code, we hide a ton of options and automated a lot of processes such as forms and mobile responsiveness.

Flexibility is one core part of Versoly values. You should never be limited to what you can and can't do inside the editor.

We hit that goal a while ago and after talking with customers we noticed that a lot of non-technical customers struggle with building their sites. So this new update should make it a lot easier & less scary to build a website.

The element options sidebar can now be undocked, this is huge if you're using a small screen as you can move it around and hide it while editing text and other content.

We also updated the drag & drop to make it smoother. You can drag any element inside a column and place it inside another column. This helps to keep your pages responsive.

We have just added 1 column and 3 column blog layouts. We also polished up the sidebar layout to make it easier to edit.

It is also now possible to edit the blog card layouts to hide dates, authors and change the font size of headers and text.

We plan on adding more blog layouts in the future. If you love a design feel free to send it in live chat and we might just build it!

We just added a new template engine based on TailwindCSS. It is 10x more flexible and due to new tech the pages load even faster than our old system (97 vs 100 on mobile).

All the blocks + templates have been updated to the new system and the element options on the side has also been updated. There are more options such as letter spacing, line height and more font sizes.

To get started with the new template engine start a new project. This will give you access to the new templates + blocks.

We plan on adding 100s more templates + blocks so you can build and launch landing pages quicker.

We have added multiple ways to check for spam from forms.

We use timers, honeypots and other backend scripts to check that a form is not spam, but we want to make sure that we don't block legit forms.

We will be continuously improving the spam protection as it's a key feature for Versoly.

To enable spam protection go to your form and on the right hand side you can enable spam protection.

Lazy loading can improve page speed and user experience on your website. Browsers recently made it a lot easier to add this functionality without custom code.

To enable lazy loading of images and videos click on the element and then select from the element options on the right hand side.

Copying and pasting into Versoly from Google Docs and Word worked for most cases, but each platform has different formatting and for complex use cases there would be small issues like extra or no spacing between words especially links.

Those issues have been fixed and a lot of other block types have been optimised such as lists which created a lot of extra formatting. By cleaning the formatting up your page will load faster and will render better on all devices.

Text Editor Flexibility

We love flexible software so we decided to improve the CMS text editor.

The text editor uses our page editor, so instead of hiding the element options we will now show it. This means you can easily edit everything.

None of these new features will slow your website down as they are built with page speed in mind.

Preview Blog Posts

We wanted to launch the CMS quickly and decided to miss a few quality of life features such as previewing.

In this update we sorted that out. Preview your blog home and blog posts before publishing. That way you know exactly how it looks.

In the next update you will be able to preview knowledge base articles, changelog updates and more advanced blog pages such as categories, tags and authors.

Improved UX

In Versoly 2.0 we added a new core engine that allows us to add "smart" content management systems quickly.

Everything we add to our core engine is automatically added to the changelog CMS. This includes SEO (sitemaps, metatags, pagination), team access, custom design (fonts, navbars, headers, footers) and analytics.

In the future we will add the ability to fully customise the page without code and have multiple templates that fit your brand perfectly.

RSS Feeds are now autogenerated for blogs. Just republish your blog and go to /blog/feed.xml to access it.

Use the new "+" buttons inside the navigation bar to easily add images, text and links.

The new spacing UI should make it easier to see the padding and margin of each element by screen size.