In WordPress 5.4, web designers can see more improvements to the new Block Editor, with new blocks, colour options and custom buttons. In the same week, Elementor Pro released their v2.10, with the arrival of custom multi-step forms and animations made simple. Our web design experts review the latest features added to WordPress 5.4 and Elementor. We look at what’s new, what’s changed and how designers might use these features to build more intuitive user interfaces.
What is WordPress 5.4?
WordPress is a web design platform used by many designers and developers as a foundation for building high-quality custom websites. From a business perspective, using WordPress allows clients to log in and make minor changes to their new websites easily.
WordPress 5.4 is the platform’s first major release of 2020. Most of the updates centre on the new Gutenberg Block Editor, introduced in WordPress 5.0.
Some users are resistant to this change and have installed the Classic Editor plug-in to regain WordPress’s original functionality. While this quickly preserves ways of working, the Classic editor is unlikely to be updated in the near future. WordPress users face a choice between adapting to the Block Editor or missing out on the benefits of future updates.
The Block Editor is easy to learn how to use. After investing time in getting to grips with a new system, many users find it an intuitive and functional way to build bespoke pages with different types of content. The Gutenburg Block Editor removes the need for separate plug-ins for each content type, such as a table. Blocks can be grouped and reused for standardising your layouts across your website. You can also save formatted blocks to use across the site. These update automatically when you make changes to one, saving valuable time.
What is Elementor Pro?
Elementor Pro is a WordPress plugin, used by designers to create visually engaging layouts from a front-end perspective. This allows developers to build websites more quickly and intuitively, using generic features built by trusted sources.
New Opportunities for Creative Web Design
The updated WordPress interface uses a fullscreen editor by default to maximise the user’s workspace. This change is apparent if you access the editor from a new device or browser, but will not be noticeable if you use your regular browser to upgrade from WordPress 5.3. By eliminating the browser controls, the block editor’s features are more spread out, allowing developers room to focus. To exit fullscreen, click on the Editor settings and uncheck the ‘Fullscreen mode’ box. To disable the default, use this WordPress tutorial.
New Button Blocks: Call To Action and Social Icons
WordPress 5.4 brings the block editor new capabilities to speed up your page creation, with new blocks to customise. These update globally, so by changing the block settings on one page you can update this block everywhere it is used.
Call to Action
Using buttons on a web page is a clear way to guide viewers through a website’s content. With these standard Button blocks, designers can choose from two styles, custom text and gradient colours across the button.
Drive page viewers to social media platforms by adding the Social Icons block to pages and posts. While this is a standard feature for most websites, building this feature into a page can be time consuming and cumbersome. The Social Icons block can be added using a keyboard shortcut (/soc) and is easily customised. Simply click on the “+” button to select a social network, then click on the icon to link to a profile.
This block does not add social sharing buttons to help viewers share your content, however, so will not widen your reach. Instead, when viewers click on these icons they reach your social media pages. Here, they can subscribe for regular content updates and become a part of your community.
WordPress 5.4 users will also be able to embed TikTok videos into their posts to share content from the fastest-growing platform of 2020. By pasting the video URL into the TikTok block, WordPress automatically embeds it just like it would for a YouTube video.
What does WordPress 5.4 improve?
A Broad Spectrum: Colour Customisation
Many blocks now have a wider range of colour options, increasing opportunities to create original and visually striking pages. You can now select background colours with gradients across the block, and even choose background and text colours to adjust all elements of a group block together. This can make column separation clearer and easier to follow.
With WordPress 5.0, we could only change text colour paragraph by paragraph. Now, we can adjust the colour of specific sections within a paragraph block, creating clearer and more engaging copy.
Web Design made Mobile
The upgrade also improves the block editor’s toolbar functionality when used on mobile devices. WordPress 5.3 users complained that the toolbar moved around on mobile, making it difficult to use. This bug has now been fixed, enabling page and post editing from anywhere.
Finally, the Latest Posts block now includes the featured image next to the title of each post. This means we can use visual cues to direct viewers to the content that interests them most.
Keyboard Shortcuts for Developers
Developers using WordPress5.4 can now use the new package, [@wordpress/keyboard-shortcuts] to add keyboard shortcuts to the block editor for faster use. Read more on this in WordPress’s developer tutorial.
What’s New in Elementor Pro v2.10?
Elementor Pro released v2.10 on 9th June 2020, with two new features which make pages more engaging and accessible.
Elementor Pro users voted for the new multi-step form builder by a social media ballot. The Multi-Step form helps designers make long online forms less intimidating to consumers. The effect of this is to increase business leads and conversions from interest to purchase. The form block is fully customisable. Designers can choose colour, style and how to show steps. Progress through the form could track with numbered steps, icons or a sleek animated progress bar.
The upgrade contains all the advanced form fields that Elementor introduced in 2019, including the opportunity for file uploads. These forms can help website viewers do anything, such as ordering goods, registering interest in a class or applying for a vacancy. Results gathered via the Elementor Multi-step form need to be stored using a free database plugin called ‘Elementor Contact Form DB’.
Unfortunately, the multi-step form feature can’t handle conditional logic yet, so funnelling respondents based on their answers is not possible. However, hopes are high within the Elementor team that conditional logic will be available with Elementor 3.0.
The Lottie Animations Engine is a widget to help designers create more interactive and engaging websites, without hours of development time. The Animation artwork is lightweight, SVG, 100% responsive. Because it takes up very little space in the code, it only adds minimally to the website’s load times.
Designers can choose from thousands of prebuilt animations and adjust their colours and positioning on the page. It is also possible to customise the animation’s triggers and reverse animation, meaning they can interact with user actions such as scrolling or hovering the mouse over an image, directing visitors towards the key information.
These animations may encourage users to scroll further down the page by triggering an animation at a certain point. This guides potential customers on to essential information. Another example of animation use is to highlight Call To Action buttons using a Lottie animated arrow or other directional image.
Lighthearted web design
Websites constantly expose readers to distracting content. Notifications, adverts and other programmes demand attention, meaning that designers have to find subtle ways to hold their audience’s gaze without seeming to add to the noise. When a website is aesthetically appealing, it’s not surprising that we want to keep looking and exploring, but pages need to be informative and directive as well as beautiful.
By varying the colours of text and block backgrounds, or using buttons and multi-step tools, designers break up information into manageable chunks, making pages less intimidating. Designers can also use animations to gently draw the reader’s eye from one section to the next, encouraging them to read on. Linking the animation to scroll or mouse hover allows the reader to be in control and avoids the page adding to the collective noise of the modern world.
These updates point to a continuation of the trend for web design to be lighthearted and visually engaging, with a focus on social connectivity. Simple cartoon animations are becoming a cheap alternative to bespoke illustrations and professional photographs, and can say a lot about a brand’s outlook or personality. Designers must keep this in mind when using animations in web design, choosing the right drawing style for the audience, tone and subject matter.
To see some examples of our work with WordPress and Elementor, visit https://kijo.co/web-design/