Résolu - colonnes sur la page CMS "a propos"

[apma]

Bonjour,
 
Je débute tout juste avec prestashop après avoir passé du temps sur wordpress, et je suis par la même occasion nouveau sur le forum. J'espère poster au bon endroit, et vous remercie par avance de votre aide !
 
Je travaille sur la page à propos de ma boutique et ai, sans savoir comment, fait sauter la répartition du texte sur trois colonnes (tel que paramétré à l'origine). Mon texte est donc maintenant présenté sur une seule colonne bien laide.
Sauriez-vous quelle est la manipulation pour rétablir / créer des colonnes de texte sur la page à propos ?
 
Merci !
 
AM

Edited August 4, 2015 by apma (see edit history)

[apma]

pas d'idées alors ?

 

Prestashop me renvoie vers le forum, mais si personne n'a d'idée ca va pas être facile :s

 

merci d'avance

[DeyDDy]

Bonjour,

 

Un lien vers la Boutique?

[apma]

Bonjour DeyDDY,

 

Merci pour votre réponse. Non, pas de lien car le site est en cours de création.

La page CMS "a propos" était à l'origine configurée sur trois colonnes avec une image ajoutée par défaut, mais en modifiant le texte les colonnes ont disparues, je cherche simplement à comprendre comment faire la mise en page des pages CMS...

 

pour info, j'ai tenté en créant un tableau mais rien à voir avec la présentation d'origine...

 

Merci !

[DeyDDy]

La page est construite en html en insérant directement le code depuis le bouton "</>code source"

une colonne et construite avec le code suivant

<div class="col-xs-12 col-sm-4">
<div class="cms-block">

vous avez aussi la possibilité d'utiliser le système de tableau qui fonctionne très bien mais que je trouve plus complexe a utiliser (ce n'est que mon avis)

 

je vous conseille donc de reprendre le code html qui a servi a la présentation de cette page cms en se servant quand même du "panel tinymce"

 

je m'explique,

 

Insérez votre texte et mise en forme dans l'éditeur sans vous préoccupez du reste puis enregistrer

ensuite cliquez sur le bouton "</>code source" là vous allez retrouvé votre texte en html

il faudra insérez le code avant et après votre texte de la manière suivante:

<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="cms-block">
<h3 class="page-subheading">Notre entreprise</h3>
<p> texte pour ma première colonne </p>
</div>
</div>

<div class="col-xs-12 col-sm-4">
<div class="cms-block">
<h3 class="page-subheading">Notre équipe</h3>
<p> texte pour ma deuxième colonne </p>
</div>
</div>

<div class="col-xs-12 col-sm-4">
<div class="cms-block">
<h3 class="page-subheading">Notre équipe</h3>
<p> texte pour ma troisième colonne </p>
</div>
</div>
</div>

faite attention a bien fermer les </div>

 

J'espère avoir été le plus clair possible dans mes explications 

[apma]

Parfaitement clair et royalement efficace !

effectivement cela semble simple mais quand on ne sait pas... dommage que prestashop ne facilite pas l'opération

 

petite précision si possible ?

j'ai donc trois colonnes et trois titres, mais l'un de mes titres est sur deux lignes, ce qui fait un décalage graphique d'une colonne à une autre (les lignes de soulignage sont décalées, en clair). Y a t-il un moyen d'ajuster le code de manière à ce que les lignes qui soulignent les titres restent toutes au même niveau ?

 

 

un grand merci !

[DeyDDy]

Comme ça difficile de vous dire 

 

un screen pourrait être plus clair 

[apma]

Bonjour Deyddy

 

Oui, pardon.

Après un petit test, je réalise que le titre est souligné car j'ai utilisé une balise h2 et non h3 comme suggéré. Le titre H2 est souligné comme ci-dessous, et un titre un peu long décale le soulignement, je ne pense pas que l'on puisse y faire grand chose.

 

J'ai résolu le problème en réduisant le titre le la colonne n°2, du coup plus de problème. Alternativement mettre un H3 en faisant un souligné à la main fonctionne aussi.

 

 

[DeyDDy]

Bonjour apma,Pas de soucis 

 

Vous pouvez mettre le sujet en "Résolu" devant le titre en rééditant le premier post 

 

@+

[romerson]

On 8/3/2015 at 5:39 PM, DeyDDy said:

La page est construite en html en insérant directement le code depuis le bouton "</>code source"

une colonne et construite avec le code suivant

<div class="col-xs-12 col-sm-4">
<div class="cms-block">

vous avez aussi la possibilité d'utiliser le système de tableau qui fonctionne très bien mais que je trouve plus complexe a utiliser (ce n'est que mon avis)

 

je vous conseille donc de reprendre le code html qui a servi a la présentation de cette page cms en se servant quand même du "panel tinymce"

 

je m'explique,

 

Insérez votre texte et mise en forme dans l'éditeur sans vous préoccupez du reste puis enregistrer

ensuite cliquez sur le bouton "</>code source" là vous allez retrouvé votre texte en html

il faudra insérez le code avant et après votre texte de la manière suivante:

<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="cms-block">
<h3 class="page-subheading">Notre entreprise</h3>
<p> texte pour ma première colonne </p>
</div>
</div>

<div class="col-xs-12 col-sm-4">
<div class="cms-block">
<h3 class="page-subheading">Notre équipe</h3>
<p> texte pour ma deuxième colonne </p>
</div>
</div>

<div class="col-xs-12 col-sm-4">
<div class="cms-block">
<h3 class="page-subheading">Notre équipe</h3>
<p> texte pour ma troisième colonne </p>
</div>
</div>
</div>

faite attention a bien fermer les </div>

 

J'espère avoir été le plus clair possible dans mes explications 

Bonjour, 

remplacer juste 

<div class="col-xs-12 col-sm-4">

par 

<div class="col-xs-12 col-sm-12">