Рубрика: Gutenberg

По умолчанию (сразу после установки чистой версии) в WordPress, в его редакторе блоков Gutenberg мы можем наблюдать давно желанную функцию увеличения изображения по клику без перенаправления, то есть оставаясь на той-же странице.

Добиться этого можно путём выделения нужного изображения и клика по ссылке. Учтите, что выбрав блок Медиа и Текст вы не обнаружите эту возможность (проверял на версии: 6.5.3), вам будет доступно только прикрепления оригинала изображения.

Ниже вы можете наблюдать последовательность прикрепления файла изображения к его миниатюре:

После этого оригинал изображения будет открываться по клику на миниатюру.

Как открывать изображения в лайтбоксе (всплывающее окно)?

Этот трюк, вернее эта возможность доступна с одиночным медиафайлом. Вот я вставляю в контент страницы картинку-миниатюру и повторяю те же самые действия: вначале выделяю её, а потом кликаю на иконку закрепления за этим изображением ссылки

И вот тут-то мы можем наблюдать нужную нам функцию! Она называется Развернуть при нажатии

Выбрав её, наше изображение будет открываться во всплывающем окне, тем самым не перескакивая со страницы на отдельный URL, об этом свидетельствует «крестик» при помощи которого мы можем свернуть обратно наше изображение

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

И уже с его помощью реализовать задуманное. Оба изображения из примера ниже будут открываться в лайтбоксе.

Как открывать фото из галереи в лайтбоксе?

Теперь рассмотрим ещё один пример на основе галереи. Вначале добавим блок Галереи на нашу страницу:

После этого загрузим (или выберем из библиотеки файлов) нужные нам изображения и выделив всю галерею справа в её настройках укажем в качестве ссылки Медиафайл.

Что получится? Да то же самое что и в самом первом случае — изображения будут открываться в новых URL . Чтобы задействовать наш лайтбокс нужно присвоить эту функцию каждому изображению в галереи:

Теперь изображения миниатюр галереи будут открываться в лайтбоксе.

В режиме редактирования Записи или Страницы добавьте новый блок:

В строке поиска напишите запрос «Кнопки»

После добавления блока на страницу напишите название кнопки которое будет отображаться, например, «Отправить сообщение», «Написать нам WhatsApp» и т.п.

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

А в разделе справа, когда наш блок выделен, нам доступны его дополнительные настройки. В первой вкладке мы можем задать ширину нашей кнопки.

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

Этот блок имеет множество настроек, с помощью которых мы можем придать уникальности (кастомизации) нашей кнопке

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

Как задать ссылку кнопке?

В момент выделения кнопки, когда нам доступна панель её настроек, выбираем ссылку внутри страниц сайта или указываем произвольно

Как присвоить кнопке ID?

в момент выделения блока кнопки во вкладке настроек блока откройте раздел Дополнительно. Далее в поле HTML-якорь внесите какое-то название на латинице — оно то и будет служить в качестве идентификатора этого элемента.

А вот и результат нашей работы. Кнопка с заливкой по контуру с ссылкой на группу во ВК и с присвоенным идентификатором элементу: