Wordpress, jak sprawić, by tło strony było przezroczyste. Przezroczyste tło lub tekst z CSS

Dziś w swojej praktyce natknąłem się na to, że na tle menu trzeba było postawić przezroczystość. Była oczywiście możliwość zrobienia tego za pomocą picture.png, ale mimo to postanowiłem kopać i robić przezroczyste tło z za pomocą CSS . Okazało się to całkiem proste :)

W kodzie html piszemy „klasę”, dla której konieczne jest ustawienie pewnej przezroczystości:

FON (tło: rgba (200, 54, 54, 0,5); )

w ten sposób określiłem kolor tła, ustawiając wartości dla trzech kolorów podstawowych (czerwony - r, Zielony - g, niebieski - b) i przezroczystość tła na poziomie 50% (alfa - a) z jedną właściwością. Wartości dla koloru określone są w zakresie od 0 do 255, a dla przezroczystości zakres będzie wynosił od 0,0 do 1,0

Nieruchomość RGB dotyczy również wszystkich innych elementów. Ale jeśli konieczne będzie ustawienie przezroczystości dla wszystkich elementów w tej klasie, możesz użyć właściwości nieprzezroczystość, który ustawia przezroczystość dla całego elementu lub całej strony. wtedy kod będzie wyglądał tak:

FON (przezroczystość: 0,5; )

W takim przypadku wszystkie elementy w tej klasie staną się przezroczyste, w tym obrazy i tekst będą przezroczyste.

Subskrybuj i otrzymuj przydatne artykuły pocztą!

Inne fajne artykuły na naszym blogu

• Wiem, że w praktyce często dochodzi do takiej sytuacji, że właściciel serwisu kilka razy „przerabia” lub tworzy witrynę „od zera” i w końcu nie uzyskuje pożądanego rezultatu. Czyniąc to, powinno…
• Treść partnerska! Poprzez ciągłe skupienie Wyszukiwarki bezpośrednio na internautach i wskaźnikach najnowsze aktualizacje Algorytmy Google, jeszcze ważniejsze stało się dla właścicieli witryn zwracanie uwagi na szybkość ładowania ich…
• Posłuchaj, jeśli masz zadanie „stworzyć stronę internetową pod klucz” - skorzystaj z tego linku i zleć to zadanie nam. Jeśli potrzebujesz przykładu zakres zadań- zobacz artykuł "TOR do tworzenia ...
• Treść partnerska! - Chcesz opublikować swój artykuł? Dla wielu właścicieli witryn SEO wydaje się trudnym zadaniem. W rzeczywistości to nieprawda. Zatrudnianie wysoko wykwalifikowanych specjalistów do promowania może być bardzo…

Ostatnio rozmawialiśmy o rozwiązaniach dla - z wyjątkiem Wykorzystanie CSS a Javascript również radzi sobie z tym zadaniem 2 Wtyczka WordPress. Jedną z nich omówię dzisiaj bardziej szczegółowo - jest to menedżer tła. Nie każdy motyw ma ustawienia do zmiany tła witryny i nie każdy użytkownik będzie mógł go dostosować za pomocą stylów w szablonie. Ponadto moduł posiada kilka dodatkowych ciekawe funkcje, postanowiono więc przestudiować go bardziej szczegółowo.

Aktualizacja 11.08.2018: Niestety moduł od dawna nie był aktualizowany, a teraz całkowicie zniknął z oficjalnego repozytorium Katalogu Wtyczek. Przeczytaj artykuł lub zobacz wybór wtyczek.

Możesz znaleźć moduł na tej stronie lub zainstalować go według nazwy od administratora WordPressa. W momencie pisania tego tekstu uważano go już za dość stary, ponieważ. obsługiwana wersja zakończyła się 3.7.8. Niestety wtyczka może nie być teraz obsługiwana. Jednak z powodzeniem przetestowałem go na Ostatnia wersja systemy 4.2.1. Ponadto nie w każdym module znajdzie się 30 tysięcy pobrań.

Głównym zadaniem wtyczki Menedżera tła jest wyświetlanie losowego tła dla każdego nowego odwiedzającego lub tworzenie pokazu slajdów z kilku obrazów. Szczerze mówiąc, początkowo myślałem, że moduł pomoże mi stworzyć klikalne tło, ale jego funkcje są nieco bardziej zróżnicowane. To pozwala:

• tworzyć zestawy obrazów, z których obrazy będą wstawiane jako tło strony. Możesz je pobrać z lokalny komputer, biblioteka multimediów WordPress lub inne moduły;
• określić położenie tła, jego „replikację” (jeśli jest to wzór);
• zastosuj wzory do tła;
• zobacz obraz w całości po pobraniu i nie czekaj, aż stopniowo pojawi się od góry do dołu (jeśli korzystasz z wolnego Internetu);
• ustawić wyświetlanie tła na niektórych stronach: głównej, sekcjach, archiwach lub postach;
• dodaj link do tła z wyliczeniem statystyk konwersji przez Google Analytics.

