# Paragraph

The Paragraph can be used to type in sentences or the body of a page.

## General Settings

To add a Paragraph, drag and drop the paragraph in the editor's space to manage the settings.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FWdFCMNfO4xRE4utBtjYb%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-fc26590d71767978c7ca0747be92cc1ad10dd8af_Funnel%20Builder%20-%20Paragraph%20main.png?alt=media&#x26;token=e8a8218e-ecfc-490c-9988-3781ad62c103" alt=""><figcaption></figcaption></figure>

### Element Name/Title

Here you will see the default name/title of the Edit option you are working on. You can decide to leave at that or rename it.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FtQI4pePxAu2qmxtmcpTZ%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-dd1037ff4aebf1e0881df40125ee55173018dda9_Funnel%20Builder%20-%20Paragraph%20-%20Title.png?alt=media&#x26;token=7908f5f6-5e2d-4d00-b10f-39518064a7b4" alt=""><figcaption></figcaption></figure>

### Background Color

If you want to change the background color of your Paragraph you can do that by clicking on the content you want to adjust its background\*\*.\*\*

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FyjcSCNSj00o45iKgl4sT%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-be79d0b46619bee21cbc6ea2704ab2750da57313_Funnel%20Builder%20-%20Paragraph%20-%20Background%20Color.png?alt=media&#x26;token=1f544cc7-fbe4-4e54-a8b0-cc4af3b2f28f" alt=""><figcaption></figcaption></figure>

### Opacity

You can decide the extent to which you want your text/content to fade in each element box. the opacity varies from None, Light, Half, to Heavy fade.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2F5Tivrdwjv3ypg6vZeMVh%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-126be9bb9e6c56c429fa428f1fcf12391b438061_Funnel%20Builder%20-%20Paragraph%20-%20Opacity.png?alt=media&#x26;token=5d0b8e67-c523-4e1a-b065-326a3e43e630" alt=""><figcaption></figcaption></figure>

### Text Shadow

If you want your text/content to have a shadow, simply select how thick or light you want the shadow to be.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FPYY6ckBeb9hgvEz82PlR%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-0453ee8443c649611d5235fbf0741bc15d6cbdef_Funnel%20Builder%20-%20Paragraph%20-%20Text%20Shadow.png?alt=media&#x26;token=4617c3d5-0a9b-4f7a-a5c0-2e98ef26704b" alt=""><figcaption></figcaption></figure>

### Letter Spacing

You can decide how wide apart you want your letter to be by clicking on this option.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2F6DmdWrRt49FgLiR3Nwtp%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-af3f6b3ed8e1d83c25d80165422e994e4ac98380_Funnel%20Builder%20-%20Paragraph%20-%20Letter%20Spacing.png?alt=media&#x26;token=435c2b64-c03f-4636-ab07-a030f798b647" alt=""><figcaption></figcaption></figure>

### Text Align

You can move your text in different positions as you deem fit, you can position it to the Left, Center, Right, or as Justified.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FbzYKrPQtykZJlZ8xZxSr%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-c6d655f8fcb7ce2c1d1f8098affd4773e97798dc_Funnel%20Builder%20-%20Paragraph%20-%20Text%20Align.png?alt=media&#x26;token=33bc434e-d004-4724-b413-8a3464a1bda1" alt=""><figcaption></figcaption></figure>

### Mobile and Desktop Font Size

You can adjust the mobile and desktop font sizes of a particular text/content simply by adjusting the size bars.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FmFvwatcszajP5kvNvwMx%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-6e1fd519c851b626490ce419090e524a04a9fa5f_Funnel%20Builder%20-%20Paragraph%20-%20desktop%20Font%20SIze%20(1).png?alt=media&#x26;token=357ea7c4-4dc9-4323-a4f9-bc9690f956e1" alt=""><figcaption></figcaption></figure>

### Typography Type

