Jak stworzyć piękne mobilne biosy społecznościowe za pomocą Divi (darmowe pobieranie!)

Kiedy tworzysz swoją osobistą witrynę, warto mieć stronę z biografią społecznościową, do której możesz łatwo utworzyć link. To świetna wizytówka online z podsumowaniem tego, co robisz i gdzie ludzie mogą zobaczyć Twoją pracę. Informacje udostępniane w mobilnych biosach społecznościowych zazwyczaj ograniczają się do Twojego wizerunku, imienia, stanowiska, krótkiego opisu i linków do portfolio. Możesz również dodać dodatkowe wezwanie do działania, aby ułatwić odwiedzającym skontaktowanie się z Tobą.

W tym poście pokażemy Ci, jak stworzyć dwa piękne biosy śledzące na urządzeniach mobilnych za pomocą Divi. Na końcu samouczka udostępnimy również pliki JSON obu przykładów, abyś mógł od razu zacząć.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na dwa przykłady, które odtworzymy od podstaw.

Przykład 1

Przykład 2

Zacznij odtwarzać przykład #1

Dodaj nową sekcję

Kolor tła

Zacznijmy od pierwszego przykładu! Utwórz nową stronę lub otwórz istniejącą i dodaj do niej zwykłą sekcję. Otwórz ustawienia sekcji i dodaj biały kolor tła.

• Kolor tła: #ffffff

Rozstaw

Następnie przejdź do ustawień odstępów sekcji i wprowadź zmiany. Zauważysz, że wartości różnią się w zależności od rozmiaru ekranu. Utrzymujemy ten sam rodzaj smukłej konstrukcji na różnych rozmiarach ekranu, modyfikując lewą i prawą wyściółkę na bieżąco.

• Górna wyściółka: 50px (komputer stacjonarny i tablet), 0px (telefon)
• Dolna wyściółka: 50px (komputer i tablet), 0px (telefon)
• Lewa wyściółka: 36vw (komputer), 23vw (tablet), 0vw (telefon)
• Prawa wyściółka: 36vw (komputer), 23vw (tablet), 0vw (telefon)

Dodaj wiersz nr 1

Struktura kolumny

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

Kolor tła

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj kolor tła.

• Kolor tła: #333333

Rozmiary

Następnie przejdź do ustawień rozmiaru na karcie projektu i usuń wszystkie niestandardowe odstępy między kolumną a wierszem.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Cień Pudełka

Dodajemy również cień pudełka, aby nadać głębię na większych ekranach.

• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba(0,0,0,0.3)

Dodaj moduł obrazu

Załaduj obrazek

Czas zacząć dodawać moduły! Zacznij od modułu obrazu o współczynniku 1:1. Na przykład obraz, którego używamy, ma szerokość i wysokość „500px”.

Wyrównanie

Po przesłaniu obrazu przejdź do zakładki projektu i zmień wyrównanie obrazu.

• Wyrównanie obrazu: Środek

Rozmiary

Zmniejszamy rozmiar obrazu, modyfikując następnie szerokość w ustawieniach rozmiaru.

• Szerokość: 33%
• Wyrównanie modułu: Środek

Granica

Zmieniamy również obraz w okrąg, dodając „50vw” do każdego z rogów w ustawieniach obramowania. Ponadto dodamy białą ramkę, korzystając z następujących ustawień:

• Szerokość obramowania: 8px
• Kolor obramowania: #ffffff

Cień Pudełka

Na koniec dodaj cień pudełkowy, aby stworzyć wielowymiarowy projekt.

• Pozycja pionowa cienia pudełka: 40px
• Siła rozmycia cieni w pudełku: 100px
• Kolor cienia: #000000

Dodaj moduł tekstowy nr 1

Dodaj zawartość H3

Do następnego modułu! Dodaj moduł tekstowy tuż pod modułem graficznym z zawartością H3.

Ustawienia tekstu H3

