Editing your website with Widget Styles | bowweTutorials

Hi, how can we help?

Editing your website with Widget Styles

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. Color
  2. Text
  3. Size and 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.

Colors tab - basic settings

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 rotattion

Choose the angle at which you want the shadow to fall

Odległość
Choose the distance of the item from its shading
Rozmycie

Blurs shading

Wielkość

Sets the amount of shading

Text tab - basic settings

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

Widget graph

Widget graph lets you specify the margins, borders, border-radius, and paddings of the selected widget.

Size and Position tab - basic settings

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

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 - basic settings

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