tema Divi

Divi tema, nameščena na Arnes Spletu je malce okrnjena, zato nimate možnosti vseh nastavitev, nimate vgrajenih vseh modulov … zato se lahko prikazi v dokumentaciji in videovodičih razlikujejo od dejanskega stanja. Še vedno pa je to tema z največjo možnostjo prilagajanja.

Divi Builder

Pri izdelavi nove strani ali prispevka vas pričaka gumb “Use The Divi Builder“.

Ob kliku na gumb se urejevalnik strani / prispevka spremeni. Z novimi možnostmi stran pravzaprav zgradite.

Na voljo imate tri možnosti izgleda “odsekov/Section“:

  • Standard Section
  • Fullwidth Section
  • Speciality Section

V “odseke” dodajate “vrstice/Row”, “stolpce/Column(s)” in “module/Module(s)”.

V “vrstice/Row” lahko dodajate “stolpce/Column(s)” in “module/Module(s)” in v “stolpce/Column(s)” lahko dodate različne “module/Module(s)”

Na voljo imate kar nekaj možnosti razporejanja stolpcev (“+ Insert Column(s)“).

Za vsebino v “stolpcih/Column(s)” pa poskrbijo “moduli/Module(s)”.

Prva stran na spletišču http://www.osivanacankarja.si/ je zgrajena takole:

Navodila za Divi Builder

Navodila za module

Visual Builder

Takoj, ko ustvarite stran/prispevek z Divi Builderjem, lahko nadaljujete z urejanjem z “Visual Builderjem“. V urejevalniku ga vklopite na gumbu  ali v zgornji menijski vrstici “Enable Visual Builder“.

Odseke, vrstice, stolpce in module uredite, če se z miško pomaknete na element. Prikažejo se ikone za urejanje.

Ustvarjene izglede/postavitve/Layoute strani/prispevka lahko shranite in uporabite še v drugih straneh/prispevkih v istem spletišču ali izvozite izgled in ga uvozite v drugo spletišče, ki uporablja temo Divi.

Sprememba grafične podobe spletišča

Nadzorna plošča → Divi → Theme Options (NAVODILA)

Nadzorna plošča → Divi → Theme Customizer (NAVODILA – “tudi za Module Customizer”)

Nadzorna plošča → Divi → Module Customizer

Mega meni

Mega meni uporabite, kadar imate veliko število menijskih postavk. Primer: http://www.oszuzemberk.si/ v meniju se zapeljite z miško na postavko “ZNANI SUHOKRANJCI”.

Navodila: http://www.elegantthemes.com/gallery/divi/documentation/mega-menus/

CSS

… za mojstre 🙂

Opozorilo: nadgradnja teme lahko povzroči preimenovanje elementov, IDjev, classov in posledično nedelovanje CSS kode.

Ozadje strani/prispevkov:
#main-content, .et_pb_section {
  background-color: #6B7F8E;
}
.et_pb_blog_grid .et_pb_post {
  background-color: #6B7F8E;
}

Slika za ozadje (stran + prispevki/strani + gradniki):

#main-content, #et-main-area, #left-area, #sidebar /*, .clearfix=noga*/ {
 background-image: url("http://www.vrtec-logatec.si/portal/vrtec/templates/kurircek_ver3/images/page.png");
 background-repeat: repeat;
}
Odstranitev črte med stranjo in gradniki:
#main-content .container:before {
  height: 1%;
  width: 0px;
  background-color: transparent;
}
Skrivanje/neprikazovanje  gradnikov (precej praznega prostora na desni!!!)
#sidebar {
 display: none
 }
 Fiksen logotip (samo pri vertikalni postavitvi primarnega menija):
#logo .et_fixed_nav  {
  max-height: 150px;
}

Večji logotip, ki se ob drsenju navzdol (scroll) zmanjša (če je vklopljen-Enabled Fixed Navigation Bar):

.et_fixed_nav #logo {
  max-height: 90px;
}
.et-fixed-header #logo {
  max-height: 45px;
}

Velikost pisave v glavi (telefon, mail):

#et-info {
  font-size: 24px;
  padding-bottom: 10px;
}

ali posamezno za telefon in email:

#et-info-phone { 
 font-size:130%
}
#et-info-email {
  font-size:130%
}

Velikost pisave v glavi za primarni meni:

#top-menu li {
 font-size: 18px;
}

… krepkejše črke v primarnem meniju:

#et-top-navigation {
 font-weight: 600;
 }

Velikost pisave v glavi za sekundarni meni:

#et-secondary-menu {
  font-size: 15px;
}
… za sekundarni meni in podmenije + krepko:
#et-secondary-menu .menu li a {
 font-size: 16px;
 font-weight: bold;
}
 Slika za ozadje pod primarnim menijem:
#main-header {
 padding-bottom: 70px;
 background: url(http://test03042017.splet.arnes.si/files/2015/09/barvice-header.jpg) 50% 100%; 
background-repeat: no-repeat;
}
“Barvice” so kopirane s spletne strani: http://www.os-zirovnica.si/

Sidebar (gradniki) – nepreverjeno 🙂 

#sidebar {
  background-color: #fafafa;
}
@media only screen and (min-width: 1100px) { /* full-size screens */
    .et_left_sidebar #sidebar {  /*left*/
        padding:70px 0 200px 30px; 
        margin:-70px 0 0 -30px;
    }
    .et_right_sidebar #sidebar { /*right*/
        padding:70px 30px 200px 0px; 
        margin:-70px -30px 0 0;
    } 
}
@media only screen and (min-width: 981px) { /* medium-size displays */
    #sidebar { 
        padding:70px 30px 200px 30px; 
        margin:-70px -30px 0 -30px; 
    }
}
@media only screen and (max-width: 981px) { /* mobiles, etc */
    #sidebar { 
        padding:30px 
    }
}

Celotna dokumentacija za temo Divi

http://elegantthemes.com/gallery/divi/readme.html