Рекомендации по применению Hero Images в Oxygen Builder

В этом учебном пособии представлены шаги по настройке избранного изображения - featured image (элемент img), чтобы оно отображалось в качестве фона главного раздела - hero section с заголовком и заголовком сообщения, а также информацией, наложенной (overlayed) на отдельные сообщения в Oxygen.

Видео на Rutube

Этот учебник также можно применять к отдельным страницам любого типа, а не только к сообщениям.

Шаг 1

Давайте зарегистрируем пользовательский размер изображения для рекомендуемых изображений, используя функцию add_image_size в WordPress.

Если вы хотите, чтобы изображения имели определенное соотношение сторон ширины к высоте, укажите значение высоты в add_image_size следующим образом:

Мы не используем файл function.php в шаблоне Вордпресс (тем более, Oxygen Builder отключает шаблон), а добавляем хуки через плагин Code Snippets.

С учетом этого вывод HTML, the_post_thumbnail( 'hero-1600' ) который мы собираемся использовать на следующем шаге, будет выглядеть примерно так:

Если вы хотите, чтобы рекомендуемые изображения сохраняли соотношение сторон, укажите 0 для значения высоты следующим образом:

С учетом этого вывод HTML, который мы собираемся использовать на следующем шаге, будет выглядеть примерно так: the_post_thumbnail( 'hero-1600' )

Примечание. Размеры избранного изображения для конкретного сообщения, используемого на моем тестовом сайте в качестве эталона для этого руководства, составляют 2560 на 1877 пикселей.

Шаг 2

Если к вашим сообщениям уже прикреплены избранные изображения до регистрации нашего нестандартного размера изображения, повторно создайте эскизы (плагином вроде Regenerate Thumbnails).

Шаг 3

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

Шаг 4

Отредактируйте шаблон Catch All на основном сайте с помощью Oxygen и настройте заголовок с нужными элементами. Как правило, это заголовок/логотип сайта слева, ведущий на главную страницу сайта, и меню навигации справа. Поскольку мы собираемся добавить темный градиент поверх изображения, вы можете установить для них белый цвет/обводку.

Вы можете выбрать параметр «Наложение - Overlay» здесь или в шаблоне отдельного сообщения.

Шаг 5

(Создайте, если нет, и) Отредактируйте шаблон, который применяется к отдельным сообщениям с помощью Oxygen.

Добавьте раздел - Section.

Установите отступ на 0 на всех 4 сторонах.

Установите ширину на полную - full.

Установите относительное положение - relative.

Добавьте блок кода (Code Block) внутри раздела с этим кодом:

Установите ширину на 100% (width to 100%).

Установите дисплей на гибкий (flex).

Щелкните состояние (state), а затем :after.

Установите ширину и высоту на 100% для каждого.

Установите абсолютное положение (position to absolute).

Добавьте следующий градиент на фон (Background):

rgba(0,0,0,0.5) при 0%
transparent на 50%
rgba(0,0,0,0.5) на 100%

Добавьте Div ниже (не под) блок кода.

Установите ширину -width на 100%.

Установите абсолютное положение (position to absolute), скажем, 60 пикселей снизу.

Добавьте Div внутри этого Div.

Установите левый и правый отступы (padding) по 20 пикселей каждый.

Установите ширину (width) на 100%.

Установите максимальную ширину 1120 пикселей (или любую ширину вашей страницы в глобальных настройках Oxygen).

Установите левое и правое поля (left and right margins) на авто.

+ Добавьте → WordPress → Динамические данные (Dynamic Data) → Заголовок (Title).

+ Добавьте → WordPress → Динамические данные → Дата (Date).

Добавьте любую другую дополнительную мета-публикацию (post meta), которую вы хотите показать здесь.

Шаг 6

Добавьте следующее в таблицу стилей в разделе Управление (Stylesheet at Manage) > Таблицы стилей (Stylesheets):