Искате ли да научите как да персонализирате WordPress тема с плъгина Elementor?
Персонализирането на вашата WordPress тема е една от основните задачи при изграждането на уебсайтове на WordPress. Тъй като тя контролира дизайна на уебсайт, именно тук много специалисти прекарват по-голямата част от времето си.
Създаването на персонализирана тема на WordPress обикновено включва работа с файловете с теми и редактор на код. Промените в оформлението се случват в шаблонови файлове, промени в дизайна чрез CSS. Освен това ще трябва непрекъснато да опреснявате прозореца на браузъра, за да показвате вашите персонализации, които могат да бъдат малко тромави.
За щастие, с Elementor, този процес става изключително лесен, така че може да искате да го проверите.
Но преди това нека да открием заедно Как да инсталирате WordPress Блог в 7 Стъпки et Как да се намери, инсталиране и активиране на WordPress тема на вашия блог.
След това, обратно към защо сме тук.
Какво е тема на WordPress
Темата на WordPress по същество е колекция от шаблони, които определят визуалния облик на уебсайт на WordPress.
Темата на WordPress обхваща всичко, което влияе върху дизайна на уебсайт, от заглавки и колонтитули до цветова схема, оформление и други.
Налични са много теми, както безплатни, така и първокласни, които отговарят на почти всяка индустрия уебсайтове за фотография, уебсайтове за фитнес клуб, уебсайтове за фризьорски салон, юридически сайтове, и много други.
Защо да персонализирате тема на WordPress?
Една от основните причини за създаването на уебсайт е популяризирането на вашия бизнес. Какъв по-добър начин да направите това от създаването на уникален уебсайт, който представя стила и дизайна на вашата компания?
Можете ли да си представите Amazon, eBay или Google като това, което са, без техния уникален дизайн?
Разбира се, че не и това е една от причините да искаме да персонализираме тема на WordPress. Искаме да го направим уникален и да се адаптираме към посланието на нашата компания.
Също така понякога, или по-скоро, често се натъквате на тема WordPress, която е поразена от лош дизайн, цветове, които не вървят добре заедно, или тема, която е твърде тежка и влияе само върху работата на сайта. уеб. Темата на WordPress може да бъде мощна, с изключение на онова нещо, което ви притеснява. Персонализирайте го и променете това нещо може да реши всичките ви проблеми и да създадете по-добро потребителско изживяване.
Как да персонализирате тема на WordPress
Има няколко метода за персонализиране на тема на WordPress.
- Ръчно, чрез персонализатора на WordPress
- С код
- С Elementor
Как ръчно да персонализирате тема на WordPress
Можете да персонализирате избраната от вас WordPress тема, като използвате вградения WordPress Customizer. Ако направите това без код, често сте ограничени в това, което можете да промените. Някои премиум WordPress теми предлагат повече опции за персонализиране, но не предлагат много опции за дизайн.
Преди да се потопим по-дълбоко в тази област, бихме искали да отбележим, че когато персонализирате съществуваща тема на WordPress, най-добре е да използвате детска тема, а не темата за родителите.
WordPress детска тема
Детска тема е тема на WordPress, която има точно същите функции и характеристики на друга тема на WordPress, родителската тема. Детската тема се използва за безопасно персонализиране и промяна на темата, без да се засяга темата на родителя и без да се губи възможността за актуализиране.
WordPress персонализатор на тема
Затова сега, когато знаем, че е най-добре да работим с детска тема, нека научим как да персонализирате тема с WordPress Customizer. За достъп до него отидете на таблото си за управление, кликнете върху Apparence от лявата страна и изберете Персонализиране.
Основните функции, които можете да променяте с този персонализатор, са следните:
Добавяне на заглавие, лого и икона на уебсайт
За да добавите или промените заглавието, логото или иконата си, можете просто да отидете на панела за идентичност на уебсайта. и изберете всеки от тези елементи, за да ги модифицирате.
Промяна на цветовете на темата на WordPress
Някои WordPress теми ви позволяват да променяте цветовите им схеми, но не всички, и това обикновено са премиум WordPress теми. Ако вашата WordPress тема ви позволява да променяте цветовата схема, ще видите тази опция, когато получите достъп до персонализатора.
Добавени навигационни менюта
Персонализаторът също така ви позволява лесно да добавяте и променяте навигационните менюта на уебсайта си.
Как да персонализирате тема на WordPress с код
Ще забележите, че в раздела Външен вид имате възможност да изберете редактор на теми. Щракването върху него ще ви посрещне с прозорец с кода на темата. Тази опция изисква добро разбиране на CSS кодирането и не се препоръчва за начинаещи.
Тук ще имате достъп до файлове като style.css, функции.php, и точно за този сценарий ще ви е необходима детска тема, за да не разбиете уебсайта си.
Другият начин да персонализирате темата си чрез кодиране е да качвате файлове с помощта на FTP решение. Процесът включва създаване на FTP идентификационни данни чрез вашия доставчик на хостинг, изтегляне и инсталиране на FTP решение (като FileZilla), влизане в акаунта и редактиране на вашите файлове, които след това ще качвате през същия. FTP решение.
Открийте нашето ръководство за Как да инсталирате WordPress с FileZilla
Освен ако не сте запознати с кодирането, не препоръчваме тази опция.
Персонализирайте темата на WordPress лесно с Elementor
Можете да направите това директно от потребителския интерфейс. Не е необходимо дори веднъж да сменяте един ред код или да презареждате прозорец на браузъра.
Elementor ви позволява да променяте всеки елемент на уебсайта бързо и лесно с няколко клика на мишката и дори можете да оптимизирате тези функции за мобилната платформа.
Elementor улеснява този процес чрез използване на динамично съдържание и ви позволява да преглеждате страниците си. По този начин можете веднага да видите как промените в дизайна ще се отразят на вашия действителен уебсайт и съдържание.
Персонализирайте заглавката и долния колонтитул
Elementor ви позволява пълна гъвкавост, когато става въпрос за проектиране на вашите колонтитули и колонтитули. Всички знаем колко скучно може да бъде, че имате тема на WordPress и не можете да промените нито един аспект от дизайна на заглавката или долния колонтитул. Имате нужда от специализирани теми, плъгини и т.н.
С Elementor е лесно.
1. Създайте шаблон на заглавката
Първо конфигурирайте нов шаблон на заглавката. За да направите това, отидете на Elementor> Моите шаблони.
Тук един начин да започнете е да натиснете бутона Добавяне на ново в горната част. В следващия екран използвайте падащото меню, за да изберете Header като вид на шаблона за проектиране.
Можете също да стигнете до този екран, като щракнете върху раздела Header от предишния екран и след това натиснете големия зелен бутон, който се появява.
Тя предварително ще избере заглавката като тип шаблон. Така или иначе трябва да добавите подходящо име за шаблона (за да знаете какво е по-късно) и след това да продължите, като щракнете върху Създаване на шаблон.
Ще ви докара тук.
С Elementor Pro можете да избирате от предварително проектирани заглавни блокове. Това са шаблони за дизайн, които можете да използвате като отправна точка за вашия собствен дизайн, което ще направим в този случай.
Когато задържите курсора на мишката върху заглавен блок, щракнете върху Поставете ви позволява да започнете да го проектирате веднага. В противен случай щракнете първо върху изображението, за да видите по-голяма версия. Тогава винаги можете да натиснете Поставете на върха.
В противен случай, ако искате да започнете от нулата, просто затворете прозореца, като щракнете X в горния десен ъгъл.
2. Променете основния дизайн на заглавката
След като въведете новия заглавие, първото нещо, което ще забележите, е, че логото и менюто, които конфигурирахме по-рано, вече са там.
Това е точно причината да ги съберем и ще говорим как да ги персонализираме. Все пак, нека първо да видим как да персонализирате самата секция на заглавката.
За да направите това, просто задръжте курсора на мишката върху него и щракнете върху бутона за редактиране в горната част. Това отваря списък с опции за редактиране вляво.
Ето какво можете да контролирате в различните менюта:
- Разпределение - Контролирайте ширината на секцията, размера на пространството между колоните, нейната височина, вертикално позициониране на колона и съдържание, присвоен HTML таг и обща структура.
- Стил - Тук можете да промените цвета на фона, включително Hover ефектидори добавете изображение или видео ако искате, добавете ефекти на наслагване, граница и разделител, както и променете настройките на типографията.
- avanced - Тази част ви позволява да добавяте CSS атрибути като margin и z индекс, анимации, идентификатори и класове. Той също така ви позволява да направите секцията лепкава и да контролирате настройките отзивчиви, както и да добавите някои Персонализиран CSS.
Всичко по-горе е доста обясняващо и бързо ще получите това, което искате.
3. Персонализирайте елементите на заглавката
Можете обаче да редактирате не само заглавната част като цяло, но и елементите, включени в нея. Например, за да персонализирате логото на уебсайта, просто кликнете върху него. Това също ще ви осигури опции за редактиране отляво.
В случая с логото това ви дава следните опции:
- съдържание - Променете размера на изображението, подравняването и мястото, към което е свързано.
- Стил - Контролирайте ширината и височината, добавете CSS ефекти и ховър ефекти, включете рамка и сянка, ако искате.
- avanced - Тук ще намерите по същество същите опции като за секцията на заглавката.
Използвайте настройките, за да персонализирате логото по желания от вас начин, така че да се показва правилно в заглавката. Също така имайте предвид, че всеки артикул има свой тип опции, така че не забравяйте да проверите всеки от тях.
4. Добавете елементи
Разбира се, с Elementor можете да добавяте елементи и в заглавката. Просто кликнете върху символа горе вдясно, за да видите какво е на разположение.
Когато редактирате шаблон на заглавието, Elementor автоматично показва съответните блокове в горната част на списъка, което има най-голям смисъл при обстоятелствата. В този случай това са неща като логото на уебсайта, навигационното меню и заглавието на уебсайта.
Така например, ако искате да добавите заглавието на уебсайта до логото, просто го плъзнете и пуснете върху него. Въпреки това шаблонът на заглавката, който сме избрали в момента, ни позволява да го добавим над или под логото. Но, това е проблем, който лесно ще бъде решен.
В такъв случай задръжте курсора на мишката върху заглавката и използвайте символа плюс-минус.+-да добавите раздел по-горе.
Кликнете тук върху лилавия бутон, за да изберете дизайн с три колони.
След това плъзнете елементите от съществуващата секция на заглавката в новата секция и добавете заглавието на уебсайта в средата.
Но чакайте, стилът е напълно различен! няма проблем. Просто кликнете с десния бутон на мишката върху съществуващия заглав и изберете Копие. След това кликнете с десния бутон върху новата секция и кликнете тук на Стил за поставяне. След това Elementor ще приложи стила на съществуващия раздел, който можете да затворите по-късно.
Можете да направите същия процес с всеки от другите елементи на заглавието и, разбира се, с всички останали елементи, включени в Elementor.
Персонализирайте уникален шаблон за публикации
В Elementor можете също да персонализирате шаблон за един пост. Ето как :
1. Създайте нов модел
Създаването на шаблон работи по обичайния начин. Въпреки това, този път изберете единичен като тип модел. След това по-долу изберете уникалния шаблон, който искате да редактирате. В този пример този на пост.
Ако искате да създадете нов дизайн на страницата, редактирайте своята страница 404 (повече за това по-късно) или редактирайте персонализиран тип публикация по-специално, вие бихте избрали нещо друго. И в двата случая въведете име и продължете.
На следващия екран можете да избирате от предварително зададените шаблони, както обикновено. В този случай обаче искаме да създадем нов модел от нулата. Така че кликнете върху X в горния десен ъгъл, за да затворите този прозорец.
2. Конфигурирайте визуализацията
След това задайте прозореца за визуализация на съществуващ пост. Можете да направите това, като кликнете върху иконата на окото в долната част на опциите за редактор, след това Настройки.
В менюто, което се отваря, под Предварителен преглед динамично съдържание, изберете Публикуване. След това в следващия ред можете да търсите и да изберете съществуваща публикация по име.
След като направите това, докоснете Кандидатствай & Предварителен преглед, Въпреки че в този момент няма да можете да видите нищо (тъй като няма нищо на страницата), той ще каже на Elementor да използва данните в тази публикация оттук нататък. Скоро ще видите какво означава това.
3. Нека създадем секцията по-горе
Първо ще създадем секцията по-горе. Тук обикновено ще намерите неща като заглавието на публикацията и метаданните като автор, дата и категория.
Първата стъпка е да кликнете върху знака + и създаване на отделна колонна секция.
Когато го направите, в секцията за оформление имате възможност да контролирате неговата ширина, височина, позициониране и стил. В този случай тук няма какво да се направи. Освен това, не се притеснявайте, винаги можете да се върнете и да направите промени по-късно.
След това плъзнете джаджа за заглавие на публикацията в новата секция.
Когато го направите, не забравяйте да използвате всички налични опции, за да коригирате дизайна и оформлението по ваш вкус. Например, тук са моите настройки за това:
Има и една интересна функция, за която си струва да научите. Когато щракнете върху символа на ключ в заглавието на публикацията, можете да добавяте статично съдържание преди и след динамичните си данни.
Например, ако създадете шаблон за определена категория публикации като Новини или Рецепти, можете да го добавите към заглавието на публикацията по този начин:
По този начин тези данни ще се показват за всеки пост в тази категория. В този момент няма да използвам това, но помислих, че това е важна странична бележка за вас.
Под заглавието на публикацията ще вмъкнем пост Информация джаджа за да видите метаданните на публикацията.
Ето настройките, които използвам:
Освен това използвах опциите за стилизиране, за да направя дизайна да пасва на останалата част от страницата. Уверете се, че правите същото.
4. Настройте тялото на публикацията
След заглавката е време да създадете тялото на страницата. Ако искате тази част да има различен дизайн от заглавката, ще трябва да създадете нов раздел. Аз обаче се старая да опростя нещата, така че няма нужда да правите това.
Първото нещо, което искаме да вмъкнем, е представеното изображение. За това можете да поставите приспособлението със същото име под това, което вече е на страницата.
По същество не промених никакви настройки, а просто оставих всичко както си беше.
Тогава е време съдържанието да публикува. И тук имате съответен блок.
Ще забележите, че за представено съдържание и публикуване на съдържание, Elementor автоматично изтегля това, което вече е на уебсайта. Направете всякакви корекции в дизайна на новия блок, от който се нуждаете, например игра с типографските настройки.
Освен всичко това е всичко. Тук не се работи много, за да можем да преминем към последната част.
5. Конфигурирайте долния колонтитул
В този случай искаме долният колонтитул да показва профила на автора, опциите за споделяне и коментарите на читателите. За да направите това, на първо място, трябва да създадем нов раздел с две колони. За да създадете повече пространство за авторския профил, можете да го зададете на 66.33 оформление.
След това поставете джаджата Авторска кутия в лявата секция.
Не забравяйте да персонализирате стила според вашите нужди. Добавих малко цвят на фона и коригирах леко настройките на типографията.
След това е време да добавите блока Share Buttons от дясната страна.
Можете да видите настройките ми на екрана по-горе.
След това, всичко, което е останало, е да създадете секция още една колона надолу и да плъзнете и пуснете джаджата Post Comments в нея.
(Между другото, ако някога имате проблеми с намирането на някоя от тези джунджурии, просто използвайте функцията за търсене).
Направете всякакви корекции в секцията за коментари, която смятате за необходима (оставих я такава, каквато е) и сте готови да публикувате. Ето готовия дизайн:
Персонализирайте шаблона на архива
1. Конфигурирайте вашия архив WordPress шаблон
Вече знаете решението за създаване на нови модели. Единствената разлика е, че в този случай вие ще изберете Архив като тип модел.
След това, както обикновено, получавате редица блокове, от които можете да избирате, или можете също да създадете свой собствен модел от нулата. За архивите обаче имате приблизително само два джаджи Елемент, които така или иначе са важни.
2. Определете заглавието на архива
Първият блок, за който искам да говоря, е заглавието на архива Заглавие на архива.
В допълнение към обичайните настройки под Стил и разширени, можете да намерите важна опция, когато щракнете върху символа на ключ под Заглавие.
Тук можете да активирате и деактивирате дали Elementor показва типа на архива на страницата като частта, където пише Автор: по-долу. Това става чрез бутона под Включете контекста.
Между другото, както обикновено можете да визуализирате различни архиви, като използвате настройките за предварителен преглед (Символ на очите> Настройки). По този начин можете да видите дизайна на уникални категории, тагове, автори и други. Имай го предвид.
3. Използвайте блока за архивни публикации
Втората важна джаджа за архивите е Archive Posts. Това носи всички публикации, принадлежащи към всеки архив на една страница. Когато изберете шаблон, те вече са там, но можете също така лесно да ги добавите сами с този блок.
Нека да разгледаме опциите, които ви дава да персонализирате своите архивни страници:
- Кожа – Изберете да показвате публикациите си в класически или карточен дизайн.
- Колони - Определя броя на колоните, в които се показват вашите публикации.
- Покажи изображение - Активирайте представените изображения на архивни страници
- Зидария – Показва елементи в дизайн на зидария или не.
- Размер на снимката - Размерът на изображението, което Elementor трябва да използва на архивни страници.
- Заглавие - Искате ли да показвате заглавия на публикациите или не?
- HTML тагове за заглавие - Ако е така, какъв HTML таг трябва да бъде увит около него?
- Откъс - Включете откъси от публикациите си или покажете само заглавието.
- Дължина на откъса - Определете дължината на екстрактите.
- Metadata - Дефинира метаданните за публикация, достъпни за посетителите.
- Разделител между - Символ за разделяне между информация за метаданни.
- Прочетете повече - Включете линк „прочетете още“, да или не?
- значка - Позволява ви да добавяте повече информация към публикации, като категории и маркери.
- Таксономична значка - Тук можете да решите каква информация да включите.
- въплъщение - С това можете да промените профилната снимка на авторите на статии
В допълнение към горното имате още няколко възможности. при пейджър можете да определите как трябва да се обработва страници с архив. Например как да го покажете, броя на страниците, които да включите и подравняването на текста.
Enfin, Подробно ви позволява да настроите съобщението да се показва, когато посетител попадне на празен архив. Всичко останало трябва да е познато. Само имайте предвид, че опциите за стил се променят в зависимост от кожата, която сте избрали.
4. Контролирайте броя публикации в архив
Бърза бележка за шаблоните за архиви. За да промените броя публикации, които се появяват в архив (или на страницата ви в блога), трябва да го направите в WordPress под Настройки> Четене.
Тук просто въведете броя публикации, които искате да видят посетителите ви.
персонализация лесен Тема на WordPress с Elementor
Персонализирането на WordPress теми е хлябът и маслото на много професионалисти. Въпреки че това обикновено включва много кодиране и редактиране на файловете, с Elementor това вече не е необходимо.
Както видяхте по-горе, плъгинът е пълноправен редактор на теми за WordPress. Тя ви позволява да персонализирате всяка част от него от потребителския интерфейс. Можете да редактирате заглавката, долния колонтитул, шаблони на страници и публикации на уебсайта, архивни шаблони и други.
С възможността да използвате динамично съдържание и да визуализирате всяка част от вашия уеб сайт, можете да внедрите всички модерни персонализиране
Накратко, Elementor улеснява персонализирането на вашата WordPress тема. Вместо старателно да правите промени с десетки файлове и стотици редове код, можете бързо да го направите на едно място.
Вземете Elementor Pro сега!
Заключение
Това е всичко! С това завършва тази статия, която ви показва как да персонализирате WordPress тема с Elementor Page Builder. Ако имате някакви проблеми с разбирането, уведомете ни в коментарите. Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...