Skip to main content
All CollectionsKehio EditorCreationItems
Understanding and using the "Title and Text" items
Understanding and using the "Title and Text" items
Updated over 5 months ago

In this article, we'll look at why we've decided to separate the Text and Title items into 2 different items, even though they are very similar, and then at how to use them when starting a creation from scratch.

Important note: The text editor used for your "Icon with text" item is identical to the one used for the "Text" item. It functions and parameters in the same way.

Two distinct items: Title and Text

We've chosen to create two separate items, "Title" and "Text", to offer you a better user experience and a more optimized solution. Initially, these two elements could have been grouped together in a single editor, but we've separated them to make it easier to duplicate, move and hide each one.

This separation also helps optimize the UX of your text content. When you use two different items, you can manage them separately, offering greater flexibility in their optimization. For example, you can adjust the space between the two items, a feature that would not be possible if title and text were grouped together in a single item. What's more, this division allows you to independently manage the alignment, size and color of each item, giving you advanced optimization possibilities at every level.


Add a title or text content to your creation from scratch

To start, access the left-hand panel of your Kehio editor and select or add a Content item. Once selected, a panel will open with, by default, the addition of a "Text" item. You can then click on "Add Item" to add a Title or other Text as required.


Format text with the Text editor

With Kehio's text editor, you have multiple formatting options to enrich your sales pages and optimize your textual content. Here are the available formatting features that can make your website content easier for users and search engines to read.

Formatting options

  • Paragraph

  • Title (1-6)

  • List

  • Blockquote

Creating a paragraph

To create a paragraph, click on the Format button. Select Paragraph from the drop-down menu.

Create a title

To create a Title, we recommend you use the Title item and not the Text item. In some cases, however, you can set up the title directly in the text editor, so we've left it up to you to select the format of your titles.

To create a title with the Text item, click on the Format button. In the drop-down menu, select the desired title format (H1 to H6).

Create a bullet list

To create a bullet list, click on the Format button. From the drop-down menu, scroll down and select List.

Create a blockquote

To create a blockquote, click on the Format button. From the drop-down menu, scroll down and select blockquote.

Add a link

To add a link, highlight your text and click on the Link button, then paste your link into the field intended for this purpose. To open the link in a new tab, check the "Open in new tab" option. By default, if this option is not selected, the link will open in the same tab.

Adding HTML content

You can input HTML content using the text editor.

Click on the </> Show HTML code button to display the HTML code of the content in the text editor.

With HTML display, you can make many changes to content in the editor, or simply view more easily which formatting tag is used by default in a creation.


Formatting a Title with the Title item editor

In Kehio's editor, you can format your titles using HTML tags from H1 to H6. This allows you to structure the content of your page hierarchically, optimizing the organization of information and accessibility for search engines, which is essential for SEO. Choose the appropriate tag according to the importance of each title in the structure of your content.

Select Title format

To choose the format of your title, click on the format button and choose the type of tag you want to optimize your text content.

Add a link

To add a link, highlight your text and click on the Link button, then paste your link into the field intended for this purpose. To open the link in a new tab, check the "Open in new tab" option. By default, if this option is not selected, the link will open in the same tab.

Ajouter du contenu HTML

You can input HTML content using the text editor.

Click on the </> Show HTML code button to display the HTML code of the content in the text editor.

With HTML display, you can make many changes to content in the editor, or simply view more easily which formatting tag is used by default in a creation.


Alignment prioritization

ℹ️ Important notice : It's important to note that in Kehio Editor, you can align your textual content in two different ways: either directly from the Settings section by selecting the tab for the chosen textual format (paragraph, title, list, quotation block), or from the Text Editor.

We recommend prioritizing alignment from the Settings section for overall consistency, and using the Text Editor only in specific cases where you wish to isolate one textual element from others.

For example, if you have several text elements formatted as paragraphs and you wish to align one of them differently from the others, the Text Editor will allow this individual adjustment. In this case, the alignment specified in the text editor will override the alignment choices made in the Paragraph tab in the parameter section for that particular element.


Change the color, size and alignment of my text content

With Kehio Editor, you have the flexibility to individually customize the color, size, alignment and margins of each text element. Each type of text and title formatting offers its own customization options.

To adapt and personalize your textual content, simply select the format you wish to customize in the Settings tab:

  • Paragraph

  • Title (1-6)

  • List

  • Blockquote


Customization options available for each text content format :

Here's a detailed guide to the customization options you can apply to your text elements in Kehio Editor :

Color :

  • To change the color of your text, click on the color dot (the default color is black). You can then select the desired color from the palette, or enter the hexadecimal code directly in the field provided.

