Dropcap Element

05/05/2019

The Dropcap Element is a standard element, commonly used in articles and posts. The Fusion Builder Drop Cap Element offers you the ability to control various aspects of the design like boxed or unboxed, boxed radius and color. It is an Inline Element, which means it is only accessible through the Fusion Element Generator. 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 More Examples!

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 in the option below, as well as choosing the radius of the box if you wish. In the Design tab, you can change the color for the dropcap letter (or the box, if you have chosen boxed). See Example 2.

Step 7 – 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 3. Save the element to save your changes.

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

Dropcap Example 1

Example 1

Dropcap Element Example 2

Example 2

Dropcap Example 3

Example 3

Dropcap Example 4

Example 4

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.

View The Options Screen

Global Options

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

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

  • Default Dropcap Color – Controls the default color of the dropcap.

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 body font’s color.

  • custom content – Insert the dropcap letter between the

    Copy to Clipboard

    tags.