Как да направите прозрачен фон в wordpress. Прозрачен фон или текст с CSS

Погледнете блога си сега с критичен поглед. Скоро много неща ще бъдат различни на него, защото по принцип можете да промените всичко, което искате сами. Разбира се, просто трябва да знаете как да го направите.

В админ панела

Влезте в админ панела Външен вид- Редактор . Вече знаете за какво отговарят много от шаблоните, но сега няма да се интересувате от шаблоните, а от това, което е под тях: Стилове. По-точно един участък от тях, който се нарича Списък със стилове.

Файл, съответстващ на този списък style.css. Този файл се намира в блога в папката на активната тема. Винаги можете да го намерите там.

В браузър

Просто отворете браузъра си във вашия . Повечето браузъри имат хубава функция: можете да щракнете с десния бутон върху която и да е област в блога и да изберете от списъка с операции Преглед на кода на елемент . В долната част се появява прозорец, където можете да намерите интересна информацияза елемента, върху който сте кликнали.

В този прозорец налявоЩе видите кода за страницата и в този код ще бъде маркиран ред. релевантни даден елемент. А на дясно, в стилове, ще бъдат свойствата на този елемент.

Размер на шрифта, подложка, цвят на текста и фона, подравняване: всичко е в стилове , и всичко това може да се промени.

Променете цвета на фона

В WordPress блог аз лично не харесвам, когато фонът на статиите и фонът на всичко останало е различен. В този случай статиите във емисията идват в отделни блокове и според мен не изглеждат много добре. Ние ще направим фона навсякъде същия като текущия фон на статията. Щракнете върху фона, който искаме да променим, щракнете с десния бутон, изберете Преглед на кода на елемента. В реда, който ще бъде маркиран вдясно в резултата, ще се интересуваме от име на атрибут на класа . Стиловете се пишат по класове.

В такъв случай клас = art-layout-cellТова означава, че в стиловете, във файла style.css, също ще има такъв клас и в него вече ще бъдат записани свойства. Само че ще изглежда различно, а именно:

.art-layout-cell, а след това към фигурни скобиимоти от този клас ще бъдат регистрирани.

Намерете клас с това име във файла style.css. Нека използваме функцията за търсене ctrl+fи напишете името в полето за търсене: art-layout-cell. Веднага ще видим фона:

цвят на фона: прозрачен. Прозраченозначава прозрачен .

Сега, какъв цвят ни трябва? Къде мога да получа цвета на фона на нашите статии? Този път ще използваме Програма FSCapture. В нея. наред с други неща, сред набора от инструменти, които можете да намерите пипета, който определя цвета на всяка област на екрана на вашия монитор. Много полезен инструмент!

Отворете програмата FSCapture, отидете на Настройкии изберете инструмент Екранова пипета . Кликнете върху желаната област на екрана. в прозореца шестнадесетиченЩе видите кода за цвета, от който се нуждаете: D2E8EE

Вмъквате го в стила art-layout-cellвместо дума прозрачен .

Вижте какво стана. Има още много работа, но началото вече е поставено.

Видео за. как да редактирате фон в блога на wordpress

Можете да получите по-подробна информация в секциите "Всички курсове" и "Полезни програми", които можете да получите чрез Горно менюсайт. В тези раздели статиите са групирани по теми в блокове, съдържащи най-подробната (доколкото е възможно) информация по различни теми.

Можете също да се абонирате за блога и да научавате за всички нови статии.
Не отнема много време. Просто щракнете върху връзката по-долу:

Фонът е изображение, на което са показани всички елементи на сайта. Или може да не е картина, а плътен или градиентен цвят, .

Повечето шаблони не поддържат настройка и промяна на фона. Не всички теми обаче могат да направят това, особено когато става въпрос за безплатни копия. Но дори ако имате инсталиран шаблон на вашия сайт, който ви позволява да промените фона на WordPress в настройките, това ще бъде много оскъдна операция, тъй като промените ще бъдат приети веднага на целия сайт. Не е възможно в обикновените шаблони да промените фона само на някои публикации, категории или страници.

В тази статия ще ви разкажем за два прости плъгина, които решават този проблем с няколко кликвания.