Kontynuuj, przechodząc do zakładki projektowania i zmieniając ustawienia tekstu H3.

• Czcionka nagłówka 3: Otwórz Sans
• Grubość czcionki nagłówka 3: pół pogrubiona
• Nagłówek 3 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 3: #ffffff
• Nagłówek 3 Wysokość linii: 0.1em

Rozstaw

Dodajemy również górny margines, aby utworzyć przestrzeń między modułem obrazu a tym modułem tekstu.

• Górny margines: 30px

Dodaj moduł tekstowy nr 2

Dodaj zawartość

Następnym modułem, którego potrzebujemy, jest kolejny moduł tekstowy. Dodaj swoje stanowisko w polu treści.

Ustawienia tekstu

Następnie przejdź do zakładki projekt i zmień ustawienia tekstu.

• Czcionka tekstu: Otwórz Sans
• Grubość czcionki tekstu: Regularna
• Kolor tekstu: #919191
• Orientacja tekstu: Środek

Dodaj moduł tekstowy nr 3

Dodaj zawartość

Kontynuuj, dodając kolejny moduł tekstowy z krótkim opisem siebie.

Ustawienia tekstu

Przejdź do ustawień tekstu i wprowadź zmiany.

• Czcionka tekstu: Otwórz Sans
• Kolor tekstu: #b7b7b7
• Wysokość linii tekstu: 1,6 em
• Orientacja tekstu: Środek

Rozmiary

Zmodyfikuj również szerokość modułu.

• Szerokość: 68%
• Wyrównanie modułu: Środek

Rozstaw

Dodaj trochę górnego i dolnego marginesu, aby stworzyć dodatkową przestrzeń.

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

Dodaj moduł przycisku

Dodaj kopię

Następnym i ostatnim modułem, którego potrzebujemy w tym wierszu, jest moduł przycisku. Dodaj kopię.

Wyrównanie

Następnie przejdź do zakładki projekt i zmień wyrównanie przycisków, aby dopasować je do poprzednich modułów.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Kontynuuj, zmieniając wygląd przycisku w ustawieniach przycisku.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 13px
• Kolor tekstu przycisku: #ffffff
• Kolor 1: #ad32ff
• Kolor 2: #32baff
• Kierunek gradientu: 96 stopni
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 30px
• Czcionka przycisku: Otwórz Sans
• Grubość czcionki: Ultra Bold
• Styl czcionki: wielkie litery

Rozstaw

Dodaj trochę niestandardowego marginesu i dopełnienia.

• Margines dolny: 50px
• Górna wyściółka: 15px
• Dolna wyściółka: 15px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Cień Pudełka

I uzupełnij projekt przycisku, dodając cień pudełka.

• Pozycja pionowa cienia pudełka: 20px
• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba (0,0,0,0,69)

Dodaj wiersz nr 2

Struktura kolumny

Do następnego rzędu! Użyj następującej struktury kolumn:

Tło gradientowe

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj tło gradientowe:

• Kolor 1: #1e1e1e
• Kolor 2: #3f3f3f
• Typ gradientu: Promieniowy
• Kierunek promieniowy: górny lewy
• Pozycja startowa: 26%
• Umieść gradient nad obrazem tła: Tak

Zdjęcie w tle

Zapisz następujący obraz na swoim komputerze i użyj go jako obrazu tła dla wiersza:

Wraz z następującymi ustawieniami tła:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: środek
• Powtarzanie obrazu tła: bez powtórzeń
• Mieszanie obrazu tła: twarde światło

Rozmiary

Następnie przejdź do zakładki projekt i usuń wszystkie odstępy między kolumnami a wierszem. Pomoże nam to w pełni wykorzystać uzyskaną przestrzeń w rzędach.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Następnie dodaj trochę niestandardowego dopełnienia.

