Pobierz BEZPŁATNY uniwersalny projekt banera sprzedażowego dla Divi

Posiadanie uniwersalnego banera sprzedażowego z pewnością przyda się (i zaoszczędzi Twój czas) w tych kluczowych okresach roku, kiedy promocje są bardzo modne. Dlatego oferujemy ten uniwersalny baner sprzedażowy dla Divi do pobrania ZA DARMO! Ten baner sprzedażowy można łatwo dostosować do własnych potrzeb, wprowadzając tylko kilka poprawek tekstu i obrazu tła. Projektowanie banerów sprzedażowych w Divi jest na tyle łatwe, że nie będziesz musiał zadowalać się banerami graficznymi, które często wyglądają trochę ziarnisto w sieci. Tak więc, oprócz darmowego pobrania, pokażę Ci, jak zaprojektować od podstaw baner sprzedażowy w Divi.

Zacznijmy!

co jest zawarte

Oto rzut oka na projekt banera sprzedaży dołączony do pobrania.

Pobierz projekt banera sprzedaży ZA DARMO

Aby za darmo położyć swoje ręce na projekcie banera sprzedażowego, 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 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!

Ładowanie układu do biblioteki Divi

Po pobraniu pliku rozpakuj go. Przekonasz się, że zawiera plik o nazwie „sales-banner-design.json”. To jest to, co załadujesz do swojej biblioteki Divi. Teraz przejdź do pulpitu Wordpress i przejdź do Divi> Divi Library. Następnie kliknij przycisk importowania u góry strony. Z wyskakującego okienka przenośności wybierz zakładkę Importuj i wybierz plik sales-banner-design.json. Następnie kliknij przycisk Importuj układy Divi Builder.

Teraz, aby zaimportować układ na swoją stronę, po prostu utwórz nową stronę i wdróż konstruktor wizualny. Następnie wybierz „Wybierz gotowy układ”. Z wyskakującego okna ładowania z biblioteki wybierz zakładkę „Twoje zapisane układy”, a następnie kliknij układ Projekt banera sprzedaży z listy. Otóż ​​to!

Jak stworzyć baner sprzedaży od podstaw w Divi

Dodawanie tła sekcji

Aby zacząć, utwórz nową stronę. Po nadaniu swojej stronie tytułu, wdróż konstruktor wizualny i wybierz opcję „Buduj od podstaw”. Następnie dodaj nową sekcję z jednym wierszem kolumny.

Zanim zaczniesz dodawać jakiekolwiek moduły do ​​rzędu, nadaj swojej sekcji kolor gradientu tła (w tym momencie kolor nie ma znaczenia. Potrzebujemy tylko koloru tła, aby zobaczyć wszystkie białe elementy projektu, których będziemy używać do naszej sprzedaży transparent.)

Dostosowywanie wierszy do banera sprzedaży

Zanim dodamy nasze moduły do ​​rzędu, najpierw nadajmy naszemu wierszowi niestandardową szerokość 700px i usuńmy wszelkie odstępy od góry lub od dołu, aby nasz wiersz ładnie leżał nad innym rzędem, który dodamy pod spodem. Przejdź do ustawień wiersza i zaktualizuj następujące elementy:

Szerokość niestandardowa: 700px
Szerokość rynny: 1
Margines niestandardowy: 0px góra, 0px, dół
Niestandardowe dopełnienie: 0px na górze, 0px na dole

Teraz zduplikuj wiersz dwa razy, aby uzyskać w sumie trzy identyczne wiersze. Zostaną one wykorzystane do zbudowania naszego banera sprzedażowego.

Dodawanie górnej ramki granicznej z przylegającym tekstem

Aby zbudować nasz baner sprzedażowy, zaczynamy od górnej krawędzi z tekstem po lewej stronie. W tym celu użyjemy modułu dzielnika i modułu tekstowego. Najpierw utwórz nowy moduł tekstowy i dodaj kilka słów treści w polu treści.

