Jak tworzyć projekty pływających narożników dla treści w Divi

Tworzenie projektów pływających narożników to prosty i łatwy sposób na dodanie odrobiny kreatywnego stylu do modułów Divi, o którym być może nie myślałeś, że jest możliwe bez niestandardowego kodu. Dobre wieści! Dzięki Divi możesz używać dzielników i notatek, aby stylizować cztery rogi modułu za pomocą wbudowanych opcji Divi. Wypróbowanie różnych możliwości może być całkiem zabawne.

W tym samouczku pokażę, jak tworzyć projekty pływających narożników dla treści w Divi. Po umieszczeniu elementów możesz stylizować te rogi za pomocą niezliczonych kształtów, ikon i kolorów!

Zacznijmy!

zapowiedź

Oto rzut oka na projekty pływających narożników, które można znaleźć w tym samouczku.

Pobierz układ przykładów pływających obramowań za DARMO

Aby położyć ręce na układzie z pływającymi obramowaniami, najpierw musisz go 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 plik

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 teraz do samouczka, dobrze?

Pierwsze kroki

Jedyne, czego potrzebujesz do tego samouczka, to Divi. Będziemy budować te przykłady od podstaw na interfejsie Divi Builder.

Aby rozpocząć, utwórz nową stronę i nadaj jej tytuł. Kliknij, aby użyć Divi Builder na interfejsie i wybierz opcję „Buduj od podstaw”.

Teraz jesteś gotowy do drogi!

Tworzenie szablonu układu ruchomego narożnika

Ponieważ ten projekt będzie miał niezliczone możliwości projektowe, sensowne jest stworzenie podstawowego układu (lub szablonu), z którego można pracować.

W tym szablonie dodamy cztery przekładki w każdym rogu modułu tekstowego. Następnie, gdy układ będzie gotowy, będziesz mógł odkrywać nowe sposoby dostosowywania tych przegród do unikalnych projektów.

Najpierw utwórz nową zwykłą sekcję z jednym wierszem kolumny.

Zanim dodamy moduł tekstowy, zaktualizuj ustawienia wierszy w następujący sposób:

Szerokość niestandardowa: 640px
Niestandardowe wypełnienie: 0px na górze, 0px na dole

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

Rozmiar tekstu: 20px
Wysokość linii tekstu: 1,8 em
Margines niestandardowy: -25px góra, -25px dół, 25px po lewej, 25px po prawej
Niestandardowe wypełnienie (komputer): 10% góra, 10% dół, 10% lewo, 10% prawo
Niestandardowe wypełnienie (telefon): 20% na górze, 20% na dole
Szerokość obramowania: 4px
Kolor obramowania: #eeeeee

Niestandardowy margines i dopełnienie pomogą dopasować nasze moduły dzielników, które wkrótce dodamy. Ponieważ dzielniki będą miały wysokość i szerokość 50 pikseli, górny i dolny margines -25 pikseli wciągnie je do połowy do modułu tekstowego, aby uzyskać ładny, symetryczny wygląd (zobaczysz).

Dodanie dwóch górnych ruchomych przegród narożnych

Po zamontowaniu modułu tekstowego możemy rozpocząć dodawanie dwóch górnych projektów narożników pływających za pomocą modułów rozdzielających.

Utwórz nowy moduł rozdzielający i przeciągnij go na górę modułu tekstowego.

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

Pokaż dzielnik: NIE

Kolor tła: #7cda24 (lub dowolny kolor)
Wysokość: 50px
Szerokość: 50px

Wysokość i szerokość 50 pikseli daje nam idealny kwadrat, którego możemy użyć do naszej pływającej ramki.

Teraz dodaj cień do dzielnika, aby stworzyć efekt pływania w następujący sposób:

Cień pudełka: patrz zrzut ekranu
Pozycja pionowa cienia pudełka: 0px
Siła rozmycia cieni w pudełku: 0px
Siła rozprzestrzeniania się cieni w pudełku: 20px
Kolor cienia: #ffffff

Aby upewnić się, że moduł rozdzielający pozostaje nad modułem tekstowym (i nie chowa się za nim), musimy dodać fragment kodu CSS do głównego elementu w następujący sposób:

Główny element CSS:

position: relative

Następnie zaktualizuj indeks Z do 1.

Następnie zduplikuj moduł rozdzielacza i zaktualizuj ustawienia zduplikowanego rozdzielacza w następujący sposób:

Wyrównanie modułu: prawo
Margines niestandardowy: -50px góra

Spowoduje to wyrównanie dzielnika w prawo i podciągnięcie go na dokładną wysokość modułu dzielnika znajdującego się nad nim. To tworzy dokładnie takie położenie narożnika, jakiego szukamy.

Dodawanie dolnych przegródek narożnych

Aby dodać dwa dolne dzielniki narożne, włącz tryb widoku szkieletowego i skopiuj właśnie utworzone lewe i prawe dzielniki i wklej je poniżej modułu tekstowego (upewniając się, że lewy dzielnik pozostaje ułożony na górze prawego dzielnika, jak pokazano na obrazku poniżej).

Otóż ​​to! Sprawdźmy ostateczny projekt naszego podstawowego układu.

Odkrywanie nowych projektów pływających narożników

Mając ten szablon na miejscu, możemy zbadać kilka różnych możliwych projektów. Możesz zapisać całą tę sekcję w bibliotece Divi, aby zachować ją jako szablon w przyszłości. Ale na razie po prostu skopiujmy sekcję i zbadajmy nowy projekt.

