Widget Styles - how to edit elements in BOWWE?
BOWWE tutorials
Welcome to our collection of online lessons. We’ve created these to help you learn the best practices and get the most out of BOWWE. Come back here whenever you want!

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 in BOWWE Builder?

  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:

  • Style
  • Font
  • Position
  • Animations


Basic - changes made in the Basic tab apply to the default view of the element

Hover - allows you to add changes that will appear when the user interacts with the element by hovering a mouse over it

Selector -  lets you target specific HTML elements and apply CSS styles to them - you’ll learn more about it in our next tutorials


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

They contain almost all the possibilities for editing the widget and each of them is divided into 3 tabs:

Style tab 




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


Lets you select the colors that are included in the background gradient




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


Select the outer or inner shading of the element


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

Shadow rotation

Choose the angle at which you want the shadow to fall


Choose the distance of the item from its shading


Blurs shading


Sets the amount of shading

Font tab 




Choose the size of the font


Choose a color and % of the font fill


Choose a font


Choose a font bolding

Text align

Select the text alignment

Line height

Choose the amount of leading

Letter spacing

Sets the spacing between elements


Specifies lowercase and uppercase in the text

Position tab - change the size and location of elements

Widget graph - box model

Specify the margins, borders, border-radius, and paddings of the selected widget.




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


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

Applies different presets to the width and height of the element to adjust its size to the size of the website or container

Box sizing

Determines how the total width and height of an element are calculated, including or excluding the padding and border

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


Border width

Width Border color

The color of the border

Width Border Style

Border style


Apply border styles to each side

Padding setting

Choose which side padding you are editing

Padding Size

Choose the size of the padding


Apply the padding size to all sides

Margin setting

Choose which side margin you are editing

Margin Size

Choose the margin size


Apply a margin size on each side


Display properties

Specifies how to display the elements

Vertical align

Controls how elements set next to each other on a line are lined up

Overflow X

Sets the horizontal overflow behavior of an element

Overflow Y

Sets the vertical overflow behavior of an element

Position tab

Position properties

Controls how elements on a page are set up and their relationship to others


Specifies the stack order of elements


Places an element on the left or right side of its container


Sets whether an element must be moved below floating elements that precede it

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:

  • On entry - the animation will be displayed immediately after entering the website
  • On hover - the animation will be displayed when you hover the cursor over the element
  • 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.


Now you know how to edit your website with Widget Styles!