Pobierz 5 DARMOWYCH obrazów ramek dla Divi

Zawsze dobrze jest mieć dodatkowe zasoby, które możesz wykorzystać podczas tworzenia nowej witryny dla siebie lub klienta. Dlatego co tydzień zapewniamy otrzymywanie nowych pakietów układów. Ale są też inne zasoby, które mogą się przydać, takie jak „obrazy obramowania” lub obrazy, których można użyć po jednej lub drugiej stronie elementu projektu Divi, aby dodać stylistyczny rozmach. Korzystanie z wbudowanych opcji Divi wraz z tymi obrazami obramowania może przynieść oszałamiające rezultaty. W tym poście udostępniliśmy Ci 5 różnych obrazów obramowań, które możesz pobrać bezpłatnie poniżej. Wyjaśnimy, w jaki sposób możesz wykorzystać te obrazy obramowania na swoją korzyść i stworzyć oszałamiający efekt końcowy.

Weźmy się za to!

Zapowiedź

Rzućmy okiem na różne obrazy obramowania, które będziesz mógł pobrać w dalszej części tego postu. Dla każdego z kształtów znajdziesz 4 wersje: górną, dolną, lewą i prawą. Te obrazy pozwolą ci osiągnąć dokładnie taki sam wynik, jak pokazano na pierwszych czterech obrazach poniżej:

Pobierz pliki obrazów ZA DARMO

Aby zdobyć darmowe obrazy obramowania, 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!

Zbliżać się

• Po pobraniu i rozpakowaniu folderu zawierającego wszystkie 5 obrazów obramowania, znajdziesz 4 podfoldery: górną granicę, dolną ramkę, lewą ramkę i prawą ramkę
• Oznacza to, że możesz użyć łącznie 20 plików graficznych
• Później w tym poście znajdziesz towarzyszące ustawienia, które pasują do każdej ze stron granicy
• Na dodatek możesz połączyć obrazy obramowania z nakładkami gradientowymi
• Te kolorowe nakładki pomogą Ci sprawić, że obrazy będą wyglądać tak żywe lub subtelne, jak chcesz
• Możesz używać tych obrazów granicznych bez żadnych ograniczeń, nawet w celach komercyjnych

Tworzenie ogólnego projektu

Dodaj nową sekcję

Rozstaw

Zacznijmy od stworzenia ogólnego projektu, którego użyliśmy do zaprezentowania obrazów obramowania. Otwórz nową lub istniejącą stronę, dodaj nową zwykłą sekcję i dodaj niestandardowe wypełnienie:

• Górna wyściółka: 300px
• Dolna wyściółka: 300px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza, przejdź do ustawień rozmiaru i ustaw pełną szerokość wiersza.

• Stwórz ten wiersz o pełnej szerokości: Tak

Dodaj moduł tekstu tytułu do kolumny 1

Dodaj pole zawartości H2

Zacznijmy dodawać moduły! Pierwszym potrzebnym modułem jest moduł tekstowy. Dodaj jeden do pierwszej kolumny i dodaj wybraną kopię H2 do pola treści.

Ustawienia tekstu nagłówka

Następnie wprowadź zmiany w ustawieniach tekstu H2 na karcie Projekt.

• Czcionka nagłówka 2: Abril Fatface
• Rozmiar tekstu nagłówka 2: 80px (komputer), 70px (tablet), 50px (telefon)

Rozstaw

Kontynuuj, dodając margines na górze tego modułu tekstowego.

• Górny margines: 150px

Dodaj moduł tekstu łącza do kolumny 1

Dodaj łącze do pola treści

Tuż pod tytułem Moduł tekstowy, który właśnie dodałeś, dodaj nowy moduł tekstowy. Używamy tego modułu tekstowego jako przycisku, więc upewnij się, że dodałeś link do CTA.

Ustawienia tekstu łącza

Następnie zmień ustawienia tekstu łącza na karcie Projekt.

• Grubość czcionki łącza: Ultra Bold
• Styl czcionki łącza: wielkie litery
• Kolor tekstu łącza: #000000
• Rozmiar tekstu linku: 21px

Rozstaw

Dodaj górny margines, aby stworzyć przestrzeń między tym modułem tekstowym a poprzednim.

• Górny margines: 100px

Granica

Na koniec dodaj subtelną dolną ramkę do modułu tekstowego łącza.

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

Dodaj moduł tekstu opisu do kolumny 2

Ustawienia tekstu

Druga kolumna wymaga jedynie opisu modułu tekstowego. Po dodaniu zawartości do pola zawartości zastosuj następujące ustawienia tekstu:

• Rozmiar tekstu: 22px (komputer), 20px (tablet), 18px (telefon)
• Wysokość linii tekstu: 2,6 em
• Orientacja tekstu: wyjustuj

Rozmiary

Dostosuj również ustawienia rozmiaru do różnych rozmiarów ekranu:

• Szerokość: 82% (komputer stacjonarny), 100% (tablet i telefon)

Rozstaw

I na koniec dodaj trochę górnego i dolnego marginesu.

• Górny margines: 100px
• Margines dolny: 100px

Dodawanie kształtów obramowania

Ustawienia tła lewej krawędzi

Teraz, gdy ukończyliśmy ogólny projekt, możemy zacząć dodawać obrazy obramowania! Zaczniemy od lewej strony granicy. Znajdź wybrany obraz obramowania w folderze „Left Border” i prześlij go jako obraz tła sekcji. Następnie zastosuj następujące ustawienia obrazu tła:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: środek po lewej
• Powtarzanie obrazu tła: bez powtórzeń

Ustawienia tła prawego obramowania

Możesz też znaleźć wybrany obraz obramowania w folderze „Prawa ramka” i dodać go jako tło sekcji, korzystając z następujących ustawień:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: na środku po prawej
• Powtarzanie obrazu tła: bez powtórzeń

Ustawienia tła górnej granicy

To samo dotyczy obrazu górnego obramowania, ale zamiast tego użyj następujących ustawień tła:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: górny środek
• Powtarzanie obrazu tła: bez powtórzeń

Ustawienia tła dolnej krawędzi

Lub wreszcie, możesz znaleźć obrazy dolnej krawędzi w folderze „Bottom Border” i połączyć je z tymi ustawieniami tła sekcji:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: dolny środek
• Powtarzanie obrazu tła: bez powtórzeń

Mieszaj kolory za pomocą półprzezroczystej nakładki

Dla każdego z dołączonych kształtów obramowania możesz również dodać kolorową nakładkę. Ta nakładka pomaga sprawić, że obrazy obramowania będą wyglądać bardziej subtelnie. Aby dodać nakładkę, przejdź do ustawień sekcji i dodaj gradientowe tło nad obrazem tła obramowania.

• Kolor 1: #ffffff
• Kolor 2: rgba (255,255,255,0.36)
• Kierunek gradientu: 141 stopni
• Umieść gradient nad obrazem tła: Tak

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się jeszcze niektórym potencjalnym projektom, które możesz osiągnąć, korzystając z tych darmowych obrazów obramowania.

Końcowe przemyślenia

W tym poście udostępniliśmy 5 różnych obrazów obramowań, które można pobrać za darmo. Możesz użyć tych obrazów obramowania dla dowolnej witryny, nad którą pracujesz, bez żadnych ograniczeń. Zachęcamy do wypróbowania ich wszystkich i tworzenia wspaniałych projektów. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!