Diamentowe kształty z gradientowym tłem

Mając duplikat naszego szablonu, użyj funkcji wielokrotnego wyboru, aby wybrać wszystkie cztery moduły rozdzielające. Następnie kliknij ikonę koła zębatego ustawień na jednym z wybranych separatorów, aby wdrożyć modalne ustawienia elementu. Pomocne może być użycie trybu klikania w tym kroku.

W ustawieniach elementu zaktualizuj następujące elementy:

Gradientowy kolor tła po lewej stronie: #7cda24
Prawy kolor tła gradientu: #edf000
Kierunek gradientu: 45 stopni

Następnie użyj opcji przekształcania, aby obrócić dzielnik w kształt rombu.

Przekształć Obróć oś Z: 45 stopni

Oto ostateczny projekt.

Skośne dzielniki

Możesz także użyć opcji przekształcenia skosu, aby pochylić przegrody, aby uzyskać jeszcze bardziej unikalny projekt. Możesz dodać osobny projekt pochylenia dla każdego dzielnika lub użyć funkcji wielokrotnego wyboru, aby zaktualizować pochylenie transformacji dla wszystkich czterech jednocześnie o -37 stopni na osi X i Y.

Oto jak by to wyglądało.

Ciemne wzory tła

Możesz nawet poeksperymentować z dodaniem ciemnego koloru tła do modułu tekstowego, aby uzyskać unikalny projekt pływającego narożnika. Oto przykład modułu tekstowego z kolorem tła #002130 przy użyciu funkcji obracania lub pochylania bez transformacji.

Zaokrąglone narożniki krawędzi

Aby umieścić zaokrąglone rogi na projekcie, możesz po prostu dodać zaokrąglone rogi do rzędu w następujący sposób:

Zaokrąglone rogi: 20px

Koło pływające narożniki

Aby zamienić te kwadratowe rogi w koła, możesz dodać następujący fragment niestandardowego kodu CSS do głównego elementu każdego elementu rozdzielającego:

border-radius: 50%;

Ponieważ dzielniki mają wymiary 50 na 50 pikseli, stworzy to idealny projekt koła.

Jak widać, istnieje mnóstwo różnych sposobów dostosowywania tych elementów do niezliczonych nowych projektów narożnych.

Teraz przyjrzyjmy się używaniu ikon notatek do pływających narożników zamiast modułów rozdzielających.

Tworzenie pływających narożników za pomocą ikon Blurb

Dodanie ikon Blurb w każdym rogu modułu tekstowego może dać Ci jeszcze bardziej unikalne projekty. Możesz użyć tego samego szablonu układu, który zbudowaliśmy na początku samouczka. Jedyną różnicą będzie użycie modułów notatek zamiast modułów rozdzielających w czterech rogach.

Śmiało i uzyskaj wdrożony duplikat szablonu układu sekcji.

Następnie usuń moduły rozdzielające nad i pod modułem tekstowym.

Dodanie dwóch górnych rogów ikony notki

Ponieważ będziemy chcieli użyć modułu notki tylko do wyświetlenia jednej ikony, musimy upewnić się, że rozmiar i odstępy są prawidłowe.

Dodaj moduł notki nad modułem tekstowym i usuń tytuł i treść. Następnie kliknij, aby użyć ikony zamiast obrazu i wybierz ikonę koła na Facebooku.

Następnie zaktualizuj następujące ustawienia notki (te ustawienia są bardzo podobne do ustawień, które dodaliśmy do modułu rozdzielającego w pierwszym przykładzie):

Kolor tła: #ffffff
Rozmiar czcionki ikony: 50px
Szerokość: 50px
Margines niestandardowy: 0px dół
Zaokrąglone rogi: 50%
Cień pudełka: patrz zrzut ekranu
Pozycja pionowa cienia pudełka: 0px
Siła rozmycia cieni w pudełku: 0px
Siła rozprzestrzeniania się cieni w pudełku: 20px
Kolor cienia: #ffffff

Główny element CSS:

position: relative;

Rozmycie obrazu CSS:

margin-bottom: 0px

Indeks Z: 1

Następnie skopiuj moduł notki, aby utworzyć kolejny tuż pod bieżącą notatką i zaktualizuj następujące elementy:

Wyrównanie modułu: w prawo
Margines niestandardowy: -50px góra

Następnie skopiuj dwa górne moduły notatek i wklej je pod modułem tekstowym (upewniając się, że lewa notka pozostaje ułożona nad prawą notatką).

Następnie możesz zaktualizować ikony dla każdej notki, do czego chcesz.

Oto ostateczny projekt.

Przeglądaj więcej projektów dzięki ruchomym narożnikom ikony Blurb

Dzięki tej konfiguracji możesz odkrywać wiele unikalnych projektów. Możesz zmieniać ikony, używać różnych kombinacji kolorów, a nawet skalować lub obracać je za pomocą opcji przekształcania.

Oto przykład projektu z wykorzystaniem ciemnego koloru tła dla modułu tekstowego i różnych kolorów ikon.

Działa w układach wielokolumnowych

Dopóki trzymasz elementy razem, możesz dodać te układy pływających narożników w wielu kolumnach.

Zawijanie

Tworzenie pływających projektów narożników dla treści w Divi naprawdę pokazuje moc kreatora Divi. Dzięki wszystkim dostępnym wbudowanym opcjom możesz tworzyć niezliczone warianty projektu z jednego podstawowego szablonu układu. Mam nadzieję, że zainspiruje Cię to do zabawy podczas odkrywania nowych projektów.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!