Widget Styles - how to edit elements in BOWWE?

BOWWE University

Widget Styles - how to edit elements in BOWWE?

In BOWWE you can use Widget Styles to style all the elements of your website. In this tutorial, you will learn all the necessary functions of widget styling.

How to open the Widget Styles?

1

Open the design of your website in BOWWE

2

Double-click the widget you want to edit

3

Click the icon Widget Styles

4

Now you can edit the selected widget

What Widget Styles consist of?

Widget styles consist of four tabs. These are:

  1. Style
  2. Font
  3. Position
  4. Animations

These four tabs contain almost all the possibilities for editing the widget.

You can check the essential functions and settings of each tab below.

Widget Styles - basic settings

Style tab 

Background
Color
Check this option to unlock the ability to choose a background color

Choose color

Let you choose a specific background-color
Choose an icon

Let you choose a picture or graphic to be displayed in the background

Gradient
Lets you select the colors that are included in the background gradient
Effects
Rotation

Rotates the element the specified number of degrees °

Disable shadows
Disables the ability to add shading to an element
Add shadow
Adds shading to an element
Outer/Inner

Select the outer or inner shading of the element

Color

Choose the color of the shading (usually black looks best)

Shadow rotation

Choose the angle at which you want the shadow to fall

Distance
Choose the distance of the item from its shading
Blur

Blurs shading

Size

Sets the amount of shading

Font tab 

Font
Typeface
Choose a font

Weight

Choose a font bolding
Size
Choose the size of the font

Line height

Choose the amount of leading
Color
Choose a color and% of the font fill
Text align
Select the text alignment

Position tab 

Size
Width
Choose the width of the element

Width Min - Max

Select the minimum and maximum width of the element that the given element will take depending on the screen resolution
Height
Choose the height of the element
Height Min - Max
Choose the minimum and maximum height of the element that the element will take depending on the screen resolution
Size adjustment
Adjust the size of the element

Widget graph

Widget graph lets you specify:

 

  • Size
  • Margin
  • Padding
  • Border
  • Border-radius
  • Outline
Style your elements by changing their shape, frame and spacing between them.

All-In-One Settings

All-In-One Settings is a shortened version of the Size and Position tab, which will allow you to quickly edit the most important settings for the element's position.

Border setting
Choose which side border you are editing

Width

Border width
Width Border color
The color of the border
Width Border Style
Border style
APPLY TO ALL SIDES
Apply border styles to each side
Padding setting

Choose which side padding you are editing

Padding Size
Choose the size of the padding
APPLY TO ALL SIDES

Apply the padding size to all sides

Margin setting

Choose which side margin you are editing

Margin Size
Choose the margin size
APPLY TO ALL SIDES
Apply a margin size on each side

Animations tab

The animations tab allows you to choose at what point the element animation will be displayed for the visitor of your website. You can choose:

  1. On entry - the animation will be displayed immediately after entering the website
  2. On hover - the animation will be displayed when you hover the cursor over the element
  3. To exit - the animation will be displayed before closing the page

Then you can choose the specific type of animation you want to apply to the element.

Congratulations!

You know how to edit your website with Widget Styles!

Dedicated to you

Didn't find the answer?

No matter what your problem is. We are here to help you find a solution.

LET'S TALK

Banner of the European Union donation

The support of small and medium enterprises in the promotion of product brands - Go to Brand from the Intelligent Development Operational Program 2014-2020,

co-financed by the European Regional Development Fund.