Treść: „Tylko online”

Przejdź do karty projektu i zaktualizuj następujące elementy:

Grubość czcionki tekstu: pogrubiona
Styl czcionki tekstu: TT
Kolor tekstu tekstu: rgba (255,255,255,0.9)
Rozmiar tekstu: 15px
Odstępy między literami tekstu: 2px
Wysokość linii tekstu: 1em
Szerokość: 22% (komputer), 25% (tablet), 40% (smartfon)
Wyrównanie modułu: w lewo
Margines niestandardowy: 0px góra, -15px dół
Niestandardowe wypełnienie: 0px na górze, 0px na dole

Ten niestandardowy margines jest nieco przedwczesny, ponieważ nasz rozdzielacz nie został jeszcze dodany, ale konieczne jest wyrównanie tekstu tak, aby idealnie przylegał do rozdzielacza, który wkrótce zostanie dodany.

Teraz dodaj moduł rozdzielający pod modułem tekstowym w tym samym wierszu. Następnie zaktualizuj ustawienia dzielnika w następujący sposób:

Kolor: rgba (255,255,255,0.9)
Pozycja dzielnika: dolna
Waga dzielnika: 15px
Wysokość: 15px
Szerokość: 78% (komputer), 75% (tablet), 60% (smartfon)
Wyrównanie modułu: w prawo
Margines niestandardowy: 0px góra, 0px dół
Niestandardowe wypełnienie: 0px na górze, 0px na dole

Oczywiście podczas dostosowywania projektu do własnych potrzeb będziesz musiał dostosować szerokość obramowania w zależności od szerokości modułu tekstowego.

Następnie musimy dodać jeszcze jeden moduł dzielnika, aby połączyć nasz dzielnik z prawą krawędzią rzędu, który będziemy projektować w następnej kolejności.

W tym celu zduplikuj moduł dzielnika i zaktualizuj następujące elementy:

Szerokość: 15px
Margines niestandardowy: -1px dół

Dodanie dolnej ramki obramowania z przylegającym tekstem

Aby utworzyć dolną ramkę obramowania, możemy użyć tego samego elementu, który utworzyliśmy w górnej ramce obramowania naszego górnego rzędu. Tylko tym razem zaczniemy od modułu dzielnika o szerokości 15px. Śmiało skopiuj moduł dzielnika 15px i wklej go do trzeciego (dolnego) rzędu. Następnie zaktualizuj wyrównanie modułu do lewej zamiast do prawej.

Następnie skopiuj dłuższy moduł dzielnika z górnego rzędu i wklej go pod dzielnikiem 15px w dolnym rzędzie. Następnie dostosuj następujące elementy:

Szerokość: 75% (komputer), 70% (tablet), 50% (smartfon)
Wyrównanie modułu: w lewo

Na koniec skopiuj moduł tekstowy w górnym rzędzie i wklej pod dwoma modułami rozdzielającymi w dolnym rzędzie. Następnie zaktualizuj następujące elementy:

Treść: „Zaczyna się 1 listopada”
Szerokość: 25% (komputer), 30% (tablet), 50% (smartfon)
Wyrównanie modułu: w prawo
Margines niestandardowy: -15px góra, 0px dół
Niestandardowe wypełnienie: pozostało 15 pikseli

Dodawanie modułów tekstowych do środkowego rzędu

Teraz jesteśmy gotowi, aby rozpocząć dodawanie modułów tekstowych do naszego środkowego wiersza, który będzie zawierał nasz główny tekst banera sprzedaży. Będziemy układać jeden na drugim trzy moduły tekstowe. Śmiało i dodaj pierwszy moduł tekstowy do środkowego rzędu.

Następnie zaktualizuj następujące elementy:

Treść: „Wszystko 20% taniej”
Kolor tła: rgba (255,255,255,0.9)