фон на страница

Това е най-простият плъгин, който ви позволява да извършвате операции с фона на WordPress. След инсталирането и активирането му няма да се появяват настройки и допълнителни елементи от контролния панел на сайта. Само на страницата на всяка публикация и страница ще има нова опция, която ще ви позволи да добавите персонализирано фоново изображение.

Има няколко ефекта, които могат да бъдат приложени към картината, избрана за фон на WordPress:

• Изберете повторение - хоризонтално или вертикално;
• Направете изображението скролируемо със сайта или фиксирано, т.нар.;
• Изберете ориентация на фона на WordPress – дясно, ляво, централно;
• Изберете обикновено цветно запълване вместо изображения.

Плъгинът е безплатен. В допълнение, всеки качен фон на WordPress може да бъде редактиран във вградения редактор на тази добавка.

Фонови изображения на цял екран Pro

И този плъгин е по-сложен за работа, позволява ви да правите повече операции с фона на WordPress. Платен е и струва $13. След инсталиране на активирането на плъгина в админ панела ще има неговия елемент от менюто. Той съхранява галерия от фонове, тук можете да добавяте, изтривате и редактирате изображения по всяко време.

Освен това можете да зададете фона на WordPress за всяка публикация или страница, като ги идентифицирате по техния ID, за начална страница, произволна категория, архивни страници и дори 404 страници.

Широките възможности на този плъгин се допълват от функцията, която беше в първия - на страницата за добавяне на всяка страница и публикация, те добавят опции за настройка на едно или друго фоново изображение, с редактор и всякакви ефекти.

Като цяло, страхотен инструмент за създаване на фон на WordPress. Както платените, така и безплатните добавки са подходящи за решаване на много проблеми, свързани с това.

Наскоро се говори за решения за - освен Използване на CSSи Javascript също се справят с тази задача 2 WordPress плъгин. Днес ще разгледам един от тях по-подробно - това е Background Manager. Не всяка тема има настройки за промяна на фона на сайта и не всеки потребител ще може да го променя чрез стиловете в шаблона. Освен това модулът има няколко допълнителни интересни функции, така че беше решено да се проучи по-подробно.

Актуализация от 8.11.2018 г.: За съжаление, модулът не е актуализиран от дълго време и сега напълно изчезна от официалното хранилище на Plugin Directory. Прочетете статията или вижте селекция от добавки.

Можете да намерите модула на тази страница или да го инсталирате по име от WordPress администратор. По време на писането на тази статия той вече се смяташе за доста стар, т.к. поддържаната версия завършва с 3.7.8. За съжаление приставката може дори да не се поддържа сега. Въпреки това го тествах успешно последна версиясистеми 4.2.1. В допълнение, 30 хиляди изтегляния няма да бъдат намерени във всеки модул.

Основната задача на приставката Background Manager е да показва произволен фон за всеки нов посетител или да създава слайдшоу от няколко изображения. Честно казано, първоначално мислех, че модулът просто ще ми помогне да направя фон, който може да се кликва, но функциите му са малко по-разнообразни. Позволява:

• създаване на набори от изображения, от които ще бъдат вмъкнати снимки като фон на сайта. Можете да ги изтеглите от локален компютър, медийна библиотека на WordPress или други модули;
• определяне на позиционирането на фона, неговото "репликиране" (ако е модел);
• прилагайте шаблони към фона;
• вижте изображението напълно след изтегляне, а не чакайте, докато постепенно се появи отгоре надолу (ако използвате бавен интернет);
• задайте показването на фона на определени страници: основни, секции, архиви или публикации;
• добавете връзка за фон с изчисляването на статистиката за реализациите чрез Google Analytics.

Както можете да видите, много интересен набор от опции. Говорейки глобално за възможностите, но модулът Background Manager е пълен с какви ли не детайли. Така например можете да изберете прозрачността на шаблона за наслагване, да определите ефекта при превключване между картини в слайдшоу и т.н.

