Passer au contenu principal
Toutes les collectionsKehio Editor CréationLes Items
Comprendre et utiliser les items “Titre et Texte“
Comprendre et utiliser les items “Titre et Texte“
Mis à jour il y a plus d’une semaine

Dans cet article, nous allons voir pourquoi nous avons décidé de séparer les items Texte et Titre en 2 items différents bien qu’ils soient très similaires et ensuite comment les utiliser en démarrant une création depuis zéro.

Note importante : L'éditeur de texte utilisé pour votre item "Icône avec texte" est identique à celui utilisé pour l'item "Texte". Il fonctionne et se paramètre de la même manière.

ℹ️ Vous pouvez lire l’article ou découvrir toutes les possibilités des items textuels "Titre" et "Texte" et apprenez à les exploiter pleinement dans cette vidéo.

Cette vidéo couvrira les points suivants :

  1. Comment fonctionne l’éditeur de texte ? Pourquoi avoir fait le choix de créer 2 items “Titre et Texte” ?

  2. Optimisation avancée de votre contenu textuel avec les media queris

  3. Gestion des espaces dans votre contenu textuel

  4. Gestion et priorisation des alignements de votre contenu textuel

  5. Création de personnalisations CSS


Deux items distincts : Titre et Texte

Nous avons choisi de créer deux items distincts "Titre" et "Texte", pour vous offrir une meilleure expérience utilisateur et une solution plus optimisée. Initialement, ces deux éléments auraient pu être regroupés dans un seul éditeur, mais nous les avons séparés pour faciliter la duplication, le déplacement et le masquage de chacun d'eux.

Cette séparation favorise également l'optimisation UX de votre contenu textuel. Lorsque vous utilisez deux items différents, vous avez la possibilité de les gérer séparément, offrant ainsi une plus grande flexibilité dans leur optimisation. Par exemple, vous pouvez ajuster l'espace entre les deux items, une fonctionnalité qui ne serait pas possible si le titre et le texte étaient regroupés dans un seul item. De plus, cette division vous permet de gérer indépendamment l'alignement, la taille et la couleur de chaque élément, vous offrant ainsi des possibilités d'optimisation avancées à tous les niveaux.


Ajouter un contenu textuel titre ou texte à votre création en partant de zéro

Pour commencer, accédez au volet de gauche de votre éditeur Kehio et sélectionnez ou ajoutez un Contenu. Une fois sélectionné, un volet s'ouvrira avec, par défaut l'ajout d'un item "Texte". Vous pouvez ensuite cliquer sur "Ajouter un Item" pour ajouter un Titre ou d'autre Texte selon vos besoins.


Formater un texte avec l'éditeur de l’item Texte

Avec l'éditeur de texte de Kehio, vous disposez de multiples options de formatage pour enrichir vos pages de vente et optimiser votre contenu textuel. Voici les fonctionnalités de formatage disponibles qui peuvent faciliter la lecture du contenu de votre site web par les utilisateurs et les moteurs de recherche.

Options de formatage

  • Paragraphe

  • Titre (1-6)

  • Liste

  • Bloc de citation

Créer un paragraphe

Pour créer un Titre, nous vous recommandons d’utiliser l’item Titre et non l’item Texte. Mais pour certains cas, vous pouvez paramétrer le titre directement dans l’éditeur de texte, nous vous avons donc laissé la possibilité de sélectionner le format de vos titres.

Pour créer un titre avec l’item Texte, cliquez sur le bouton Format. Dans le menu déroulant sélectionner le format titre souhaité (H1 à H6).

Créer une liste à puces

Pour créer une liste à puces, cliquez sur le bouton Format. Dans le menu déroulant, faites défiler et sélectionnez Liste.

Créer un Bloc de citation

Pour créer un bloc de citation, cliquez sur le bouton Format. Dans le menu déroulant, faites défiler et sélectionnez Bloc de citation.

Ajouter un lien

Pour ajouter un lien, mettez votre texte en surbrillance dans l'éditeur de texte et cliquez sur le bouton Lien, puis coller votre lien de le champs prévu à cet effet.

Pour que le lien s'ouvre dans un nouvel onglet, cochez l'option « Ouvrir dans un nouvel onglet ». Par défaut, si cette option n'est pas sélectionnée, le lien s'ouvrira dans le même onglet.

Ajouter du contenu HTML

Vous pouvez saisir du contenu HTML à l'aide de l'éditeur de texte.

Cliquez sur le bouton </> Afficher le code HTML pour afficher le code HTML du contenu dans l’éditeur de texte.

Avec l'affichage HTML, vous pouvez visualiser plus facilement quelle balise de formatage est utilisée par défaut dans une création.


Formater un Titre avec l'éditeur de l’item Titre

Dans l'éditeur de Kehio, vous avez la possibilité de formater vos titres en utilisant les balises HTML allant de H1 à H6. Cela vous permet de structurer le contenu de votre page de manière hiérarchique, optimisant ainsi l'organisation de l'information et l'accessibilité pour les moteurs de recherche, ce qui est essentiel pour le SEO. Choisissez la balise appropriée selon l'importance de chaque titre dans la structure de votre contenu.

