Страница "за нас" с нестандартен дизайн.

Ключови неща, които да запомните от този урок

Създаването на страница „За нас“ в WordPress позволява лесно и бързо редактиране и актуализиране на съдържанието, дори от хора без технически умения. Ползването на пейджбилдър (page builder) и различни джаджи (widgets) спестява нуждата от работа с HTML код и позволява визуално оформление на съдържанието. Преместването на подобна страница от HTML в WordPress улеснява екипната работа и повишава гъвкавостта при поддръжка.

Практическа задача: Стъпка по стъпка с WordPress 5

1. Отидете в администрацията на WordPress и създайте или редактирайте страница „За нас“ ("Pages" → „Страници“).
2. От шаблоните изберете такъв без странична лента ("Template"/"Шаблон" → "Full Width"/"Цяла широчина" или аналогичен).
3. Инсталирайте разширение за page builder (например SiteOrigin Page Builder) от менюто "Plugins" ("Разширения").
4. Активирайте page builder-a и редактирайте страницата с него.
5. Създайте ред (row) и след това три колони ("Add Row" → 3 Columns/"Добави ред" → 3 колони).
6. Във всеки "ред" добавете подходящ widget (например SiteOrigin Editor или Image) чрез бутона "Add Widget" ("Добави джаджа").
7. Добавете заглавия, текст и изображения във всяка от колоните с подходящия редактор.
8. Центрирайте съдържанието, редактирайте параграфите и използвайте предварително подготвени изображения (ползвайте "Add Media"/„Добави медия“ за качване на снимки).
9. Дублирайте редове и джаджи при нужда за допълнителни секции като "Платформа", "Иновации", "Екип", "Експерти" и др.
10. При необходимост превключете между визуалния и текстовия редактор, за да почиствате или коригирате допълнително форматиране.
11. Запишете промените с "Update" ("Обнови") и проверете как изглежда страницата чрез бутона "Preview" ("Преглед").

Задача стъпка по стъпка с WordPress 6 (най-нова версия)

Препоръчително е да използвате блоковия редактор (Gutenberg), който драстично подобрява визуалното редактиране и улеснява създаването на секции с колони:

1. Влезте в WordPress администрацията и създайте или редактирайте страница „За нас“ от менюто "Pages" ("Страници").
2. Изберете или създайте страница с шаблон "Full Width"/"Цяла широчина" (консултирайте се дали темата ви го поддържа).
3. В Gutenberg редактора добавете "Columns" ("Колони") блок, като изберете нужната подредба (например 3 колони).
4. Във всяка колона поставете блокове "Image" ("Изображение") и "Heading"/"Paragraph" ("Заглавие"/"Параграф").
5. Качете изображения директно през "Add Media"/"Добави медия" във всяка колона.
6. Центрирайте съдържанието с помощта на опциите в лентата с инструменти на съответния блок.
7. Дублирайте редове или колони, ако са нужни допълнителни секции (използвайте "Duplicate"/"Дублирай").
8. Коригирайте форматирането, като преминавате между визуален и код редактор, ако е необходимо.
9. Натиснете "Update" ("Обнови") за да запишете и "Preview" ("Преглед") за да видите как изглежда страницата.

Разлики спрямо WordPress 5:

• В WordPress 6 блоковият редактор (Gutenberg) е по-развит и позволява лесно изграждане на колони без нужда от инсталиране на допълнителни плъгини за layout.
• Интуитивните команди за дублиране, преместване и групиране на блокове спестяват време и улесняват оформлението.
• По-добра съвместимост с темите и визуалните настройки за ширина, фон и други оформления.

Полезни функции, които използвахме в урока

• Add Row / Добави ред – Добавя нов "ред" за съдържание в page builder редактора
• Add Widget / Добави джаджа – Поставя специфичен елемент (текстов редактор, изображение и др.) в избрана секция
• Duplicate / Дублирай – Прави копие на цял ред или отделна джаджа за бързо оформяне на подобни секции
• Add Media / Добави медия – Качва или избира изображения от медийната библиотека
• Update / Обнови – Запазва всички промени по страницата
• Preview / Преглед – Позволява да видите как изглежда страницата преди публичното ѝ публикуване

Вижте и още примери

Още една страница, която направихме бързо в WordPress: http://blog.aula.bg/kursove/