--- title: Drop Caps description: The Drop Caps Block is a paragraph that opens with a large first letter, the way a magazine article or a book chapter starts. The letter drops down across two to eight lines of text. It can be a plain… url: "https://shapekode.com/product/shapeblock/docs/drop-caps/" updated: "2026-10-29" category: Content Block --- # Drop Caps The Drop Caps Block is a paragraph that opens with a large first letter, the way a magazine article or a book chapter starts. The letter drops down across two to eight lines of text. It can be a plain letter, a letter in a filled box, a letter in an outlined box, or an outlined letter, and the paragraph can run in up to four newspaper columns. Use it to open a blog post, a story on an About page, an editor’s letter, a recipe introduction, a long product description or any long-form text that should feel editorial. ## How to Add a Drop Caps Block Follow these steps to add and set up the Drop Caps Block in the Gutenberg editor. ### Step 1: Add the Drop Caps Block 1. Open a page or post in the WordPress Gutenberg editor. 2. Click the **+** button to open the block inserter. 3. Search for **Drop Caps** under ShapeBlock. 4. Insert the block into your page. It starts with a sample paragraph. 5. Click into the paragraph on the block and type your own text. The first letter you type becomes the drop cap. ![Drop Caps block in the block inserter](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-drop-caps-1.webp) ### Step 2: Configure the Drop Caps Block Select the Drop Caps Block and open its settings in the right-hand sidebar. The available tabs are: - **Settings:** Choose the style of the letter and how many lines it spans. - **Layout:** Run the text in newspaper columns, with a line between them if you like. - **Style:** Style the letter (colors, box, font, space) and the paragraph text. - **Advanced:** Set the spacing, position and background of the whole block. ![Drop Caps block selected in the editor, with a letter in a box three lines tall](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-drop-caps-2.webp) ### Writing the Text The paragraph is typed right on the block, not in the sidebar. You can use the normal text formatting: **bold**, *italic*, links and line breaks (Shift + Enter). The drop cap always uses its own color, font and weight from the Style tab, even when the first word is bold or a link. **Note:** The drop cap is always the first letter of the paragraph. If the text starts with a quotation mark, the quotation mark and the letter after it drop together. Start the text with the letter itself if you want only the letter. ## Settings Tab ![Drop Caps block, Settings tab with the Drop Cap panel](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-drop-caps-3.webp) ### Drop Cap - **Style:** **Plain Letter** (a large letter, nothing around it), **Letter in a Box** (the letter on a filled box), **Letter in an Outline** (the letter inside a box with a border) or **Outlined Letter** (the letter drawn as an outline, with an inside color of your choice). - **Lines Tall:** How many lines of text the letter spans, from 2 to 8. The default is 3. Responsive settings are available: reset Tablet or Mobile to use the value of the larger screen, or set a smaller value so the letter does not take too much room on a phone. ## Layout Tab ![Drop Caps block, Layout tab with the Columns panel](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-drop-caps-4.webp) ### Columns - **Text Columns:** Run the paragraph in 1 to 4 newspaper columns. The text flows from the bottom of one column to the top of the next. Responsive settings are available. Phones show one column unless you set a Mobile value. - **Column Gap:** The space between the columns, for example *48px*. When empty, 40px. - **Line Between Columns:** Draws a thin vertical line between the columns. - **Line Color:** The color of that line. When empty, a light gray. This option appears when Line Between Columns is on. ## Style Tab The Style tab contains the **Drop Cap** and **Text** panels. Some options in the Drop Cap panel change with the style chosen in the Settings tab. ![Drop Caps block, Style tab with the Drop Cap and Text panels open](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-drop-caps-5.webp) ### 1. Drop Cap - **Letter Color:** The color of the letter. For the Outlined Letter style this option is called **Outline Color** and colors the outline. - **Box Color:** The color of the box behind the letter (Letter in a Box). For Letter in an Outline it is called **Box Outline Color** and colors the border of the box. For Outlined Letter it is called **Inside Color** and fills the inside of the letter; set it to the background color of your section for a hollow letter. - **Box Radius:** Round the corners of the box, for example *6px* (the default). This option appears for Letter in a Box and Letter in an Outline. - **Font Family:** The font of the letter only, for example *Georgia, serif*. When empty, the letter uses the font of the paragraph. A serif letter over sans-serif text gives a classic book look. - **Font Weight:** The weight of the letter, from 300 (light) to 900 (black). The default is 700. - **Space to the Text:** The space between the letter and the text beside it, for example *0.15em* or *12px*. When empty, 0.1em for a plain or outlined letter and a little more for a letter in a box. ### 2. Text - **Color:** The color of the paragraph text. - **Typography:** Customize the font family, size, weight, style, text transform, line height and letter spacing of the paragraph. Responsive settings are available for desktop, tablet and mobile. **Note:** The drop cap is sized from the paragraph’s font size and line height. Set the line height as a plain number (for example *1.7*) so the letter lines up exactly with the lines of text it spans. ## Advanced Tab ![Drop Caps block, Advanced tab](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-drop-caps-6.webp) The Advanced tab has the same panels as on every ShapeBlock block: **Spacing** (padding and margin per device), **Position** (place the block with offsets, width and z-index) and **Background** (a color or gradient behind the whole block). They are explained in [Advanced Tab: Spacing, Position and Background](https://shapekode.com/product/shapeblock/docs/advanced-tab/). ### Tips - Use one drop cap per article, at the start, and maybe one more after a section break. More than that and none of them stand out. - Three or four lines suit most body text. Save six to eight lines for a large opening paragraph or a hero. - Set Lines Tall to 3 on Mobile when you use more lines on desktop, so the letter does not push the text into a thin strip on a phone. - On a dark section, pick Outlined Letter with a light Outline Color and the section’s background as the Inside Color. - Newspaper columns read best with three or more lines of text in each column. Give long text 2 or 3 columns on desktop and leave phones at one. **Live demo:** see the Drop Caps Block in action on the [Drop Caps demo page](https://shapekode.com/product/shapeblock/drop-caps/).