Jak nałożyć obraz w WordPress

Jeśli jesteś entuzjastycznie nastawiony do tworzenia wyjątkowej strony internetowej, zawsze będziesz ciężko pracował, aby ją upiększyć. Istnieją miliony sposobów, aby Twoja witryna stała się muzą, a jeden z nich zostanie wspomniany w naszym dzisiejszym poście: nakładanie obrazu .

Wciąż zastanawiasz się, co to jest? Po prostu zwolnij i pozwól nam się zabrać!

Co to jest nakładka?

Jak widać, jako nagłówek użyłem obrazu z tekstem i nakładką; zrobiło to dużą różnicę w porównaniu z pisaniem prostego nagłówka tekstowego. Wygląda o wiele bardziej stylowo i atrakcyjnie w porównaniu do normalnego, prawda?

Co ważniejsze, nakładka na obraz pomaga uwydatnić tekst, zachowując jednocześnie widoczny obraz tła. Możesz z łatwością dodać obraz z tekstem i nakładką na takie posty/strony i używać go do różnych celów. W tym poście pokażemy Ci, jak to zrobić w prostych krokach.

Jesteś już podekscytowany? Zacznijmy!

Jak nałożyć obraz w WordPress

Istnieją dwie metody nałożenia obrazu w WordPressie: za pomocą bloku okładki Gutenberga i za pomocą CSS. Podczas gdy korzystanie z Gutenberga pomaga w tworzeniu postu/strony zawierającej obraz z nakładką nawet z pustego arkusza, użycie CSS pomoże Ci szybko dostosować obrazy na gotowym poście/stronie.

Obie te dwie metody są pod pewnymi względami łatwe w użyciu, a my pokażemy Ci, jak z nich korzystać jeden po drugim.

Metoda 1: Korzystanie z bloku okładki Gutenberga

Przejdź do edytora stron Gutenberga.

Krok 1: Wstaw obraz za pomocą bloku okładki.

Kliknij Dodaj blok i wybierz typ bloku jako Otulina .

Następnie wybierz obraz tła do wyświetlenia na tym bloku okładki. Możesz przesłać obraz lub wybrać obraz z biblioteki.

W razie potrzeby możesz również zmienić obraz dodany wcześniej na obraz okładki. Kliknij obraz, wybierz Zmień styl lub typ bloku i wybierz Okładka :

W moim przypadku wybiorę tę czapkę jako tło i napiszę na niej również losowy tekst.

Ponadto mogę ustawić szerokość mojego obrazu w poniższych ustawieniach. Po prostu wyrównam to do środka.

Teraz mój blok okładki jest gotowy z obrazem w tle i tekstem. Domyślnie blok Cover ma już nakładkę w kolorze czarnym, więc w dalszej części zobaczymy, jak możemy go edytować:

Krok 2: Dostosuj nakładkę bloku okładki

Następnie przejdziesz do ustawień bloku, aby utworzyć nakładkę.

Kliknij blok > kliknij przycisk Opcje (wyświetl jako przycisk z trzema kropkami) > wybierz Pokaż więcej ustawień .

Menu ustawień bloku powinno być teraz gotowe po prawej stronie ekranu. Przejdź do sekcji Nakładka .

Daje dwie opcje kolorów, które są jednolite i gradientowe, aby nałożyć obraz okładki:

Wypróbujemy obie te opcje. Najpierw wypróbujmy nakładkę w jednolitym kolorze.

Jednolity kolor nakładki

Teraz możesz:

• Wybierz kolor z sugerowanego menu;
• Wybierz niestandardowy kolor. Możesz wybrać kolor z palety lub wstawić kod koloru. Niestandardowy kolor wyświetla się jak poniżej.

Właśnie wybrałem słodki różowy kolor dla mojej nakładki. Poza tym mogę również zmienić krycie (poziom przezroczystości) nakładki:

Współczynnik krycia od 30 do 60% to prawidłowa wartość. Jeśli ustawisz krycie poniżej lub powyżej sugerowanej wartości, nakładka może być prawie niewidoczna lub zbyt pogrubiona, aby zobaczyć tło. Zachowam domyślny współczynnik krycia na poziomie 50%.

