Шаблоны страниц wordpress
В тренде

Как создать профессиональный шаблон страницы в WordPress?

Пожалуй нет главнее причины, не создать привлекательный вид сайта, чтобы понравился с первого взгляда и не исчезло желание провести больше времени на нем. В этом уроке мы узнаем как создать профессиональный шаблон страницы в WordPress? А затем уже её сделать домашней страницей сайта.

Обзор компоновщика страниц в теме Jannah


Разработчики Page Builder предлагают самый простой и мощный конструктор страниц, где за менее чем 5 минут вы сможете создать свою собственную домашнюю страницу, причём с минимальными усилиями. Конструктор позволяет добавлять неограниченное количество разделов с неограниченным количеством блоков внутри разделов. Вы также можете сортировать разделы и блоки по своему усмотрению как захотите.

шаблон страницы в WordPress

1. Самый первый шаг


1.1 В редакторе блоков (Gutenberg)


шаблон страницы в WordPress

1.2 В классическом редакторе


шаблон страницы в WordPress

Нажмите кнопку «Use the TieLabs Builder», чтобы преобразовать обычную страницу в нашу сборку. И тогда вы будете готовы добавлять свои новые разделы и блоки.

2. Добавление новой секции


профессиональный шаблон страницы в WordPress

Нажмите кнопку + Add Section, чтобы добавить свой первый новый раздел. Окно секции будет выглядеть следующим образом:

профессиональный шаблон страницы в WordPress

  • 1. Section Title — с помощью этой опции вы можете установить заголовок раздела.
  • 2. Section Width — выберите ширину контента сайта или оставьте 100%.
  • 3. Sidebar Settings — выберите шаблон секции: без боковой панели, с правой боковой или с левой боковой панелью.
  • 4. Sticky Sidebar — выберите это, если хотите перевести сайд бар этого раздела в режим Прилипания.

2.1 Заголовок секции

профессиональный шаблон страницы в WordPress

  • 1. Section Title  — поле, которое вы вводите, будет отображаться выше раздела.
  • 2. Title URL — установите URL заголовка раздела, оставьте это поле пустым, если его нет.
  • 3. Title Style — выберите один из трех доступных стилей:

стили заголовков

2.2 Фон секции

профессиональный шаблон страницы в WordPress

  • 1. Background Color — установите цвет фона раздела.
  • 2. Background Image  — выберите / загрузите картинку в качестве фонового изображения в этот раздел
  • 3. Background Video — Youtube, Vimeo или локальный URL-адрес видео. URL-адрес видео переопределяет параметр фонового изображения.
  • 4. Parallax — включить / отключить эффект параллакса на фоне.
  • 5. Parallax effect — выберите один из пяти доступных эффектов: Scroll, Scall, Opacity, Scroll+Opacity or Scall+Opacity.

2.3 Стиль секции

стиль раздела секции

  • 1. Dark Skin — отображать все блоки внутри этого раздела в темном виде вместо светлого по умолчанию.
  • 2. Custom Class — установите пользовательский класс для этого раздела, если вы хотите больше настроек.
  • 3. Margin Top — если вы хотите больше отступа над разделом.
  • 4. Margin Bottom — если вы хотите больше отступа под разделом.
Чтобы закрыть окно, надо нажать кнопку «Done» в правом верхнем углу. Это делайте всегда по окончании любого редактирования секции.

стиль раздела секции

Вы можете Редактировать, Удалять, Развернуть или Свернуть раздел.

3. Добавление нового блока


добавление нового блока

После завершения настройки секции (раздела) оно будет отображаться так, как показано на рисунке выше, там же появится кнопка Add Block. Нажмите на эту кнопку  и у вас возникнет окно, выглядящее следующим образом:

профессиональные блоки раздела

Вы можете выбрать какие хотите блоки из этого разнообразия новостных картинок. Каждый блок сделан с большим упором на содержание новостных сайтов, так что они в большей мере покроют все ваши потребности в привлечении внимания.

3.1 Параметры блоков

параметры блоков секции

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

