Pomocny przewodnik projektowania elementów kołowych w Divi

Co jakiś czas projekt strony internetowej wymaga pewnych okrągłych elementów. To dobry sposób na wyrwanie się z monotonii standardowych projektów pudełek na stronie internetowej. Tworzenie okrągłych elementów może wydawać się proste (i tak naprawdę jest!), ale jeśli nie znasz kilku podstawowych zasad, możesz napotkać kilka niepotrzebnych przeszkód, które mogą być dość frustrujące.

Na przykład czasami trudno jest wyrównać zawartość i dopasować ją do elementu w kształcie koła z prawidłowymi odstępami. Lub możesz mieć trudności z dostosowaniem kręgu do urządzeń mobilnych. Z tego powodu niektórzy uciekli się do używania okrągłego tła obrazu zamiast treści. Ale jeśli nie chcesz używać niestandardowego tła obrazu, najlepszym rozwiązaniem jest użycie CSS. Dobrą wiadomością jest to, że Divi eliminuje potrzebę wymyślania własnego niestandardowego CSS do tworzenia okrągłych elementów, co znacznie ułatwia ten proces. Tak więc, jeśli kiedykolwiek chciałeś nadać elementowi kształt koła w Divi, jest to post dla Ciebie.

W tym samouczku przeprowadzę Cię przez podstawy tworzenia okrągłych elementów w Divi (w tym sekcji, wierszy i modułów). Następnie pokażę Ci, jak łatwo zaimplementować te techniki na gotowym układzie.

Sprawdź to!

zapowiedź

Pobierz przykładowy układ elementów okrągłych ZA DARMO

Aby położyć swoje ręce na przykładowych okrągłych elementach zaprojektowanych w tym samouczku, najpierw musisz je pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, utwórz nową stronę w Divi. Następnie nadaj tytuł stronie i wdróż konstruktor Divi z przodu. Wybierz opcję „buduj od podstaw”.

Nieco później dodamy również gotowy układ do naszej strony, ale na razie możemy zacząć budować od zera.

Teraz jesteś gotowy do drogi!

Trzy podstawowe kroki do stworzenia okrągłego elementu

Tak naprawdę istnieją trzy proste kroki do stworzenia okrągłego elementu. Aby zilustrować te kroki, zastosuję je do modułu wezwania do działania za pomocą Divi Builder.

Krok 1: Rozmiar elementu o równych wartościach wysokości i szerokości

Pierwszym krokiem jest ustawienie wysokości i szerokości na tę samą równą wartość. Zasadniczo chcemy, aby element był idealnym kwadratem, zanim zrobimy z niego idealne koło. W tym przykładzie nadajmy modułowi wezwania do działania wysokość i szerokość 10vw.

Krok 2: Dodaj promień obramowania o 50% dla wszystkich czterech rogów

Drugim krokiem jest ustawienie promienia obramowania elementu (lub modułu) na 50% we wszystkich czterech rogach. W Divi możesz zmienić promień obramowania elementu w opcji oznaczonej „Zaokrąglone rogi”.

Krok 3: Wyrównaj zawartość w okrągłym elemencie

Trzecim krokiem jest wyrównanie zawartości okrągłego elementu. Możemy to zrobić, dostosowując wypełnienie elementu. (Ponadto opiszę sposób użycia flexu do pionowego wyśrodkowania treści w dalszej części tego postu)

W tym przykładzie możemy dodać następujące dopełnienie, aby zbliżyć naszą zawartość do środka okrągłego elementu:

Niestandardowe wypełnienie: góra 18vw, lewa 3vw, prawa 3vw

Oczywiście nadal istnieją korekty, które mogą wymagać wprowadzenia, aby upewnić się, że tekst/treść mieści się w okrągłym elemencie na urządzeniu mobilnym, ale obejmuje to podstawową konfigurację.

Możesz zauważyć, że użyłem jednostki długości vw do określenia rozmiaru i rozmieszczenia mojego okrągłego elementu. Jest to pomocne przy tworzeniu bardziej spójnego, responsywnego projektu. Wytłumaczę.

Korzystanie z jednostek długości względnej, aby elementy kołowe były responsywne

Korzystanie z jednostki długości VW dla wysokości i szerokości

Spośród wszystkich jednostek długości względnej, jednostka długości vw jest jedną z moich ulubionych, jeśli chodzi o responsywny design. Ponieważ jednostka długości vw jest zależna od szerokości okna przeglądarki (nie elementu nadrzędnego), możesz uzyskać spójny projekt, który płynnie dopasowuje się do rozmiaru okna przeglądarki.

