ustawianie cienia dla zdjecia depth na stronie wordpress flatsome

Jak zrobić Efekt podskakującego zdjęcia z cieniem na stronie w WordPress

Najlepsze są proste jasne strony. Najlepiej działają. Im mniej efektów tym lepiej. Jednak drobne efekty można stosować. Wszystko z umiarem. Aby nie rozpraszało naszego gościa na stronie, ale aby przykuwało uwagę.

Kilka elementów często stosuję. Są nimi:

  • cień na przykład pod zdjęciem czy przyciskiem
  • ramka do zdjęcia,
  • efekt podskakującego zdjęcia/przycisku lub innego elementu po najechaniu myszką
  • lub efekt przyciśniętego zdjęcia czy przycisku

Jak już wspominałam używam do WordPressa motywu FLATSOME. Kosztuje ok $59 czyli ok 230 zł. Płatne jednorazowo. Jednak zanim go kupisz zastanów się! Przeczytaj dalej… obejrzyj wideo…

Jest to bardzo rozbudowany szablon. Ma bardzo dużo różnych opcji ustawień.

Można na nim tworzyć bardzo urozmaicone strony, a jedna od drugiej mogą się całkowicie różnić i niczym nie zdradzać, że obie korzystają z tego samego szablonu. To na prawdę świetny, wielofunkcyjny szablon.

Aby dodać cień wystarczy na suwaku ustawić intensywność cienia. Cień to opcja DEPTH.

Jest jeszcze HOVER DEPTH. HOVER oznacza najechanie myszką, czyli HOVER DEPTH oznacza efekt cienia po najechaniu myszką.

I teraz w zależności od tego jak intensywne chcemy mieć te cienie tak je ustawiamy. MAX to 5 MIN to 0.

Cień możemy ustawić dla samego zdjęcia IMAGE jak i dla kolumny, w której to zdjęcie się znajduje. W zaprezentowanym przykładzie ustawiam cień dla KOLUMNY (COLUMN), a nie dla samego zdjęcia.

depth 0 depth hover 0 efekt braku cienia
depth 0 depth hover 0 efekt braku cienia
depth 1 cień zdjęcia na 1
depth 1 cień zdjęcia na 1
depth 2 cień zdjęcia na 2
depth 2 cień zdjęcia na 2
Efekt podskakującego zdjęcia z cieniem depth-3-cien-zdjecia-w-kolumnie-na-3
depth-3-cien-zdjecia-w-kolumnie-na-3
Efekt podskakującego zdjęcia z cieniem depth 4 cień zdjęcia w kolumnie na 4
depth 4 cień zdjęcia w kolumnie na 4
Efekt podskakującego zdjęcia depth 5 cien zdjecia na 5
depth 5 cien zdjecia na 5

Jeśli DEPTH mamy ustawione na jakąś wartość, a HOVER DEPTH na 0 to po najechaniu myszką jest bez zmian. Czyli będzie taki cień jaki jest ustawiony. Nie zejdzie do zera.

Jeśli natomiast będzie DEPTH HOVER ustawiony na jakąś wartość inną niż 0 i inna niż DEPTH wtedy zobaczymy efekt ruszania się.

W zależności od tego czy będzie to wartość mniejsza czy większa, efekt będzie albo podskakiwania albo przyciśnięcia.

efekt podskakiwania po najechaniu myszką
efekt podskakiwania po najechaniu myszką
efekt przyciskania zdjecia
efekt przyciskania zdjecia

Szerokość ramki

To po prostu odstępy pomiędzy krawędzią kolumną, w której znajduje się obrazek, a obrazkiem. Odstępy to opcja PADDING. W zaprezentowanym przykładzie PADDING dla każdej krawędzi jest ustawione na 15.

Poniżej porównanie

gdzie PADDING kolumny jest ustawiony na 15 i gdzie jest ustawiony na 0 czyli nie ma żadnych odstępów i nie widać krawędzi kolumny, tylko samo zdjęcie.

Cień jest ustawiony dla KOLUMNY, ale , ze kolumna i zdjęcie mają ten sam rozmiar, nie ma odstępów kolumny od krawędzi, to widać tak jakby dla zdjęcia był ustawiony cień.

porównanie efektu cienia z ramką i cienia bez ramki
porównanie efektu cienia z ramką i cienia bez ramki

W UXBulder to bardzo proste ustawianie wszelkich efektów wizualnych strony. Oczywiście trzeba poznać co oznaczają poszczególne określenia, ale samo używanie tych opcji jest bardzo proste.

Moim Klientom udostępniam szereg szkoleń, na których tłumaczę różne kwestie dotyczące ustawień strony.

Klientom, którzy nie chcą się tym zajmować ja tworze stronę i się nią zajmuję. Mówią mi co chcą a aj to ustawiam. Jeśli potrzebujesz takiej usługi skontaktuj się ze mną.

Na poniższym wideo pokazuję jak ustawić cień i ramkę dla zdjęcia.

Zajrzyj jeszcze tutaj:

Rozważ co bardziej Ci się opłaca? Samodzielne rozmienianie wszystkiego przez bardzo dużo czasu. Lub może wolisz, aby ktoś Ci to wszystko zainstalował w 2-3-dni, dał Ci instrukcje używania + wsparcie? Lub wszystko ustawił za Ciebie?

Moja oferta to instalacja MEGA PAKIETU Strony do Biznesu Online. W prezencie otrzymujesz ten wielofunkcyjny motyw FLATSOME. Do tego dostajesz szkolenia/instrukcje jak używać FLATSOME.

W pakiecie oprócz FLATSOME z UXBlocks dostajesz również:

  • instalację sklepu,
  • platformy do kursów online,
  • nieograniczonej liczby stron lądowania,
  • + MOJE WSPARCIE 🙂

Zajrzyj na moją ofertę TUTAJ >>>>

0 0 votes
Article Rating
Subscribe
Powiadom o
guest
2 komentarzy
najstarszy
najnowszy oceniany
Inline Feedbacks
View all comments
Jan Limanówka
Jan Limanówka
1 rok temu

Przeglądam wszystkie informacje do których mam już dostęp. Zastanawia mnie, czy sobie poradzę z tym wszystkim. Mam już 66 lat i specyficzny MLM w którym nie występuje handel produktami, a punkty do premii zdobywa się poprzez codzienne zakupy w sklepach, za usługi online i offline i na wiele innych sposobów. Mam strukturę ponad 4600 osób, ale chcę teraz budować nowe linie online, bez wychodzenia z domu. Firma z którą współpracuję już 8 lat to myWorld (dawny Lyoness).

2
0
Would love your thoughts, please comment.x