Font style :

  • Click on the drop-down menu to choose the desired option from the following: Light, Normal, Medium, Semi-bold, Bold, Extra-bold. This option lets you define the font weight to accentuate or attenuate the importance of certain texts.

Font size :

  • Modify font size by clicking on the arrows in the size box to increase or decrease font size. Values are calculated in "rem", ensuring proportional scaling based on the document's base font size.

  • Note that you can adjust text size differently for desktop and mobiles, and also for all screen resolutions thanks to media queries management.

Alignment :

  • Click on the alignment button, then choose from the following options: Align left, Center, Align right or justify. This function is useful for aligning your text according to the layout and design of your page.

  • Alignment can also be adjusted separately for mobile devices and desktop, and for all screen resolutions thanks to media queries.

Margins :

Adjust the margins above and below your text by clicking on the arrows in the "Top margin" and "Bottom margin" inserts. Increasing or decreasing these margins can help create space around your text blocks, improving the readability and overall aesthetics of your page. Margin values are also expressed in "rem".

These customization tools allow you to fine-tune the appearance of your text content to precisely match your site's design and functionality needs.

ℹ️ Note : To check the formatting used in your text editor, you can select the Code </> button, which will allow you to view the HTML tags used. This feature is particularly useful when you're importing a creation and don't know what formatting has been used in the textual content you're viewing.

Corresponding HTML tag :

Paragraph = <p>content

Title H1 = <h1>

Title H2 = <h2>

Title H3 = <h3>

Title H4 = <h4>

Title H5 = <h5>

Title H6 = <h6>

List = <ul><li>

block quotation = <blockquote>

</aside>


Managing text content's Media Queries

For those with more advanced expertise, our editor gives you the option of optimizing your text content for all screen resolutions, thanks to media queries. These options are accessible in the settings tabs for each type of formatting.

To adjust your settings for different resolutions, proceed as follows:

1 - Go to the Settings section: go to this section and select the tab corresponding to the type of formatting you wish to adapt.

2 - Adjustments by resolution: In the select tab, you'll find a section where you can choose different font sizes and specific alignments for each screen resolution.

  • Tablet : Adapt your content for screens with a resolution width ranging from 768 px to 1024 px.

  • Laptop 1 : Adapt your content for screens with a resolution width ranging from 1025 px to 1280 px.

  • Laptop 2 : Adapt your content for screens with a resolution width ranging from 1281 px to 1439 px.

  • Desktop high resolution: Adapt your content for screens with a resolution width of 1440 px and more.


Managing spaces between text content

We invite you to watch our video tutorial for a better understanding of how to manage your spaces in Kehio Editor. If you prefer a text-based approach, here are the details below.

Kehio Editor offers several options for managing the spacing between content blocks, which vary according to the type of creation and structure chosen. Here's how you can optimize spacing at different levels of your project:

Inside the item:

Go to the Settings section and select the tab corresponding to the format of your textual content. Here you have the option of adding a top and bottom margin, allowing you to control the spacing directly around the text element.

From the content block:

In the "Content" tab of the "Creation" section, you can set the spacing between text and other items within the content block. You can set :

  • Gap: The space between items within the same content block.

  • Margin: The external space around the text content block that affects its overall placement on the page.

  • Padding: The internal space around the content of the textual content block, influencing the proximity of the text to the edges of the block.

From the Block:

In the "Block" tab, you can manage the spacing between the various contents present in this block. This section also offers options for adjusting Gap, Margin and Padding, providing complete flexibility for fine-tuning the spacing and alignment of elements on your page.

These features enable precise customization, essential for a professional, aesthetically pleasing layout.

📖 If you'd like to deepen your understanding of the Gap, Margin and Padding functions in Kehio Editor, we encourage you to read the full article on these features.


Advanced optimization with CSS Customization :

In Kehio Editor, the Settings section gives you the option of creating a custom CSS class, which is ideal if you want to distinguish the style of one textual content from another, even if they use the same HTML tag and therefore, by default, have the same customization options. By creating a custom tag, you can style any text field uniquely within your project.

To create your own CSS customization :

1- Go to the Settings section: Click on "Add a CSS Customization".

2- Define the customization: Add a name to your custom class.

3- Adapt the customization: Configure the styles as you would for any text formatting

  • Color

  • Font style

  • Font size

  • Alignment

  • Margins

4- Integrate the class into your content:

  • Copy the name of the class you've created.

  • In the text editor, click on the </> button to "Display HTML code".

  • Paste the <class="class_name"> HTML tag into the HTML code of the content you wish to customize.

If you need help understanding or modifying your text content, feel free to contact our support team at any time by e-mail or live chat .

Did this answer your question?