Jump to content
apma

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

Recommended Posts

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 by apma (see edit history)

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites

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  :)

  • Like 1

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites

Comme ça difficile de vous dire 

 

un screen pourrait être plus clair 

Share this post


Link to post
Share on other sites

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.

 

 

test%20ipsum.jpg

Share this post


Link to post
Share on other sites

Bonjour apma,Pas de soucis  ;)

 

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

 

@+

Share this post


Link to post
Share on other sites
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">

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More