Avertissement : cet article est le résultat de la traduction automatique, l'exactitude et la fidélité de la traduction ne sont donc pas garanties. Pour consulter la version originale de cet article, en anglais, cliquez ici.
CMS-General

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

Dernière mise à jour: septembre 15, 2017

Disponible avec :

Marketing Hub Professional, Enterprise
Basique

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;
    }
}