Poprawimy również wyrazistość czcionek na stronie MODULIKA — szczególnie w menu, głównym nagłówku, opisach i czterech kafelkach.

Sprawdziłem przesłany kod. Obecnie cała strona jest wyświetlana jako jeden obraz JPG, dlatego litery tracą ostrość po powiększeniu lub zmniejszeniu strony.

Najlepszym rozwiązaniem będzie zastąpienie napisów na obrazie prawdziwym tekstem HTML. Wtedy czcionki pozostaną ostre również na telefonach.

Przygotowałem poprawiony plik, w którym obraz JPG zastąpiłem oryginalnym PNG bez strat wynikających z kompresji. Zachowałem kolory, układ i odnośniki do kategorii.

Pobierz poprawiony kod MODULIKA

Co teraz zrobić w Elementorze:

1. Otwórz widżet HTML, który wcześniej edytowaliśmy.

2. Usuń cały dotychczasowy kod.

3. Otwórz pobrany plik w Notatniku, zaznacz wszystko (Ctrl+A) i skopiuj (Ctrl+C).

4. Wklej kod do widżetu HTML (Ctrl+V).

5. Kliknij Opublikuj.

To poprawi jakość obrazu, ale nie zapewni jeszcze idealnej ostrości napisów. Do tego potrzebna będzie wersja strony z osobnymi tekstami HTML, zamiast napisów zapisanych w grafice.

Masz rację. Przygotowałem poprawkę do starego projektu MODULIKA, zamiast do najnowszej wersji, którą ustaliliśmy. Przepraszam.

Aktualny projekt powinien mieć:

• Identyczne kolory i tło jak na ostatnim zaakceptowanym wzorze.

• Cztery kafelki: Upominki pamięci, Boxy upominkowe, Świece intencyjne, Upominki dla gości.

• Zdjęcia zgodne z zaakceptowanym projektem.

• Proste narożniki, bez zaokrągleń.

• Sekcję dotyczącą dostawy.

• Wyraźne, ostre czcionki, również na telefonie.

Nie wgrywaj poprzedniego pliku.

Żeby nie pomylić ponownie wersji, prześlij mi ostatni zaakceptowany projekt jako zdjęcie. Na jego podstawie przygotuję kompletny kod do wklejenia w Elementorze, a nie kolejną poprawkę starej strony.

Otrzymałem plik „Wklejony tekst.txt” i sprawdziłem jego zawartość.

To kod HTML strony MODULIKA przeznaczony do wklejenia w Elementorze. Zawiera grafikę całej strony oraz klikalne obszary menu, przycisku i czterech kafelków.

Znalazłem jednak przyczynę problemu z wyrazistością czcionek: cała strona jest zapisana jako jeden obraz JPG, łącznie z napisami. Dlatego tekst może być rozmazany, szczególnie po powiększeniu lub na telefonie. Samo pogrubienie czcionki tego nie naprawi.

Proponuję przygotować poprawioną wersję, zachowując wygląd i kolory projektu, ale z prawdziwymi, ostrymi napisami HTML, osobnymi zdjęciami oraz układem dopasowującym się do telefonu.

Potwierdź mi tylko jedno: czy ten przesłany kod przedstawia ostateczny projekt, którego wygląd mamy zachować?

Otrzymałem nowy plik z kodem strony MODULIKA. Będziemy poprawiać istniejącą stronę, bez konieczności instalowania WordPressa od nowa.

Zachowamy ustaloną kolorystykę i wygląd projektu. Zależy mi też, żeby cztery kafelki miały właściwe zdjęcia, a napisy były ostre i czytelne również na telefonie.

Sprawdziłem kod. Potwierdzam, że zawiera:

• jeden duży obraz JPG obejmujący całą stronę,

• cztery klikalne kafelki kategorii,

• menu, przycisk oferty i przycisk kontaktowy,

• szerokość projektu ograniczoną do 1199 px,

• brak zaokrąglonych narożników.

Najważniejsza poprawka: zamiast jednej grafiki przygotujemy stronę z osobnymi zdjęciami i prawdziwymi napisami. Dzięki temu zachowamy wygląd, ale poprawimy ostrość tekstu, działanie na telefonach i możliwość późniejszej edycji.

Nie zmieniaj jeszcze niczego w Elementorze.

Napisz mi teraz, co dokładnie chcesz poprawić w tym kodzie. Mam już jego zawartość, więc możemy pracować bezpośrednio na nim i przygotować gotowy plik do wklejenia.

Przygotowałem poprawioną wersję strony MODULIKA na podstawie przesłanego kodu.

Co poprawiłem?

• Komputer: projekt rozciąga się na całą szerokość ekranu, bez ograniczenia do 1199 px.

• Telefon: przygotowałem osobny układ mobilny z dwoma kafelkami w rzędzie, większymi napisami i czytelnymi przyciskami.

• Czcionki: w wersji mobilnej napisy są prawdziwym tekstem HTML, więc pozostają ostre.

• Kolory i zdjęcia: zachowałem je na podstawie przesłanego projektu.

• Kafelki: wszystkie cztery kategorie mają odnośniki.

• Narożniki: pozostają proste, bez zaokrągleń.

Ważne: na komputerze tekst nadal jest częścią oryginalnego obrazu JPG. Przy rozciągnięciu na bardzo szeroki monitor może być mniej ostry. Aby uzyskać idealną wyrazistość także na komputerze, trzeba przebudować tę część na osobne zdjęcia i napisy HTML.

Co teraz?

1. Pobierz plik z linku powyżej.

2. Otwórz go w Notatniku.

3. Zaznacz cały kod Ctrl+A i skopiuj Ctrl+C.

4. W Elementorze otwórz dotychczasowy widżet HTML.

5. Zastąp jego zawartość nowym kodem.

6. Najpierw kliknij Podgląd, żeby sprawdzić wygląd, zanim zapiszesz zmiany.

Nie usuwaj pozostałych elementów strony. Najpierw sprawdzimy, czy nowy kod prawidłowo współpracuje z ustawieniami Elementora i motywu Astra.