Как создать визитную карточку с фоновым видео

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

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

Для этого проекта я выбрал бесплатную тему Eksell , потому что она включает в себя шаблон пустого холста для страниц, который удаляет меню, верхний и нижний колонтитулы. Единственный отображаемый контент — это блоки, которые вы добавляете на страницу. Eksell также является полнофункциональной темой портфолио, в которую вы можете превратиться, если решите выйти за рамки простого веб-сайта vCard.

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

Несколько замечаний о специфике: я нашел примеры видео, на Pixabay , где есть хороший выбор коротких видеороликов, которые хорошо подходят для зацикливания на фоне веб-сайта.

Если у вас есть лишнее пустое пространство внизу после добавления видео в блок обложки, вы можете установить минимальную высоту. Перейдите к блоку обложки, нажмите «Настройки» и прокрутите вниз до «Размеры», где вы можете настроить минимальную высоту обложки.

Вот CSS для рамки вокруг круглого изображения профиля. Вы можете добавить это в раздел «Дополнительные CSS» настройщика:

.wp-block-image.is-style-rounded img { border-style: solid; border-color: #FFFFFF; border-width: 10px; }

Если вы планируете сделать веб-сайт простым в формате vCard, вам нужно назначить созданную вами страницу в качестве домашней страницы. Это можно сделать в Customizer на панели настроек домашней страницы.

В качестве альтернативы использованию Eksell, если ваш сайт находится на WordPress.com, вы можете добиться аналогичного результата, используя тему Automattic Blank Canvas и добавляя и размещая блоки по отдельности.

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