Jos ulkoasuasetukset eivät riitä, voit lisätä verkkosivustollesi omaa CSS- ja HTML-koodia. Koodille on neljä paikkaa sen mukaan, mitä sen pitää tehdä. Kaikki ne ovat käytettävissä jokaisessa paketissa.
Mihin koodi lisätään
- Oma tyylitiedosto koko verkkosivustolle: Asetukset → Ylätunnistealue, osio Oma lisä-CSS-tyylitiedosto. CSS-sääntösi koskevat jokaista sivua ja myös mobiiliasettelua.
- Koodi head-osioon: Asetukset → Ylätunnistealue, osio Oma lisä-HTML-koodi (tagien <head> ja </head> väliin). Tänne kuuluvat
<style>- ja<link>-tagit, ylimääräiset metatunnisteet ja verkkofontit. - HTML-koodi jokaisen sivun alkuun tai loppuun: Asetukset → Yleiset, osio Koko sivusto, kentät Jokaisen sivun alku ja Jokaisen sivun loppu. Sopii laskurikoodeille ja muille vastaaville koodinpätkille, joiden on näyttävä jokaisella sivulla.
- Koodi yksittäiselle sivulle: sisältöeditorissa valinnalla Lisää lohko → Erityiset → Upotettu HTML, esimerkiksi karttaa, widgetiä tai videon upotuskoodia varten. Työkalurivin HTML-editori lisäksi antaa muokata sivun sisällön HTML-koodia suoraan.
Lisää oma tyylitiedosto
- Kirjoita CSS-sääntösi tekstieditorissa ja tallenna tiedosto
.css-päätteellä. - Lataa tiedosto kohdassa Tiedostot → Lataa tiedostoja (ks. Lataa tiedostoja). CSS-tiedostot kuuluvat koodikansioon; valinta Automaattinen kansion valinta sijoittaa ne sinne.
- Avaa Asetukset → Ylätunnistealue ja valitse tiedosto osion Oma lisä-CSS-tyylitiedosto kentässä URL-osoite (.css-tiedostoon):.
- Napsauta painiketta Tallenna ja lataa verkkosivustosi uudelleen.
Jos tarvitset vain muutaman säännön, voit sen sijaan kirjoittaa ne osion Oma lisä-HTML-koodi (tagien <head> ja </head> väliin) kenttään HTML-koodi <style>...</style>-tagin sisään.
Upota koodi sivulle
- Avaa sivu valinnalla Sivut → Hallitse sivuja → Muokkaa sivun sisältöä.
- Napsauta painiketta Lisää lohko (tai olemassa olevan elementin kohdalla Lisää elementti perään), avaa välilehti Erityiset ja valitse Upotettu HTML.
- Liitä koodi ja tallenna sivu.
Hyvä tietää
- Muutokset näkyvät heti; verkkosivustostasi ei ole erillistä testiversiota.
- Oma CSS koskee myös mobiiliasettelua. Vältä kiinteitä leveyksiä ja käytä määritystä
max-width: 100%, jotta elementit mahtuvat pienille näytöille (ks. Mobiiliystävälliset verkkosivustot). - Kokonaisia HTML-tiedostoja (
.htm,.html) voi ladata vain Premium-paketilla. HTML:n perusteet kerrotaan artikkelissa Mikä on HTML?.