COS-General

Comment personnaliser l'ordre d'affichage des colonnes sur les mobiles ?

Dernière mise à jour: September 15, 2017

Disponible avec :

Marketing: Basique, Pro, Enterprise
Sales: N/A

Les mises en page standard de HubSpot affichent les modules de gauche à droite sur les appareils mobiles. L'ordre d'affichage est illustré ci-dessous :

Image ajoutée par l'utilisateur
Image ajoutée par l'utilisateur

Pour empiler de droite à gauche, vous devez personnaliser votre modèle et ajouter une feuille de style CSS afin de modifier l'ordre d'affichage. Vous pouvez appliquer l'une des deux méthodes suivantes.

Note : pour suivre la procédure ci-dessous, vous devez avoir des connaissances solides en matière de conception de sites web. Si vous ne vous sentez pas à l'aise avec la création de modèles et l'application d'une feuille de style CSS, nous vous conseillons de faire appel à un designer.

Méthode 1 : ligne flexible

  • Accédez à Contenu > Gestionnaire de conception.
  • Créez ou modifiez un modèle existant.
  • Regroupez les deux colonnes que vous voulez empiler dans un autre ordre.
  • Cliquez sur l'icône d'engrenage > Modifier la feuille de style CSS sur chacun des groupes de lignes et de colonnes, puis ajoutez aux groupes les classes suivantes : « stack-row », « main-content » et « sidebar ».
  • Votre mise en page doit ressembler à la capture d'écran ci-dessous
Mise en page
  • Une fois que vous avez ajouté les nouvelles classes à vos colonnes, ajoutez l'extrait de code suivant à votre feuille de style CSS :

@media screen and (max-width:768px) {

.stack-row > .row-fluid-wrapper > .row-fluid{
  display: -webkit-box;   
    display: -moz-box;      
    display: -ms-flexbox;   
    display: -webkit-flex;  
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
    .main-content{
        order: 2;
-webkit-order: 2;
    -moz-order: 2;
    -ms-order: 2;
    
        width: 100%;
    }
    .sidebar {
        order: 1;
-webkit-order: 1;
    -moz-order: 1;
    -ms-order: 1;
        width: 100%;
    }
}

Méthode 2 : inversion du flottement du module

  • Accédez à Contenu > Gestionnaire de conception.
  • Créez ou sélectionnez le modèle que vous souhaitez modifier.
  • Réorganisez les colonnes afin que le module que vous voulez mettre en haut de la pile se trouve sur la droite (dans cet exemple, « sidebar »).
  • Cliquez sur l'icône d'engrenage > Modifier la feuille de style CSS sur chacune des colonnes, puis ajoutez aux deux colonnes les classes « sidebar » et « main-content ».
  • Le modèle doit ressembler à la mise en page ci-dessous. L'ordre des colonnes doit être contraire à celui que vous voulez afficher sur l'ordinateur de bureau.
Mise en page inversée
  • Une fois que vous avez ajouté les nouvelles classes à vos colonnes, ajoutez l'extrait de code suivant à votre feuille de style CSS :

.sidebar {
    margin-right: 0 !important;
    float: right !important;
}
.main-content {
    margin-left: 0 !important;
}

@media (max-width: 767px) {
    .main-content {
    margin-left: 0 !important;
    }

    .main-content,
    .sidebar {
    width: 100% !important;
    float: none !important;
    }
}