Odkąd jak zaczęłam śledzić najnowsze trendy w projektowaniu webowym, zauważyłam, że obecnie gradient zyskuje coraz większą popularności. Bieżące gradienty to nic innego jak parametr CSS gradientu liniowego. Jednak obecnie gradient pozwala projektantom stron internetowych na pomijanie tworzenia gradientowego obrazu w programie Photoshop i stosowanie żywych zakresów kolorów bezpośrednio do kodu. Ponieważ jest skalowalny do dowolnego rozmiaru, gradient CSS jest idealny do wypełniania tła.
Przyczyny powszechnego korzystania z tego web design trendu są dość proste. Po pierwsze, gradientowe tło jest silnym efektem wizualnym, który z pewnością sprawie dobre wrażenie na odwiedzających stronę. W dodatku, wykorzystując przezroczyste nakładki na zdjęciach, gradient idealnie pasuje do tworzenia geometrycznych teł, które również są modne. Krótko mówiąc, tworzenie nakładek gradientowych i wykorzystanie ich w tle strony - to idealny sposób na wzmocnienie jej atrakcyjności wizualnej i pokazanie, że zawsze jesteś na bieżąco z nowymi trendami.
Tworzenie nakładek gradientowych z pomocą trybu mieszania w kreatorze stron Elementor (Pokrokowy przewodnik)
Nie tak dawno temu zespół Elementor zaprezentował zupełnie nowe funkcje tego kreatora, takie jak efekty filtrów i tryby mieszania. Pojawa tych funkcji umożliwiła tworzenie nakładek gradientowych i wykorzystanie ich na stronie. W tym artykulu opowiem Ci, jak stworzyć taką nakładkę i jak ją dostosować.
Więc, jak wygląda nakłedek gradientowych w Elementorze? Aby stworzyć taką nakładkę należy wykonać następujące kroki:
- Otwórz edytor Elementora i utwórz nową sekcję.
- Przejdź do karty Układ, zmień szerokość zawartości na pełną szerokość i włącz opcję Rozciągnij sekcję. W opcji Wysokość wybierz Dopasuj do ekranu.
- Przejdź do karty Styl > Tło. Wybierz klasyczny typ tła. Dodaj zdjęcie i ustaw pozycję W centrum, Załącznik na Przewijanie, Rozmiar na Okładkę, wybierając opcję Nie powtarzaj dla opcji Powtarzanie. Gdy to zrobisz, zobaczysz, że zdjęcie zajmuje całą przestrzeń Twojej strony.
- Przejdź do kartyi Styl > Nakładka na tło. Wybierz nakładkę gradientową w typie tła i kolor, który chciałbyś zastosować. Nieco dalej na stronie znajduje się opcja Elementor Blend Mode. Mimo to polecam najpierw ustawić nieprzezroczystość (0,5) i kąt (np. 160). Pomiń typ i wybór drugiego koloru, ponieważ będziesz mógł dostosować te parametry po stosowaniu trybu mieszania. Po zakończeniu możesz swobodnie eskperymentować z tymi opcjami, dopóki wynik końcowy nie będzie odpowiadał Twoim wymaganiom. W sekcji Filtry CSS możesz dostosować jasność, kontrast i nasycenie.
- Wróć do strony początkowej edytora Elementor i znajdź sekcję Nagłówek. Przeciągnij i upuść do niego zdjęcie. Przejdź do karty Treść > Tytuł, zmień rozmiar na XXL i ustaw wyrównanie "Po prawej stronie".
- Przejdź do karty Styl > Tytuł i wprowadź potrzebne zmniany w Kolorach tekstu, Typografii, Rozmiarze, Przekształceniu i Odstępach między literami. Na karcie Zaawansowane zmień górny margines.
- Aby uzyskać tekst gradientowy, wróć do karty Styl, znajdź tryb mieszania i wybierz potrzebną opcję.
Tak wygląda ogólne tworzenie nakładek gradientowych w kreatorze stron Elementor. Aby dostsoować je i nadać tłu strony wyjątkowy wygląd, możesz użyć niestandardowych zdjęć i eksperymentować z ustawieniami.
Ten artykuł został przetłumaczony z angielskiego. Orygimał można znaleźć tutaj: A Step-by-Step Guide For Creating Gradient Overlay Using Elementor Blending Modes.
5 Topowych motywów opartych na kreatorze stron Elementor
Jeśli jeszcze nie uruchomiłeś strony i szukasz idealnego rozwiązania webowego, odwiedź Elementor marketplace i wybierz jeden z gotowych motywów WordPress opartych na kreatorze stron Elementor. Dla Twojej wygody wybrałam pięć najlepiej sprzedających się rozwiązań na marketplace.
Monstroid2
Wszyscy już dobrze wiecie o nowej wersji motywu Monstroid2. Nowy motyw stał się ultra lekki i szybki i posiada mnóstwo skórek, oraz ponad 500 wstępnie zaprojektowanych sekcji i stron dostępnych poprzez przycisk Magic Button. Poza tym został oparty o potężny kreator stron Elementor, uzupełniony o pełny zestaw wtyczek Jet i zupełnie nowym modułowy kreator stron. Bez wątpienia to rozwiązanie WordPress jest najbardziej progresywnym i wysoce funkcjonalnym produktem internetowym, jaki kiedykolwiek był w katalogu TemplateMonster.
Chantalle
Jeśli chciałbyś zaprezentować usługi kosmetyczne w najbardziej atrakcyjny sposób, motyw Chantalle stanie się doskonałym wyborem do osiągnięcia tego celu. Oprócz atrakcyjnego designu tematycznego, motyw Chantalle posiada dziewięć stylowych demo do wyboru, bloki usług i referencji, cenniki, pasz Instagram i narzędzia WooCommerce. Jak można zauważyć, motyw został wyposażony we wszystkie potrzebne do stworzenia dochodowego i przyjaznego dla użytkownika e-sklepu z kosmetykami elementy. Widżet Brand JetElements, wiele gotowych układów bloga, potężny suwak Revolution i inne funkcje również zostały zawarte do zestawu tego motywu.
Tourizto
Jeśli zawsze marzyłeś o stworzeniu bloga turystycznego, motyw Tourizto pomoże Ci spełnić to marzenie! Wbudowane układy bloga pomogą Ci dzielić się z publicznością cieakwymi historiami, poradami na temat życia i innymi wskazówkami dotyczącymi podróży. Dzięki w pełni responsywnemu układowi i kompatybilności z różnymi przeglądarkami tego motywu, strona na jego podstawie będzie szybko dostosowywala się się do dowolnego rozmiaru ekranu i rozdzielczości bez utraty jakości treści. A wbudowany kreator stron Elementor ze wtyczkami Jet doda zaawansowaną funkcjonalność i pomoże dostosować stronę bez dodatkowego kodowania.
Bryte
Bryte to minimalistyczny motyw WordPress dla stron biznesowych. Jest on wyposapony w 7 skórek i zestaw gotowych stron do różnych celów. WordPress kreator stron Elementor pozwala utworzyć e-sklep lub witrynę korporacyjną na podstawie tego motywu. Motyw został oparty na Cherry framework wraz szeroką gamą wtyczek Cherry. W połączeniu z dodatkami Jet, te funkcje zapewniają stronie niewiarygodną wydajność i ułatwią proces dostosowywania.
Creatonix
Creatonix to motyw WordPress dla stron docelowych, oparty na kreator stron Elementor. Korzystając z niego, uzyskasz zaawansowane możliwości tworzenia niezwykłych układów, bloków, modułów i innych sekcji. Dzięki minimalistycznemu, ale przyciągającemu wzrok designowi, motyw Creatonix pomoże skupić uwagę odwiedzających stronę na treściach i ważnych informacjach. Do Twojej dyspozacji . 4 warianty układu bloga, narzędzia Live Customizer, zestaw wtyczek Jet i Cherry oraz inne elementy projektowe, które pomagają znacznie ułatwić proces dostosowywania.
Tworzenie responsywnych stron: jakie masz opcje? [Darmowa e-książka]
Klikając przycisk akceptujesz Politykę prywatności i Regulamin korzystania z serwisu TemplateMonster.
* * *
P.S. Mam nadzieję, że ten tutoriał był dla Ciebie przydatny. Nie zapomnij udostępnić go znajomym, którzy szukają zupełnie nowych sposobów na tworzenie nakłdek gradientowych. Jeśli korzystasz już z jednego z naszych motywów na Elementorze i masz czas aby podzielić się wrażeniami z innymi - zapraszamy do sekcji komentarzy!