3 przydatne sposoby korzystania z opcji przepełnienia w Divi

Wbudowane opcje przepełnienia Divi sprawiają, że dodawanie właściwości przepełnienia CSS (tj. widoczne, ukryte, przewijanie) do dowolnego elementu na stronie jest bardzo proste. Przydaje się to do łatwego tworzenia niepowtarzalnych projektów i przewijanej zawartości. W tym poście omówię, co faktycznie robią te opcje przepełnienia. Przejdę przez trzy pomocne sposoby korzystania z przepełnienia na własnej witrynie Divi.

Zacznijmy.

Zrozumienie opcji przepełnienia Divi

Opcje przepełnienia Divi pozwalają ustawić właściwość przepełnienia css elementu na jedną z następujących wartości:

1. Domyślna — widoczna jest wartość domyślna (patrz poniżej).
2. Widoczne — przepełniona zawartość pozostanie widoczna i nie zostanie przycięta po wyjęciu poza ramkę. Ponieważ jest to ustawienie domyślne w Divi, rzadko będziesz musiał je wybierać.
3. Przewijanie — przepełniona zawartość zostanie ukryta, ale użytkownicy będą mogli przewijać ukrytą zawartość w pionie lub poziomie.
4. Ukryty – Przepełniająca się zawartość poza ramką zostanie ukryta (bez możliwości przewijania)
5. Auto — ta opcja włączy funkcję przewijania w razie potrzeby (tj. zawartość wykracza poza ramkę). Przydałoby się to w przypadku projektów z ustaloną wysokością lub szerokością, które muszą mieć możliwość przewijania w mniejszych przeglądarkach.

Divi ma opcję przepełnienia zarówno dla przepełnienia poziomego, jak i pionowego, co pozwala ustawić różne wartości właściwości dla każdego z nich. Jest to przydatne, gdy chcesz dodać funkcję przewijania w pionie do elementu, ale nie chcesz, aby pasek przewijania pojawiał się również w poziomie.

Oto kilka szybkich ilustracji zaczerpniętych z projektów w tym samouczku, które pomogą Ci zrozumieć, jak działają opcje przepełnienia.

Widoczne przepełnienie (domyślnie)

W tym przykładzie zawartość, która została umieszczona poza kontenerem wierszy, pozostaje widoczna, co jest domyślnym ustawieniem dla wszystkich elementów w Divi.

Przepełnienie ukryte

Po dodaniu ukrytej właściwości przepełnienia do wiersza zawartość poza polem zostanie przycięta i całkowicie ukryta.

Zwój przepełnienia

Korzystanie z przewijania przepełnienia pozwala ukryć zawartość poza kontenerem pudełka (podobnie jak ukryte przepełnienie). Główna różnica polega na tym, że pojawia się pasek przewijania, który pozwala użytkownikowi przewijać zawartość, która istnieje poza granicami kontenera.

Na przykład tutaj jest moduł tekstowy o wysokości 400px. Zawartość modułu tekstowego wykracza poza moduł tekstowy, ale domyślnie pozostaje widoczna.

Jednak po dodaniu do modułu tekstowego właściwości przewijania z przepełnieniem pionowym pojawia się pasek przewijania umożliwiający użytkownikowi przewijanie ukrytej zawartości.

Teraz, gdy nieco lepiej rozumiesz opcje przepełnienia, przejdźmy do tworzenia praktycznych przykładów pomocnych sposobów ich wykorzystania w prawdziwym życiu.

Subskrybuj nasz kanał YouTube

3 przydatne sposoby korzystania z opcji przepełnienia Divi w Divi

#1 Używanie funkcji Overflow Hidden do przycinania przepełnionych treści w celu uzyskania unikalnych projektów

Aby zrozumieć, jak używać ukrytej właściwości przepełnienia, stworzymy szybki przykładowy projekt z przepełnionym tekstem i przepełnionym obrazem. Następnie zobaczymy, jak zmieni się projekt, gdy ustawimy nasz wiersz na ukryty.

Najpierw utwórz zwykłą sekcję z jednym rzędem kolumn. Zanim zaczniemy dodawać moduły, nadajmy sekcji następujące wypełnienie:

Niestandardowa wyściółka: góra 12vw, dół 12vw

Następnie zaktualizuj ustawienia wiersza w następujący sposób:

Szerokość: 80vw
Maksymalna szerokość: 80vw
Padding: 0px na górze, 0px na dole
Cień pudełka: patrz zrzut ekranu
Siła rozmycia cieni w pudełku: 80px

Następnie dodaj moduł tekstowy do wiersza i zaktualizuj następujące ustawienia modułu tekstowego:

