Tworzenie szarości do koloru galeria z Galerii Module Divi

Tworzenie szarości do koloru galeria z Galerii Module Divi
  • facebook
  • Twitter
  • Google+
  • Gmail
Jest to ostatni post na naszym mini serialu pod tytułem 5 Imponująca Divi Galeria układów i jak je tworzyć. Pamiętaj, aby wrócić w przyszłym tygodniu dla naszych najbliższych miniserialu Divi tutoriale!


W tym ostatnim przykładzie, chciałem podzielić się z wami efekt, że moi klienci kochać i to taki, który wziął trochę kreatywności i prób i błędów do osiągnięcia. Jeśli jesteś nowy w projektowaniu stron internetowych lub Divi, efekt taki może wydawać się przytłaczający, ale będę dostarczyć instrukcje krok po kroku poniżej, w jaki sposób osiągnąć ten modny skali szarości-to-kolor wygląd.

Załóżmy zanurkować!

Dzisiejsze Before & After: The Gallery Moduł Divi

Jak zwykle, zacznijmy z qucik przed i po naszej galerii Module Divi. Oba obrazy są poniżej co moduł wygląda po dodaniu zdjęć i jeszcze nic nie zrobił.

Domyślnie moduł Gallery
  • facebook
  • Twitter
  • Google+
  • Gmail

Domyślnie Gallery moduł Najedź

Pod koniec naszego samouczka Dzisiaj mamy zamiar osiągnąć ten stylowy szarości galerię że kwiaty z kolorem jak użytkownicy najechaniu kursorem na każdym obrazie.

Przykład 5 - skala szarości do kolorów
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail

Przykład 5 – skala szarości do kolorów

Tworzenie szarości do koloru galeria z Galerii Module Divi

Zapisz się na nasz kanał YouTube

Koncepcja i Inspiracja dla skali szarości do koloru Gallery Module

Jak w większości moich małych sztuczek CSS, po raz pierwszy stworzył ten wygląd po klient zapytał, czy mógłbym zrobić obrazy czarno-białe, a następnie zmieni kolor, gdy użytkownik przewija nad nimi. Kiedyś ten wygląd początkowo dla przypadkowych obrazów i wezwanie do działania grafiką ale ja niedawno zastanawiał się, co może być wykorzystane na skutek galerii Divi? Odpowiedź TAK! Z CSS i Divi, praktycznie wszystko jest możliwe

🙂
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail

Przygotowanie Elementy projektu

Jeśli już po wzdłuż wtedy wiesz, że większość, jeśli nie wszyscy z moich tutoriali w tym miniserialu wymagały royalty free dwanaście ponownie wielkości do 1200 pikseli szerokości 1000px wysokości. Mam również polecając że każdy zarządzanie plikami poprzez kompresję rozmiary ich obrazy zbyt. Można nauczyć się robić obie te rzeczy tutaj.

Realizacja Galerii kaflowy z niestandardowymi Padding Moduł Projektowania w Divi

W tym przykładzie użyjemy Gallery moduł Divi i dokonać korekt w tych 3 obszarach:

– Ustawienia ogólne
– Zaawansowane ustawienia konstrukcyjne
– Ustawienia niestandardowe CSS

Ustawienia to zmienimy.
  • facebook
  • Twitter
  • Google+
  • Gmail

Ustawienia to zmienimy.

Aby rozpocząć, należy utworzyć jeden punkt z jednym rzędzie oraz jeden moduł galerii.

Ustawienia modułu Row

Na tym przykładzie mamy zamiar powtórzyć zwyczaj wypełniania / dachówka wygląd zrobiliśmy w przykładzie 2, więc pierwszą rzeczą, jaką musimy zrobić, to dopasować rynny tak, że obrazy kolejce ciasno obok siebie.

Ustawienia główne:

Użyj niestandardowej szerokości rynny: TAK
Kanalizacja Szerokość: 1
Przechowywać niestandardowy wyściółka na komórkach: TAK

Save & Exit

Przykład 5 Ustawienia rynien
  • facebook
  • Twitter
  • Google+
  • Gmail

Przykład 5 Ustawienia rynien

Galeria Ustawienia modułu

Ustawienia główne:

Fotogaleria: Dodano obrazy do galerii
układ: Siatka
obrazów numer: 12
Pokaż Tytuł i podpisem: NIE
Pokaż Pagination: NIE

Przykład 5 Ustawienia ogólne
  • facebook
  • Twitter
  • Google+
  • Gmail

Przykład 5 Ustawienia ogólne

Zaawansowane ustawienia ogólne:

Hover Overlay Kolor: rgba (255,255,255,0)

Zamierzamy być wyłączenie Najedź na ikonę więc jedyne ustawienie musimy się martwić o tutaj jest zmniejszenie kolor nakładki na 0. W tym przykładzie chcemy obrazy, aby przejść od szarości do koloru, więc nie zrobić chce tam być dowolny kolor nakładki w ogóle. Można to zrobić z kodem, ale łatwym sposobem, aby przejść o nim jest po prostu to, aby całkowicie przejrzysty zestaw

🙂
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail

Przykład 5 Zaawansowane ustawienia konstrukcyjne
  • facebook
  • Twitter
  • Google+
  • Gmail

Przykład 5 Zaawansowane ustawienia konstrukcyjne

niestandardowe CSS

Przejdź do zakładki CSS niestandardowych ustawieniach modułu galerii i dodaj następującą wartość wyściółka i CSS klasy.

Galeria produktu:

padding3px

Tutaj dodaliśmy padding, że będziemy siedzieć między każdego obrazu.

Dodanie wyściółkę.
  • facebook
  • Twitter
  • Google+
  • Gmail

Dodanie wyściółkę.

Ok – tutaj jest CSS skali szarości! Ale nie martw się, to nie jest tak źle.

Pierwszym krokiem jest dodanie klasy do panelu klienta CSS, jak pokazano poniżej. Na potrzeby tego poradnika, mam oznakowane go „skala szarości”. Gdy klasa dodaje, powiemy CSS możemy stworzyć wszystko, aby pracować pod etykietą z tej klasy. Teraz każda galeria z „szarości” klasy pokaże skali szarości do efektu kolorystycznego.

Dodawanie klasy CSS
  • facebook
  • Twitter
  • Google+
  • Gmail

Dodawanie klasy CSS

Save & Exit

Teraz udaj się do Divi Opcje tematu przechodząc do WordPress Administrator> Divi Divi> Opcje tematu i przewiń w dół do sekcji Niestandardowe CSS, jak widać poniżej. Oto gdzie dodamy rzeczywisty wpływ CSS.

.grayscale .et_pb_gallery_image {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: .8;
}

Dotyczy to efekt skali szarości obrazu i jest również zmniejszenie krycie do 80%. I często zmniejszyć krycie na efekty tak jak to podczas przewijania nad obraz pojawi się trochę więcej. Zauważ, że przed każdym wywołaniu galerii poza kodowania, „.grayscale” class stworzyliśmy jest przed nim. To mówi wszystko z szarości klasie przed stosować te efekty.

.grayscale .et_pb_gallery_image:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1;
}

Kod ten steruje Najedź państwa. Zobaczysz, że zmętnienie jest ustawiony na 1 (100%) oraz w skali szarości procentowa wynosi 0%, co oznacza kolor obrazu pokaże podczas przewijania nad nim.

.et_overlay:before {
    displaynone;
}

Wreszcie, ten kod jest usunięcie ikony. Czułem ten przykład nie trzeba ikonę gdy obraz idzie od czerni i bieli do koloru. Jesteśmy w zasadzie mówi ikonę, aby nie wyświetlać tutaj.

Oto co kod będzie wyglądał po dodaniu:

Przykład 5 Klasa CSS Divi Galeria
  • facebook
  • Twitter
  • Google+
  • Gmail

Przykład 5 klasy CSS

Zapisz zmiany

Po dodaniu kodu CSS do sekcji CSS niestandardowej w opcjach Divi tematycznych (lub motyw dziecko), gotowe!

Przykład 5 - skala szarości do kolorów
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail

Twój ostateczny projekt, w skali szarości do koloru efekt z galerii Module Divi

I nie masz go! Nie było tak źle, prawda? Dodając klasę CSS do modułu galerii i wykorzystując kilka ładne wiersze kodu, mamy elegancką galerię, która sprawi, że użytkownicy www lub klientów szczęśliwy!

Artykuł z bloga ElegantThemes
Share This