Design tab
Each Basic Element will contains multiple Fields and the possible fields are listed under the Design tab.

This is where you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

These fields usually comes along with Basic Elements settings so please try to understand how to use them well

1. Alignment
Set the horizontal alignment of an element: it can be left or right aligned or centered.
(center alignment is default value)



2. Typography


Font family: apply a font type for your texts
- Google font: these fonts are free to use, no copyright issues
- Upload font: this allows you to upload a new custom font (or your brand font for example)
Font file formats you can upload: .ttf / .otf / .woff


Size: sets the size of texts
Font size units
- px is not scalable, it is an absolute unit. The value assigned is fixed irrespective of the user's device screen
- %, em, rem scale accordingly with screen size, they're responsive units



Weight: sets how thick or thin characters in text should be displayed


Transform: specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized



Style: sets whether a font should be styled with a normal, italic, or oblique face from its font-family


Decoration: set or remove decorations from text


Line height: sets the height of a line. It's commonly used to set the distance between lines of text.


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


3. Text color
Specifies the color of text, you can put both HEX code or RGB code


4. Spacing

Padding: Create extra space inside of an element's content. You can specifies the padding for 4 sides of an element: padding-top, padding-right, padding-bottom, padding-left


Margin: Create extra space outside of an element an element's content. You can specifies the margin for 4 sides of an element: margin-top, margin-right, margin-bottom, margin-left.
This is also one method that help setting the gap between elements



Size units for padding properties
- px is not scalable, it is an absolute unit. The value assigned is fixed irrespective of the user's device screen
- %, em, rem scale accordingly with screen size, they're responsive units

“em” is relative to the font-size of the nearest or parent element
“rem” is relative to the html (root) font-size (the entire page).
% relative to the width of the current container
Note: Negative values are not allowed.

Global tab

The settings from Global settings will apply to the text you're working on. As a result, the typography of your current texts can be dynamic
- If you tick the box Primary, your current texts will obtain Primary settings from Global settings.
- If you tick the box Text, your current texts will obtain Text settings from Global settings.
- If you tick the box New Item, your current texts will obtain Primary settings from Global settings.


Therefore you just need to adjust the Global settings then all other places set under Typography properties are bulk changed accordingly

For example:
You set the font Roboto for Global settings
Tick the primary box in Typography then your current text changed to Roboto font.
If you change Global settings to Opens Sans
You don't need to re-open Typography property anymore, the current text will be automatically changed to new font Opens Sans


Learn more about Global Settings here

5. Synchronization button
The Link symbol of every option like below stands for synchronizing 4 values. If you disable it, you can set one by one value separately



6. Background:
Specifies the background color of the whole element. You can put both HEX code or RGB code


7. Border
Draw a line on 4 edges of the element it is applied to.
Border Style: Default, None, Solid, Dashed, Dotted, Double, Groove



Width: define the width of the four borders
There are four width values you need to enter: top border, right border, bottom border, and the left border.
Or you can set all as 0 to leave the border invisible.


Color: change color of the border



8. Border Radius
Define the border radius to control corner roundness.
You need to set 4 values for 4 corners: top-left, top-right, bottom-right, bottom-left



Border Radius for image


You can even turn a square image into Circle using border radius property



9. Box shadow:
Add shadow effects around an element's frame.
Horizontal: adjust the horizontal position of shadow area


Vertical: adjust the vertical position of shadow area


Color: set color for shadow



Spread and Blur increase or decrease blur level



10. Text shadow
Adds shadow to text only
Color: set color for shadow
Blur: increase or decrease blur level
Horizontal : set the position of the horizontal shadow
Vertical: set the position of the vertical shadow



11. Hover tab

The settings under this tab are used to select elements when you mouse over them.
Note: hover property can be used on all elements, not only on links and button


Transition Duration: Specifies how many seconds or milliseconds a transition effect takes to complete
It allows you to change property values smoothly (from one value to another) when hovering


Animation
When a website visitor hovers over an animated element like a link or button for example, it can change color, grow, shrink, rotate, and more. This is enjoyable for the visitor and shows that your site is working.


12. Width and Height

Scale up or down the width and height of an element, in pixels, %, VW.
- The width/ height of an element does not include padding, borders, or margins.
- The max-width property defines the maximum width of an element.
If the content is larger than the maximum width, it will automatically change the height of the element.
If the content is smaller than the maximum width, the max-width property has no effect.
This prevents the value of the width property from becoming larger than max-width. The value of the max-width property overrides the width property.



13. Opacity
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.



14. CSS Filter
This property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.
Blur: how many pixels on the screen blend into each other, so a larger value will create more blur.
Brightness: applies a linear multiplier to the input image, making it appear more or less bright
Contrast: adjusts the contrast of the image
Saturation: saturates the image
Hue: applies a hue rotation on the image



Advanced Tab
Every Basic elements always has this tab. The settings here takes effect on the whole element.

1. Advanced
In the case the design tab does not has option to adjust spacing, you can always use this Advanced properties to change the spacing.


Beside the Spacing property, you can easily adjust element's position with Custom Width



CSS ID ID name should be unique. HTML with two or more identical ids does not validate.
then you can quickly navigate to this ID(button) from other places by putting #ID_name precede the URL
For example: the ID name is 123 -> the URL that leading to this element is www.beae.com#123



CSS Classes are used to to identify a single element
Class's name can be the same for multiple elements. If you want a bulk styling, you can group more than one element at one time.


2. Background
In the case the design tab does not has option to change background color, you can always use this Background properties to change the background color of the whole element.



3. Responsive
Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device.

You can set the Visibility of an element on different devices here
For example: hide the Rich texts on Tablet but leave it visible on Desktop


Individual property also has its own Responsive settings
When you use the small icon here, the properties will apply to the only device you choose
For example: make the blue title Center aligned on Desktop but Right aligned on Tablet



4. Attributes
HTML and CSS box: If you just want to add your own coding for individual element, use the Additional CSS and HTML box here.
No matter what style you choose, you can tweak CSS, HTML and overwrite that style.

Was this article helpful?
Cancel
Thank you!