• Górna wyściółka: 84px
• Dolna wyściółka: 84px
• Lewa wyściółka: 4vw (komputer), 7vw (tablet), 14vw (telefon)
• Prawa wyściółka: 4vw (komputer), 7vw (tablet), 14vw (telefon)

Cień Pudełka

Wraz z cieniem pudełkowym.

• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba(0,0,0,0.3)

Wyświetlacz

Aby upewnić się, że wszystkie ikony śledzenia społecznościowego są obok siebie, dodamy jeden wiersz kodu CSS do głównego elementu wiersza.

display: flex;

Dodaj moduł śledzenia mediów społecznościowych do kolumny 1

Wyrównanie

Pierwszym modułem, którego potrzebujemy w kolumnie 1, jest moduł śledzenia w mediach społecznościowych. Po dodaniu modułu zmień wyrównanie elementu na karcie projektu.

• Wyrównanie przedmiotu: środek

Dodaj nową sieć społecznościową

Kontynuuj, dodając nową sieć społecznościową. W tym przykładzie używamy Dribbble.

Połączyć

Dodaj link do swojego profilu Dribbble.

Tło gradientowe

Następnie zmień tło gradientowe, korzystając z następujących ustawień:

• Kolor 1: #ea0061
• Kolor 2: #ea4c8d
• Kierunek gradientu: 136 stopni

Rozstaw

I zwiększ rozmiar modułu, dodając niestandardowe wypełnienie.

• Górna wyściółka: 20px
• Dolna wyściółka: 20px
• Lewa wyściółka: 20px
• Prawe wypełnienie: 20px

Granica

Zamieniamy również moduł w okrąg, dodając „20vw” do każdego z rogów w ustawieniach obramowania.

Cień Pudełka

Na koniec dodaj cień pudełkowy.

• Pozycja pionowa cienia pudełka: 20px
• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: #000000

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość

Dodaj moduł tekstowy do pierwszej kolumny obok.

Ustawienia tekstu

Zmień ustawienia tekstu.

• Czcionka tekstu: Otwórz Sans
• Grubość czcionki tekstu: Ultra Bold
• Kolor tekstu: #ffffff
• Orientacja tekstu: Środek

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj zawartość

Dodaj kolejny poniżej poprzedniego.

Ustawienia tekstu

Zmień również ustawienia tekstowe tego modułu.

• Czcionka tekstu: Otwórz Sans
• Kolor tekstu: #898989
• Rozmiar tekstu: 11px
• Orientacja tekstu: Środek

Klonuj moduły w kolumnie 1 dwukrotnie i umieść duplikaty w pozostałych kolumnach

Po zakończeniu dostosowywania wszystkich modułów w kolumnie 1 możesz sklonować je dwukrotnie. Umieść duplikaty w dwóch pozostałych kolumnach wiersza.

Zmień sieci społecznościowe

Oczywiście będziesz musiał zmienić sieci społecznościowe.

Zmień linki do sieci społecznościowych

Wraz z linkami.

Zmień tło gradientowe sieci społecznościowej

I sieci gradientowe tła.

• Kolor 1: #0043ff
• Kolor 2: #00aced

• Kolor 1: #ea2c59
• Kolor 2: #fed270

Zacznij odtwarzać przykład nr 2

Dodaj nową sekcję

Kolor tła

Przejdźmy do następnego przykładu! Dodaj nową sekcję z białym kolorem tła.

• Kolor tła: #ffffff

Rozstaw

Następnie dodaj trochę niestandardowego dopełnienia.

• Górna wyściółka: 50px (komputer stacjonarny i tablet), 0px (telefon)
• Dolna wyściółka: 50px (komputer i tablet), 0px (telefon)
• Lewa wyściółka: 36vw (komputer), 23vw (tablet), 4vw (telefon)
• Prawa wyściółka: 36vw (komputer), 23vw (tablet), 4vw (telefon)

Dodaj wiersz nr 1

Struktura kolumny

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

Rozmiary

