Aloita tästä

Styling

Aloitetaan mallin muotoilu.

Värit

Web3 X -malli on rakennettu käyttäen Color Swatches -värivalikoimaa, mikä tarkoittaa, että voit helposti muokata värivalikoimaa, joka päivitetään koko sivuston laajuiseksi.

Voit tehdä tämän, sinun tarvitsee vain mennä tyyli-välilehdelle oikeassa sivupalkissa, selaa sitten Värit Typografia-osiossa, ja jos napsautat väriä, voit nähdä kaikki värit ja muokata niitä päivitettäväksi koko sivuston laajuisesti mihin tahansa tarvittavaan väriin.

Kirjasimet

Web3 X -mallissa käytetään yhtä ainoaa fonttia koko sivun laajuisesti, ja se on määritetty Body (All Pages) -valitsimeen, joten voit helposti päivittää fontin koko sivustolle yhdellä napsautuksella.

Napsauta millä tahansa sivulla tyyli-välilehden oikeassa yläkulmassa olevaa oranssia valitsinta ja valitse sitten Body (Kaikki sivut). Kun tämä on tehty, voit siirtyä alla olevaan Typografia-osioon ja vaihtaa fontin mihin tahansa yritystoimintasi brändin mukaiseen fonttiin.

Jos tarvitset mukautettua tai premium-fonttia, jota ei ole saatavilla Webflow'ssa, voit aina siirtyä kohtaan Projektin asetukset > Fontit, jolloin voit ladata mukautettuja fontteja tai yhdistää Adobe Fonts -tilisi.

Grafiikka & kuvakkeet

Jotkin mallin kuvakkeet tai grafiikat ovat tavallisia kuvia/grafiikkaa, joten huomaat, että kun päivität kaikki värit, näillä on edelleen mallin väri.

Tämä johtuu siitä, että nämä grafiikat ovat kuvia (PNG, JPG, SVG jne.), joten Webflow CSS:n (muotoilu) päivittäminen ei vaikuta niihin. Jos haluat käyttää näitä grafiikoita uudelleen, voit aina ladata ne ja muokata niitä millä tahansa suunnitteluohjelmalla (esim. Photoshop, Illustrator, Sketch, Figma jne.) tai ladata suoraan omia kuvia/grafiikkaa, jotka sopivat brändiisi.

Staattiset sivut

Staattinen sisältö on kaikkea sellaista sisältöä, joka ei ole CMS-pohjaista, eli se ei ole dynaamista (kuten esimerkiksi blogikirjoitus).

Voit helposti tunnistaa kaiken tämän sisällön, koska se näkyy harmaana vasemmanpuoleisessa sivupalkin navigaattorissa, ja se näkyy sinisellä reunuksella, kun napsautat sitä tai viet hiiren leijukkeen sen päälle.

Jos haluat muokata tämäntyyppistä sisältöä, voit vain kaksoisnapsauttaa sitä, ja voit kirjoittaa suoraan siihen.

Dynaaminen sisältö (CMS)

Dynaaminen sisältö on kaikki sisältö, joka on dynaamista ja joka luodaan automaattisesti CMS-osiossa vasemmalla sivupalkissa (heti Sivut-kuvakkeen alapuolella) lisätyn sisällön perusteella.

Voit helposti tunnistaa tämän kaiken, koska se näkyy violettina vasemmanpuoleisessa sivupalkin navigaattorissa, ja se näkyy violettina reunana, kun napsautat sitä tai viet sen hiiren yläpuolelle.

Tämä sisältö olisi päivitettävä suoraan CMS-osiossa. Tämän tarkoituksena on tehdä sen päivittäminen erittäin helpoksi, koska on hyvin todennäköistä, että sitä on päivitettävä jatkuvasti (esimerkiksi lisäämällä uusi blogikirjoitus).

Jos haluat muokata täydellistä automaattisesti luotua CMS-sivua (esimerkiksi blogikirjoitusta), löydät tämän sivun muokattavaksi kaikkien sivujen alareunasta vasemman sivupalkin Sivut-osiosta.

Tuotteet (verkkokauppa)

Tuotteet tai verkkokaupan sisältö toimivat samalla tavalla kuin CMS:n dynaaminen sisältö, mutta tämä on keskittynyt yksinomaan verkkokaupan tuotteisiin.

Voit tunnistaa verkkokaupan sisällön samalla tavalla kuin CMS-sisällön, koska se näkyy myös violettina vasemmanpuoleisessa sivupalkin navigaattorissa ja sillä on violetti reunus, kun napsautat sitä tai viet sen yli.

Tämä sisältö olisi päivitettävä suoraan vasemman sivupalkin Verkkokauppa-välilehdelle. Tämän tarkoituksena on tehdä sen päivittäminen erittäin helpoksi, sillä on hyvin todennäköistä, että sitä on päivitettävä jatkuvasti (esimerkiksi tuotteen hinnan muuttaminen tai varastojen lisääminen).

Jos haluat muokata automaattisesti luotua tuotteen verkkokauppasivua, löydät tämän sivun muokattavaksi lähes kaikkien sivujen alareunasta, aivan CMS-kokoelmasivujen yläpuolelta.

Hyödyllisiä huomautuksia

Edellä esitetyn perusselvityksen lisäksi jaamme tässä muutamia vinkkejä ja ohjeita, jotka ovat peräisin yleisimmistä saamistamme kysymyksistä.

Vuorovaikutukset

Jos haluat muokata mitä tahansa mallin Vuorovaikutusta (esim. poistaa vaikutuksen), voit helposti tunnistaa elementit, joilla on vuorovaikutusta, sillä niissä on pieni Vuorovaikutukset-kuvake (pieni ukkonen) vasemmanpuoleisessa sivupalkin navigaattorissa.

Jos napsautat tätä pientä Vuorovaikutukset-kuvaketta, avautuu oikeanpuoleisen sivupalkin Vuorovaikutukset-välilehti, jossa voit muokata vuorovaikutusta.

Mobiili- tai tablet-näkymä

Aina kun teet muutoksen (esimerkiksi luot uuden osiomallin), on hyvä käytäntö siirtyä Viewportin ylänavigaatioon ja katsoa, miltä se näyttää tabletilla ja mobiililaitteella.

Jos muokkaat vain Malli-osiota päivitetyllä tekstillä tai kuvilla etkä poista mitään Malli-luokkaa, tätä ei pitäisi tarvita, mutta jos muokkaat mallia syvällisemmin, muokkaat luokkia tai luot uusia osioita, on aina hyvä muokata jatkuvasti mobiili- ja tablet-näkymiä varmistaaksesi, että kaikki näyttää täydelliseltä.

Meta Title, Desc ja Featured Image muokkaaminen

Jos haluat muokata otsikkoa, kuvausta ja kuvaa, jotka näytetään, kun jaat verkkosivustosi missä tahansa (esim. Facebookissa, Twitterissä jne.), voit helposti siirtyä vasemman sivupalkin Sivut-osioon, napsauttaa sen sivun pientä Asetukset-kuvaketta, jota haluat muokata, ja kaikki nämä asetukset tulevat näkyviin.

Huomaa, että on tärkeää muuttaa tätä sivukohtaisesti.

Varmuuskopiot

Jos jokin menee pieleen, esimerkiksi jos et pidä siitä, mihin sivusto on menossa, jos olet poistanut joitain kriittisiä luokkia, joita tarvittiin, jotta Malli näyttäisi hyvältä, tai jos haluat vain jostain syystä palata aiempaan versioon, voit aina mennä Varmuuskopiot-osiosta.

Löydät sen vasemman sivupalkin Asetukset-osiosta, ja voit nähdä kaikki automaattiset tai manuaaliset varmuuskopiot. Palauttaminen vanhaan varmuuskopioon on vain napsautuksen päässä.