Przyjrzyjmy się, jak wygląda nasz przykładowy moduł wezwania do działania, gdy zmniejszam szerokość przeglądarki.

Korzystanie z jednostki długości VW dla zawartości elementu okrągłego

Używanie jednostki długości vw dla rozmiaru i zawartości okrągłego elementu jest dobrą kombinacją dla responsywnego projektowania. Zasadniczo pozwala to na płynne dopasowanie treści (takich jak tekst lub obrazy) do rozmiaru elementu okręgu, aby uzyskać spójny projekt we wszystkich przeglądarkach. Musisz jednak uważać, używając jednostki długości vw dla tekstu podstawowego, ponieważ tekst może stać się zbyt mały na telefonie komórkowym. Lubię używać jednostki długości vw do nagłówków, a następnie dopasowywać rozmiar tekstu podstawowego za pomocą pikseli w razie potrzeby.

Ponadto, jeśli planujesz zachować okrągły projekt elementu na wyświetlaczu telefonu, musisz ograniczyć zawartość do minimum i dostosować rozmiar okrągłego elementu, aby uzyskać maksymalną przestrzeń.

Korzystając z naszego obecnego przykładu, możesz nadać tekstowi tytułu wartość długości vw, a następnie zmienić rozmiar modułu na telefonie komórkowym w następujący sposób:

