1.6 Perusperiaatteita

Sivun sisällön muotoilun perusperiaatteita – Elementor

Katsotaan hieman perusasioita, jotka tulevat eteen sivun sisällön elementtien (lohkojen tekemisessä). Mitä voidaan muotoilla lohkon muotoilemisen näkökulmasta.

Täytteet ja marginaalit

Lohkoon Row (rivi) sekä sen sisältämiin Column (Sarake) voidaan asettaa tyhjää tilaa esimerkiksi marginaaleilla (Margins) ja täytteellä (Padding). Termit ovat tuttuna, jos olet tutustunut CSS-muotoilemiseen ja samoja termejä käytetään myös Elementor-editorissa.

Harjoitellaan asetusten asettamista harjoitussivuston etusivulle luotavassa lohkossa, jossa lohko on jaettu kahteen kolumniin. Oikealla puolella on painike yhteydenottosivulle ja vasemmalla puolella teksti, joka kehottaa ottamaan yhteyttä ja liittymään yhdistykseen.

Marginaali (margin) voidaan kuvitella pahvilaatikkojen välisenä tyhjänä tilana. Täyte (padding) sen sijaan olisi tässä tapauksessa pahvilaatikon sisäinen sen sisällön ja laatikon reunan välinen tyhjä tila. Erikoista ja taianomaista näissä kuvitteellisissa pahvilaatikoissa on, että sisällön koko pysyy samana mutta laatikon koko muuttuu täytteiden ja tyhjän tilan lisäämisen mukaan.

Asettaminen editorissa

Esimerkiksi Elementor-editorissa marginaali ja täyte asetetaan elementin asetuksissa. Täyte näkyy muokkaustilan esikatselussa elementin sisäpuolella olevana ohuena katkoviivana. Joskus elementin täyte tulee suoraan jostain sivuston laajuisesta asetuksesta, kuten kuvan tapauksessa. Jos halutaan poistaa täyte kokonaan se tulee asettaa nollaksi (0).

Asetettaessa tyhjiä tiloja on hyvä pohtia mihin elementtiin laittaa tyhjät tilat. Vaihtoehtoina on elementin taiton muodostamat rivi (Row), joka sisältää rivin sisäisiä kolumneja (Column). Lisäksi on vielä itse kolumnin sisältävä, tekstiä, kuvan tai jotain muuta sisältöä sisältävä sisältöelementti. Kaikkiin näihin voidaan asettaa täyte, jos halutaan.

Itse asetan tavallisesti mahdollisia täytteitä elementin taiton muodostamaan elementteihin. Täytteissä ja marginaaleissa katson kokonaisuutta sisimmästä elementistä alkaen. Jos esimerkiksi tekstielementin ympärille on saatava tyhjää tilaa, kannattaa asettaa täytettä tekstiä ympäröivään elementtiin.

Marginaalia käytän tavallisesti esimerkiksi rivien välisen etäisyyden lisäämiseen vertikaalisti. En käytä marginaalia rivielementin sisällä tyhjän tilan luomiseen.

Padding eli täyte on tarkoitettu elementin sisäisen tyhjän tilan luomiseen.