Najpierw dodaj nagłówek h2 w polu treści w następujący sposób:

<h2>Overflow</h2>

Następnie zaktualizuj ustawienia projektu w następujący sposób:

Czcionka nagłówka 2: Lato
Grubość czcionki nagłówka 2: pogrubiona
Styl czcionki nagłówka 2: TT
Nagłówek 2 Wyrównanie tekstu: do środka
Kolor tekstu nagłówka 2: #dddddd
Rozmiar tekstu nagłówka 2: 15vw
Nagłówek 2 Odstępy między literami: 0.1em
Nagłówek 2 Tekst Cień: zobacz zrzut ekranu
Kolor cienia tekstu nagłówka 2: rgba (0,0,0,0,05)

Teraz, aby tekst przepełnił obszar zawartości wiersza, musimy użyć niestandardowych marginesów. Dodaj następujący niestandardowy margines do modułu tekstowego, aby przepełnił się nad wierszem (w pionie) i po każdej stronie wiersza (w poziomie).

Margines: -6vw górny, -10vw lewy, -10vw prawy

Następnie dodaj kolejny moduł tekstowy poniżej tego, który właśnie utworzyłeś i zaktualizuj następujące elementy:

Zadowolony:

<h3>design</h3>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

(Nawiasem mówiąc, takie fragmenty kodu to świetny sposób na skorzystanie z opcji przewijania z przepełnieniem).

Czcionka tekstu: Lato
Tekst Wyrównanie tekstu: prawo
Tekst Rozmiar tekstu: 24px (komputer), 16px (telefon)
Wysokość linii tekstu: 1,3 em
Maksymalna szerokość: 50%
Wyrównanie modułu: prawo
Wyściółka: 4vw w prawo

Teraz dodajmy obraz, który wychodzi poza wiersz. Utwórz nowy moduł obrazu poniżej dwóch modułów tekstowych, a następnie prześlij wybrany obraz.

Następnie zaktualizuj ustawienia obrazu w następujący sposób:

Maksymalna szerokość: 35vw
Margines: -12vw góra, -8vw dół, -5vw lewo
Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: -40px
Pozycja pionowa cienia pudełka: -50px
Kolor cienia: rgba(0,0,0,0.17)

Projekt z wierszem ustawionym na widoczne przepełnienie (domyślnie)

Teraz przyjrzyjmy się projektowi, w którym przepełnienie wiersza jest widoczne (domyślnie).

Jak widać, te domyślne widoczne opcje przepełnienia świetnie nadają się do tworzenia pięknych i nowoczesnych projektów.

Projekt z wierszem ustawionym na Ukryty przelew

Zobaczmy teraz, co się stanie, gdy użyjemy dla wiersza właściwości Overflow Hidden. Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Przepełnienie poziome: ukryte
Przepełnienie pionowe: ukryte

Oto wynik.

Jak widać, przepełniona treść (górny nagłówek i obraz) jest teraz przycięta i ukryta, aby stworzyć niepowtarzalny projekt. Dzięki tej konfiguracji możesz łatwo skorzystać z opcji przekształcania, aby skalować i przesuwać elementy, aby uzyskać odpowiedni projekt.

#2 Używanie funkcji Overflow Scroll, aby umożliwić użytkownikom przewijanie zawartości w pionie

W następnym przykładzie przedstawiono przewijanie z przepełnieniem w pionie. Ta opcja przepełnienia przydaje się przy dodawaniu przewijalnej zawartości do list linków lub zasobów. Możesz zmienić dowolny moduł lub wiersz w kontener na zawartość przewijalną. Oto jak to zrobić za pomocą modułu tekstowego.

Utwórz zwykłą sekcję z jednokolumnowym wierszem. Następnie dodaj moduł tekstowy o następującej treści:

<h3>overflow scroll</h3>
<ol>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">consectetur adipiscing elit</a></li>
<li><a href="#">sed do eiusmod tempor</a></li>
<li><a href="#">incididunt ut labore et dolore</a></li>
<li><a href="#">Ut enim ad minim veniam</a></li>
<li><a href="#">quis nostrud exercitation</a></li>
<li><a href="#">ullamco laboris nisi ut</a></li>
<li><a href="#">aliquip ex ea commodo</a></li>
<li><a href="#">Duis aute irure dolor in</a></li>
<li><a href="#">reprehenderit in voluptate</a></li>
<li><a href="#">velit esse cillum dolore eu</a></li>
<li><a href="#">fugiat nulla pariatur</a></li>
<li><a href="#">Excepteur sint occaecat</a></li>
<li><a href="#">cupidatat non proident</a></li>
<li><a href="#">sunt in culpa qui officia</a></li>
<li><a href="#">deserunt mollit anim id</a></li>
<li><a href="#">est laborum</a></li>
</ol>

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

