Следующая статья поможет вам: Новый редактор блоков Гутенберга
Интересно, скоро ли компании и разработчики, занимающиеся веб-дизайном, перейдут от макета к живой странице без написания собственного шаблона для каждого варианта макета на веб-сайте? Уйдут ли дорогие и медленные плагины для создания страниц в прошлое?
В этой статье мы рассмотрим некоторые функции, которые придают редактору WordPress Gutenberg гибкость, необходимую для создания сложных современных макетов веб-сайтов. Но прежде чем мы перейдем к этому, это поможет понять, почему WordPress нуждается в таком большом количестве встроенных возможностей редактирования.
Почему
По умолчанию WordPress может публиковать блог, который состоит из статей (также называемых сообщениями), расположенных в обратном хронологическом порядке и предназначенных для своевременного размещения. WordPress по умолчанию также публикует страницы: отдельные фрагменты контента, имеющие более постоянный характер и разграниченные больше по теме, чем по времени. WordPress предоставляет вам записи в блогах и страницы веб-сайтов, а также интерфейс для управления ими, не требующий дополнительного программного обеспечения или навыков программирования. Сделать все это – немалый подвиг.
И это здорово. За исключением того, что мы хотим большего. Нам часто нужно больше. На самом деле, чтобы вещи выглядели хорошо, важно не только эстетично. Мы не придирчивы, не причудливы и не преувеличены. В большинстве случаев веб-сайт должен хорошо выглядеть, чтобы конкурировать на рынке.
Веб-дизайнеры знают, что у каждой компании есть уникальное послание, и ее веб-сайт должен быть адаптирован так, чтобы точно выражать это послание, что практически невозможно без специального шаблона веб-дизайна, созданного разработчиком.
Не так давно вы наняли программиста, если хотите включить в свой веб-дизайн WordPress нечто большее, чем просто абзацы и маркеры. Или, как и я, вы получили книгу об HTML и засучили рукава.
Введите Drag-N-Drop Page Builders — плагины, созданные для обеспечения расширенного контроля над отображением контента без написания кода. Это почти устранило выбор между CMS и конструктором веб-сайтов — теперь ваша CMS может работать как в обоих случаях.
Хотя некоторые из них чрезвычайно впечатляют, у них есть несколько недостатков. Во-первых, они, как правило, стоят денег. А некоторым из них требуется больше денег для расширения поддержки и обновлений.
Во-вторых, они не являются собственным кодом WordPress и должны активно поддерживаться разработчиками на протяжении всего срока службы вашего веб-сайта WordPress. Если плагин не может быть обновлен, то в какой-то момент его следует удалить из соображений безопасности. И если вы удалите построитель страниц, велика вероятность, что ваш контент будет отображаться как гигантский кусок неформатированного текста, усеянный огромным количеством видимого кода построителя страниц.
В-третьих, конструкторы страниц загружают большое количество скриптов и ресурсов, которые иногда могут замедлить работу вашего сайта. Улучшение времени загрузки веб-сайта может оказаться утомительной задачей, и гораздо проще вообще избежать раздутого и медленного веб-сайта.
WordPress развивался с течением времени и будет продолжать это делать. Добавлены новые функции, упрощающие публикацию, а также множество других усовершенствований.
Теперь WordPress должен конкурировать с Wix, Squarespace и другими инновациями в области управления контентом. Хотя исходный редактор WordPress (TinyMCE) мог выполнять рутинные задачи по форматированию контента, все, что выходило за рамки этого, требовало кодирования HTML либо вручную в текстовом редакторе, либо в самом шаблоне страницы.
Гутенберг решает проблему отсутствия расширенного отображения контента в предыдущем редакторе. Хотя в нем еще нет всего, что включено в типичный плагин для создания страниц, его уже может быть достаточно для достижения ваших целей без дополнительных затрат на плагин. И, как вы уже догадались, уже доступно множество плагинов для улучшения Гутенберга.
Переходим к самому интересному
WordPress усердно обновляет Гутенберг с момента его первого выпуска. Чтобы использовать последнюю версию редактора Gutenberg WordPress, вы можете установить автономный плагин Gutenberg, который обновляется чаще, чем базовая версия WordPress. WordPress 5.3 выйдет в ноябре 2019 года и, как ожидается, будет включать в себя все улучшения редактора вплоть до версии 6.5.
Учебное пособие по WordPress Гутенбергу
Вот некоторые функции, которые позволяют нам создавать практически любой макет, который вы можете себе представить, без программирования.
Многоразовые блоки
Многоразовый что-либо это основной ярлык в разработке веб-сайтов. Повторное использование одного и того же фрагмента кода почти гарантирует единообразный внешний вид во внешнем интерфейсе. С Гутенбергом вы можете легко хранить блоки, которые вам снова понадобятся, как многоразовые блоки.
Например, вот как сохранить контактную форму, которую вы, возможно, захотите быстро перенести на страницы позже.
- Встроить форму в блок
- Выберите «Добавить в повторно используемые блоки».
- Дайте ему имя
- Используйте его повторно где угодно, открыв Reusable.
Чтобы создать многоразовый блок, выполните следующие четыре шага:
Групповой блок
Групповые блоки позволяют создавать разделы контента, состоящие из нескольких типов контента, и повторно использовать их в качестве повторно используемых блоков. Эта функция является ключевой для обновления WordPress с возможностями плагинов для создания страниц, которые могут отображать практически любое расположение адаптивных столбцов, содержащих все мыслимые типы контента.
Чтобы создать групповой блок, найдите значок группы в элементах макета:
Внутри группового блока вы можете вкладывать столбцы. В столбцы вы можете вставлять любые элементы контента, пока не создадите элемент или раздел страницы. Если вы сохраните новую группу как многоразовый блок, вы сможете переместить ее на любую страницу или публикацию на своем веб-сайте. И все будет отзывчиво отображаться на мобильных устройствах без добавления сложного CSS, который вам в противном случае понадобится.
Я создал групповой блок полной ширины, в котором текст отображается в столбце ⅓, а YouTube видео в ⅔ столбца справа, используя только Гутенберг. Все, что мне было нужно, помимо WordPress, — это URL-адрес YouTube видео, мне не нужно было брать полный код для встраивания из YouTube.
Выполните следующие шаги, чтобы создать этот групповой блок:
1. Добавьте групповой блок из параметров макета.
2. Добавьте столбцы
Добавьте несколько столбцов и выберите расположение столбцов: одна треть, две трети. Позже при желании вы сможете точно настроить ширину столбца с помощью ползунка ширины столбца.
3. Добавьте контент
Добавьте элементы контента: заголовок и абзац в левом столбце, а также YouTube видео справа. Нажмите «Встроить» после вставки URL-адреса.
4. Выравнивание
После этого в вашем редакторе вы увидите что-то вроде этого:
Теперь переходим к настройке вертикального и горизонтального выравнивания и полной ширины. Здесь поможет небольшая практика. Вскоре вы сможете быстро выбирать нужные элементы, просто сначала наберитесь терпения.
По умолчанию содержимое внутри столбцов выравнивается по верхнему краю. Но мы хотим, чтобы текст располагался по вертикальной середине видео.
5. Линии-разделители
Щелкните в любом месте группы, чтобы увидеть линии-разделители. Затем наведите указатель мыши на верхние левые углы разделителей, пока не увидите серую вкладку группы «Столбцы», и щелкните серую угловую вкладку.
6. Больше согласованности
Перейдя на вкладку, вы увидите, где настроить вертикальное выравнивание. Выбирайте средний. Вы можете использовать тот же процесс для вертикального выравнивания каждого столбца отдельно.
Теперь мы можем увидеть желаемое выравнивание:
7. Цвета блоков
Установка цвета и ширины группового блока:
Нажатие на крайний разделитель (группа) позволит вам установить цвет фона для всего группового блока. Выберите темно-синий или любой другой цвет, который вам нравится. Заголовок и текст мгновенно изменятся на светлый или темный цвет в зависимости от фона:
8. Ширина столбца
Затем еще раз щелкните разделитель группы и выберите средний значок, чтобы настроить отображение группы на всю ширину:
9. Выравнивание заголовка
Вам также потребуется установить заголовок и текст в левом столбце с выравниванием по правому краю. Видео заполнит правый столбец, поэтому горизонтальное выравнивание справа не имеет решающего значения, но при необходимости вы можете установить его слева, справа или посередине.
10. Сохранить сс для повторного использования
Затем, наконец, сохраните свой блок как многоразовый блок:
11. Празднуйте
Сделайте что-нибудь приятное для себя. Ты заслуживаешь это.
Позвольте WIX заняться вашим веб-дизайном!
Ваше время ценно, и догадки об изменениях на веб-сайте могут привести к пустой трате времени и денег. Предприятия Техаса могут доверить компании веб-дизайна в Хьюстоне или Остине создание и поддержку высококачественного веб-сайта.
МАРИОН имеет почти 40-летний опыт помощи компаниям из Техаса в развитии своего бренда. Свяжитесь с нами сегодня, чтобы назначить бесплатную консультацию и посмотрите, как мы можем помочь удовлетворить ваши потребности!
