8 technik tworzenia minimalnych stron internetowych za pomocą Divi

Minimalne strony internetowe stały się bardzo popularne w ciągu ostatnich kilku lat. Pozwalają skupić się na zapewnieniu odwiedzającym świeżego i czystego uczucia podczas nawigacji. Minimalistyczny styl projektowania stron internetowych jest inspirowany skandynawskim stylem projektowania wnętrz. Na pewno widziałeś zdjęcia skandynawskich salonów w całym Internecie. Zmniejszając meble i stosując głównie białe lub szare kolory, światło i spokój mogą swobodnie wnikać do pomieszczenia. To jest dokładnie to, co robią również minimalne strony internetowe. Skupiają się na zapewnieniu odwiedzającym spokoju, aby mogli skupić się na treściach, które przynosisz, bez przytłaczania.

To jest drugi post z serii postów, w których zajmiemy się 4 różnymi stylami stron internetowych i jak je osiągnąć za pomocą Divi:

1. Czyste i abstrakcyjne
2. Minimalny
3. Mieszkanie
4. Odważne i kolorowe

Weźmy się za to!

1. Mniej znaczy więcej

Pierwszą rzeczą, o której musisz pamiętać podczas tworzenia minimalnej witryny internetowej, jest próba zmniejszenia elementów projektu, których używasz w swojej witrynie. Zamiast używać więcej, staraj się jak najlepiej wykorzystać kilka elementów, których używasz.

Zdziwiłbyś się, jak wiele możesz uzyskać z projektu, dostosowując elementy projektu w taki sposób, aby stały się komplementarne. Użycie mniejszej liczby elementów w witrynie pozwala również zachować ogólny przegląd i dostarczać komunikat w bardziej spójny i przejrzysty sposób.

2. Margines i dopełnienie to Twoi najlepsi przyjaciele

Minimalne strony internetowe mają zwykle dużo białych znaków. Biała przestrzeń na Twoich stronach i postach pozwala odwiedzającym oddychać podczas wizyty w Twojej witrynie. Dają poczucie spokoju i pozwalają skupić się na treściach, którymi chcesz się podzielić.

Najlepszym sposobem na dodanie białej przestrzeni do witryny jest użycie białych i/lub jasnoszarych kolorów tła w połączeniu z dodatkowym dopełnieniem i/lub marginesem. Nie bój się bawić różnymi wartościami, aby zobaczyć, jaki wynik z tego wyniknie.

3. Użyj jednego koloru akcentującego

Jeśli chcesz, aby Twoja witryna była jak najmniejsza, powinieneś również unikać używania zbyt wielu różnych kolorów. Idź tak neutralnie, jak to możliwe, używając dużej ilości bieli i szarości. Używaj ciemniejszych kolorów do pisanych treści. Aby nadać swojemu projektowi nieco bardziej wyrazistego charakteru, wybierz jeden akcentujący kolor. Ten kolor będzie zwykle tym samym, którego używasz w swoim logo.

4. Albo obrazy, albo ilustracje – nie oba

Ogólnie rzecz biorąc, podczas tworzenia witryny zaleca się wybór między prawdziwymi obrazami lub ilustracjami. Używanie obu w tym samym czasie może naprawdę skomplikować Twoją witrynę i mieszać różne style witryny, czego zdecydowanie chcesz uniknąć.

Jest jednak jeden wyjątek. Na przykład możesz używać obrazów w połączeniu z ilustracjami ikon w swoich modułach Blurb. Jeśli są minimalne i wspierają treść na Twojej stronie, możesz iść.

5. Rozważ użycie modułów tekstowych zamiast modułów przycisków dla CTA

Czy kiedykolwiek próbowałeś użyć modułu tekstowego zamiast modułu przycisku? Zdecydowanie powinieneś. Chociaż moduły przycisków zapewniają większość opcji, do których jesteś przyzwyczajony w programie Visual Builder, mają tendencję do dodawania obramowań ze wszystkich stron przycisku. Dzięki modułowi tekstowemu możesz tego uniknąć. Możesz po prostu ustawić swoją kopię jako klikalną i dodać dolną ramkę, jak widać na poniższym zrzucie ekranu.

