# Element

{% hint style="info" %}
**Who can use this feature?**

* This feature is available for all users
  {% endhint %}

One of the core features of our blog app is the Notion-like editor, powered by the building block architecture instead of the Rich Text editor inside the Shopify admin. If you are familiar with [Notion](https://www.notion.so/), or [Medium](https://medium.com/), or [GhostCMS](https://ghost.org/), you will love this blog editing experience.

Blog builder helps you create blogs easier and faster just because you will love writing blogs again over the plain text editor you are having. In blog builder, there are 2 main actions you can take to create blogs: *add elements (blocks of content)* and *style*.

## Elements

In SEOon Blog, we support several types of content and media, which is currently widely supported by Shopify blog and Shopify theme on the market. 

* :toolbox: **Basic**
  * Heading
  * Paragraph
  * Image
  * Video
  * List
  * Quote
  * Divider
  * Table
  * Product
  * Spacer
  * TikTok Embed
  * Instagram Embed
* :rocket: **Advanced**
  * Button
  * Text & image
  * Text & text
  * Text & product
  * Table of content
  * Related posts
  * Recent posts
  * FAQs
  * Testimonials

### Heading

We support heading from heading 2 to heading 4. By default, the heading would be the heading 2 level. One thing missing is the heading anchor link. We have not supported this feature at the moment due to wide theme supportee

You can also make the heading **bold**, *italic*, underlined, or add a link to the text. Highlight the text you want to edit and select.

<figure><img src="/files/NXB9d3UFwVw4f0riw6Zv" alt=""><figcaption></figcaption></figure>

> Remember to structure your heading level correctly for the sake of SEO and readability of the audiences.

### Paragraph

<figure><img src="/files/aAi2g4jPwKBO4ckwXc73" alt=""><figcaption></figcaption></figure>

You can make text **bold**, *italic*, underlined, or attach links to text. Highlight the text you want to edit and select.&#x20;

> Currently, we have not yet support the link title, link target. But soonly enough we will.

<figure><img src="/files/fAGw9ZqdQbpcCxfOluWq" alt=""><figcaption></figcaption></figure>

### Image

You can normally add the image to the editor like other blocks:&#x20;

* Upload an image file
* Select from your media library
* Insert from URL

<figure><img src="/files/NRzyQDfuxBp5fea8t4YP" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
After uploading the image to the editor, the file would be uploaded to the Shopify files section. You content and data would be yours.
{% endhint %}

You can also add other details for image:

* Alt text
* Image ratio
* Image alignment
* Caption
* Image link

<figure><img src="/files/ZXP5iLToXNEWSxmmXWHV" alt=""><figcaption></figcaption></figure>

### Video

You can add videos to blog by:

* Uploading video from your device
* Selecting video from Media library
* Inserting from URL

{% hint style="info" %}
Currently we support Youtube and Vimeo URL.&#x20;
{% endhint %}

<figure><img src="/files/QOFLpdelGJdE3wtXW5sv" alt=""><figcaption></figcaption></figure>

### List&#x20;

You can choose to have the unordered, or ordered list in your block for better structuring your content inside the blog.

<figure><img src="/files/zkuNMfXeDOFPeY7MR8Nn" alt=""><figcaption></figcaption></figure>

### Quote

You can also add quote blocks to the blog editor.&#x20;

<figure><img src="/files/UIuX54QH1B43FHnR4bu7" alt=""><figcaption></figcaption></figure>

In element settings (on the right panel), you can edit:

* Layout of quote
* Image
* Quote
* Colors for background, text and quote symbol
* Authors infomation: Name and title

### Divider

The same goes with the delimiter, each theme may render the delimiter a bit differently, but it would be helpful if you have a very long blog.

<figure><img src="/files/CPWw2CVKRajhZMPqEjhF" alt=""><figcaption></figcaption></figure>

### Table

<figure><img src="/files/3K8yf2rB1Y8G6LCre9NY" alt=""><figcaption></figcaption></figure>

You can edit your table by adding row or column above or below the selected row.

<figure><img src="/files/puG26Vcbw63tvwl1So0N" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/RpwPJyZqjv9KyoNQojan" alt=""><figcaption></figcaption></figure>

### Product

You can insert products from your Shopify store to blog.

You can select products and set up content, button in this section.

{% hint style="info" %}
You can add maximum 20 products.
{% endhint %}

<figure><img src="/files/rKOU7Lih6snvdBT2KyZW" alt=""><figcaption></figcaption></figure>

### Spacer

This helps users create spacing between elements in a blog post — without needing to use a divider.

How to configure:

* Height: Adjust the vertical space
* Color Picker: Customize the spacer color and adjust its opacity

Use it to fine-tune layout and visual balance between sections.

<figure><img src="/files/5SZsMyls6ll1M7uFDLgV" alt=""><figcaption></figcaption></figure>

### Recent posts

Show other recent blog posts below the blog.

{% hint style="info" %}
You need to publish at least 3 blogs to show recent post here.
{% endhint %}

<figure><img src="/files/dgf0YNC5OTSfy1rS91MN" alt=""><figcaption></figcaption></figure>

### Related posts

Show similar blog posts that have same tags or in same categories in your blog.

Select blog posts in the list and show them in carousel display. We recommend showing 3 related blog posts for the best result.

<figure><img src="/files/RATdRVqctWyN29FBuOfw" alt=""><figcaption></figcaption></figure>

### Table of content

Table of content pulls form the H2, H3 and other heading tags (h4, H5, etc.) in your blog.

By adding a table of content to your blogs, it helps readers to navigate long-form content and boost SEO performance.

You can also edit the title of table of content.

<figure><img src="/files/dysK65jRtdeyNhimPFru" alt=""><figcaption></figcaption></figure>

### Text & image

Text & image is a section in blog with layout including both text, images and button.

You can set up layout and content in this element.

{% hint style="info" %}
You can select more than one image to create image carousel.
{% endhint %}

<figure><img src="/files/jZ1hiBeVWAQ3a1UCHzkM" alt=""><figcaption></figcaption></figure>

### Text & text

This helps you make an layout including 2 columns of text in blog.

<figure><img src="/files/b5FFnmIEcSdF2VgDGTcV" alt=""><figcaption></figcaption></figure>

### Text & product

This helps you make an layout including 2 columns: product and text

You can select product from your list and customize content.

<figure><img src="/files/RnCeGirKGyNGJAWdbQJC" alt=""><figcaption></figcaption></figure>

### Image gallery

**Layout Configuration**

* Choose between **Grid** or **Slider** display modes
* Select the **Image Card Layout**
* Adjust the **Image Aspect Ratio**

**Image**\
Click **Select Image** to open the media modal and choose the images you want to display.

**Alt Text**\
Edit the **Alt Text** for each image to improve accessibility and SEO.

**Caption**\
Add captions to your images and choose the alignment: **Left**, **Center**, or **Right**.

🎮 *Try it in action*

{% embed url="<https://app.arcade.software/share/eQX7NSZZZ6S2CcdlXkpE>" %}

### Button

Insert button in your blog to keep customer engaged with your content.&#x20;

<figure><img src="/files/8uR2bxt175JSIg2WBZlm" alt=""><figcaption></figcaption></figure>

### AI generated FAQs

AI FAQ Generator helps you quickly create FAQs for your blog post, saving time and improving SEO.

**Generate with AI**\
In the **Config** tab, choose one of the two options:

* **From Blog Post:** AI reads your blog content and generates FAQs related to it.
* **From Custom Topic:** Enter a topic manually for AI to generate FAQs that aren’t based on the post content.

🎮 *Try it in action*

{% embed url="<https://app.arcade.software/share/klrjKyVMC542sqimbKBA>" %}

### Testimonials

This helps add customer's reviews about products or services to you blog posts.&#x20;

<figure><img src="/files/MvNkER08SdowVmuc0NXW" alt=""><figcaption></figcaption></figure>

In each testimonial, you can customize:

* Content of review
* Reviewer's image, name, title and URL (profile, website, etc.)
* Review star

### Custom HTML

This allow users to add custom code (HTML) into blog posts.

### Decoration

This helps user to create template using AI.&#x20;

{% embed url="<https://app.arcade.software/share/Z0yPDBNGkz8Hi7nnfEsC>" %}

⚠️ *Tip:* The more specific and well-formatted your guidance, the better the result.

✅ Use bullet points for clarity (e.g., colors, materials, lighting style).

### TikTok Embed

This help users embed TikTok videos into their blog posts.

{% embed url="<https://app.arcade.software/share/RAx7aDBEbyupuvZ5CqgR>" %}

### Instagram Embed

This helps users embed Instagram posts or reels into their blog content.

{% embed url="<https://app.arcade.software/share/vddDh9Jy9EhPOjVPPAXU>" %}

### Resuable Elements

Let’s see how easily you can reuse elements from other blog posts to save time and maintain consistent content.

{% embed url="<https://app.arcade.software/share/plO5kD8PrmjQy4fCCd5N>" %}

### Element default settings

Set default settings for an element so you don’t have to reconfigure it every time you create a new one.

{% embed url="<https://app.arcade.software/share/sskc1uW5sNfcbXm41w8A>" %}

### AI feature image

**AI Feature Image** helps you create custom blog visuals that match your content — just describe what you want, and let AI generate it for you.

{% embed url="<https://app.arcade.software/share/yhNU95vbdE9uP39X0mQT>" %}

### Checkout Button

**Checkout Button** lets customers purchase products directly from your blog post without visiting the product page — making the buying process faster and boosting conversion rates.

{% embed url="<https://app.arcade.software/share/cC44jhoyEw4Lstf99X1e>" %}

### Product card

**Product Card** lets customers view product details in a popup — no need to open a new tab.

{% embed url="<https://app.arcade.software/share/aeMOwGDzc49Eknq8vi34>" %}

### Recipe

**Recipe** lets you create cooking instructions that match your blog content while meeting Google’s structured data standards.

{% embed url="<https://app.arcade.software/share/AAZWxxbAQXqIB0GVeicX>" %}

### AI image generator

**AI Image Generator** lets you create images and test different AI models to add visuals to your blog posts.

{% embed url="<https://app.arcade.software/share/VWKb0doPYfXjcZaxeaw6>" %}

### X embed

**X Embed** lets you embed an X (Twitter) link into your blog post to drive traffic back to your X profile.

{% embed url="<https://app.arcade.software/flows/kJ5VPJCivhSrvVyfRAHe/view>" %}

### Image compare

Image Compare lets you create interactive before-and-after visuals using a draggable slider — perfect for showing visual changes or transformations in your blog post.

**Step 1: Add the Element**\
Drag and drop **Image Compare** from the **Element Menu**, or use the shortcut `/compare` or `/imagecompare`.

**Step 2: Add Images**\
Upload your **Before** and **After** images directly from your media library.

**Step 3: Configure Settings**

* **Aspect Ratio:** Choose the width-to-height ratio for your element.
* **Layout:**
  * **Horizontal:** Slider moves from left to right.
  * **Vertical:** Slider moves from top to bottom.
* **Custom CSS:** Add your own CSS code to further customize the display.

🎮 *Try it in action*

{% embed url="<https://app.arcade.software/share/Il9IdEiTVCHkmpqZqpQh>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.seoon.io/blog/create-blog-post/element.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.