Czcionka tekstu: Lato

Kolor tekstu linku: #333333
Rozmiar tekstu linku: 18px

Kolor tekstu listy uporządkowanej:
Rozmiar tekstu listy uporządkowanej: 20px
Wysokość linii zamówionych list: 1,8 em
Typ stylu uporządkowanej listy: dziesiętne-przednie-zero

Grubość czcionki nagłówka 3: Ultra Bold
Rozmiar tekstu nagłówka 3: 50px
Maksymalna szerokość: 500px
Wypełnienie: 3% u góry, 3% u dołu, 8% w lewo, 8% w prawo

Oto jak wygląda moduł tekstowy, zanim podamy przewijanie wysokości i przepełnienia.

Teraz zaktualizuj moduł tekstowy o maksymalnej wysokości 400px. Ponieważ widoczna jest domyślna wartość przepełnienia modułu tekstowego, zauważysz, że tekst przepełniony jest poniżej modułu.

Wszystko, co musimy teraz zrobić, to ustawić pionowe przepełnienie, aby przewijało się w następujący sposób:

Przepełnienie pionowe: przewijanie

Oto ostateczny projekt.

Aby uzyskać więcej przykładów korzystania z pionowego przewijania z przepełnieniem w witrynie Divi, zapoznaj się z tymi postami:

• Jak stworzyć makieta galerii przewijania za pomocą nowych opcji przepełnienia Divi
• Jak zaprojektować przewijalny obszar widżetów ostatnich postów w Divi

#3 Korzystanie z funkcji Overflow Scroll, aby umożliwić użytkownikom przewijanie zawartości w poziomie

Używanie przewijania z przepełnieniem do przewijania w poziomie to kolejny sposób na zapewnienie dostępu do treści z jednego zwięzłego miejsca. Co więcej, jest to również świetny sposób na włączenie funkcji przesuwania w bok na telefonie komórkowym bez wtyczki.

Aby pokazać, jak to zrobić, wspólnie zbudujemy szybki przykład.

Najpierw utwórz zwykłą sekcję z jednym rzędem kolumn.

Następnie dodaj moduł notki do wiersza.

Domyślny obraz można zastąpić nowym obrazem lub ikoną. Następnie zaktualizuj ustawienia projektu za pomocą kilku poprawek:

Wyrównanie tekstu: do środka
Czcionka tytułu: Lato
Grubość czcionki tytułu: Ciężka
Wyściółka: 3% w lewo, 3% w prawo

Zduplikuj moduł notatek 5 razy, aby mieć łącznie 6 notatek w kolumnie wiersza.

Następnie zaktualizuj ustawienia wiersza za pomocą następującego niestandardowego kodu CSS do głównego elementu kolumny.

display: grid;
grid-template-columns: repeat(6, 50%);

Dzięki temu Twoja kolumna notatek będzie miała poziomy układ siatki z 6 kolumnami, każda o szerokości równej 50% kontenera (lub w tym przypadku wiersza). Oznacza to, że dwie notki/kolumny zajmą miejsce wewnątrz rzędu. Pozostałe 4 moduły wystają poza rząd na prawą stronę. Tutaj przydaje się właściwość overflow scroll. Zaktualizuj następującą opcję przepełnienia:

Przepełnienie poziome: Przewiń

Teraz możesz dostosować szerokość wiersza według potrzeb, a dwie notki zawsze będą ładnie wyrównane. Oto ostateczny projekt.

Dodałem cień pudełka do wiersza, aby nieco lepiej widzieć pudełko z zawartością. Zwróć uwagę, jak początkowo będą wyświetlane dwie notki, dopóki użytkownik nie przewinie w prawo.

Aby uzyskać więcej informacji, zapoznaj się z całym postem dotyczącym tworzenia kart przesuwanych w poziomie.

Końcowe przemyślenia

W dzisiejszych czasach coraz powszechniejsze staje się nakładanie się elementów i pozycjonowanie elementów poza typowym układem siatki. Przeważnie odbywa się to wyłącznie w celach projektowych. Zrozumienie, jak korzystać z opcji przepełnienia Divi, pomoże ci zrozumieć, jak ukryć lub pokazać zawartość poza kontenerem, aby stworzyć te unikalne projekty. Zrozumienie przewijania przepełnienia przyda się również przy dodawaniu przewijalnych treści do witryny.

Mam nadzieję, że ten artykuł pomógł rzucić trochę światła na właściwość przepełnienia i sposób jej wykorzystania w następnym projekcie Divi.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!