Jak widać bardzo ciekawy zestaw opcji. Mówi to globalnie o możliwościach, ale moduł Menedżera tła jest pełen wszelkiego rodzaju szczegółów. Możesz więc na przykład wybrać przezroczystość wzoru nakładki, określić efekt podczas przełączania między zdjęciami w pokazie slajdów itp.

Poza ustawieniami modułu znajdziesz w dziale " Wygląd zewnętrzny" - "Tło". Tu przy okazji dochodzi do takiej sytuacji, że możesz mieć jednocześnie dwie pozycje menu o tej samej nazwie. Jeśli pamiętasz, w niektórych Motywy WordPress jest podobne ustawienie. Tak więc wtyczka Menedżera tła jest z nim w pełni kompatybilna i możesz nią zarządzać w tej sekcji.

Ale lepiej przejść do tego „Tła”, które reprezentuje tylko ustawienia modułu. Na tej stronie zobaczysz tylko wiele różnych ustawień.

Jednak pierwszym krokiem jest stworzenie zestawu obrazków do tła - kliknij w link " Dodaj nowy zestaw obrazów”. Dostępne zestawy można zobaczyć w zakładce „Zestawy obrazów”.

Jak powiedziałem, jest tu dużo ustawień, są:

• zasada doboru zdjęć do tła - losowo itp.;
• każdorazowe wyświetlanie różnych zdjęć lub zapamiętywanie ich w sesji przeglądarki;
• kolor tła;
• wyświetlanie tła w trybie pełnoekranowym lub „replikacja”;
• nakładanie wzoru na obraz;
• możesz dodać przycisk Pin It z Pinteresta i zdefiniować szereg innych opcji.

Na koniec należy zauważyć, że czasami mogą pojawić się problemy z wyświetlaniem tła. Jeśli jesteś w Szablon CSS istnieje ścisła zmiana ustawień lub zmiana tła, wtedy wtyczka Menedżera tła może nie działać. Na przykład na jednej stronie zdjęcie spokojnie załadowało się i zastąpiło właściwość tła w stylach, ale na tym blogu musiałem to celowo skomentować. Od czego to zależy, trudno powiedzieć. Oto, co się skończyło.

Podsumowując, Menedżer tła to świetna wtyczka, która pozwala wyświetlać różne obrazy tła witryny, a nawet tworzyć z nich pokazy slajdów. W przypadku niektórych projektów może to być świetny element „dekoracyjny”.

Jeśli chodzi o linki z tła w Menedżerze tła. W ustawieniach jest podobna opcja i możesz określić link dla każdego zdjęcia. testowałem ta funkcja i wydaje się, że wszystko działało w momencie pisania. Jednak teraz są z tym problemy. Jedyne, co udało nam się zrobić, to umieścić link w specjalnym elemencie — zobacz ikonę [+] na powyższym zrzucie ekranu. Ta funkcja wtyczki działa bez problemów.

Spójrz teraz na swojego bloga krytycznym okiem. Niedługo wiele rzeczy będzie na nim inaczej, bo w zasadzie wszystko możesz zmienić samodzielnie. Oczywiście musisz tylko wiedzieć, jak to zrobić.

W panelu administracyjnym

Zaloguj się do panelu administracyjnego Wygląd - Redaktor . Wiesz już za co odpowiada wiele szablonów, ale teraz nie zainteresują Cię szablony, tylko to, co pod nimi kryje: Style. Dokładniej jedna ich część, która nazywa się Lista stylów.

Plik pasujący do tej listy styl.css. Ten plik znajduje się na blogu w folderze aktywnego motywu. Zawsze możesz go tam znaleźć.

W wyszukiwarce

Po prostu otwórz przeglądarkę w swoim . Większość przeglądarek ma dobra cecha: Możesz kliknąć dowolny obszar na blogu prawym przyciskiem myszy i wybrać z listy operacji Przeglądanie kodu elementu . Na dole pojawi się okno, w którym możesz znaleźć interesujące informacje o klikniętym elemencie.

W tym oknie lewy Zobaczysz kod strony, a linia zostanie podświetlona w tym kodzie. odpowiadające temu elementowi. ALE po prawej, w stylach, będą właściwościami tego elementu.

Rozmiar czcionki, dopełnienie, kolor tekstu i tła, wyrównanie: to wszystko w stylach , a wszystko to można zmienić.

Zmień kolor tła

Na Blog WordPress Osobiście nie lubię, gdy tło artykułów jest inne niż tło wszystkiego innego. W tym przypadku artykuły w feedzie przychodzą w osobnych blokach i moim zdaniem nie wyglądają zbyt dobrze. Uczynimy tło wszędzie takie samo, jak obecne tło artykułu. Kliknij tło, które chcemy zmienić, kliknij prawym przyciskiem myszy, wybierz Wyświetl kod elementu. W wierszu, który zostanie podświetlony po prawej stronie w wyniku, będziemy zainteresowani tytuł atrybut klasy . Style są pisane przez klasy.