Rozmiar tekstu tytułu: 4vw
Szerokość (telefon): 70vw
Wzrost (telefon: 70vw

Jak widać, cała zawartość jest teraz ładnie umieszczona w okrągłym elemencie na wyświetlaczu telefonu.

A co z pikselami?

Jeśli chcesz używać jednostek długości bezwzględnej (takich jak piksele) do określania rozmiaru okręgu, jest to w porządku. Musisz tylko upewnić się i wprowadzić niezbędne zmiany rozmiaru w każdym punkcie przerwania wyświetlacza tabletu i telefonu, aby upewnić się, że okrągły element mieści się w oknie przeglądarki. W niektórych przypadkach użycie pikseli może być łatwiejsze do uzyskania odpowiedniego rozmiaru (lub dokładniejszego) na wyświetlaczach tabletów i telefonów.

Na przykład weźmy ten sam moduł call to action i użyjmy pikseli (zamiast vw) do określenia rozmiaru i miejsca naszego modułu.

Możesz zaktualizować wysokość, szerokość i dopełnienie w następujący sposób:

Szerokość: 500px
Wysokość: 500px
Niestandardowe dopełnienie: 200px u góry, 20px w lewo, 20px w prawo

Ten projekt będzie wyglądał podobnie na pulpicie, ale problem pojawia się, gdy oglądasz okrągły element na wyświetlaczu telefonu. Ponieważ rozmiar elementu okrągłego jest ustalany w pikselach (jednostka długości bezwzględnej), element okrągły wyjdzie poza kontener i przeglądarkę na wyświetlaczu telefonu.

Dlatego tak ważne jest dostosowanie wartości szerokości i wypełnienia pikseli na wyświetlaczach mobilnych. Na przykład może być konieczna zmiana szerokości i wysokości na 300 pikseli.

Dlaczego jednostka % długości nie działa dobrze przy wymiarowaniu okrągłych elementów?

Jeśli chcesz bardziej responsywnego rozwiązania dla elementów okrągłych, możesz pomyśleć, że odpowiedzią jest użycie procentów. Jednak podczas zmiany rozmiaru elementów na stronie internetowej jednostka procentowa długości dla wysokości nie działa tak samo, jak jednostka procentowa długości dla szerokości. Dzieje się tak, ponieważ domyślna wysokość elementów jest zwykle pozostawiona domyślnie (height: auto). Na przykład, jeśli próbujesz ustawić dawanie 100% wysokości modułowi Divi, moduł nie dostosuje się, ponieważ kontenery nadrzędne (kolumna, wiersz, sekcja itp.) Wszystkie mają niezdefiniowaną wartość wysokości. Przeglądarka zasadniczo nie próbuje ustawić modułu na 100% niczego (czego nie może). Nie dotyczy to szerokości. Domyślna szerokość dowolnego elementu blokowego (lub div) wynosi 100%. Tak więc wszystkie sekcje, wiersze i moduły mają domyślną 100% szerokość, chyba że zmienią to ustawienia. Z tego powodu jednostka długości % nie jest najlepszą opcją do użycia przy próbie zbudowania responsywnego elementu kołowego. Okrągły element musi mieć tę samą wysokość i szerokość we wszystkich rozmiarach przeglądarki, więc trudno jest to osiągnąć, używając procentowej jednostki długości dla wysokości. Istnieją jednak sposoby na to, aby 100% wysokości i szerokości działało z bardziej niestandardowym CSS zastosowanym do elementów nadrzędnych. Ale przy tworzeniu okrągłych elementów w Divi może się okazać, że łatwiej jest pracować z jednostką długości vw.

Dopasowywanie treści w elemencie kołowym

Jeśli chcesz wyrównać zawartość w okrągłym elemencie, naprawdę masz dwie opcje, które uważam za proste podczas korzystania z Divi. Możesz użyć dopełnienia, aby wyrównać zawartość, co daje większą kontrolę nad tym, gdzie ma być wyświetlana zawartość w elemencie okręgu. Możesz też użyć właściwości flex (z dopełnieniem), aby upewnić się, że zawartość jest wyświetlana bezpośrednio w środku okręgu.

Wyrównywanie zawartości elementu kołowego z dopełnieniem

Aby wyrównać zawartość wewnątrz elementu koła za pomocą dopełnienia, sugerowałbym użycie względnej jednostki długości (takiej jak % lub vw), aby dopełnienie rosło lub zmniejszało się wraz z rozmiarem kontenera lub szerokości przeglądarki. Nie chcesz używać jednostek długości bezwzględnej do wypełniania wewnątrz okrągłego elementu, którego rozmiar jest określany za pomocą jednostek względnych. Wynik byłby niespójny, a projekt zepsułby się na urządzeniach mobilnych. Na przykład, jeśli masz okrągły element o wysokości 10vw i szerokości 10vw. Ten element zmniejszyłby się wraz ze zmniejszaniem się szerokości przeglądarki. Jeśli dodasz dopełnienie 100px na górze elementu, 100px pozostanie za każdym razem, gdy dostosujesz szerokość przeglądarki i zepsujesz projekt. Jeśli jednak dodasz wyściółkę 3vw, ta wyściółka będzie dobrze pasować do elementu.

Dlatego zaproponowałem użycie vw padding w naszym przykładzie modułu call to action.

Wyrównywanie zawartości elementu kołowego z właściwością Flex

Jeśli nie chcesz się tak bardzo martwić o ustawienie górnego i dolnego dopełnienia, aby upewnić się, że zawartość jest wyśrodkowana w pionie, możesz użyć właściwości flex. Dodając kilka fragmentów CSS do elementu nadrzędnego (element okrągły), możesz mieć pewność, że cała zawartość pozostanie wyśrodkowana w pionie. Następnie możesz użyć wyrównania, dopełnienia lub marginesu, aby upewnić się, że zawartość również pozostanie wyśrodkowana w poziomie.

Oto co mam na myśli.

Korzystając z naszego przykładu, otwórz ustawienia modułu wezwania do działania.

Następnie ustaw górne i dolne dopełnienie na 0px.

Następnie przejdź do zakładki zaawansowane i dodaj następujący fragment kodu CSS do elementu głównego:

display:flex;
align-items: center;

W przypadku tego konkretnego modułu pod opisem promocyjnym znajduje się dodatkowe wypełnienie, które odrobinę odrzuci wyrównanie. Możesz się go pozbyć, dodając następujący kod CSS do opisu promocji:

padding-bottom: 0px

Sprawdź ten post, jak wyrównać zawartość w pionie, aby uzyskać więcej informacji.

Jak to wykorzystać w praktyce: dodawanie elementów kołowych do gotowego układu

Teraz, gdy lepiej rozumiesz, jak tworzyć okrągłe elementy w Divi, zobaczmy, jak to może działać na rzeczywistym projekcie układu. W tym przykładzie użyję strony docelowej farmera Divi z pakietu Farmer Layout Pack.

Załaduj układ strony docelowej dla rolnika na swoją stronę

Aby rozpocząć, najpierw dodajmy do strony układ strony docelowej farmera. Aby to zrobić, otwórz menu ustawień i dół Divi Builder i kliknij przycisk ładowania z biblioteki. W wyskakującym okienku ładowania z biblioteki znajdź pakiet Farmer Layout Pack i wybierz go. Następnie kliknij, aby użyć strony docelowej rolnika.

Spowoduje to załadowanie układu na stronę.

Tworzenie nagłówka sekcji kołowej

W pierwszym przykładzie przekonwertujemy górną sekcję nagłówka układu na okrągły element. W tym celu zastosujemy nasze trzy podstawowe zasady:

1: Rozmiar elementu o równych wartościach wysokości i szerokości
2: Dodaj promień obramowania o 50% dla wszystkich czterech rogów
3: Wyrównaj zawartość w elemencie kołowym

Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Szerokość: 70vw (komputer), 70vw (tablet), 80vw (telefon)
Maksymalna szerokość: 1080px
Wyrównanie sekcji: środek
Wysokość: 70vw (komputer), 70vw (tablet), 80vw (telefon)
Maksymalna wysokość: 1080px

Zauważ, że dodałem dodatkowe wartości wysokości i szerokości dla tabletu i telefonu, a także dodałem maksymalną wysokość i maksymalną szerokość. Ważne jest, aby upewnić się, że wszystkie wartości wysokości i wszystkie wartości szerokości są równe.

Teraz musimy dodać nasz promień obramowania 50% na wszystkich czterech rogach.

Zaokrąglone rogi: 50% (wszystkie cztery rogi)

Ponieważ jest to sekcja, treść zawiera dwukolumnowy wiersz z wieloma modułami. Przy tak dużej zawartości musimy dokonać pewnych korekt rozmiaru modułów, aby upewnić się, że zawartość mieści się w sekcji.

Najpierw otwórz ustawienia górnego modułu tekstowego w kolumnie 1, która zawiera tytuł sekcji. Następnie zaktualizuj rozmiar tekstu tytułu w następujący sposób:

nagłówek Rozmiar tekstu: 4vw

Następnie zmniejsz ilość tekstu podstawowego w module tekstowym bezpośrednio pod modułem tekstowym zawierającym nagłówek.

Teraz możemy wyrównać zawartość, dostosowując odstępy między wierszami. Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Margines niestandardowy: 10vw top (komputer), 5vw (tablet), 0vw (telefon)
Niestandardowa wyściółka: 3vw po lewej, 3vw po prawej

Aby kształt koła był bardziej zauważalny, możemy dodać górną część rozdzielającą i przesunąć pozycję obrazu tła do góry po lewej.

Sprawdźmy teraz wynik.

Tworzenie okrągłych modułów Blurb

Teraz spróbujmy zrobić kilka okrągłych notatek na tym układzie. W tym przykładzie użyjmy czterech modułów notatek w sekcji zatytułowanej „Nasze produkty”. Gdy go znajdziesz, otwórz ustawienia modułu notki w górnej części kolumny 2.

Następnie zaktualizuj rozmiar modułu w następujący sposób:

Szerokość obrazu: 7vw
Szerokość: 50vw (komputer stacjonarny), 80vw (telefon)
Maksymalna szerokość: 400px
Wyrównanie modułu: środek
Wysokość: 50vw (komputer), 80vw (telefon)
Maksymalna wysokość: 400px

Następnie dodaj promień obramowania lub zaokrąglone rogi:

Zaokrąglone rogi: 50%

Następnie zaktualizujmy projekt treści i odstępy w następujący sposób:

Umieszczenie obrazu/ikony: góra
Rozmiar tekstu tytułu: 2vw (komputer), 20px (tablet)
Orientacja tekstu: środek

Niestandardowe dopełnienie: 0vw góra, 0vw dół, 4vw lewy, 4vw prawy

Na koniec wyrównajmy zawartość w pionie za pomocą właściwości flex, dodając następujący niestandardowy CSS do elementu głównego:

display: flex;
align-items: center;

Rozszerz Okrągły Styl na wszystkie Blurby w Sekcji

To zapewnia okrągły projekt naszego pierwszego modułu. Teraz wszystko, co musimy zrobić, to rozszerzyć ustawienia projektowania modułu notatek na pozostałe trzy notki w sekcji. Aby to zrobić, kliknij prawym przyciskiem myszy właśnie zaprojektowany moduł notatek i wybierz „Rozszerz style rozmycia”. W oknie podręcznym Rozszerz style wybierz opcję rozszerzenia stylu w całej sekcji.

Ostateczny wynik

Sprawdźmy teraz efekt końcowy.

Końcowe przemyślenia

Mam nadzieję, że poznałeś kilka pomocnych wskazówek, jak tworzyć okrągłe elementy w Divi. Rozumiejąc trzy podstawowe kroki i jak prawidłowo używać jednostek długości do rozmiaru i rozmieszczenia elementu, możesz łatwo stworzyć okrągły projekt, którego szukasz. I naprawdę zabawne może być włączenie niektórych okrągłych elementów do istniejącego lub gotowego układu Divi. Zapraszam do odkrywania tworzenia okrągłych modułów, rzędów, a nawet całych sekcji!

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!