Turinys
You can agree with us that no website is complete without header. Did you know that you have two different options to create header in WordPress? In this tutorial we will explain individual differences.
Genuine Header image
Classic WordPress header as you know it is used across all different pages. It’s usually a wide rectangular box from side to side. Inside there is a logo or website name, tagline and menu items. You can also insert there a background image that’s called header image. Header image is great to attract visitors attention and to create overall website look & feel. It’s up to you to decide whether you use discreet header image or dominant image that will focus visitors attention to website navigation.
How to edit header in WordPress Customizer
By default, header image can be changed via WordPress Customizer. You can access it both from WordPress admin and from your website:
- Directly from WP admin, just navigate to Išvaizda –> Customize
- On frontend, if you are logged in, click on “Customize” in the top bar
Customizer includes all basic appearance settings of your currently active theme. Therefore where to find header image settings depends on your active theme. In Citadela theme you can add and edit header image in Customizing –> Išvaizda –> Antraštės fonas.
Header image settings
No matter what header image you choose, you can configure it to your needs. Interesting effect can be achieved using “Header Image Repeat”. You can configure the following options:
- Tile
- Tile Horizontally
- Tile Vertically
- No Repeat (if you do not want to repeat the image)
Other settings in WordPress – Header image size
Another option how to edit header and adjust image is to set suitable size. Header image size has the following three options:
- Original – it’ll keep original image size
- Cover – uploaded image will be resized to fit from side to side, image can be also cut to fit
- Contain – header image size will be adjusted the way, that the whole image will be visible
You can also set image position within header and set background fixation.
Cover block that works as header
As we already mentioned at the beginning of this article, there are several ways how to edit header in WordPress editor. In addition to using Customizer you can also use one of core WordPress blocks called Cover block. So what’s the difference?
Classic header created with Customizer relates to whole website, while Cover block allows you to add cover image that basically works as header image to any page or post. You can even use it several times on one page or post with different settings.
Where to use Cover block
Cover block has wider application across website in comparison to classic website header. Cover block adds wide, full width title image into content. You can use it to visually separate content in blog posts. Each post section will get it’s own header image that can be connected to the following content. Great feature is that you can write text right inside Cover block. This text will be displayed over the image.
Homepage header
Cover block can be also used instead of website header if you want to achieve original look. Because Cover block provides various alignment options, you can set it to content width or make it full width. Full width header can be also used as large background image. But don’t forget about switching off Page title in Citadela theme. This step is necessary if you’d like to use Cover block as website header.
How to create header using Cover block
As a first thing you need to add Cover block. You can add it to any page or post the following way:
Click on “+” sign in the top bar or “+” sign anywhere in the content. After that simply search for Cover block.
Another quick way is to add block using “/” following block name.
Pridėję viršelio bloką gausite vietos įkelti paveikslėlį arba vaizdo įrašą. Taip pat galite pasirinkti vaizdą iš medijos bibliotekos. Pasirinktas paveikslėlis arba vaizdo įrašas bus naudojamas kaip antraštė.
Header title
Įdomu tai, kad virš paveikslėlio galima užrašyti teksto pavadinimą. Šį pavadinimą taip pat galima naudoti kaip skyrelio antraštę, pavyzdžiui, tinklaraščio įrašuose. Taip pat galima pridėti bet kokį URL adresą.
Aligning Cover block
Dangčio bloką galima išlyginti naudojant bloko įrankių juostą. Jį galima sulygiuoti turinio srityje į kairę, į dešinę arba į vidurį. Jį taip pat galima nustatyti kaip platų arba per visą plotį. Šias parinktis turi palaikyti aktyvi tema, kurią naudojate svetainei kurti.
Cover image settings
Viršelio paveikslėlio išvaizdą galima keisti "Inspektoriuje". Jei nustatysite fiksuotą foną, paveikslėlis nebus slenkamas kartu su likusiu puslapio turiniu, bet visą laiką liks savo vietoje.
Naudodami židinio taško parinkimo įrankį galite pasirinkti, kuri vaizdo dalis bus rodoma antraštėje. Su vaizdu galite dirbti dar daugiau. Pavyzdžiui, galite nustatyti perdangos spalvą ir fono nepermatomumą. Abu nustatymai padės jums užbaigti antraštės apdailą. Jei tinklaraščio įrašo viduje naudosite viršelio bloką, naudodami tinkamą spalvų schemą ir permatomumą, galėsite savo įrašui suteikti norimą atmosferą. Būkite atsargūs su šiais nustatymais, nes antraštės tekstas turi būti aiškiai matomas.
Making video header
Viršelio blokas taip pat gali būti naudojamas svetainės antraštėje esančiam vaizdo įrašui atkurti. Galite atkreipti lankytojų dėmesį arba reklamuoti produktą ar paslaugą. Yra keli palaikomi vaizdo įrašų formatai, dažniausiai naudojamas .mp4.
Puikus dalykas yra tai, kad taip pat galite rašyti pavadinimą virš vaizdo įrašo, jį sulygiuoti, padaryti jį per visą plotį arba nustatyti Spalvų perdanga. Viršelio bloko nustatymai yra vienodi visiems medijos tipams.
Kokia jūsų patirtis su antraštėmis? Ar jau išbandėte Cover bloką, kad sukurtumėte antraštę? Ar pirmenybę teikiate klasikinei svetainės antraštei, naudodami "WordPress" tinkinimo priemonę? Praneškite mums žemiau esančiuose komentaruose.