Browse documentation

Grigora Blog Elements Explained

Grigora's blog editor includes blocks for text, images, lists, tables, quotes, and other content. This guide explains each block and its settings.

Accessing Blog Elements

Collapsed element toolbar on the left side of the blog editor.

Expanded blog element toolbar showing available content blocks.

Open your post editor and look for the arrow button on the left side. Click on it and you'll see all the available elements you can add to your posts. Each element offers unique functionality to make your blog posts interactive and attractive.

Text Block - The Foundation Element

The text block is the most commonly used element for your blog posts. After adding it, you can type any content you want and customize it extensively through the settings panel.

 

Text block structure settings beside the selected paragraph.

General Settings

Tag: Convert your text into headings from H1 to H6 for proper content hierarchy

Font Size: Adjust using the input field or slider for precise sizing

Text Alignment: Choose from justify, left, center, or right to control text positioning

Font Weight: Change the weight of your text for emphasis and visual hierarchy

Text Transform: Transform your text case (uppercase, lowercase, capitalize)

Text and background color palettes in the text block Style tab.

Style Settings

Text Color: Select from available colors or use the color picker for custom colors

Background Color: Apply background colors using the same color selection method

Link Color: Customize link colors to match your brand or design

Advanced text block settings in the blog editor sidebar.

Advanced Settings

Padding and Margin: Apply spacing around your text elements

Columns: Convert text into columns with custom gaps for magazine-style layouts

Image Block - Visual Enhancement

Image block button indicated in the blog element toolbar.

Add images to make your blog posts more attractive and engaging. The image block offers customization options.

Inserted image with its image settings panel open.

Alt Text: Add for accessibility and SEO optimization

Image Title: Provide descriptive titles for better organization

Links: Make images clickable by adding destination URLs

Alignment: Position your images precisely within your content layout

List Block - Organized Content

List block button indicated in the blog element toolbar.

Use lists to organize content in a structured way that's easy to scan and understand. After adding list items, you have extensive customization options.

List type controls highlighted in the list block settings.

List Type: Choose from bullets, numbered, or custom list styles

 

List block color palettes in the Style tab.

Styling Options: Change colors, background, and link colors to match your design

 

List block Advanced settings beside a highlighted list.

Advanced Settings: Add padding and margins for proper spacing

 

Table Block - Structured Data

Table block button indicated in the blog element toolbar.

Configure Table picker for choosing rows and columns.

When adding a table, first select the rows and columns. Use tables to display structured information.

 

Table structure controls beside an inserted table.

Modify Structure: Adjust rows and columns after creation through settings

Table Mode:

  • Squish: Displays the table in its standard layout. As you add more columns, the available space is divided among them, causing the cells to become narrower.

  • Scroll: Allows the table to extend beyond the available screen width. When the table is wider than the viewport, users can scroll horizontally to view the remaining columns without affecting the table's layout.

  • Collapse: Converts the table into a more compact, responsive layout on smaller screens. Instead of squeezing all columns into a narrow space, each row is reorganized so that its data is displayed in a stacked, easy-to-read format. This keeps all table information accessible without requiring horizontal scrolling, making it especially useful for mobile devices.

 

Table color options in the Style tab.

Style Settings: Change text and background colors for better readability

 

Table header and equal column width controls in Advanced settings.

Advanced Options: Toggle to add headers and enable equal column width for consistent formatting

 

Quote Element - Highlighting Important Content

Quote block button indicated in the blog element toolbar.

Add quotes to emphasize important information or testimonials in your posts.

 

Quote structure settings beside a quotation block.

Design Style: Choose from available designs to match your content style

 

Quote alignment controls in the block settings panel.

Font Size: Adjust using input field or slider for proper emphasis

 

Quote text and background color palettes in the Style tab.

Colors: Customize text, background, Accent and Citation Colors.

 

FAQ Element - Interactive Q&A

Use this block to add questions and answers.

FAQ block button indicated in the blog element toolbar.

Content: Add your questions and answers

 

FAQ question heading level menu expanded in the structure settings.

Title Tag: Change to heading, paragraph, or span for proper formatting

 

FAQ color palettes in the Style tab.

Colors: Customize text, background, and link colors

FAQ Advanced settings beside the question and answer fields.

Layout: Add padding and margins for clean presentation

Additional Elements Access

 

Additional content element menu open in the blog editor.

Beyond these main elements, you can access more blocks by typing the slash key (/) in any text block. This opens a complete list of available elements for your blog posts, giving you even more options to enhance your content with specialized blocks and functionality.


Help guide image