Paragraph

The Paragraph Block is a simple block for adding a single paragraph of the content. It allows you to add content to the section of the site.

After you have chosen the paragraph block, you’ll get a block editing panel on the right-hand side. It has three options, i.e., General, Style, and Advanced. These options customize the design and other elements of the paragraph block. Let’s explore one by one below:

General #

It provides the following customization options for the Paragraph Block.

Properties #

• Text Alignment –  It sets the alignments for the Paragraph Block. You can set the alignment as Left, Center, Right, and Justify. Moreover, you can also set the alignment position on different devices (Desktop, Tablet, and Mobile).

Style #

Under the style option, you’ll find the following options available:

Text #

• Text Color –  It changes the text color of the paragraph. You can set the different colors on Normal and Hover Modes.
• Typography – It allows you to control the paragraph text’s typography, such as font family, weight, font size, line height, and other related styling properties. The options are listed below:
  • Font Family – The option allows you to choose the appropriate font family for the paragraph text.
  • Weight – It refers to the thickness or boldness of the paragraph text.
  • Size – It controls the font size of the paragraph text.
  • Line Height – It manages the space above and below the paragraph.
  • Letter Spacing – It controls the amount of space between characters in the paragraph.
  • Style – Using the property, you can set the paragraph block text to be Italic or Oblique.
  • Transformation – It changes the case of the text, such as lowercase, uppercase, and capitalized.
  • Decoration – The styling is applied to the paragraph block text to make it more visually appealing. The options include underline, overline, and line through.

Background #

• Type – It sets the background color of the paragraph block. You can change the visual appearance of the background by changing its color or adding an image. Moreover, you can set the different background colors on Normal and Hover Modes.

Advanced #

The Advanced section consists of four customization options for the Block.

Spacing #

Under the spacing section, you can find the following options available:

• Block Margin – According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set different margin values for various devices (Desktop, Tablet, and Mobile).
• Block Padding – According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set different padding values for various devices (Desktop, Tablet, and Mobile).

Z-Index #

It allows you to set the priority of the paragraph block according to the site’s requirements.

Responsive Condition #

Using the option, you can enable/disable displaying the block on various screen sizes:

• Hide on Desktop – It hides the Paragraph block on the Desktop.
• Hide on Tablet – It hides the Paragraph block on the Tablet.
• Hide on Mobile – It hides the Paragraph block on the Mobile.

Advanced #

Under the option, you can set the CSS ID and Classes for this particular paragraph block. The available options are listed below:

• CSS ID – It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.
• Additional CSS Class(es) – It allows you to add a CSS class to your block and write custom CSS to style this particular block.

For e.g., There might be two paragraph blocks on a page, and you want to make some changes to one but leave another untouched. In this case, you can define the CSS classes for the one paragraph block you want to make changes to. 

Moreover, you can add more than one class separately by commas.

For example, if you want to change the text color of the paragraph block, you can add the class paragraph-one-color under the Additional CSS Class field. After that, visit your CSS editor and write a style for the class as below:

.paragraph-one-color p{
color:#000000;
}

Adding the code will change only this particular paragraph block.