Jak tworzyć piękne ramki obrazu za pomocą nowych opcji Divi

W dzisiejszym samouczku Divi pokażemy, jak tworzyć piękne obramowania obrazów na następnej stronie, którą zbudujesz. Celem tego posta jest zademonstrowanie, w jaki sposób możesz tworzyć piękne wyniki, które pasują do obrazów, których używasz (i reszty witryny).

Dzięki nowym opcjom Divi osiągnięcie oszałamiających rezultatów jest łatwiejsze niż kiedykolwiek. Będziesz musiał wprowadzić tylko kilka modyfikacji, które pokażemy Ci, jak to zrobić, i będziesz gotowy, aby przenieść swoje projektowanie stron internetowych na wyższy poziom. Wszystkie 8 przykładów, które Ci udostępnimy, nie będzie wykorzystywać niczego poza wbudowanymi opcjami oferowanymi przez Divi Builder i Image Module.

Zapowiedź

Rzućmy okiem na wyniki, których można się spodziewać po tym poście:

Jak tworzyć piękne ramki obrazu za pomocą nowych opcji Divi

Subskrybuj nasz kanał YouTube

Tło gradientowe

Pierwszą możliwością uzyskania pięknych ramek obrazu jest użycie tylko gradientowego tła. Eksperymentując z różnymi ustawieniami gradientowego tła, możesz osiągnąć proste, ale eleganckie rezultaty. Pokażemy trzy przykłady obramowań obrazów, które składają się wyłącznie z tła gradientowego.

Standard

Pierwszy przykład, który będziemy obsługiwać, jest najprostszym i najskromniejszym z nich wszystkich; standardowe obramowanie obrazu gradientowego. W rezultacie pokażemy, jak tworzenie wygląda tak:

Karta treści

Zacznij od wybrania gradientowego tła w zakładce Treść. W tym przykładzie użyliśmy następujących ustawień:

• Pierwszy kolor: #081e8c
• Drugi kolor: #764f9b
• Typ gradientu: liniowy
• Kierunek gradientu: 269 stopni
• Pozycja startowa: 40%
• Pozycja końcowa: 60%

Karta projektu

Następną i ostatnią rzeczą, którą musisz zrobić, to dodać trochę wypełnienia do obrazu. To takie proste. Przejdź do zakładki Projekt i dodaj „10px” do dopełnienia górnego, dolnego, prawego i lewego.

boki

Następnie mamy ramkę obrazu, która pokazuje się tylko po lewej i prawej stronie obrazu. Korzystanie z tego rodzaju obramowania obrazu zapewnia dodatkowy akcent na obrazie bez zbytniego skupiania się na samej obramowaniu.

Karta treści

Aby uzyskać ten rodzaj obramowania obrazu, zacznij od dodania następującego tła gradientowego do obrazu:

• Pierwszy kolor: rgba (255,255,255,0)
• Drugi kolor: #0a8da8
• Typ gradientu: liniowy
• Kierunek gradientu: 166 stopni
• Pozycja startowa: 29%
• Pozycja końcowa: 52%

Karta projektu

W zakładce Design jedyne, czego będziesz potrzebować, to „10px” dopełnienia dla prawej i lewej strony.

Jeden róg

Idąc dalej, możesz również tworzyć narożne tła dla obrazów na swojej stronie internetowej. Ten rodzaj obramowania doskonale nadaje się do podkreślenia koloru używanego w obrazie.

Karta treści

W trzecim przykładzie obrazu użyj następującego tła gradientowego:

• Pierwszy kolor: rgba (58,8,1,0,58)
• Drugi kolor: rgba (41,196,169,0)
• Kierunek gradientu: 152 stopni
• Pozycja startowa: 34%
• Pozycja końcowa: 28%

Karta projektu

Następnie dodaj „20px” do każdego z dopełnień.

Ramka obrazu i tło gradientowe

Inną możliwością jest połączenie gradientowego tła z obramowaniem obrazu. To również może zapewnić oszałamiające rezultaty, co będzie można zobaczyć w następnych czterech przykładach.

Subtelny gradient

Pierwsza kombinacja gradientowego tła i obramowania obrazu jest prosta, ale piękna. Używając tych samych kolorów dla tła gradientu i obramowania, obramowanie obrazu w jakiś sposób wydaje się wypełniać kolorem.

Karta treści

Zacznij od dodania do obrazu następujących ustawień gradientowego tła:

• Pierwszy kolor: rgba (255,255,255,0)
• Drugi kolor: #777777
• Typ gradientu: liniowy
• Kierunek gradientu: 180 stopni
• Pozycja startowa: 65%
• Pozycja końcowa: 78%

Karta projektu

Przejdź do zakładki Projekt i użyj następujących ustawień w podkategorii Border:

• Użyj obramowania: tak
• Kolor obramowania: #777777
• Szerokość obramowania: 3px
• Styl obramowania: Solidny

Na koniec dodaj dopełnienie „7px” do wszystkich opcji dopełnienia.

w kształcie

Następnie mamy przykład, który świetnie przyciągnie uwagę odwiedzających. Sam obraz zawiera w tym przypadku głównie jaśniejsze kolory, co tworzy ładną równowagę z ciemniejszym obramowaniem.

Karta treści

Ustawienia gradientu tła, których będziesz potrzebować dla tego obramowania obrazu, są następujące:

• Pierwszy kolor: rgba (53,0,188,0.1)
• Drugi kolor: #680061
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 80%
• Pozycja końcowa: 80%

Karta projektu

Przejdź do zakładki Projekt i użyj następującego obramowania:

• Użyj obramowania: tak
• Kolor obramowania: #9a00bc
• Szerokość obramowania: 1px
• Styl obramowania: Solidny

Przewiń w dół i dodaj do obrazu następujące wypełnienie:

• Góra: 7px
• Prawo: 5px
• Dół: 7px
• Po lewej: 5px

Podwójna granica

Użycie podwójnego obramowania w połączeniu z gradientowym tłem również może przynieść wspaniałe rezultaty. Spójrz:

Karta treści

Kolor tła gradientu, którego użyliśmy w tym przykładzie, jest następujący:

• Pierwszy kolor: rgba (224,43,32,0.61)
• Drugi kolor: rgba(12 113 195,0.87)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 71%
• Pozycja końcowa: 93%

Karta projektu

Idąc dalej, użyj następujących ustawień dla podkategorii Granica:

• Użyj obramowania: tak
• Kolor obramowania: #f4f4f4 (dopasuj do koloru tła sekcji)
• Szerokość obramowania: 8px
• Styl obramowania: podwójny

I dodaj „10px” do górnego, dolnego, prawego i lewego dopełnienia obrazu.

trójkątne rogi

Idąc dalej, możesz również utworzyć małe rogi na swojej granicy, używając opcji tła gradientowego w połączeniu z przerywaną ramką.

Karta treści

Aby uzyskać ramkę obrazu, którą pokazaliśmy powyżej, użyj następujących ustawień gradientu tła:

• Pierwszy kolor: rgba(163,103,6,0)
• Drugi kolor: #e09900
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 97%
• Pozycja końcowa: 97%

Karta projektu

W zakładce Projekt musimy mieć również następujące ustawienia obramowania:

• Użyj obramowania: tak
• Kolor obramowania: #e09900
• Szerokość obramowania: 2px
• Styl obramowania: przerywany

Wreszcie, będziemy potrzebować dopełnienia „8px” dla dopełnienia górnego, dolnego, lewego i prawego.

Wzór i tło gradientowe

Ostatnią możliwością, jaką chcemy umieścić w centrum uwagi, jest jednoczesne użycie wzoru i tła gradientowego. Dzięki temu możesz bawić się wyglądem i stylem swoich obrazów.

Figlarny

To obramowanie zawiera gradientowe tło dwóch kolorów, które są również używane w samym obrazie. Dodając również wzór tła, obraz nadaje nieco więcej atmosfery Twojej witrynie.

Karta treści

W ostatnim przykładzie użyjemy następujących ustawień tła gradientowego:

• Pierwszy kolor: rgba (4,49,96,0,51)
• Drugi kolor: rgba (119,74,15,0.51)
• Typ gradientu: liniowy
• Kierunek gradientu: 180 stopni
• Pozycja startowa: 0%
• Pozycja końcowa: 100%

Karta projektu

Następnie dodamy również tło wzoru. Wzór, którego użyliśmy w tym przykładzie, pochodzi z Toptal. Możesz używać ich wzorców do różnych celów, po prostu upewnij się, że umieszczasz je w swoim kodzie, jak wspomniano w ich FAQ. Po dodaniu tła z wzorem użyj również następujących ustawień:

• Rozmiar obrazu tła: okładka
• Pozycja obrazu tła: środek
• Powtarzanie obrazu tła: bez powtórzeń
• Mieszanie obrazu tła: mnożenie

Ostatnią rzeczą, którą musisz zrobić, to dodać dopełnienie „12px” do górnego, dolnego, prawego i lewego dopełnienia obrazu.

Końcowe przemyślenia

W tym poście pokazaliśmy kilka różnych sposobów tworzenia pięknych obramowań obrazu. Te opcje dają perspektywę na rzeczy, które możesz zrobić z nowymi opcjami Divi bez użycia dodatkowego CSS. Jeśli masz jakieś pytania lub sugestie; upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej!

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!

Polecane zdjęcie autorstwa Mr Aesthetics / shutterstock.com