Choisir le format du Titre

Pour choisir le format de votre titre, cliquez sur le bouton format et choisissez le type de balise que vous voulez pour optimiser votre contenu textuel.

Ajouter un lien

Pour ajouter un lien, mettez votre texte en surbrillance et cliquez sur le bouton Lien, puis coller votre lien de le champs prévu à cet effet.

Pour que le lien s'ouvre dans un nouvel onglet, cochez l'option « Ouvrir dans un nouvel onglet ». Par défaut, si cette option n'est pas sélectionnée, le lien s'ouvrira dans le même onglet.

Ajouter du contenu HTML

Vous pouvez saisir du contenu HTML à l'aide de l'éditeur de texte .

Cliquez sur le bouton </> Afficher le code HTML pour afficher le code HTML du contenu dans l’éditeur de texte.

Avec l'affichage HTML, vous pouvez visualiser plus facilement quelle balise de formatage est utilisée par défaut dans une création.


Priorisation des alignements :

ℹ️ Note Importante : Dans Kehio Editor vous pouvez aligner votre contenu textuel de deux manières différentes : soit directement depuis la section Paramètre en sélectionnant l’onglet du format textuel choisi (paragraphe, titre, liste, bloc de citation), soit depuis l'éditeur de texte.

Nous recommandons de prioriser l'alignement depuis la section Paramètre pour une cohérence générale et d'utiliser l'éditeur de texte uniquement dans des cas spécifiques où vous souhaitez isoler un élément textuel des autres.

Par exemple, si vous avez plusieurs éléments textuels formatés en paragraphe et que vous souhaitez en aligner un différemment des autres, l'éditeur de texte permettra cet ajustement individuel. Dans ce cas, l'alignement spécifié dans l'éditeur de texte prendra le dessus sur les choix d'alignement faits dans l’onglet Paragraphe dans la section paramètre pour cet élément particulier.


Modifier la couleur, la taille et l’alignement de mon contenu textuel

Avec Kehio Editor, vous avez la flexibilité de personnaliser individuellement la couleur, la taille, l'alignement et les marges de chaque élément textuel. Chaque type de formatage de texte et de titre offre ses propres options de personnalisation.

Pour adapter et personnaliser votre contenu textuel, sélectionnez simplement le format que vous souhaitez personnaliser dans l'onglet Paramètre :

  • Paragraphe

  • Titre (1-6)

  • Lien

  • Liste

  • Bloc de citation


Options de personnalisation disponibles pour chaque format de contenu textuel :

Voici un guide détaillé des options de personnalisation que vous pouvez appliquer à vos éléments textuels dans Kehio Editor :

Couleur :

  • Pour changer la couleur de votre texte, cliquez sur la pastille de couleur (par défaut, celle-ci est noire). Vous pouvez alors sélectionner la couleur désirée de la palette ou entrer directement le code hexadécimal dans le champ prévu à cet effet.

Style de la police :

  • Cliquez sur le menu déroulant pour choisir l'option souhaitée parmi les suivantes : Clair, Normal, Moyen, Semi gras, Gras, Extra gras. Cette option vous permet de définir le poids de la police pour accentuer ou atténuer l'importance de certains textes.

Taille de la police :

  • Modifiez la taille de la police en cliquant sur les flèches de l'encart de taille pour augmenter ou diminuer celle-ci. Les valeurs sont calculées en "rem", ce qui assure une mise à l'échelle proportionnelle, basée sur la taille de police de base du document.

  • Note: Vous pouvez ajuster la taille du texte différemment pour les ordinateurs et les mobiles, et aussi pour toutes les résolutions d'écran grâce à la gestion des medias queries.

Alignement :

  • Cliquez sur le bouton d'alignement, puis choisissez parmi les options suivantes : Aligner à gauche, Centrer, Aligner à droite ou Justifier. Cette fonction est utile pour aligner votre texte selon le layout et le design de votre page.

  • Note : L'alignement peut également être ajusté séparément pour les appareils mobiles et les ordinateurs et aussi pour toutes les résolutions d'écran grâce à la gestion des medias queries.

Marges :

  • Ajustez les marges au-dessus et en dessous de votre texte en cliquant sur les flèches des encarts "Marge du haut" et "Marge du bas". Augmenter ou diminuer ces marges peut aider à créer de l'espace autour de vos blocs de texte, améliorant la lisibilité et l'esthétique générale de votre page. Les valeurs des marges sont également exprimées en "rem".

Ces outils de personnalisation vous permettent de finement ajuster l'apparence de vos contenus textuels pour qu'ils répondent précisément à vos besoins de design et fonctionnalité sur votre site.

ℹ️ Note Importante : Pour vérifier le formatage utilisé dans votre éditeur de texte, vous pouvez sélectionner le bouton Code </> qui vous permettra de visualiser les balises HTML utilisées. Cette fonctionnalité est particulièrement utile lorsque vous importez une création et que vous ne savez pas quel formatage a été utilisé dans le contenu textuel que vous visualisez.

