Úvod » Divi šablona » Jak upravit pořadí prvků při zobrazení na mobilu DIVI šablona

Jak upravit pořadí prvků při zobrazení na mobilu DIVI šablona

DIVI šablona má nastaveno pořadí při mobilním zobrazení zleva doprava, to znamená pokud máte na stránce vlevo obrázek a vpravo text a pod tím vlevo text a vpravo obrázek, tak na mobilu se vám zobrazí pořadí takto:

  1. obrázek
  2. text
  3. text
  4. obrázek

 

Což si někdo nemusí přát. Toto pořadí se dá snadno změnit, tak jak potřebujete.

V administraci WordPress jděte do DIVI>>Nastavení šablony a dole najdete „Přizpůsobené CSS“

 

Do CSS vložíte tento kód

@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}
 
/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}
 
.second-on-mobile {
-webkit-order: 2;
order: 2;
}
 
.third-on-mobile {
-webkit-order: 3;
order: 3;
}
 
.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}
 
}

Pak přejděte do stránky, kde chcete upravit pořadí, klinete na nastavení řádku (ozubené kolečko)

Klinete na záložku „Pokročilé“ a vyberte IC a třídy CSS a dopište custom_row

Dále klinete na záložku „Obsah“

tam uvidíme ozubená kolečka jednotlivých sloupečků první je pro text a v duhém sloupečku máme obrázek.

 

Přes ozubené kolečko>>Pokročilé>>ID a třídy CSS doplníte v kolonce „Třída CSS“ text first-on-mobile nebo second-on-mobile

My doplníme u prvního ozubeného kolečka second-on-mobile a u druhého ozubeného kolečka first-on-mobile.

Uložíme a mělo by být hotovo, zkontrolujte si na mobilu a nezapomeňte si aktualizovat paměť prohlížeče ctr+F5, aby se vám úpravy zobrazily.

Moje motto: „Tvorba webových stránek ubírá mi spánek“. Baví mě tvorba webových stránek s redakčním systémem WordPress a vše kolem webů takže grafika, SEO optimalizace a protože jsem bývalá účetní, tak samozřejmě i troška číslíček v marketingu a PPC kampaně. To co umím předávám i dále a to pomocí školení WordPress a také jsem se odhodlala a začala už konečně psát „blog“, za který mě strýček Google nebude mít rád, protože nejsem žádný pisálek a ty mé příspěvky jsou hodně stručné bez omáčky okolo, tak alespoň doufám, že jsou výstižné. Na druhou stranu ten můj blogíček funguje hlavně pro mě jako takový vzpomínáček.

Radka Jiránková

webdesigner, udelam-web.cz