Grubość czcionki tekstu: pół pogrubiona
Styl czcionki tekstu: TT
Kolor tekstu tekstu: #000000
Tekst Rozmiar tekstu: 34px (komputer), 20px (smartfon)
Odstępy między literami tekstu: 2px
Wysokość linii tekstu: 1em
Orientacja tekstu: Środek
Niestandardowe wypełnienie: 2vw góra, 2vw dół, 5vw lewo, 5vw prawo

Nadanie tekstowi czarnego koloru na białym tle jest niezbędne, aby zmaksymalizować efekt trybu mieszania ekranu, który pozwoli na zmieszanie tekstu z tłem sekcji. Nieco później dodamy tryb mieszania ekranu do wiersza.

Teraz zduplikuj moduł tekstowy, aby przyspieszyć projektowanie następnego modułu tekstowego. Następnie zaktualizuj zawartość za pomocą następującego html:

<h2 style="border: 7px solid #000000;">Fall Sale</h2>

Styl wbudowany po prostu dodaje czarne obramowanie wokół tekstu nagłówka. Ponownie czarny kolor będzie działał z trybem mieszania ekranu, aby odsłonić tło sekcji z tekstem.

Następnie zaktualizuj następujące elementy:

Grubość czcionki nagłówka 2: pogrubiona
Styl czcionki nagłówka 2: TT
Kolor tekstu nagłówka 2: #000000
Rozmiar tekstu nagłówka 2: 100px (komputer), 80px (tablet), 60px (smartfon)
Nagłówek 2 Odstępy między literami: 2px
Margines niestandardowy: góra 0 pikseli
Niestandardowe wypełnienie: 0px na górze, 0px na dole

W przypadku ostatniego modułu tekstowego zduplikuj pierwszy moduł tekstowy w tym środkowym wierszu i wklej go pod drugim modułem tekstowym.

Następnie zaktualizuj następujące elementy:

Treść: „Kup teraz”
Styl czcionki tekstu: TT, U (podkreślone)
Margines niestandardowy: góra 0 pikseli
Niestandardowe wypełnienie: 1vw góra, 2vw dół

Stylizacja środkowego rzędu

Ostatnią fazą tego projektu jest dodanie obramowania do środkowego rzędu i efektu trybu mieszania ekranu. Aby to zrobić, otwórz ustawienia środkowego wiersza i zaktualizuj następujące elementy:

Niestandardowe dopełnienie: 15px po lewej, 15px po prawej
Szerokość prawego obramowania: 15px
Kolor prawego obramowania: rgba (255,255,255,0.9)
Szerokość lewej krawędzi: 15px
Kolor lewej krawędzi: rgba (255,255,255,0.9)
Tryb mieszania: ekran

Tryb mieszania ekranu pozwala tekstowi mieszać obraz tła, aby pokazać się przez tekst, aby uzyskać fajny efekt!

Sprawdź efekt końcowy.

Dodawanie linku do banera sprzedaży

Ponieważ jest to baner sprzedażowy, będziesz chciał zmaksymalizować klikalną przestrzeń na banerze, aby zwiększyć konwersje. Aby to zrobić, możesz dodać link do całego środkowego wiersza. Po prostu otwórz ustawienia środkowego wiersza i wprowadź adres URL łącza wiersza, aby przekierować do żądanej strony.

Dodawanie różnych tła sekcji dla unikalnych projektów

Dzięki temu nowemu projektowi banera sprzedażowego możesz łatwo aktualizować obraz tła, aby tworzyć niepowtarzalne projekty.

Oto kilka przykładów.

Końcowe przemyślenia

Mam nadzieję, że ten projekt banera sprzedaży przyda się we wszystkich promocjach internetowych potrzebnych przez cały rok. Projekt ma służyć jako uniwersalny baner sprzedażowy, który można łatwo aktualizować za pomocą nowego tekstu i obrazów tła sekcji, aby uzyskać zupełnie nowy wygląd. Możesz nawet dodać tło wideo!

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!