Balise HTML correspondant :

  • Paragraphe = <p>contenu

  • Titre H1 = <h1>

  • Titre H2 = <h2>

  • Titre H3 = <h3>

  • Titre H4 = <h4>

  • Titre H5 = <h5>

  • Titre H6 = <h6>

  • Liste = <ul><li>

  • Bloc de citation = <blockquote>

  • Custom CSS : <class="nom_de_la_classe">


Gestion des Medias Queries de votre contenu textuel

Pour ceux qui ont une expérience plus avancée, notre éditeur vous offre la possibilité d'optimiser votre contenu textuel pour toutes les résolutions d'écran grâce à la gestion des medias queries. Ces options sont accessibles dans les onglets de paramètres de chaque type de formatage.

Pour ajuster vos réglages selon les différentes résolutions, procédez comme suit :

  • 1 - Accédez à la section Paramètres : Rendez-vous dans cette section et sélectionnez l'onglet correspondant au type de formatage que vous souhaitez adapter.

  • 2 - Ajustements par résolution : Dans l’onglet sélectionner, vous trouverez une section où vous pouvez sélectionner différentes tailles de police et des alignements spécifiques pour chaque résolution d'écran.

    • Tablette en portrait : Adaptez votre contenu pour les écrans avec une largeur de résolution allant de 768 px à 1024 px.

    • Tablette en paysage : Adaptez votre contenu pour les écrans avec une largeur de résolution allant de 1025 px à 1280 px.

    • Ordinateur portable et de bureau : Adaptez votre contenu pour les écrans avec une largeur de résolution allant de 1281 px à 1439 px.

    • Haute résolution : Adaptez votre contenu pour les écrans avec une largeur de résolution de 1440 px et plus.


Gérer les espaces entre les contenus textuels

Nous vous invitons à regarder notre vidéo tutoriel pour une meilleure compréhension de la gestion de vos espaces dans Kehio Editor. Si vous préférez une approche textuelle, voici les détails ci-dessous :

Kehio Editor offre plusieurs options pour gérer les espaces entre les blocs de contenu, qui varient en fonction du type de création et de la structure choisie. Voici comment vous pouvez optimiser l'espacement à différents niveaux de votre projet :

Depuis l'item

Accédez à la section Paramètre et sélectionnez l'onglet correspondant au format de votre contenu textuel. Ici, vous avez la possibilité d'ajouter une marge supérieure et inférieure, ce qui vous permet de contrôler l'espacement directement autour de l'élément textuel.

Depuis le Contenu

Dans l'onglet "Content" de la section "Création", vous pouvez gérer les espaces entre chaque item textuel et autres au sein de ce bloc de contenu. Vous avez la possibilité de régler :

  • Le Gap : L'espace entre les items au sein d'un même bloc de contenu.

  • La Marge : L'espace externe autour du bloc contenu textuel qui affecte son placement global sur la page.

  • Le Padding : L'espace interne autour du contenu du bloc de contenu textuel, influençant la proximité du texte par rapport aux bords du bloc.

Depuis le Bloc

Dans l'onglet "Bloc", vous pouvez gérer les espaces entre les différents contenus présents dans ce bloc. Cette section offre également des options pour ajuster le Gap, la Marge et le Padding, fournissant ainsi une flexibilité complète pour affiner l'espacement et l'alignement des éléments de votre page.

Ces fonctionnalités permettent une personnalisation précise, essentielles pour une mise en page professionnelle et esthétiquement agréable.

📖 Si vous souhaitez approfondir votre compréhension des fonctions de Gap, Marge et Padding dans Kehio Editor, nous vous encourageons à lire l'article complet sur ces fonctionnalités.


Optimisation avancée avec la Personnalisation CSS

Dans Kehio Editor, la section Paramètre vous offre la possibilité de créer une classe CSS personnalisée, ce qui est idéal si vous souhaitez distinguer le style d'un contenu textuel d'un autre, même s'ils utilisent la même balise HTML et ont donc, par défaut, les mêmes options de personnalisation. Créer une balise personnalisée, vous permet de styliser n'importe quel champ textuel de manière unique au sein de votre creation.

Créer votre propre personnalisation CSS

  1. Accédez à la section Paramètre : Ajouter une Personnalisation CSS"

  1. Définissez la personnalisation : Ajoutez un nom à votre classe personnalisée.

  2. Adaptez la personnalisation : Configurez les styles comme vous le feriez pour tout formatage textuel.

    • Couleur

    • Style de la police

    • Taille de la police

    • Alignement

    • Marges

  3. Intégrez la classe dans votre contenu :

    • Copiez le nom de la classe que vous avez créée.

    • Dans l'éditeur de texte, cliquez sur le bouton </> pour "Afficher le code HTML".

    • Collez la balise HTML <class="nom_de_votre_classe"> dans le code HTML du contenu que vous souhaitez personnaliser.

Si vous avez besoin d’aide pour comprendre ou modifier votre contenu textuel, n'hésitez pas à contacter notre équipe d'assistance à tout moment par e-mail ou par chat en direct .

Avez-vous trouvé la réponse à votre question ?