Here you can edit the font of your text/content.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2F94dqUGHyqNQAqKic9K2g%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-adb558264845e2c49560c98e1b396ff2082a89b4_Funnel%20Builder%20-%20Paragraph%20-%20Typography%20type.png?alt=media&#x26;token=bdc4e920-c021-41d7-a39c-eb89c8386a92" alt=""><figcaption></figcaption></figure>

### Icon

You can add an icon to your page by simply selecting from the available icon. If you have the desired icon in mind, you can type it into the search bar to narrow down the options.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2Fa4htNPoVFz6pvFbyZHyS%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-4f9cd926c1ce21b67707efc44c915de55aa9188d_Funnel%20Builder%20-%20Paragraph%20-%20Icon.png?alt=media&#x26;token=9fb4c529-0986-446b-a7cc-56fed20cb126" alt=""><figcaption></figcaption></figure>

### Color Options

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FIevjjejepmNmwWypO4aJ%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-afae91d50046b235eae6164e4956ceec4dd863a2_Funnel%20Builder%20-%20Paragraph%20-%20Color%20%20Options.png?alt=media&#x26;token=a2c78618-fce2-4abe-8089-bcf9d4d2ffe8" alt=""><figcaption></figcaption></figure>

* **Color**\
  \*\*\*\*When a text isn't in bold form, you can only adjust its colors here
* **Bold Text Color**\
  \*\*\*\*If a text is in bold form, you can only adjust its colors here.
* **Italic Text Color**\
  \*\*\*\*You can only edit an italic text color here
* **Underline Text Color**\
  \*\*\*\*You can only edit an underlined text color here
* **Link** **Text Color**\
  \*\*\*\*If you have a link added to this page, you can only edit the link color here
* **Icon Color**\
  \*\*\*\*If you have an icon added to this page, you can only edit the icon color here. Only the icon color will change regardless of the position it's placed.

### Spacing Option:

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FvfbCmPrIbwIT2pX865sg%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-f8cd07c427ab669ffd69b15960193d4831f5c7a2_Funnel%20Builder%20-%20Paragraph%20-%20Spacing%20Options.png?alt=media&#x26;token=14ce95db-084f-4757-a1db-524a5a7d29fe" alt=""><figcaption></figcaption></figure>

There are different spacing options available for adjusting your content. Depending on the Edit option you are working on, the settings will only be applicable to that option. For example, if you are editing a particular Row (the BLUE box), only every content in that Row will follow the command of what settings you make.

* **Padding Left, Right, Top, and Bottom**\
  This Four (4) different toggle bar moves the content to either the left, right, top, or bottom depending on the toggle bar you click on.
* **Margin Top and Bottom**\
  You can adjust the top or bottom margin of your content by toggling its bars.

## Advanced Settings

### Border Options:

#### Border

\*\*\*\*You can choose the type of border you want. Once you select any of the border types, the settings for the border pop up;

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2F90Rnal00W3u187BbZoej%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-134d281062d619dc0a17f673fa3e74600a8f7843_Funnel%20Builder%20-%20Paragraph%20-%20Border.png?alt=media&#x26;token=87759fa8-b9a9-45c8-b239-f54c688c30f6" alt=""><figcaption></figcaption></figure>

### Style

\*\*\*\*There are three (3) Different styles for your border, It could be a solid, Dashed, or Dotted border.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2F90Rnal00W3u187BbZoej%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-134d281062d619dc0a17f673fa3e74600a8f7843_Funnel%20Builder%20-%20Paragraph%20-%20Border.png?alt=media&#x26;token=87759fa8-b9a9-45c8-b239-f54c688c30f6" alt=""><figcaption></figcaption></figure>

### Width

\*\*\*\*When you increase the border width, it increases the thickness of the border.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2F5RvFsQ6GXCls3Bqyr5Io%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-435d212bc95d6f9e1d445e7a2dfe090d856c8a07_Funnel%20Builder%20-%20Paragraph%20-%20Border%20-%20Width.png?alt=media&#x26;token=18ba00e3-646b-414c-9bb1-62b753962cdc" alt=""><figcaption></figcaption></figure>

