Style Manager

If you're in Design mode, you can visually manipulate the element styles without even touching the CSS using Style Manager.
Gridbox Style Manager

Whatever style properties you create using Style Manager will automatically create CSS for you which you can edit by opening Style.css from Files tab.

In this section, we will take a more in-depth look at common style properties.

You may have already noticed that the Style Manager changes its properties based on whichever block is currently selected (ex. grid-related properties under the Layout category). Indeed, each block can have its own set of style properties, which can be manipulated.

Almost all the blocks have this set of styling categories:

Various Style Properties

But there are some particular cases where this set might differ (ex. the Body block has only Customize Background).

Let us get into each of these section one by one:

What happens under the hood?

When you change something in the canvas using style manager, for eg: you're adding a background color, font-color and font-size, this will automatically generates the CSS code and store them in styles.css

Here is the demo:

Style Manager syncs with Styles.css

Note: When you remove any styles from the styles.css file using code editor that will be reflected on the canvas too and you won't be able use that style again, you need to re-create it from the scratch.

Background Images / Colors / Gradients:

Image / Colors / Gradients are the various options to customize the background of an element. These different options available in the Properties panel under Customize background is very useful for many use cases.

Adding background images

You can add a background image to an element under the Custom Background section in the Properties Panel form the left sidebar.

Background Image Properties
  1. Click on the Add icon under the Customize Background.

  2. It will open the Background section. By default image option is selected

  3. Then click on the image button, it will open the gallery.

  4. Choose any of the uploaded images or you can make use of Pexels copyright free image gallery or Upload the new image. It will be added as the background for the selected element.

  5. Repeat the above steps for adding background image for any element.

Changing Background Images

Background Colors:

To change the background color of any element do the following.

  1. Click on the element you want.

  2. Then click on the settings icon or open the Properties panel from the left sidebar

  3. Then under Customize Background -> click on the plus button

  4. Then click on the color tab icon in the middle

  5. Then pick your favorite color and click Ok.

Adding Background Colors

Background Gradients:

To change the background color of any element do the following.

  1. Click on the element you want.

  2. Then click on the settings icon or open the Properties panel from the left sidebar

  3. Then under Customize Background -> click on the plus button

  4. Then click on the last icon tab which is for customizing gradients.

  5. You make mix match multiple colors if you want.

Adding Background Gradients

Import Google Fonts

With Gridbox, using Google Fonts is super easy and you can do it in two different ways

  1. From Design Mode

  2. From Code Mode

Let us start with importing Google Fonts from Design Mode.

  1. From the left sidebar, click on properties

  2. Under Typography -> Click on Import Fonts button

  3. It will open the import Google Fonts Dialog

  4. You can choose any of your favorite Google Fonts and click add button

  5. To import them then click on Import Font

  6. You can import multiple fonts if you want.

  7. Then from the Font Family, you can select the imported to apply.

Import Google Fonts

To import Google fonts using Code Editor.

  1. Open the code tab

  2. Under <head>, create a new link tag with href

  3. Copy the Google fonts link from https://fonts.google.com

  4. That's it.

  5. The imported font will be automatically add to the Style Manager -> Fonts List.

  6. When you switch to Design mode, you can use the imported font from the Font Family under Style Manager.

Importing Google Fonts from Code Editor

Other font properties

Typography Properties

Font Family

What ever fonts you import it will be listed here along with default browser fonts.

Letter Spacing:

The letter-spacing property increases or decreases the space between characters in a text.

Line Height

The line-height property specifies the height of a line.

Text Align

The text-align property specifies the horizontal alignment of text in an element.

Text Decoration

The text-decoration property specifies the decoration added to text, and is a shorthand property for

  • text-decoration-style -> underline, strike-thru

Text Shadow

The text-shadow property adds shadow to text.

Margin & Padding

Margin & Padding Properties

The margin property sets the margins for an element, and is a shorthand property for the following properties:

Padding

An element's padding is the space between its content and its border.

The padding property is a shorthand property for:

Dimensions

Dimension Properties

  1. Height [ Min, Max]

  2. Width [Min, Max]

Display

Display Properties

Using this you can customize all display related options

Display: Set element as Block, Inline-Block, Inline, Flex

Position: Static, Relative, Absolute, Fixed

Property

Description

static

Default value. Elements render in order, as they appear in the document flow

absolute

The element is positioned relative to its first positioned (not static) ancestor element

fixed

The element is positioned relative to the browser window

relative

The element is positioned relative to its normal position, so "bottom:40px" adds 40 pixels to the element's BOTTOM position

sticky

The element is positioned based on the user's scroll position

Opacity: The opacity property sets the opacity level for an element. The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

Border: Adds the border around the element based on the width, style and color

border: border-width border-style border-color|initial|inherit;

Border Radius: The property defines the radius of the element's corners. This allows you to add rounded corners to elements. Use you can provide equal sizes or varying sizes for Top, Left, Right and Bottom.

Float: This property specifies whether an element should float to the left, right, or not at all. Not absolute positioned elements will ignore this property.

Box Shadow: This property attaches one or more shadows to an element.

Overflow: The property specifies what should happen if content overflows an element's box. This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area. It works only for block elements with a specified height.

Flex Properties - Learn more from W3Schools

Further reading CSS Properties