UI/UX updates


Along with the new complex features, our team developed some important UI improvements in Suitebuilder during the last year. Here are the highlights of the enhancements we made.

Page layout flexibility enhancements

These enhancements include a set of capabilities that help end-users better customize their design and layout workflow.

Ability to cut, copy, and paste blocks 

Users can now copy or cut a block on one page and paste it across different pages of the website if they need to put the same information on multiple pages. To make these functions visible, we added the More icon to the block’s Control pane, which triggers the drop-down list with the copy, cut, and paste options. 

This feature also allows users to reuse existing block content as a template for creating new content faster. 

Move up and Move down options

We analyzed our users’ behavior and discovered that most of them move blocks one down or one up on the page. So, to make the process of moving blocks through the layout even simpler, we replaced the drag-and-drop feature with more straightforward Move up and Move down options in the blocks.  

Ability to change the width of the block title 

According to our in-app survey, many users requested us to implement more design customization options for their blocks. To give our users more opportunities to create unique designs, we added the ability to change the width of the block titles. Now the title containers are extendable, and the block layout automatically adjusts to the changes. 

Watch the video below to see how these enhancements work. 


Content editing improvements

We’ve enhanced various content editing features to make user experience better and help speed up the site-building process for our users. 

Header preview improvement

Previously, when trying to change the title type, users saw a drop-down list of options that did not differ visually, making it hard to choose the relevant option. We changed that, and now the drop-down list shows the preview of the elements and gives users an idea of the size and font of the header options. 


Usability improvement for content alignment options

Our research showed users struggling with the previous implementation of content alignment options. This is why we reconsidered our approach to the content alignment settings and made them more accessible. In particular, the button alignment pane is now available upon clicking on the respective button and the Horizontal alignment section is available in the Block settings > Appearance tab for the necessary blocks. 

Footer links usability improvements

The footer links customization is now simplified. We’ve gathered all the link settings in one menu,  making interacting with them easier. Also, we improved the UX for changing the footer navigation items order.


Content discoverability

To make the search option easier to reach for the users, we moved the search field from modal headers to the content part in the extensions, such as Page manager, Google maps settings, Icon settings, and Free stock photo library.

Time input option support for contact forms

We extended the contact form builder functionality. Except for basic fields such as name and email address, users can now add the preferred date and time of contact. This lets website owners provide a better user experience for their visitors. 


Custom block behavior enhancements

Along with the Control pane’s behavior improvement in Custom block, we added approximate thumbnails to the widget dialog windows instead of icons. Now users have a better idea of what the widget looks like before adding it to the canvas.

Check these improvements out now on our demo site by clicking Get Started for Free. Feel free to reach out via support ticket — we look forward to hearing your feedback.

Was this article helpful?
0 out of 0 found this helpful