How to Change Text Color and Typography Settings in Elementor

in useElementorWhen building a website, typography and colors are one of the key elements that determine the visual appearance of a page. Elementor provides flexible and powerful tools that allow users to easily customize the typography of fonts and text colors. Let's take a look at how to modify these design elements in Elementor to optimize the aesthetics of your website.

Change font layout

Most of the widgets in Elementor offer a wealth of typographic setting options, which can be found in the Styles tab of the widget. These options allow you to change the font size, color, family and style.

Steps:

1. Open the Styles tab
In the panel of the edit page, find thetypographicalFields.

Typographic fields are usually located in thetypetab.

2. Select global fonts

To select one of the preset global fonts, click theEarth IconsThe

3. Setting the font size
To select a font from all the fonts, click thePencil IconThe

"typographical"The menu will open.

4. Customize other font properties
Use"range" drop-down menu to select the type of font to use.
If you know the name of the font family, you can enter it in the text box at the top of the drop-down menu.

5. Use"magnitude"The slider sets the font size.

Changing the text color

In addition to typography, color is a crucial element in website design, and Elementor makes it easy to change the color of text to match a website's color scheme or brand style.

Steps:

1. Find "text color"Field
In the panel, find "text color" field. "text color"

The field is usually located in the "type" tab.

2. Select global color
To select one of the preset global colors, click the Earth icon and select one of the global colors.

If you want to choose a custom color for a specific text, you can click on theColor swatches, open the color picker. Customize the color by using the color palette or by entering the HEX, RGB, or HSL value of the color.

After determining the color, click "appliance"Save the settings and you'll see the text color update immediately.

Tip:

Using global colors ensures a consistent site style and reduces the need for manual adjustments.

Elementor offers a wide range of color choices, and it is recommended to choose the appropriate color based on your brand color scheme or website theme.

Elementor is not only limited to adjusting font typography and colors, but also provides other visual design options such as background color, borders, spacing, and so on. With these settings, you can further enrich the design details of the page and create a unique and attractive visual effect.