Nie dodając jeszcze żadnych modułów, przejdź do zakładki projekt w ustawieniach wiersza i zmień ustawienia rozmiaru.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Dodaj moduł obrazu

Załaduj obrazek

Czas zacząć dodawać moduły! Pierwszym modułem, którego potrzebujemy, jest moduł obrazu o proporcjach 1:1.

Wyrównanie

Zmień wyrównanie obrazu.

• Wyrównanie obrazu: Środek

Rozmiary

Zmodyfikuj też szerokość.

• Szerokość: 33%
• Wyrównanie modułu: Środek

Granica

I dodaj „20px” do każdego z rogów w ustawieniach obramowania.

Cień Pudełka

Uzupełnij projekt obrazu, dodając subtelny cień w kształcie pudełka.

• Siła rozmycia cieni w pudełku: 51px
• Kolor cienia: rgba(0,0,0,0.37)

Dodaj moduł tekstowy nr 1

Dodaj zawartość H3

Następnym modułem, którego potrzebujemy, jest moduł tekstowy. Dodaj wybrane treści H3.

Ustawienia tekstu H3

Zmień ustawienia tekstu H3 na karcie projektu.

• Czcionka nagłówka 3: Otwórz Sans
• Grubość czcionki nagłówka 3: Ultra Bold
• Styl czcionki nagłówka 3: Wielkie litery
• Nagłówek 3 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 3: #000000
• Nagłówek 3 Odstępy między literami: -1px
• Nagłówek 3 Wysokość linii: 0.9em

Rozstaw

Dodaj trochę górnego marginesu.

• Górny margines: 30px

Dodaj moduł tekstowy nr 2

Dodaj zawartość

Dodaj kolejny moduł tekstowy.

Ustawienia tekstu

Zmodyfikuj ustawienia tekstu.

• Czcionka tekstu: Otwórz Sans
• Kolor tekstu: #919191
• Orientacja tekstu: Środek

Dodaj wiersz nr 2

Struktura kolumny

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

Kolor tła

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień kolor tła wiersza.

• Kolor tła: #ffffff

Kolor tła kolumny 2

Dodaj kolor tła również do drugiej kolumny.

• Kolor tła kolumny 2: #efefef

Wyrównanie

Upewnij się, że używasz wyrównania do lewego wiersza.

• Wyrównanie wierszy: do lewej

Rozmiary

Przejdź do ustawień rozmiaru i wprowadź zmiany.

• Użyj niestandardowej szerokości: Tak
• Jednostka: %
• Szerokość niestandardowa: 67%
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak

Rozstaw

Dodajemy również niestandardowe dopełnienie wiersza i jego kolumn.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Górna wyściółka kolumny 1: 20px
• Dolna wyściółka kolumny 1: 20px
• Górna wyściółka kolumny 2: 20px
• Dolna wyściółka kolumny 2: 20px

Granica

Dodaj '14px' w lewym górnym rogu, prawym górnym i lewym dolnym rogu.

Cień Pudełka

I uzupełnij projekt rzędu, dodając subtelny cień w kształcie pudełka.

• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba(0,0,0,0.17)

Dodaj moduł śledzenia mediów społecznościowych do kolumny 1

Wyrównanie

W pierwszej kolumnie potrzebujemy modułu Social Media Follow. Zmień wyrównanie elementu.

• Wyrównanie przedmiotu: środek

Dodaj nową sieć społecznościową

Następnie dodaj nową sieć społecznościową. Używamy Dribbble.

Połączyć

Dodaj link do swojego portfolio Dribbble.

Tło gradientowe

I zmień gradientowe tło sieci społecznościowej.

• Kolor 1: #ea0061
• Kolor 2: #ea4c8d
• Kierunek gradientu: 136 stopni

Rozstaw

Następnie dodaj kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 20px
• Dolna wyściółka: 20px
• Lewa wyściółka: 20px
• Prawe wypełnienie: 20px