Wszystko jest tutaj ustawione! W ten sposób możesz po prostu dodać jednokolorową nakładkę do obrazu okładki.

Przejdźmy teraz do opcji koloru gradientu.

Nakładka koloru gradientu

Kolor gradientowy, jak wspomniano powyżej, to schemat co najmniej dwóch wybranych kolorów. Lub po prostu mówiąc, kolor nakładki będzie się odpowiednio i stopniowo zmieniać od pierwszego do drugiego wybranego koloru (i tak dalej).

Zobaczmy, jak robię nakładkę gradientową, aby lepiej ją zrozumieć.

Najpierw zmieniłem tryb kolorów z Solid na Gradient. Ponadto wybrałem zestaw kolorów gradientu z menu sugestii. Tak to wygląda:

Jak widać nakładka składa się z 3 punktów kontrolnych. Każdy ma jednolity kolor i możesz przesuwać te punkty kontrolne, aby dostosować schemat kolorów nakładki.

Domyślny układ kolorów po wybraniu koloru gradientu jest zrównoważony. Postaram się to trochę dostosować i tak to się zmienia:

Inną zmianą, którą możesz wprowadzić, jest rodzaj schematu kolorów. Możesz wybrać pomiędzy typem liniowym i promieniowym . W przypadku typu Linear możesz również wybrać kierunek nakładki.

Aby opanować tę opcję koloru gradientu, będziesz potrzebować lepszego zmysłu artystycznego, a także nauczyć się mieszać i dopasowywać kolory, aby uzyskać najlepszą kombinację dla nakładki.

Metoda 2: Korzystanie z CSS

Jeśli chcesz dodać nakładkę do obrazu za pomocą Edytora klasycznego, wymagane jest użycie CSS. Musisz dodać trochę CSS. Przejdź do Wygląd > Dostosuj > Dodatkowy CSS .

Dla nakładki gradientowej

Dodaj ten kod dla nakładki gradientowej:

 .gradient w tle {
    pozycja: względna;
}
.background-gradient::przed {
    zawartość: '';
    tło: gradient liniowy (135 stopni, # 0693e3, # 9b51e0);
    pozycja: bezwzględna;
    góra: 0;
    po lewej: 0;
    dół: 0;
    prawo: 0;
    indeks z: 1;
    nieprzezroczystość: 0,5;
}

Dla solidnej nakładki:

Dodaj ten kod dla stałej nakładki:

 .przezroczystość tła {
    pozycja: względna;
}
.background-opacity:przed {
    zawartość: '';
    pozycja: bezwzględna;
    góra: 0;
    po lewej: 0;
    dół: 0;
    prawo: 0;
    indeks z: 1;
    nieprzezroczystość: 0,5;
    kolor tła: #000;
}

Uwaga: ten kod pomoże ci dodać tylko nakładkę, a nie tekst na obrazie.

Możesz dodać oba, jeśli chcesz dodać wiele obrazów z różnymi rodzajami nakładki. Aby zdefiniować nakładkę jako kolor jednolity lub gradientowy , przejdź do edytora tekstu i dodaj klasę do obrazu, który chcesz nałożyć:

• Solid: <div class="background-opacity"> … </div>
• Gradient: <div class="background-gradient is-style-default"> … </div>

Na przykład:

Tak to robię!

Werdykt

Dodanie nakładki do obrazów naprawdę pomaga udekorować posty/strony i wywrzeć lepsze wrażenie na odwiedzających. Warto zagłębić się w to, jak wykonać idealną nakładkę, więc gorąco polecam, abyś od razu zaczął nad nią pracować. Możesz również uatrakcyjnić swoją witrynę za pomocą suwaków, wyskakującego banera, tła wideo… Mam nadzieję, że moja instrukcja jest dla Ciebie wystarczająco jasna i jeśli masz pytania, możesz zostawić pytania i komentarze poniżej. PA!