Prezentacja Divi Design: nowe zgłoszenia od października 2019 r.

Znowu nadszedł ten czas! Czas na naszą comiesięczną prezentację Divi, w której przyjrzymy się dziesięciu niesamowitym witrynom Divi stworzonym przez członków naszej społeczności. Każdego miesiąca prezentujemy najlepsze witryny Divi, które zostały przesłane przez naszą społeczność, a dziś chcemy podzielić się z Wami dziesięcioma najlepszymi witrynami w październiku. W całym poście wymienię niektóre z moich ulubionych funkcji projektowych, które przyciągają mnie do każdej ze stron internetowych.

Mam nadzieję, że ich lubisz!

Prezentacja Divi Design: nowe zgłoszenia od października 2019 r.

1. Boty kontra Wady

Ta strona została zgłoszona przez Wade McMaster. Witryna wykorzystuje ciemną paletę kolorów z białym i jasnoniebieskim tekstem oraz podświetleniami. Menu jest smukłe i oddzielone od sekcji bohaterów niebieską linią. Sekcja bohatera wyświetla obraz tła z logo witryny i opisem dużym tekstem. Sekcja Informacje zawiera informacje w dwóch kolumnach. Podoba mi się sekcja bloga, która wyświetla się w paralaksie na obrazie tła ze stylizowaną nakładką. Wyświetla najnowszy wpis na blogu z tekstem po jednej stronie jako wezwanie do działania, aby zobaczyć bloga i wpis na blogu po drugiej w formie karty. Strony tapet i blogów wyświetlają posty w blogu z nagłówkiem, obrazem tła i paskiem bocznym. Ciekawa jest również strona Subskrybuj. Wyświetla formularz rejestracyjny jako wezwanie do działania z punktorami po jednej stronie, aby pokazać korzyści z subskrypcji. Strony wyświetlają inny wygląd menu niż strona główna.

Odwiedź stronę

2. Dopasuj media projektowe

Ta strona została zgłoszona przez Sama Nicholsona. Witryna wyświetla pełnoekranowe wideo w tle z nakładką gradientową. Na pierwszym planie widać logo i projekty linii. Logo powiększa się po najechaniu i dwa elementy linii znikają, tworząc ciekawy efekt najechania. Najciekawszym elementem jest sposób, w jaki strona wykorzystuje podziały sekcji. Umieszcza obraz tła za separatorem, a następnie umieszcza na nim gradient. Nad nimi umieszcza się żetony liczb lub okrągłe. Witryna wykorzystuje wiele gradientów i stylizowany tekst, aby dopasować. Przyciski zawierają te same gradienty, co tła. Usługi są wyświetlane w naprzemiennym układzie i zawierają obrazy, które przechylają się po najechaniu. Sekcja Kariera i Sekcja Kontakt zawierają ten sam efekt przechyłu. Ma wiele małych animacji, takich jak linie, które przechylają się na miejsce podczas ładowania. Witryna zawiera również stylizowany przycisk „od góry do góry” i stylizowany pasek suwaka, który chciałbym, aby stał się standardową praktyką projektowania stron internetowych.

Odwiedź stronę

3. Nieruchomość Pop

Ta strona została zgłoszona przez Kaelynn Midgley. Wyświetla gradient tła o pełnej szerokości z CTA po jednej stronie i obrazem w urządzeniu mobilnym po drugiej. Przewijanie ujawnia informacje z jednej strony z wezwaniem do działania, a z drugiej obrazy nieruchomości z jednym obrazem umieszczonym w obrysie laptopa. Podobne projekty są kontynuowane w całej witrynie. Moim ulubionym jest dział o społeczności. Zawiera dwukolumnowy układ z obrazem tła z nakładającą się notką, która zawiera obraz, tekst i przycisk oraz informacje po drugiej stronie. Strona Jak to działa pokazuje każdy krok na pełnym ekranie z innym kolorem tła dla każdego. Podoba mi się również strona bloga, która zawiera sekcję bohatera, tekst informacyjny, przekładkę, a następnie wpisy na blogu. Posty dodają cień pudełka do wyróżnionego obrazu. Menu zawiera CTA.