6. Dzielniki mogą pomóc zrównoważyć białe przestrzenie

Jeśli chcesz nadać swojej witrynie nowoczesny charakter, zdecydowanie powinieneś spróbować użyć wielu przegród w swojej witrynie i dopasować je do reszty układu.

Mają tendencję do łączenia ze sobą różnych elementów projektu i tworzenia spójnego efektu.

7. Używaj prostych i subtelnych kształtów

To jeden z moich ulubionych. Czasami mamy tendencję do zaniedbywania funkcji, do których jesteśmy najbardziej przyzwyczajeni, takich jak tło gradientowe. Jasne, używanie obrazu tła ma swój urok, ale czy kiedykolwiek próbowałeś użyć promieniowego tła gradientowego w subtelny sposób? Pozwala odwiedzającym skupić się na nagłówkach i pomaga uruchomić działanie.

8. Użyj subtelnych animacji (jeśli w ogóle są potrzebne)

Wreszcie, minimalna strona internetowa zwykle staje się jeszcze lepsza, gdy używa się subtelnych animacji. A kiedy mówimy subtelny, mamy na myśli naprawdę subtelny. Zdziwiłbyś się, jak gładko może wyglądać efekt, po prostu drastycznie zmniejszając intensywność animacji. Dopóki animacja jest subtelna, możesz ją dodać do dowolnego elementu i nie wpłynie to na czytelność i wrażenia użytkownika Twojej witryny.

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie techniki, zacznijmy je wprowadzać w życie. Krok po kroku odtworzymy następujący przykład:

Zacznijmy tworzyć: Dodaj nową sekcję standardową

Ustawienia sekcji

Rozstaw

Aby stworzyć powyższy przykład, potrzebujemy w sumie dwóch sekcji. Zacznijmy od dodania pierwszego do nowej lub istniejącej strony i dodania do niej następujących odstępów:

• Górna i dolna wyściółka: 50px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz zawierający jedną kolumnę.

Tło gradientowe kolumny

Otwórz ustawienia tego wiersza i dodaj do niego następujące tło gradientu kolumny:

• Kolor #1: #ffffff
• Kolor #2: #efefef
• Typ gradientu kolumny: promieniowy
• Kierunek promieniowy kolumny: Środek
• Pozycja początkowa kolumny: 40%
• Pozycja końcowa kolumny: 40%

Rozmiary

Następnie zwiększ szerokość wiersza, wprowadzając następujące zmiany w ustawieniach rozmiaru:

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 2

Rozstaw

Na koniec dodaj również następujące odstępy do swojego wiersza:

• Górna i dolna wyściółka: 0px
• Dopełnienie górnej i dolnej kolumny: 250px
• Dopełnienie kolumny po lewej stronie: 150px (komputer), 20px (tablet), 0px (telefon)

Pierwszy moduł tekstowy

Ustawienia tekstu

Po zmodyfikowaniu ustawień wierszy możesz zacząć dodawać potrzebne moduły. Zaczniemy od krótkiego opisu Modułu tekstowego, korzystając z następujących ustawień tekstu:

• Grubość czcionki tekstu: pół pogrubiona
• Styl czcionki tekstu: wielkie litery
• Odstępy między literami tekstu: 8px

Animacja

Do tego układu dodajemy również bardzo subtelne animacje, zaczynając od tego modułu tekstowego. Otwórz ustawienia animacji i dodaj następującą animację:

• Styl animacji: slajd
• Kierunek animacji: w prawo
• Intensywność animacji: 5%

Drugi moduł tekstowy

Ustawienia tekstu H1

Tuż pod poprzednim modułem tekstowym, śmiało dodaj moduł tekstowy H1 zawierający następujące ustawienia tekstu H2:

• Czcionka nagłówka: Gruzja
• Kolor tekstu nagłówka: #666666
• Rozmiar tekstu nagłówka: 78px (komputer), 50px (tablet), 40px (telefon)
• Odstępy między literami nagłówka: 3px

