This section allows you to customize the design of the title of the form. You can configure everything from the horizontal alignment to the text font and color.
Here you can define the horizontal alignment. Start is left aligned, Center is middle, and End is right aligned.
You also have access to Mobile Responsive Editing, by clicking the Viewport icon . This allows you to set a different alignment for Mobile, Desktop, and Tablet. You can read more about this in Elementor’s documentation article: Mobile Responsive Editing.
Click the globe icon to apply one of your site’s global typography settings. These are useful to help keep the fonts consistent throughout your site.
The second option is custom, and is accessed by clicking the pencil icon. This will open a menu allowing full customization of the font size, spacing etc.
To reset the typography settings click the pencil icon and then click the reset button.
There are a total of eight settings:
- Family – Choose the font family. You can also add custom fonts to your site and they will appear in the list here. https://elementor.com/blog/custom-fonts/
- Size – Choose the size for the text. This setting also has access to the Mobile Responsive Editing, so you can set a different size for different types of devices. To reset the size back to default, clear the field.
You can set the units to be PX, EM, REM, or VW. You can learn more about the difference between those in Elementor’s Article What’s The Difference Between PX, EM….
- Weight – Choose the weight of the font. Note that not all fonts necessarily support all weights.
- Transform – This allows you to edit the `text-transform` CSS property. This is used to force the text to be all uppercase, for example. You can read more in Mozilla’s documentation here.
- Style – Choose the text style. This can be Normal, Italic, or Oblique.
- Decoration – Choose the font decoration. This can be Underline, Overline, Line Through (strikethrough), or none.
- Line-Height – Use the slider or input box to define the line height. Similar to Size, you can choose the units and set a different height for different devices. Note that the height is measured from the bottom of the text, so setting it below 1.0 will cause the text to protrude past the top of the form element.
- Letter Spacing – Use the slider or input box to define the letter spacing. This is added to the spacing between characters while rendering the text. Positive values will spread the characters further apart while negative values will bring the characters closer together. You can read more in Mozilla’s documentation here.
Here you can choose the color of the text. Like the topography settings, you can choose from your site’s global colors or set a custom color. You can read more in Elementor’s article Introducing the New Color Picker.
To reset the color click the pencil and then the reset arrow at the top.
Here you can configure the text shadow property. This is a great way to add striking color effects to make your text stand out. You can read more and see examples in Elementor’s article The Text Shadow Effect.
There are four options:
- Color – Define the color of the shadow using the full Color Picker.
- Blur – Define the blur radius. The higher the value the bigger the blur, and the shadow will be lighter.
- Horizontal – Offset the effect horizontally, positive values for right or negative for left.
- Vertical – Offset the effect vertically, positive values for up or negative for down.