Dropcap Element

09/10/2019

The Dropcap Element is a standard typographical device, commonly used in articles and posts. The Fusion Builder Drop Cap Element offers you the ability to control various aspects of the dropcap, like boxed or unboxed options, boxed radius and color. It is an Inline Element, which means it is only accessible through the Fusion Element Generator, or the Inline Editor in the Fusion Builder Live Editor. See the links below for more information on those topics.

Furabitur sit amet magna quam. Praesent in libero vel turpis pellentesque egestas sit amet vel nunc. Nunc lobortis dui neque, quis accumsan dolor. Aenean aliquet dignissim semper. Maecenas ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 

View Element Demo Page!

How To Use The Dropcap Element

Using the Dropcap Element allows you add a dropcap to the first word of a sentence.

Step 1 – Create a new page or post, or edit an existing one.

Step 2 – Add a text based element, and add your content, leaving the first letter off the first word to allow for the Dropcap at the start.

Step 3 – Now we need to add the Dropcap Element. To do this, position your cursor at the place you want the dropcap, and then click the Fusion Builder Element Generator icon on the toolbar, as seen in Example 1.

Step 4 – Locate the Dropcap Element and click it to bring up the options window.

Step 5 – In the Dropcap Letter field, enter the letter you wish to use for the dropcap.

Step 6 – You can choose to have the dropcap boxed or not, as well as choosing the radius of the box if you wish.

Step 7 – In the Design tab, there are two Options. Color sets the color of the letter if you selected No for Boxed Dropcap, or it controls the color of the box if you have selected Yes. You can also change the color for the dropcap letter when using a Boxed Dropcap, with the Text Color option.

Step 8 – Once finished, click ‘Insert’. You’ll be returned to the original text based element, and you can see the One Page Tex Link shortcode has been added to the code. See Example 2. Save the element to save your changes.

Step 9 – If you preview your page, you will see the dropcap as you have styled it. See Example 3.

Dropcap Example 1

Example 1

Dropcap Example 3

Example 2

Dropcap Example 4

Example 3

How To Use The Dropcap Element In Fusion Builder Live

Please see the Inline Elements document for more details on how Inline Elements work in Fusion Builder Live.

Inline Editor > Inline Elements

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Dropcap Element section.

General Tab

  • Dropcap Letter – Add the letter to be used as a dropcap.

  • Boxed Dropcap – Choose if you want a boxed dropcap.

  • Box Radius – Choose the radius of the boxed dropcap. In pixels (px), ex: 1px, or “round”.

  • CSS Class – Allows you to add a class for the Separator.

  • CSS ID – Allows you to add an ID for the Separator.

View The Options Screen

Design Tab

  • Color – Controls the color of the dropcap letter, when using Unboxed Dropcap, and controls the Box Color when using the Boxed Dropcap.

  • Text Color – Controls the color of the dropcap letter, when using the Boxed Dropcap.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Dropcap 

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Dropcap Color – Controls the color of the dropcap text, or the dropcap box if a box is used.

  • Dropcap Text Color – Controls the color of the dropcap text when a box is used.

View The Options Screen

Dropcap Element Parameters

Copy to Clipboard
  • boxed – Choose from yes, or no. Display a background on the dropcap.

  • boxed_radius – Accepts a pixel value. For example, 4px. Sets the background radius.

  • class – Add a custom class to the wrapping HTML element for further css customization.

  • id – Add a custom id to the wrapping HTML element for further css customization.

  • color – Accepts a hexcode ( #000000 ). Sets the dropcap’s color when using an Unboxed Dropcap, or the color of the box when using a Boxed Dropcap.

  • text_color – Accepts a hexcode ( #000000 ). Sets the dropcap’s text color when using a Boxed Dropcap.

  • custom content – Insert the dropcap letter between the

    Copy to Clipboard

    tags.