### Color

\*\*\*\*To change the color of the border, click on this color icon.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FohLfhNS1EiblBoTdhmki%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-3f96a5bc87403fa446c81351d6a074bcdfbc2592_Funnel%20Builder%20-%20Paragraph%20-%20Border%20-%20Color.png?alt=media&#x26;token=f42e4774-caf0-415b-aaf6-c269fa0afe2a" alt=""><figcaption></figcaption></figure>

### Radius

\*\*\*\*Adjusting the radius of your border curves the edges of the border, the higher the number you select, the curvier it becomes.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FjUWVPiNJqkUKKL30wD34%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-2cd351b66549a529a3b4bb7cdd01fad62b3bc453_Funnel%20Builder%20-%20Paragraph%20-%20Border%20-%20Radius.png?alt=media&#x26;token=1671669c-446a-445b-8c10-5b200958664c" alt=""><figcaption></figcaption></figure>

### Radius Edge

\*\*\*\*You can decide the corner of the border you want to curve, either all edges, Top only or bottom edge only.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2Fiab0hBjijZGu5nDFXXk8%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-a17130cfffd65cde26f8bf4694833b0c0a071f3e_Funnel%20Builder%20-%20Paragraph%20-%20Border%20-%20Radius%20edge.png?alt=media&#x26;token=a4c64389-a15e-4169-972b-e91ec246aff9" alt=""><figcaption></figcaption></figure>

### Line Height

You increase the height of the Element box by adjusting the size bar.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2F2TsbcjbuT14xnADaEQM0%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-b40134089bf0e66c42da098112a29aa1da9dbed0_Funnel%20Builder%20-%20Paragraph%20-%20Line%20Height.png?alt=media&#x26;token=388a9b2e-7ce0-4398-8a68-d75e82bf79dc" alt=""><figcaption></figcaption></figure>

### Text Transform

In the Text Transform, you can decide to change the text to Uppercase, Lowercase, or just capitalize each word.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2F6z8irSR26pN6SHeemdSb%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-3bc4b28f5b5e387f8cc8b54e8bba4340adfa7c51_Funnel%20Builder%20-%20Paragraph%20-%20Text%20Transform.png?alt=media&#x26;token=7ecbf16d-d3ef-4db2-8de1-678dcbe7dc6b" alt=""><figcaption></figcaption></figure>

### Visibility

You can make this page visible on both desktop and mobile, and you can also select just one of the two by simply clicking on the one you want to activate.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FJeIvdJhijtgNiBpYABqh%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-715aab5651bdbc93aeec1eb790a0c801d47176c0_Funnel%20Builder%20-%20Paragraph%20-%20Visibilty.png?alt=media&#x26;token=08d14675-aa97-49ae-8af5-894d851d7281" alt=""><figcaption></figcaption></figure>

### Custom Class

Press enter or space to add a class.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FTv2E3wLjTHuoRDkofp0P%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-763cfa485f431ee4068fa7412d43ebe260da493d_Funnel%20Builder%20-%20Paragraph%20-%20Custon%20CSS.png?alt=media&#x26;token=98114da9-cd3b-4a15-82d1-1785e2b3b26f" alt=""><figcaption></figcaption></figure>

### CSS Selector

You can copy a CSS Selector by clicking on the "copy" icon on the right side of the reference number you want to copy.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FlkzkVPARa9YX7953iawY%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-e9bbd8f586f71cf599ccfaac253d8a1b1a6ecc8b_Funnel%20Builder%20-%20Paragraph%20-%20CSS%20Selector.png?alt=media&#x26;token=c31e3cbb-41cd-437e-b787-1e6deb01492a" alt=""><figcaption></figcaption></figure>