2. Block Title — заголовок, который будет отображаться над блоком, оставьте его пустым, чтобы скрыть его.

3. Block URL — введите его, если вы хотите, чтобы был пользовательский URL к заголовку блока.

4. Categories — Выберите нужные категории в этом блоке, это множественный выбор.

5. Tags — можно отображать новости по тегам, а не по категориям, эта опция переопределяет параметры категорий.

6. Exclude Posts — введите идентификаторы постов, разделяя их запятой, чтобы исключить их.

7. Sort Order— сортировка постов в блоке по одному из шести доступных значений:

  • Недавние посты
  • Случайные посты
  • Последние измененные посты
  • Самые комментируемые посты
  • Самые популярные посты
  • Лучшие обзоры

8. Number of the posts to show — Количество постов для отображения

9. Offset — количество сообщений, которое нужно пропустить, это очень полезно, если вы хотите отобразить некоторые сообщения из определенной категории в определенном блоке, а другие сообщения — в другом блоке.

10 Pagination — выберите одну из четырех доступных страниц:

пагинация записей

3.2 Блок дополнительных параметров

блок дополнительных параметров

1. Show the content Only — отображать чистый блок без рамки, отступов и фона.

2. Ajax Filters — отображать фильтры категорий / тегов рядом с заголовком блока.

3. More Button — когда вы устанавливаете URL для заголовка, вы можете захотеть отображать кнопку «More» рядом с заголовком, отметьте это, если захотите. Не отображается, если поле URL пустое.

4. Color — блокировать основной цвет заголовка, ссылки при наведении курсора, дополнительные кнопки, значки загрузки и т. д.

5. Post title length — количество слов или символов заголовка после поиска на сайте в теме Jannah для Trim Text by. Вы выбирает обрезать по словам или по символам.

6. Post Excerpt — показать / скрыть отрывок поста.

7. Post Excerpt Length — количество слов или символов поста после поиска на сайте в теме Jannah для Trim Text by. Вы выбирает обрезать по словам или по символам.

8. Read More Button — показать / скрыть кнопку «Читать подробнее» ниже отрывка.

9. Dark Skin — показывать блок в темном виде.

10. Hide Thumbnails — показать / скрыть все миниатюры в блоке.

11. Post Meta — показать / скрыть метаданные записи (дата, автор, количество просмотров и т. д.)

12. Media icon overlay — показать / скрыть значки мультимедиа (видео, аудио и изображения) над миниатюрами записей.

4. Пересортировка разделов и блоков


Вы можете в любой момент пересортировать разделы и блоки, перетаскивая каждый из них. И вы даже можете переместить блок из одного раздела (секции) в другой раздел.

сортировка блоков

5. Управление секцией Виджеты


Если секция, раздел имеет макет с сайдбаром слева или справа, то она,в области раздела, будет отображаться  следующим образом:

секция виджеты

Кликните на кнопку «Manage Widgets», откроется окно «Виджеты» со следующими миниатюрами:

настройка секции виджетов

Вы можете перетаскивать виджеты в область Section Widgets Area.

Если вы хотите выбрать один из предустановленных сайбаров, сделайте следующее:

настройка виджетов

  1. Отметьте предустановленный сайдбар. После этого все виджеты будут скрыты, и появится раскрывающийся список « Choose Sidebar».
  2. Choose Sidebarь — выберите нужный сайдбар из предустановленных.

6. Настройка вашей домашней страницы


Вы можете установить любую страницу в качестве главной страницы вашего сайта двумя способами:

6.1 Прямо со страницы

установка домашней страницы

6.2 Со страницы настройки WordPress

Как это сделать изучайте подробнее здесь.

Как организованы новостные блоки в WordPres теме Jannah? изучаем по этой ссылке.

Общий рейтинг записи

Общий дизайн - 8.7
Качество контента - 9.7
Картинки - 9
Дружелюбность - 8.3

8.9

Итоговая оценка

Поставьте и вы свою оценку поста 🙂

Лучшие новостные темы для wordpress сайта
User Rating: 5 ( 1 votes)
Тэги
Показать больше

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Close
Close