Odwiedź stronę

4. Ojczyzna

Ta strona została zgłoszona przez Jerome Bestel. Zawiera wiele grafik w całej witrynie, zaczynając od sekcji bohatera, która wyświetla dużą grafikę po jednej stronie i wezwanie do działania po drugiej. Przewijanie pokazuje dwukolumnową sekcję z mniejszą grafiką po jednej stronie z klikalnym przyciskiem połączenia i informacjami po drugiej stronie. Ten projekt zmienia się w dół strony podczas przewijania. Pozostałe informacje znajdują się w notatkach. Suwak pozwala przesunąć kursor i wybrać cenę. Informacje o zespole opatrzone są notatkami i zawierają grafiki do zdjęć. Witryna wykorzystuje minimalistyczny projekt i dużo niebieskiego tekstu i tła, aby przemawiać do docelowych odbiorców. Każda ze stron ma podobny projekt, ale wciąż ma coś wyjątkowego. Menu zawiera wezwanie do kontaktu i klikalny link do rozmowy. Szczególnie podoba mi się duża grafika w sekcjach bohaterów każdej strony.

Odwiedź stronę

5. Zmiana na cele charytatywne

Ta strona została zgłoszona przez Dicka Kenta. Ma gradient tła o pełnej szerokości z grafiką po jednej stronie za CTA i zestawem obrazów po drugiej stronie, które pokazują aplikację na telefonach komórkowych. Kilka następnych sekcji pokazuje tekst z separatorem i niebieskim tytułem po lewej stronie oraz smartfon z obrazem aplikacji i otaczającą grafiką po prawej stronie. Tekst i grafika przesuwają się na miejsce podczas przewijania. Suwak wyświetla logo na wzorzystym tle z gradientem. Suwak referencji o pełnej szerokości zawiera obraz, referencje oraz nawigację w postaci kropek i strzałek na niebieskim tle, które pasuje do witryny. Informacje są podawane w notatkach zawierających zakreślone ikony pasujące do stylu witryny. Witryna doskonale wykorzystuje kolory i gradienty firmowe w kolorze niebieskim i zielonym.

Odwiedź stronę

6. Rebbl

Ta strona została zgłoszona przez Dicka Kenta. Ta strona korzysta z ciekawego mega menu z mniejszym tekstem pod tekstem głównym. Najechanie kursorem na jeden z linków otwiera menu, w którym znajdziesz więcej linków i obrazów. Pierwsza sekcja strony głównej zawiera obraz o pełnej szerokości z miejscem po jednej stronie na wezwanie do działania, a po drugiej na produkty. Przewijanie ujawnia CTA o pełnej szerokości, które demonstruje produkt i zawiera link do sklepu. Sekcja bloga wyświetla kategorie jako karty bloga. Kliknięcie jednego z nich otwiera stronę archiwum tej kategorii blogów. Wpisy na blogu są prezentowane na dużych kartach z kategorią wyśrodkowaną między obrazem a fragmentem. Smukły formularz subskrypcji wyświetla tekst i formularz na deseniu tła. Informacje o firmie i produktach prezentowane są w dwukolumnowej sekcji z dużymi CTA. Podoba mi się CTA wideo, które wyświetla wideo w tle z tytułem i przyciskiem w nakładce. Wbudowany suwak na Instagramie dostarcza informacji po najechaniu kursorem i otwiera informacje w trybie modalnym po kliknięciu.

Odwiedź stronę

7. Młodzież, mów głośno!

Ta strona została zgłoszona przez Michała Teskę. Jest to układ jednostronicowy, który wyświetla pełnoekranowy obraz tła w paralaksie z wysoce nieprzezroczystą nakładką. Nakładka zawiera slogan i grafikę. Wszystkie sekcje mają układ dwukolumnowy z tekstem w tle w paralaksie, z grafiką na pierwszym planie i tekstem po drugiej stronie. Ten projekt zmienia się podczas przewijania. Jedna z tych sekcji zawiera przełączniki, które są stylizowane tak, aby pasowały do ​​witryny. Informacje o zaangażowanych osobach są tworzone za pomocą notek, które mają miniaturę po lewej stronie, a ich imię i nazwisko oraz lokalizację po prawej. Logo partnerów jest wyświetlane w skali szarości i zmienia się na kolor po najechaniu myszą.

