We're excited to enable custom style for basic element states (hover, active, focus) with Interaction, shared styles with Classes, and improve layout rendering
update • 01 Dec
We're constantly working to improve our product for a better experience. Below are some changes and improvements we've made in the past month for Inverr.
A class allows you to apply some specific styles to any element that use that class. It's convenient for repeatable or similar elements where you can't use Symbols.
You can manage classes elements from the Designer Panel header (on the left of the Interaction state dropdown list).
To create a new class, select an element (let's use a header in this case):
text (on the left of
:normal). The Target popup will apear
my text class
Enter to create the class
Now, the new class is created and will be added to the header element.
To add an existing class into an element, after selecting the element:
text (on the left of
:normal) to open Target popup
To custom styling for an existing class:
Small impression count. Interactions are basic events like when moving your mouse over an element (hover event), a button is being clicked (active event), or when editing a text input (focus event).
With the new updates, you can now enrich each interaction with custom styles. For example, expand a container height or change text color on the hover event.
To custom style an element for a specific interaction, select the element then:
From the Designer Panel's header, click on :nomal to open the Interaction state dropdown list
Choose the interaction you want (i.e Hover)
Start making changes (including from the Designer Panel and Toolbar). Remember to switch back to the Normal state, if you want to update the element's default style (or simply select a different element to return to the Normal state).
After completing the changes, you can review by hovering your mouse over the element.
You can intentionally influence the browsing experience by setting the speed of style changes between each state on an interaction.
For example, some websites change the link color or a button background at ~200ms, making users feel they're browsing a high-performing website. Or some websites selling luxury items, the speed of interactions is slower, giving a feeling of relaxation, or confidence.
You can control the speed and other options with the Transition options. They're available from the Designer Panel > Effects options.
Dynamic pages or when navigating between pages used to have a 3 seconds delay to make sure everything was loaded properly. But we've made some updates recently to instantly update the layout when ready. And often is less than 1 second.
Besides the above changes, there are a few improvements such as:
That was the November update highlights. To sum up, you can use element class to share styles between elements, and interaction to customize style changes of an element on hover, focus, or active.
Feel free to leave your feedback, and thanks for your support.
Rebit provides a set of tools, make it easier to change, help you save time and money to evolve your business
© 2021 Rebit