Element Fields

Author: Mie Tran 246 views

1. Design Tab

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

It helps you control the color, font, size of the text, and spacing between elements. In addition, the Design tab can also help position and layout elements in devices with different screen sizes. There are many interesting features in the Design tab and I will introduce them in this article.

1.1. Alignment

Set the horizontal alignment of an element. It can be left, right, or centered (left alignment is the default value).

Design Tab Alignment

1.2. Typography

  • Font family: Apply a font type for your texts.

The EComposer has support 2 types Uploaded font and Google font:

Uploaded font: This allows you to upload a new custom font (or your brand font for example).

Google font: These fonts are free to use, with no copyright issues.

Note: Font file formats you can upload: .ttf / .otf / .woff

Design Tab Font-family
  • Size: Sets the size of texts.

Font size units PX, EM, REM, VW.
PX is not scalable, it is an absolute unit. The value assigned is fixed irrespective of the user’s device screen.
EM, REM, and VW scale accordingly with screen size, they are responsive units.

Design Tab Size
  • Weight: Controls the 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: Sets or removes decoration from the text.
  • Line height: Sets the height of a line. It’s commonly used to set the distance between lines of text. You can directly fill the data in the box or use the drag bar to adjust the line-height.
  • Letter spacing: The letter-spacing property increases or decreases the space between characters in a text. You can directly fill the data in the box or use the drag bar to adjust the letter spacing.
Design Tab Line Height And Letter Spacing

Global

The global font is another essential feature provided by the EComposer. It will help you to streamline your workflow. When you are using the same fonts on different pages of your website and want to change them then global font settings will help you. If you had the global font settings your changes will apply to all the places.

Global Font

1.3. Text color

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

Similar to Global Font, the text also has Global text color. You can create a default text color that can be applied to the text you want.

Design Tab Text Color

1.4. Text shadow

This option allows you to add the shadow to text only.

  • Color: Set color for the shadow.
  • Blur: Increase or decrease blur level.
  • Horizontal: Set the position of the horizontal shadow.
  • Vertical: Set the position of the vertical shadow.
Design Tab Text Shadow

1.5. Spacing

  • Padding: Create extra space inside of an element’s content. You can specify the padding for 4 sides of an element: padding-top, padding-right, padding-bottom, and padding-left.
  • Margin: Create extra space outside of an element an element’s content. You can specify the margin for 4 sides of an element: margin-top, margin-right, margin-bottom, and margin-left.
Design Tab Spacing

Size units for properties:
PX is not scalable, it is an absolute unit. The value assigned is fixed irrespective of the user’s device screen
%, EM, and REM scale accordingly with screen size, they’re responsive units

  • % relative to the width of the current container
  • 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).

Enter Metric

You can flexibly use ways to enter metrics:

  • Use default metrics.
  • Drag the slider to stop at the metric you want.
  • Enter metrics directly into the box.
Enter Metric

Synchronization button

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

Design Tab Synchronization button

1.6. Background

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

Design Tab Background

You can also use an image as an element’s background.

  • Image Size: The image size setting, to control the size of the background. Select the size of the image or enter a custom size.
  • Progressive JPGE: This option allows you to set a custom size for the image but keep the aspect ratio.
  • Position: Image position lets you choose which area of the image will get focused on, in cases where the image is larger in width or height than the section spacing.
  • Attachment: You can adjust the background attachment here. There are 4 types: Fixed, Scroll, Local, and Inherit.
  • Repeat: Choose the background-repeat that you want to show for the Background image here. Example: Repeat, No-repeat, Vertically, etc…
  • Size: Choose the background-size that you want to show for the Background image here. Example: Auto, Contain, Inherit, etc…
Background Image

1.7. Border

Draw a line on 4 edges of the element to which it is applied.

  • 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 left border. Or you can set all as 0 to leave the border invisible.

  • Color: Change the color of the border
Design Tab Border

1.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, and bottom-left.

1.9. Box shadow

Add shadow effects around an element’s frame.

  • Horizontal: Adjust the horizontal position of the shadow area.
  • Vertical: adjust the vertical position of the shadow area.
  • Color: set color for the shadow.
  • Spread and Blur increase or decrease blur level.
  • Position: You can set the box shadow outside or inset.
Design Tab Box Shadow

1.10. Hover tab

The settings under this tab are used to select elements when you mouse over them. 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.
Transition Duration
  • 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.
Animation

1.11. Width, Max-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 the max-width. The value of the max-width property overrides the width property.

Width, Max-width, and Height

1.12. 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.

Opacity

1.13. 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.
CSS Filter

2. Advanced Tab

Every Basic element always has this tab. The settings here take effect on the whole element.

2.1. Advanced

Spacing

In the case, that the design tab does not have the option to adjust the spacing, you can always use these Advanced properties to change the spacing.

Advanced Tab Spacing

Width

The Width property controls the amount of horizontal space that an element uses in the container. Select the width of the element, choosing from Full Width (100%), Inline (auto), or Custom.

  • Width (Value): Only available if Custom is chosen. Use the slider or enter a value in PX, %, or VW to adjust the width of the element within the column.

Position

This option allows you to select absolute or fixed positioning for your element. If using the absolute or fixed positioning, you may manually enter the numeric X and Y positions in the Horizontal and Vertical Offset scales.

  • Default Position: The element is in its natural state, positioned merely by the natural flow of the page. This is the default position of all elements.
  • Relative Position: This is very similar to static positioning, except that once the positioned element has taken its place in the normal flow, you can then modify its final position, including making it overlap other elements on the page.
  • Absolute Position: The element is positioned absolutely to its first positioned parent.
  • Fixed Position: Set your widget to have a fixed position and place it in a custom position. The element will stay fixed in that position as the page is scrolled. The element is positioned relative to the user’s viewport.

Vertical Align

Only available if Full Width (100%), Inline (auto), or Custom is chosen. Select to display the element on the Start, Center, or End.

Horizontal Orientation

Sets the horizontal reference point for the absolute positioning, with choices of either Left or Right.

Offset Right

Changes the horizontal reference point by the amount of the offset right.

Vertical Orientation

Sets the vertical reference point for the absolute positioning, with choices of either Top or Bottom.

Z-index

Set the Z-Index. Learn more about Z-Index.

Instructions For Configuring The Button Using The Advanced Tab

2.2. Background

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

Advanced Tab Background

2.3. Visibility

Show or Hide your section on Desktop, Tablet, or Mobile.

Advanced Tab Visibility

2.4. Attributes

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

Advanced Tab Attributes

Leave a Comment

On this page