Rozstaw

Zamierzamy utworzyć przestrzeń wokół tego modułu, używając następujących ustawień odstępów:

• Margines górny i dolny: 100px
• Lewy margines: 100px (komputer i tablet), 20px (telefon)
• Lewa wyściółka: 40px

Granica

Potrzebujemy również lewej krawędzi, więc śmiało dodaj lewą ramkę z następującymi ustawieniami:

• Szerokość lewej krawędzi: 6px
• Kolor lewej krawędzi: #d67787

Moduł tekstowy przycisku

Dodaj link

Zamiast używać modułu przycisku, używamy modułu tekstowego, do którego dodamy link. Dodaj swoje wezwanie do działania i link w polu Treść.

Ustawienia tekstu łącza

Następnie zastosuj następujące ustawienia tekstu łącza do modułu tekstowego:

• Grubość czcionki łącza: pół pogrubiona
• Styl czcionki łącza: kursywa i wielkie litery
• Wyrównanie tekstu łącza: do lewej
• Kolor tekstu łącza: #666666
• Odstępy między literami: 8px

Rozmiary

Ponieważ będziemy używać dolnej krawędzi, później zmniejszymy również szerokość tego modułu tekstowego:

• Szerokość: 46%
• Wyrównanie modułu: do lewej

Rozstaw

Aby upewnić się, że dolna granica nie jest zbyt blisko naszego tekstu, dodamy również dolne wypełnienie „10px”.

• Dolna wyściółka: 10px

Granica

Teraz możemy przystąpić do dodawania dolnej granicy, korzystając z następujących ustawień:

• Szerokość dolnego obramowania: 1px
• Kolor dolnej krawędzi: #666666

Animacja

Dodajemy również subtelną animację:

• Styl animacji: slajd
• Kierunek animacji: w prawo
• Opóźnienie animacji: 100 ms
• Intensywność animacji: 5%

Dodaj moduł dzielnika

Widoczność

Ostatnim modułem, którego będziemy potrzebować w tym wierszu, jest moduł rozdzielający. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

Kolor

Używamy tego samego koloru dla tego separatora, co w przypadku lewego obramowania tytułu modułu tekstowego: „#d67787”.

Rozmiary

Otwórz ustawienia rozmiaru i zmień wagę dzielnika na „2px”.

Rozstaw

Przesuniemy moduł dzielnika w prawo, używając następujących ustawień odstępów:

• Lewy margines: 200px
• Prawy margines: -100px

Animacja

Na koniec dołączymy następującą animację:

• Styl animacji: slajd
• Kierunek animacji: w lewo
• Opóźnienie animacji: 150 ms
• Intensywność animacji: 5%

Dodaj drugą sekcję standardową

Ustawienia sekcji

Rozstaw

Skończyliśmy z pierwszą sekcją, więc możemy teraz iść dalej i dodać nową sekcję tuż pod poprzednią. Otwórz ustawienia sekcji i dodaj do niej następujący margines:

• Margines górny i dolny: 80px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając wiersz o następującej strukturze kolumn:

Rozmiary

Następnie otwórz ustawienia wiersza i zwiększ szerokość wiersza, korzystając z następujących ustawień:

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 2

Rozstaw

Musimy również dodać dopełnienie kolumny 2:

• Dopełnienie kolumny 2 po lewej stronie: 100px (komputer), 0px (tablet i telefon)

Dodaj moduł obrazu do kolumny 1

Załaduj obrazek

Możemy teraz zacząć dodawać moduły do ​​naszych dwóch kolumn. Zacznij od dodania modułu obrazu do pierwszej kolumny i prześlij wybrany obraz.

Rozstaw

Zwiększymy szerokość modułu obrazu, dodając ujemny prawy margines:

• Prawy margines: -100px

Cień Pudełka

Użyjemy również następującego cienia pudełka, aby stworzyć dodatkowy element projektu na stronie:

• Pozycja pozioma cienia pudełka: 100px
• Pozycja pionowa cienia pudełka: 100px
• Siła rozprzestrzeniania się cieni w pudełku: -14px
• Kolor cienia: #efefef

