{"id":9019,"date":"2022-03-09T01:08:00","date_gmt":"2022-03-09T08:08:00","guid":{"rendered":"https:\/\/www.yola.com\/blog\/?p=9019"},"modified":"2022-09-05T03:46:50","modified_gmt":"2022-09-05T10:46:50","slug":"ui-ux-updates-in-sitebuilder","status":"publish","type":"post","link":"https:\/\/www.yola.com\/blog\/ui-ux-updates-in-sitebuilder\/","title":{"rendered":"UI\/UX updates in Sitebuilder+"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<h2><strong>Page layout flexibility enhancements<\/strong><\/h2>\n\n\n\n<p>These enhancements include a set of capabilities that help you better customize their design and layout workflow.<\/p>\n\n\n\n<h3>Ability to cut, copy, and paste blocks&nbsp;<\/h3>\n\n\n\n<p>You can now copy or cut a block on one page and paste it across different pages of the website if you need to put the same information on multiple pages. To make these functions visible, we added the More icon to the block\u2019s Control pane, which triggers the drop-down list with the copy, cut, and paste options.&nbsp;<\/p>\n\n\n\n<p>This feature also allows you to reuse existing block content as a template for creating new content faster.&nbsp;<\/p>\n\n\n\n<h3>Move up and Move down options<\/h3>\n\n\n\n<p>We analyzed users\u2019 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.&nbsp;&nbsp;<\/p>\n\n\n\n<h3>Ability to change the width of the block title&nbsp;<\/h3>\n\n\n\n<p>According to our in-app survey, many users requested us to implement more design customization options for 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.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=V8LB7jg1q8k\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"Watch the video below\">Watch the video below<\/a> to see how these enhancements work.&nbsp;<\/p>\n\n\n\n<h2><strong>Content editing improvements<\/strong><\/h2>\n\n\n\n<p>We\u2019ve enhanced various content editing features to make the user experience better and help you speed up the site-building process.&nbsp;<\/p>\n\n\n\n<h3>Header preview improvement<\/h3>\n\n\n\n<p>Previously, when trying to change the title type, you 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 you an idea of the size and font of the header options.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blogcontent.yola.com\/uploads\/2022\/09\/image-01.png\"><img loading=\"lazy\" width=\"1406\" height=\"750\" src=\"https:\/\/blogcontent.yola.com\/uploads\/2022\/09\/image-01.png\" alt=\"Header preview improvement\" class=\"wp-image-9020\"\/><\/a><\/figure>\n\n\n\n<h3>Usability improvement for content alignment options<\/h3>\n\n\n\n<p>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 &gt; Appearance tab for the necessary blocks.&nbsp;<\/p>\n\n\n\n<h3>Footer links usability improvements<\/h3>\n\n\n\n<p>The footer links customization is now simplified. We\u2019ve 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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blogcontent.yola.com\/uploads\/2022\/09\/image-02.png\"><img loading=\"lazy\" width=\"1406\" height=\"750\" src=\"https:\/\/blogcontent.yola.com\/uploads\/2022\/09\/image-02.png\" alt=\"Footer links usability improvement\" class=\"wp-image-9021\"\/><\/a><\/figure>\n\n\n\n<h3>Content discoverability<\/h3>\n\n\n\n<p>To make the search option easier to reach, 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.<\/p>\n\n\n\n<h3>Time input option support for contact forms<\/h3>\n\n\n\n<p>We extended the contact form builder functionality. Except for basic fields such as name and email address, you can now add the preferred date and time of contact. This lets you provide a better user experience for your website visitors.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blogcontent.yola.com\/uploads\/2022\/09\/image-02-1.png\"><img loading=\"lazy\" width=\"1406\" height=\"750\" src=\"https:\/\/blogcontent.yola.com\/uploads\/2022\/09\/image-02-1.png\" alt=\"Time input option support for contact forms\n\" class=\"wp-image-9022\"\/><\/a><\/figure>\n\n\n\n<h2><strong>Custom block behavior enhancements<\/strong><\/h2>\n\n\n\n<p>Along with the Control pane\u2019s behavior improvement in the Custom block, we added approximate thumbnails to the widget dialog windows instead of icons. Now you can have a better idea of what the widget looks like before adding it to the canvas.<br>Check these improvements in our <a href=\"https:\/\/editor.yola.com\/\">editor<\/a>. Hope you\u2019ll enjoy them.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 you better customize their design and layout workflow. Ability to cut, copy, and paste&hellip;&nbsp;<a href=\"https:\/\/www.yola.com\/blog\/ui-ux-updates-in-sitebuilder\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">UI\/UX updates in Sitebuilder+<\/span><\/a><\/p>\n","protected":false},"author":24,"featured_media":9084,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"[\"title\",\"meta\",\"content\",\"tags\",\"comments\"]","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","neve_meta_reading_time":"","_themeisle_gutenberg_block_has_review":false},"categories":[9],"tags":[1112],"_links":{"self":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/9019"}],"collection":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/comments?post=9019"}],"version-history":[{"count":5,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/9019\/revisions"}],"predecessor-version":[{"id":9085,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/9019\/revisions\/9085"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/media\/9084"}],"wp:attachment":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/media?parent=9019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/categories?post=9019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/tags?post=9019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}