# Blog Post

A blog post typically covers a specific topic or query, it's educational in nature. In this section, you can share long-form articles related to your business that cover topics your target audience may want to read or learn about.

### General Settings

### 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%2F4duOuz7WUREhQQaNaJpj%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-253571c3cb7ee7cbeb718b51cd7a146279eed20e_Blog%20Post%20-%20Element%20name.png?alt=media&#x26;token=526f7acc-d58d-45cb-adbc-b43df4ddeddb" alt=""><figcaption></figcaption></figure>

### Blog Type

#### Standard

You can decide to use the standard type which has the blogs in a Grid View.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FziiuKJhVohtSoIFRdQmF%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-6c56a9df7666939a0a5fbbf6760577c3b7a4335f_Blog%20Post%20-%20Type%20-%20standard.png?alt=media&#x26;token=714154d2-6d50-41d8-a12e-3288857050a5" alt=""><figcaption></figcaption></figure>

#### Compact

You can decide to use the standard type which has the blogs in a List View.

{% hint style="info" %}
This blog content will be replaced by actual post content, during previews or in the live URL
{% endhint %}

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2F0MUMEfNpBQTxPD4jir2M%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-e2d00e2ba77f1e4bf27f2370dcdd6006a3a3f46d_Blog%20Post%20-%20Type%20-%20Compact.png?alt=media&#x26;token=97142c5d-6ce8-4090-a123-ad6b770b3612" alt=""><figcaption></figcaption></figure>

### Pagination

Pagination settings allow you to select the number of blog posts visible on the page. It is recommended to keep it to 6 or 9 blog posts.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2Ft0DijOogQx65Y00wNkUo%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-032822a793a8ecbfea319789486eaea973b04cfd_Blog%20Post%20-%20Pagination.png?alt=media&#x26;token=339ac7c3-27eb-4227-a686-ce7a21e69fad" alt=""><figcaption></figcaption></figure>

### Button Options:

* **Button Text**\
  You can decide to edit the button content in this space provided.
* **Button Color**\
  You can edit the background color of your button here.
* **Button Text Color**\
  You can edit the color of your button text here.
* **Button Border Color**\
  You can also edit the color of your button border here.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FO2ivJ97Tr8yIsuI8Gh9w%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-e623726450ec60e261d3eab4029fc0e45246b9e9_Blog%20Post%20-%20Button.png?alt=media&#x26;token=a99fae24-1598-489e-b781-df0d180b0c3a" alt=""><figcaption></figcaption></figure>

## Advanced Settings

### Spacing Option:

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.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FDNqaarYLjip8N4fIBnXk%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-c30fa7907705617470d0f63a4890f4321b95e243_Blog%20Post%20-%20SSpacing%20Option.png?alt=media&#x26;token=f4ecf2e9-2041-4d36-92b9-d4b7346e65c7" alt=""><figcaption></figcaption></figure>

## Border And Shadow:

### 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;

* **Style**\
  \*\*\*\*There are three (3) Different styles for your border, It could be a solid, Dashed, or Dotted border.
* **Width**\
  \*\*\*\*When you increase the border width, it increases the thickness of the border.
* **Color**\
  \*\*\*\*To change the color of the border, click on this color icon.
* **Radius**\
  \*\*\*\*Adjusting the radius of your border curves the edges of the border, the higher the number you select, the curvier it becomes.
* **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%2FBbkmDepwJqC4bVVaPKYy%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-5fb3127490de4d73494b28c89a908793d841f82c_Blog%20Post%20-%20Border.png?alt=media&#x26;token=742c1f5b-9a54-4110-8379-65f6e30f6c61" alt=""><figcaption></figcaption></figure>

### Box Shadow

If you want your box to have a shadow, simply select how strong 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%2FGIUTCzie4e0cszL97XVG%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-312cc10fc369d25aae9ff475fafc85255d6ef580_Blog%20Post%20-%20Shadow.png?alt=media&#x26;token=82916477-ed36-4468-93d1-551cf27cfa92" alt=""><figcaption></figcaption></figure>

### Visibility & Custom Class:

#### Visibility

You can decide if you want this particular Edit option to be visible on only mobile devices, desktops, or both by clicking on it to highlight the icon.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FEBsFjyj6w98j7B3KcC9i%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-2e9dde23c068ae0ba1b313c8d679ff825548e2a3_Blog%20Post.png?alt=media&#x26;token=365c20d4-8402-407e-8962-655d640bae5e" alt=""><figcaption></figcaption></figure>

#### Custom Class

Input your custom class here.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2F5KVGUKOAVHUORzVSzz1k%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-801a511ace97e4e25b6aa1a72fd308f4249a825a_Blog%20Post%20-%20custom%20class.png?alt=media&#x26;token=a21f2bdd-4d00-4e6a-8aea-43cdbcbf00a8" alt=""><figcaption></figcaption></figure>

### CSS Selector

If you need to copy the Custom CSS, just click on the "Copy" icon on the right side of the reference code.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FbZbGGNA5RFcp2gx3brtp%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-16495daca4801be879961c753b86c347d2d3db2c_Blog%20Post%20-%20CSS.png?alt=media&#x26;token=29f8f41c-6b43-4b14-ba49-ce9ad2ffb686" alt=""><figcaption></figcaption></figure>