Odwiedź stronę

8. NIESAMOWITE!

Ta strona została wysłana przez Christosa Papadopoulos. Animowane tło tworzy efekt podmorskiej scenerii z kreskówkową grafiką. CTA z hasłem i animowanym obrazem znajduje się w tle. Mega menu pokazuje trzy kolumny linków i obrazów. Kolejna sekcja zawiera informacje i zawiera klikalny link do rozmowy i link do konsultacji. Członkowie zespołu są wyświetlani z obrazem, imieniem, tytułem, opisem i przyciskiem, aby usłyszeć wiadomość dźwiękową od tej osoby. Usługi są wyświetlane w notatkach, które zawierają ikony pod tekstem. Strona projektu pokazuje przykłady na karcie, która przewija się po najechaniu myszą. Każda ze stron Usług ma podobny projekt, który zawiera nagłówek z opisem i linkiem, a następnie szczegółowe informacje. Strona bloga i posty mają podobny projekt nagłówka.

Odwiedź stronę

9. Marci Angeles

Ta strona została zgłoszona przez Marci Angeles. Nagłówek i stopka pozostają na ekranie podczas przewijania. Są przezroczyste, więc układ jest widoczny. Strona główna pokazuje niebieskie tło i kilka zdjęć próbek prac. Kliknięcie obrazu otwiera stronę tego projektu, na której możesz zobaczyć szczegóły projektu. Każdy z nich jest wyświetlany jako post na blogu i zawiera polecany obraz, opis, obrazy, nawigację do poprzedniego i następnego posta oraz formularz kontaktowy. Stopka nie pozostaje na ekranie na stronach projektu. Nagłówek i stopka mają prosty i przejrzysty wygląd. Nagłówek zawiera linki do innych witryn przez właściciela, które używają podobnych, delikatnych kolorów, jak ten. Stopka zawiera linki do mediów społecznościowych. Oba mają linie, które oddzielają je od treści witryny.

Odwiedź stronę

10. ATG Europa

Ta strona została zgłoszona przez Camiel Bos. Pełnoekranowy nagłówek pokazuje wideo w tle z tytułem i sloganem w lewym dolnym rogu ekranu. Ma mega menu i wyświetla linki i posty po najechaniu kursorem. Na przewijaniu widać, że menu zmienia kolor na biały i ma zakrzywioną krawędź oraz odzwierciedla dół sekcji wideo. Informacje są podane w następnej sekcji i zawierają grafikę pasującą do tematyki witryny. Obsługiwane branże, rozwiązania i usługi są pokazane na obrazach w paralaksie. Kontaktowe wezwanie do działania wyświetla tytuł i przycisk nad obrazem tła i zawiera zakrzywione przegródki sekcji na górze i na dole, aby stworzyć ciekawy projekt. Witryna wykorzystuje wiele stylizowanych przegród, wzorów tła i nakładających się elementów, które ładnie się wyróżniają, zachowując czysty wygląd. Strona doskonale wykorzystuje obrazy i kolory.

Odwiedź stronę

Wniosek

To 10 najlepszych zgłoszeń do naszej społeczności Divi na październik. Te strony wyglądają niesamowicie i jak zawsze chcemy podziękować wszystkim za wasze zgłoszenia!

Jeśli chcesz, aby Twój własny projekt został rozważony, wyślij e-mail do naszego edytora nathan na eleganckie motywy kropka com. Pamiętaj, aby w temacie wiadomości e-mail umieścić „ZŁOŻENIE WITRYNY DIVI”.

Chcielibyśmy również usłyszeć od Was w komentarzach! Powiedz nam, co lubisz w tych witrynach, a jeśli jest coś, co zrobili, chcesz, abyśmy nauczali na blogu.

Wyróżnij obraz za pośrednictwem ProStockStudio / shutterstock.com