W tym przypadku klasa = sztuka-układ-komórka Oznacza to, że w stylach, w pliku styl.css, będzie też taka klasa, a właściwości będą już w niej napisane. Tylko to będzie wyglądać inaczej, a mianowicie:

.art-layout-cell, a następnie do nawiasy klamrowe właściwości tej klasy zostaną zarejestrowane.

Znajdź w pliku klasę o tej nazwie styl.css. Skorzystajmy z funkcji wyszukiwania Ctrl+f i wpisz nazwę w polu wyszukiwania: komórka-układ sztuki. Od razu zobaczymy tło:

kolor tła: przezroczysty. przezroczysty oznacza przezroczysty .

Teraz, jakiego koloru potrzebujemy? Gdzie mogę uzyskać kolor tła naszych artykułów? Tym razem użyjemy Program FSCapture. W niej. między innymi wśród zestawu narzędzi, które można znaleźć pipeta, który określa kolor dowolnego obszaru na ekranie monitora. Bardzo przydatne narzędzie!

Otwórz program FSCapture, przejdź do Ustawienia i wybierz narzędzie Pipeta sitowa . Kliknij żądany obszar na ekranie. w oknie klątwa Zobaczysz kod potrzebnego koloru: D2E8EE

Wstawiasz to do stylu komórka-układ sztuki zamiast słowa przezroczysty .

Zobacz, co się stało. Jest jeszcze wiele do zrobienia, ale początek już został zrobiony.

Film o. jak edytować tło na blogu wordpress

Więcej Detale Możesz przejść do sekcji „Wszystkie kursy” i „Narzędzia”, do których można uzyskać dostęp z górnego menu strony. W tych sekcjach artykuły są pogrupowane tematycznie w bloki zawierające najbardziej szczegółowe (w miarę możliwości) informacje na różne tematy.

Możesz także zasubskrybować bloga i dowiedzieć się o wszystkich nowych artykułach.
Nie zajmuje to dużo czasu. Wystarczy kliknąć poniższy link:

Tło to obraz, na którym pokazane są wszystkie elementy serwisu. Może to nie być obraz, ale kolor jednolity lub gradientowy, .

Większość szablonów nie obsługuje ustawiania i zmiany tła. Jednak nie wszystkie motywy są w stanie to zrobić, zwłaszcza jeśli chodzi o bezpłatne kopie. Ale nawet jeśli masz zainstalowany szablon w swojej witrynie, który umożliwia zmianę tła WordPress w ustawieniach, będzie to bardzo słaba operacja, ponieważ zmiany zostaną natychmiast zaakceptowane w całej witrynie. W zwykłych szablonach nie można zmienić tła tylko niektórych postów, kategorii lub stron.

W tym artykule opowiemy o dwóch proste wtyczki które rozwiążą ten problem za pomocą kilku kliknięć.

tło na stronie

To najprostsza wtyczka pozwalająca na wykonywanie operacji na tle WordPressa. Po zainstalowaniu i aktywacji nie pojawią się żadne ustawienia i dodatkowe elementy panelu sterowania witryny. Tylko na stronie każdego posta i strony pojawi się nowa opcja, która pozwoli Ci dodać niestandardowy obraz tła.

Istnieje kilka efektów, które można zastosować do obrazu wybranego jako tło WordPress:

• Wybierz powtarzanie - poziome lub pionowe;
• Spraw, aby obraz był przewijalny z witryną lub stały, tzw.
• Wybierz orientację tła WordPress – prawo, lewo, środek;
• Wybierz zwykłe wypełnienie kolorem zamiast obrazów.

Wtyczka jest bezpłatna. Ponadto każde przesłane tło WordPress można edytować we wbudowanym edytorze tego dodatku.

Pełnoekranowe obrazy tła Pro

A ta wtyczka jest bardziej złożona w obsłudze, pozwala wykonywać więcej operacji na tle WordPress. Jest płatny i kosztuje 13 USD. Po zainstalowaniu aktywacji wtyczki w panelu administracyjnym pojawi się jej pozycja menu. Przechowuje galerię teł, tutaj możesz dodawać, usuwać i edytować obrazy w dowolnym momencie.

Ponadto możesz ustawić tło WordPress dla dowolnego postu lub strony, identyfikując je po ich identyfikatorze, dla strona główna, dowolna kategoria, strony archiwalne, a nawet strony 404.

Szerokie możliwości tej wtyczki uzupełnia funkcja, która była w pierwszym - na stronie dodawanie każdej strony i posta, dodawanie opcji instalacji jednej lub drugiej zdjęcie w tle, z edytorem i różnego rodzaju efektami.

Podsumowując, świetne narzędzie do tworzenia tła WordPress. Zarówno płatne, jak i darmowa wtyczka nadaje się do rozwiązywania wielu problemów z tym związanych.