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:
- obrázek
- text
- text
- 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.
