Widgets

Drop Cap

Step-by-Step Tutorial on Using the Drop cap Widget of Zyre Addon

With Zyre Addon’s Dropcap Widget, you can highlight the first letter of your paragraph in a bold and stylish way. Customize its typography, size, color, background, and spacing to add a professional, magazine-like touch to your content.

Learn How To Use Drop Cap Widget:

Exploring the Features of Drop cap Widget

Step 1: Drag the widget

From the left panel, search or choose the Drop cap Widget of Zyre Addon and simply drag it into your desired section.

Step 2: Content tab

Drop Cap Content:

  • Drop cap Style : You can choose a predefined style from here
  • Content : Add and edit the main text content with allowed HTML tags.
  • Show drop cap : Toggle button to activate the drop cap effect.
  • Class : Add your custom CSS class.

Step 3: Style tab

In the Style section, you can customize the Text and Drop cap.

Text:

  • Typography : Here you can customize the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing for your text. Explore full typography settings here.
  • Text Color : Choose colors for the text content.
  • Alignment : Set the alignment of the text.

Drop Cap:

  • Typography : Here you can customize the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing for your text. Explore full typography settings here.
  • Color : Set the text color of the drop cap.
  • Background Type : Choose background type with classic or gradient color. Explore full background settings here.
  • Padding : Adjust inner spacing around the drop cap.
  • Margin : Set outer spacing around the drop cap.
  • Border Type : Set border style with width and color.
  • Border Radius : Apply rounded corners to the area.

Step 4: Advance tab

If you want to customize the layout, backgrounds, or make your design more engaging, head over to the Advanced section. The Advanced panel is a default Elementor feature. Check out this document to learn more about its features.

Finally, hit the Publish button and watch your stunning drop cap come to life on your webpage!

That’s a wrap — you’re ready!

Share: