Artikkelimuotoinen landing page, H1-otsikko
Artikkelisivun sisältöosion sekaan saa upotettua div- ja iframe-elementtejä, joiden mittasuhteet voi määritellä itse. Leveyden voi määritellä relatiivisesti, mutta korkeus täytyy kuitenkin määritellä absoluuttisesti pikseleinä, mikä hankaloittaa videon upottamista (ei skaalaudu oikein mobiililla).
Scrollaa sivun loppuun --> sieltä löytyy nostoalue, johon voi myös nostaa erilaista sisältöä.
Sisällön sekaan saa upotettua kuvia. Kuvien koon voi määritellä absoluuttisesti tai relatiivisesti (leveys).
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
GIFit eivät jostain syystä pyöri julkaistulla sivulla, vaikka sivueditorissa toimivatkin. (Tämän CGI pystyisi kyllä todennäköisesti korjaamaan, jos haluttaisiin käyttää GIFiä otsikon alla videon asemesta? En nyt itse keksi, miksi se ei toimi.)
Esimerkki väliotsikosta
Varsinaisen "artikkelisisällön" alla on nostoalue, jonka jokainen rivi koostuu desktopilla kolmesta neliön mallisesta nostopaikasta. Mobiilissa nostopaikat asemoituvat 2 neliötä per rivi.
Tähän saa nostettua elementtejä kuvasuhteissa 1x1, 2x1, 2x2 tai 3 x 1,5 (viimeinen vain desktopilla; mobiilissa näkyy koossa 2x2). Esim. kuvaelementtejä, videoita, tekstielementtejä, sivuston muita sivuja yms.
Eri tyyppisiä elementtejä ei kuitenkaan juurikaan kannata yhdistellä, sillä kuten näette, joidenkin elementtien paddingit on määritelty jostain syystä eri kokoisiksi, ja esim. alla olevat nostot näyttävät yhdessä huonoilta.