Granica

I dodaj „10px” do każdego z rogów sieci społecznościowej.

Cień Pudełka

Uzupełnij projekt modułu, dodając subtelny cień w kształcie pudełka.

• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba(0,0,0,0.3)

Dodaj moduł tekstowy #1 do kolumny 2

Dodaj zawartość

Dodaj moduł tekstowy do drugiej kolumny.

Ustawienia tekstu

Zmień odpowiednio ustawienia tekstu:

• Czcionka tekstu: Otwórz Sans
• Grubość czcionki tekstu: Ultra Bold
• Kolor tekstu: #000000
• Orientacja tekstu: Środek

Rozstaw

Stwórz miejsce, dodając trochę górnego marginesu.

• Górny margines: 10px

Dodaj moduł tekstowy nr 2 do kolumny 2

Dodaj zawartość

Drugim modułem, którego potrzebujemy w kolumnie 2, jest kolejny moduł tekstowy.

Ustawienia tekstu

Zmień ustawienia tekstu.

• Czcionka tekstu: Otwórz Sans
• Kolor tekstu: #898989
• Rozmiar tekstu: 11px
• Orientacja tekstu: Środek

Klonuj rząd nr 2

Gdy skończysz modyfikować wiersz, możesz go sklonować raz.

Zamień moduły

Następnie zamień moduły.

Dodaj kolor tła kolumny 1

Następnie dodaj kolor tła kolumny 1 do zduplikowanego wiersza.

• Kolor tła kolumny 1: #dbdbdb

Usuń kolor tła kolumny 2

Następnie usuń kolor tła kolumny 2.

Zmień wyrównanie wierszy

Zmień również wyrównanie wierszy.

• Wyrównanie wierszy: w prawo

Zmień rozmiar wiersza

Wraz z niestandardową szerokością w ustawieniach rozmiaru.

• Szerokość niestandardowa: 66,99%

Zmień granicę wiersza

Dbamy również o to, aby „14px” było przypisane tylko do prawego górnego i dolnego prawego rogu.

Zmień sieć społecznościową

Kontynuuj, zmieniając sieć społecznościową.

Zmień tło gradientowe sieci społecznościowej

Wraz z gradientowym tłem.

• Kolor 1: #0043ff
• Kolor 2: #00aced

Klonuj oba wiersze śledzenia społecznościowego

Gdy skończysz mieć oba wiersze obserwowania społecznościowego, możesz sklonować każdy z nich.

Zmień obramowanie duplikatu #1

Zmień zaokrąglone rogi pierwszego duplikatu.

Zmień Social Follow Network of Duplikat #1

Wraz z siecią społecznościową.

Zmień tło gradientu duplikatu #1

I tło gradientowe.

• Kolor 1: #ea2c59
• Kolor 2: #fed270

Zmień obramowanie duplikatu nr 2

Kontynuuj, zmieniając również zaokrąglone rogi drugiego duplikatu.

Zmień sieć społecznościową z duplikatem nr 2

Wraz z siecią społecznościową.

Zmień tło gradientu duplikatu #2

I jeszcze raz tło gradientowe przypisane do sieci społecznościowej.

• Kolor 1: #00306b
• Kolor 2: #007bb6

Pobierz BEZPŁATNE biosy z mobilnej społeczności społecznościowej

Aby położyć swoje ręce na darmowych mobilnych sekcjach śledzenia społecznościowego, musisz najpierw pobrać je 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!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi obu przykładów, które odtworzyliśmy.

Przykład 1

Przykład 2

Końcowe przemyślenia

W tym poście pokazaliśmy, jak tworzyć oszałamiające biografie społecznościowe na urządzenia mobilne. Możesz użyć tych projektów jako swojej wizytówki online i przekierować ludzi na tę stronę, aby mogli się z nimi skontaktować lub wyświetlić linki do Twojego portfolio. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!