Pohyblivý baner
Návod ako pridať na web stránku pohyblivý baner
V tomto článku ukážem postup ako nastaviť vo web stránke pohyblivý baner, ktorý sa namiesto Header menu bude posúvať hore a dole po ploche. Využitie tohto banera môže byť jednoduché, ak chcete vložiť doň napríklad tlačidlo alebo nejaký link ak odkazujete na zľavu alebo niečo podobné.
Nakoľko sa venujem hlavne tvorbe web stránok so šablónou Divi, príklad budem ukazovať práve na tejto šablóne.
Ako prvé je potrebné stiahnuť si nejakú Divi Child šablónu, ja osobne odporúčam child šablónu od Českého fanúšika a web programátora Tomáša Cirkla, jeho Child šablóna sa volá Lama a je úplne zadarmo, navyše má mnoho vylepšení ako jazykových tak aj funkcionalít.
(Čo je to Child šablóna? – Child šablóna je podradená téma Divi, ak by ste tento postup ktorý popisujem nižšie vykonali v samotnej šablóne Divi po novej aktualizácií by sa Vám vložený kód prepísal).
Ako prvé je potrebné si danú tému najprv stiahnuť. Písal som vyššie o Chil téme WP lama, tu ju stiahnete: Child šablóna WP Lama
Tému si potom štandardne nainštalujete vo WordPresse, pre istotu rozpíšem postup: Kliknete v administračnom paneli WordPress na „Vzhľad“ a potom na „Témy“.
Potom kliknete na „Pridať novú“
A následne kliknete na „Vybrať súbor“
Vyberiete súbor z Vášho pc, tam kde ste si pred tým stiahli Child šablónu z odkazu ktorý som zverejnil vyššie.
Potom je potrebné ísť do editoru spomínanej child šablóny, najjednoduchší spôsob je ísť cez FTP, avšak ten komu nie je moc jasné čo to FTP vlastne je tak použije iný spôsob. A to taký že si klikne na opäť na „Témy“ a tam na Editor.
Následne vstúpite do zložky header.php nájdete si tam riadok 71 a vložíte tam tento kód:
<body <? php body_class (); ? >>
<div id = „page-container“>
a pod to vložiť tam tento snipet:
<div id=“top-cta“>
<a href=“#“>OVER 500 Startups have already <span class=“cta_gray“>downloaded </span> this ebook </a>
<span class=“blurb_button“>
<a class=“et_pb_promo_button cta“ href=“#(sem ide link namiesto # alebo #nieco kam to má smerovať)“>
GET YOUR COPY
</a>
</span>
</div>
POZOR!!! Všimnite si v tomto php skripte na zátvorku ktorú treba ostrániť a namiesto # je potrebné vložiť URL odkaz, na čo konkrétne chcete odkazovať Vy vo Vašom baneri + je potrebné vyššie doplniť Váš text, ktorý chcete aby baner ukazoval.
Potom vložený kód uložíte, výdete von a kliknete v administračnom paneli WordPressu na Vašej web stránke na Divi = potom na „Možnosti témy“ ako na obrázku nižšie
Dnu v možnosti témy prescrollujete myšou úplne na spodok a tam do tohto miesta ako môžete vidieť nižšie na obrázku vložíte CSS kód ktorý je pod obrázkom.
#top-cta {
background-color: #39B2EB;
background-color: rgba(57, 178, 235, .9);
text-align: center;
padding: 5px 0 5px;
text-transform: uppercase;
position: fixed;
top: 0;
width: 100%;
z-index: 9997;
}
#top-cta a {
color: #fff;
font-size: 28px;
font-weight: 700;
display: inline-block;
}
#top-cta a span.cta_gray {
color: #dfdfdf;
text-shadow: 1px 1px 1px #5a5a5a;
}
#top-cta .blurb_button {
padding-left: 20px;
}
#top-cta a.cta {
background-color: #ff9900;
padding: .4em .8em;
}
#top-cta a.cta:hover {
background-color:#FFAD33;
}
/*——————-[768px]——————*/
@media only screen and ( max-width: 980px ) {
#top-cta {
padding: 10px 0 10px;
}
#top-cta a {
font-size: 20px;
}
}
/*——————-[480px]——————*/
@media only screen and ( max-width: 767px ) {
#top-cta {
padding: 7px 0 7px;
}
#top-cta a {
font-size: 18px;
}
#top-cta .et_pb_promo_button {
padding: 4px 15px;
}
}
/*——————-[320px]——————*/
@media only screen and ( max-width: 479px ) {
#top-cta {
padding: 5px 0 5px;
line-height: 1.2em;
}
#top-cta a {
font-size: 16px;
}
#top-cta .et_pb_promo_button {
padding: 2px 10px;
}
}
Kliknete na uložiť a je to hotové.
Ak by ste ale chceli urobiť jednoduchú landing page bez Header Menu. Je možné do tejto istej časti kam ste vkladali ten dlhý CSS kód vložiť aj CSS nižšie, ktorý zabezpečí že Vaše Header menu jednoducho nebude.
Potom je potrebné dať Hide čiže snipet na Hide Header opäť do časti Divi CSS:
/*Hide the Divi Header*/
#main-header { display:none; }
#page-container {
padding-top:0px !important;
margin-top:-1px !important;
}
Následne už len doupravíte PHP skript a toto CSS podľa seba, doplníte tam veci ako texty, farby atď..
(občas sa vyskytne nejaká nezrovnalosť, ak by Vám tento baner neukazovalo správne tak treba doplniť ešte tento jeden krok):
- A úplne posledná vec je že treba ísť ešte do MENU a v CSS triede doplniť top-cta a malo by to zobrazovať správne.