Jak stworzyć atrakcyjne elementy tekstowe na stronie internetowej

Efektowna  typografia to podstawa do zaprojektowania atrakcyjnej strony internetowej. Poznajmy zatem sposoby tworzenia wizualnie ciekawych elementów tekstowych

W tym tutorialu pokażemy jak modyfikować wygląd tekstu na stronie postawionej na WordPressie przy zastosowaniu kreatora stron Elementor z dodatkiem gotowych do użytku elementów kodu HTML

Najprostszy, mało atrakcyjny pod względem typografii nagłówek wygląda tak:

Naszym celem jest stworzenie ciekawszego projektu. Zobaczmy zatem jak można mmodyfikować teksty, niejako je “stuningować. Na początek stworzymy nagłówek wypełniony obrazkiem.

1. Teks wypełniony elementem graficznym

Aktualnie nasz nagłówek wygląda tak. 

Postaramy się jednak wypełnić niebieski tekst “SURFING” zdjęciem morza. Posłużymy się tym gotowym kodem –  zamiast XXX… wstawiając ścieżkę do wybranego obrazka, a zamiast YYY…treść, w tym konkretnym przypadku SURFING.

<span style=”background: url(XXXXXXXXXXXXXX) no-repeat;

   -webkit-background-clip: text;

   -webkit-text-fill-color: transparent;”>YYYYYYYYYYYY</span>

Aby skopiować ścieżkę dostępu do obrazka, na zapleczu WordPressa klikamy Media > Biblioteka a następnie w wybrany obrazek. W prawym dolnym rogu zaznaczamy ścieżkę, kopiujemy i wklejamy w miejsce X-ów. Zamiast Y-ków wpisujemy tekst. Całość kopiujemy i przechodzimy do edycji strony w Elementorze. Klikamy w nagłówek i w edytorze po lewej stronie wklejamy zmodyfikowany uprzednio kod.

Gotowe.

2. Tekst z obrazkiem w tle

Tym razem posłużymy się następującym gotowcem kodu. Tak jak poprzednio zamiast X-ów wstawimy ścieżkę dostępu do elementu graficznego, a zamiast Y-eków treśc

<span style=”background-image: url(XXXXXXXXXXXXXXXX);

background-position: center;

background-repeat: no-repeat;

padding: 35px 55px;

margin: 0 -45px;

„>YYYY</span>

Po modyfikacji kodu tak jak poprzednio kopiujemy go i wklejamy w edytorze nagłówka w Elementorze. Oto efekt – pod tekstem „Cenne Starodruki mamy tło stylizowane na stary papier. Wzory mogą być oczywiście bardzo różne w zależności od tematyki strony

 

Wzory mogą być oczywiście bardzo różne w zależności od tematyki strony. Tu inny przykład zastosowania tej techniki:

 

 

3. Przezroczysty tekst z obwódką

W kolejnym tuningu posłużymy się techniką, która pozwala zaprezentować przezroczysty tekst z obwódką w białym lub innym kolorze

<span style=”color: transparent;

    -webkit-text-stroke-width: 2px;

    -webkit-text-stroke-color: #fff;”>XXXXX</span> ART

4. Różne fonty w elemencie tekstowym

Na koniec przygotujemy tekst, którego wyróżniony fragment będzie zapisany inną czcionka, którą dodatkowo pochylimy (italic)

 

Posłużymy się następującym kodem, w którym zamiast XXXX wstawimy tekst zapisany domyślnym fontem, natomiast zamiast YYYYYY tekst ze zmienionym fontem

XXXXXXXXX <span style=”font-family:playfair display;font-style:italic;font-size:65px”>YYYYYYYY </span>XXXXXXXXX

Na koniec dodamy nadtytuł z tłem w określonym kolorze

 

<span style=”background-color: #b35900; padding: 10px; letter-spacing: 2px;”>ARANŻACJA WNĘTRZ</span>

 

Kolor możemy zmieniać wstawiając zamiast #b35900 wybraną barwę w zapisie HTML

Tutaj możemy wybrać kolor

https://www.w3schools.com/colors/colors_picker.asp