Извън настройките на модула ще намерите в раздела "Външен вид" - "Фон". Тук, между другото, възниква такава ситуация, че може да имате два елемента от менюто с едно и също име наведнъж. Ако си спомняте, в някои WordPress темиима подобна настройка. Така че плъгинът Background Manager е напълно съвместим с него и можете да го управлявате в този раздел.

Но е по-добре да отидете на този "Фон", който представлява само настройките на модула. На тази страница ще видите само много различни настройки.

Първата стъпка обаче е да създадете набор от изображения за фон - щракнете върху връзката " Добавете нов набор от изображения". Можете да видите наличните комплекти в раздела "Набори изображения".

Както казах, тук има много настройки, има:

• принципът на избор на картини за фон - произволно и т.н.;
• показване на различни снимки всеки път или запомнянето им в сесията на браузъра;
• Цвят на фона;
• показване на фона на цял екран или "репликация";
• наслагване на шаблон върху изображение;
• можете да добавите бутон Pin It от Pinterest и да дефинирате редица други опции.

И накрая, трябва да се отбележи, че понякога могат да възникнат проблеми с показването на фона. Ако имате стриктна настройка или заменяте фона във вашия шаблон CSS, тогава приставката Background Manager може да не работи. Например, в един сайт, картина спокойно се зареди и замени свойството на фона в стилове, но в този блог трябваше да го коментирам нарочно. От какво зависи, трудно е да се каже. Ето какво се случи в крайна сметка.

Като цяло, Background Manager е страхотен плъгин, който ви позволява да показвате различни снимкиза фон на вашия сайт и дори да правите слайдшоу от тях. За някои проекти това може да бъде чудесен "декоративен" елемент.

Що се отнася до връзките от фона в Background Manager.В настройките има подобна опция и можете да посочите връзка към всяка снимка. Тествах тази функцияи изглежда, че всичко работи по време на писането. Сега обаче има проблеми с това. Единственото нещо, което можеше да се направи, беше да се постави връзката специален елемент- вижте иконата [+] на екранната снимка по-горе. Тази функция на приставката работи без проблеми.

Днес в моята практика се натъкнах на факта, че за фон на менюто беше необходимо да се постави прозрачност. Имаше вариант, разбира се, това да стане с помощта на picture.png, но все пак реших да се разровя и да направя полупрозрачен фон с използвайки CSS . Оказа се доста лесно :)

В html кода записваме "класа", за който е необходимо да зададем определена прозрачност:

FON (фон: rgba(200, 54, 54, 0.5); )

по този начин посочих цвета на фона, като зададох стойностите за трите основни цвята (червено - r, зелено - ж, син - b) и прозрачност на фона 50% (алфа - а) с едно свойство. Стойностите за цвят са посочени в диапазона от 0 до 255, а за прозрачност диапазонът ще бъде от 0,0 до 1,0

Имот rgbaприложимо и за всички други елементи. Но ако стане необходимо да зададете прозрачност за всички елементи в този клас, тогава можете да използвате свойството непрозрачност, който задава прозрачност за цял елемент или цялата страница. тогава кодът ще изглежда така:

FON (непрозрачност: 0,5; )

В този случай всички елементи в този клас ще станат прозрачни, включително изображенията и текстът ще бъдат прозрачни.

Абонирайте се и получавайте полезни статиипо поща!

Други страхотни статии в нашия блог

• Знам, че на практика често има такава ситуация, че собственикът на сайта "преработва" или създава сайта "от нулата" няколко пъти и в крайна сметка не получава желания резултат. При това трябва...
• Партньорско съдържание! Чрез постоянен фокус търсачкидиректно на интернет потребителя и индикатори последни актуализации Алгоритми на Google, за собствениците на сайтове стана още по-важно да обръщат внимание на скоростта на зареждане...
• Вижте, ако имате задачата да "разработите уебсайт до ключ" - последвайте този линк и делегирайте задачата на нас. Ако имате нужда от пример за техническа задача - вижте статията "TOR за създаване ...
• Партньорско съдържание! - Искате ли да публикуваме вашата статия? За много собственици на уебсайтове SEO изглежда е много предизвикателна задача. Всъщност това не е вярно. Наемането на висококвалифицирани специалисти за популяризиране може да бъде много...