Moduł tekstowy przycisku klonowania i moduł umieszczania pod obrazem

Zlokalizuj i sklonuj moduł tekstowy przycisku

Zamierzamy ponownie wykorzystać wszystkie trzy moduły tekstowe z pierwszej sekcji, zaczynając od przycisku Moduł tekstowy. Śmiało i sklonuj to.

Umieść poniżej obrazu

Następnie umieść go tuż pod modułem obrazu w pierwszej kolumnie.

Klonuj pierwszy moduł tekstowy w pierwszej sekcji i umieść w kolumnie 2

Zlokalizuj i sklonuj moduł tekstowy

Następny moduł tekstowy, którego będziemy potrzebować, jest pierwszym w naszej sekcji. Śmiało i sklonuj również ten.

Umieść w kolumnie 2

Zamiast umieszczać go w pierwszej kolumnie, wrzuć go do drugiej.

Klonuj moduł tekstowy tytułu i umieść go w kolumnie 2

Zlokalizuj i sklonuj moduł tekstowy

Na koniec zamierzamy ponownie wykorzystać również tytułowy moduł tekstowy.

Umieść w kolumnie 2

Po sklonowaniu umieść go w drugiej kolumnie nowego wiersza.

Zmień treść na H2

Zmień zawartość w polu treści na H2.

Ustawienia tekstu H2

Następnie dodaj następujące ustawienia do ustawień tekstu H2:

• Czcionka nagłówka 2: Georgia
• Kolor tekstu nagłówka 2: #666666
• Rozmiar tekstu nagłówka 2: 58px
• Nagłówek 2 Odstępy między literami: 3px

Dodaj moduł tekstu opisu

Ustawienia tekstu

Poniżej tytułu Text Module dodamy opis Text Module z następującymi ustawieniami tekstu:

• Grubość czcionki tekstu: Lekka
• Odstępy między literami tekstu: 1px

Rozmiary

Śmiało i zmień rozmiar tego modułu tekstowego:

• Szerokość: 70%
• Wyrównanie modułu: w prawo

Dodaj moduł rozdzielacza nr 1

Widoczność

Następnym modułem, którego będziemy potrzebować, jest moduł rozdzielający. Upewnij się, że opcja Pokaż dzielnik jest włączona.

Kolor

Zmień kolor dzielnika na „#666666”.

Rozstaw

Dodaj trochę odstępów dalej:

• Górny margines: 100px
• Lewy margines: 400px (komputer), 300px (tablet), 200px (telefon)
• Prawy margines: -100px

Animacja

I oczywiście użyjemy również subtelnej animacji:

• Styl animacji: slajd
• Kierunek animacji: w lewo
• Intensywność animacji: 5%

Dodaj moduł rozdzielacza nr 2

Widoczność

Na koniec dodamy kolejny moduł rozdzielający. Ponownie upewnij się, że opcja Pokaż dzielnik jest włączona.

Kolor

Zmień kolor dzielnika na „#d67787”.

Rozmiary

Użyj „2px” dla wagi dzielnika.

Rozstaw

I dodaj następujące ustawienia odstępów:

• Lewy margines: 200px (komputer i tablet), 150px (telefon)
• Prawy margines: -100px

Animacja

Na koniec dodaj subtelną animację do dzielnika:

• Styl animacji: slajd
• Kierunek animacji: w lewo
• Opóźnienie animacji: 100 ms
• Intensywność animacji: 5%

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się końcowemu wynikowi na różnych rozmiarach ekranu.

Końcowe przemyślenia

W tym poście pokazaliśmy kilka świetnych technik Divi dotyczących tworzenia minimalnych stron internetowych. Jest to drugi post z serii o tym, jak tworzyć piękne style projektowania, korzystając z własnej kreatywności i jednych z najlepszych wbudowanych opcji Divi. W następnych postach podzielimy się technikami, jak osiągnąć bardziej oszałamiające style projektowania. Jeśli masz jakieś pytania lub sugestie, zostaw sekcję komentarzy poniżej!