The Style Panel of Droip is basically where all of the magic happens. From here, you can customize every aspect of your element’s style.
Located on the right side of the screen, you’ll notice that the Style Panel is made up of the following sections:
- Class Manager
- Typography
- Structure
- Size
- Background
- Stroke
- Shadow
- Effects
- Position
- Transform
- Transition
- Interaction
As you can tell from this list, you can customize your element’s typography, structure, background, and more from here. Not only that but you can also duplicate your style settings with the help of sub-classes and reuse them throughout your design process!
Class Manager
The Class Manager is where you can define Classes to duplicate and reuse the style settings of an element. This means you don’t need to manually customize each and every instance, saving your time and effort.
This is also where the States Menu is located and from here you can switch between the various States of an element and define its behavior and style for that state. With the help of this feature, you can design a highly responsive and interactive website.
The default States include None, Hover & Focus. However, you also get a range of other states known as Pseudo Classes to choose from.
You can also access the Inheritance Menu from here by clicking on the dropdown above the Selector field. This menu will show all of the parent and ancestor classes of this element and you can click on one to edit that class from here.
For more information about this section, check out the Class Manager documentation.
Typography
Using Typography settings, you can ensure that your content is legible and visually appealing. From here you can adjust your text’s font, font size, font weight, alignment, and more.
Not just that but from the Advance Font Editor, you can access even more customization options. Take a look at the Typography documentation to learn more.
Structure
From Structure, you can define how your element and the elements around it will be displayed on the canvas.
To change your element’s Structure, click on the dropdown that’s located here. You’ll find the following Structure types to choose from:
- Block
- Inline
- Inline Block
- None
- Flex
- Grid
You can also adjust your element’s Padding and Margin values from here. Simply click and drag any one of the sides to adjust them. You can match the values for all sides, or just some of them, or even define each one differently.
To learn more, check out our documentation on Structure.
Size
As the name implies, using the settings from the Size section you can define the height, width, and Overflow of an element.
You can also set the Minimum and Maximum values for size as well as enable Clip Content from here. Please visit the dedicated documentation on Size to learn more.
Background
Next up we have Background settings and from here you can add Solid, Gradient, and Image type Backgrounds.
When it comes to Gradients, you can also choose between Linear, Radial, or Conic Gradient types.
You’ll also be able to Clip Backgrounds from here and this includes the Text option which is a nifty way to have Image Backgrounds adopt any text content’s shape!
To learn more, visit the Background documentation.
Stroke
From the Stroke section, you can add a Border around any element. You can set this border’s size, color, and style.
You can also adjust any element’s Radius from here. This will curve the edges of your element to give it a more rounded look.
Similar to borders, you can add an Outline around your element too. Outlines are different from borders because they’re drawn outside the element’s edges instead of over them.
For more info, check out Stroke’s documentation.
Shadow
Then we have the Shadow section and as the name suggests, from here you can add Shadows to your elements.
You can choose from two types of Shadows: Outer Shadow and Inner Shadow. For both, you can adjust the Horizontal Offset, Vertical Offset, Color, Blur, and Spread.
You can also use one of the preset shadows instead of creating one from scratch. Similarly, you can save your current shadow settings as a preset for later use.
More information on this can be found in the dedicated documentation for Shadow.
Effects
Apply various Effects on your elements from this section. Effects include Opacity, Blur, Brightness, Contrast, Saturation, Invert Color, Grayscale, Hue Rotate, and Sepia.
You’ll also be able to change the Cursor style from here with a range of options to choose from.
Also, applying these effects based on specific states can help you improve the interactiveness of your website.
To find out more about this section, take a look at the documentation on Effects.
Position
Define the placement of your elements using the settings in the Position section. You can set the Position type as Static, Relative, Absolute, Fixed, or Sticky. You can also access the Float and Clear settings from here.
For more details, check out the Position documentation.
Transform
Using the options in the Transform section, you can manipulate an element’s appearance and placement. This feature is usually used in tandem with a specific state to add animative interactions.
Transformation options include Move, Rotate, Scale, and Skew. Use Move to shift an element’s position, Rotate to change its angle, Scale to increase or decrease its size, and Skew to change its shape.
You can also enable 3D Transformation from here to transform elements from a 3D perspective instead.
Learn more about Transform.
Transition
Transitions are where you can add fluid animations to an element when it switches from one state to another. This helps make the switch less jarring and results in a better user experience.
To add a Transition, all you have to do is select the State you’ll be switching to and choose which aspect to animate. Then you can set its Duration, Delay, and Timing Function.
For more info, check out Transition’s dedication documentation.
Interaction
Interaction is where all the fun really happens. You can use this feature to make your website more engaging and user-friendly.
Using Interaction, there are tons you can achieve like making a dropdown menu appear and disappear on hover, animating a group of elements when you scroll down a page, expanding an image when clicked on, and so much more.
You can apply Interactions to both Elements and your Page. If you select Elements, your Trigger options will be the following:
- Mouse Click
- Mouse Hover
- Mouse Move Over Elements
- and Scroll Into View
If you select Page instead, your Trigger options will be:
- Mouse Move on Viewport
- While Page is Scrolling
- Page Load
- Scroll Into View
- Page Scrolled
Once you select your Object and Trigger, you can either select one of the preset responses and adjust that or create your own Custom Response. Since Droip offers a fully visual Interaction Builder, this is a pretty straightforward process.
For more in-depth information, please take a look at the Interaction documentation where we go over the entire process step by step.
