Как сделать фон сайта на WordPress активной ссылкой? — Денис Матаков
У меня есть определенный подход к работе с программными продуктами. В общих словах его можно выразить как «не лезь — не сломается». Я стараюсь всеми силами не трогать исходный код WordPress, Shop-Script и прочих CMS, чтобы они сохраняли преемственность и обновляемость.
Передо мной задача — сделать фон сайта (background image) кликабельным.
Первое, что думает чуть-чуть разбирающийся во всех этих делах человек — сейчас я средствами CSS попытаюсь сделать это. Не получится. CSS не дает возможностей подобного рода.
Следующее бинго: JavaScript. На лету подхватываем нужный контейнер, меняем его наполнение, получаем ссылку. Конечно, идея хорошая, но не сработает. У вас просто нет нужного контейнера, чтобы его изменить.
Мысль продолжает разливаться по древу — а почему бы не найти плагин, который ставит код сразу после тега <body>? И выясняется, что подобное логичное решение просто не поддерживается вордпрессом в 2018 году.
Итак, мы влипли. Придется все-таки влезть в исходный код. Есть два способа — условно правильный и условно неправильный. Оба делают одно и то же, и оба одинаково легко поломают вашу доработку при обновлении.
Правильный способ по кодексу вордпресса — создать дочернюю тему. Почитайте, если вы используете стандартную тему и одним CSS-файлом, то этот вариант предпочтителен. В моем случае тема была замысловатая с десятками CSS-файлов, и импортировать их все предложенным способом дело довольно долгое.
Поэтому пошел неправильным способом — редактированием шаблона. Тут стоит учесть два фактора: при обновлении темы код придется добавлять опять, это раз. Но создание дочерней темы просто не обновит вам этот файл — что может за собой привлечь еще больше неприятностей с учетом одного необновленного файла.
Что надо знать для кликабельного фона:
- Мы размещаем код-ссылку между тегом <body> и первым контейнером <div>. Нам обязательно нужно знать id контейнера или его класс.
Айди начинается с решетки #, класс начинается с точки «.» - После размещения ссылки мы добавляем CSS-код, который будет управлять ее поведением. Также критически важно добавить CSS-код для контейнера, который идет следом, иначе ссылка просто ляжет поверх вашего сайта и заблокирует работу с ним.
Айди начинается с решетки #, класс начинается с точки «.»Вот код ссылки:
<a href="https://ссылка_с_фона" target="_blank"></a>
Вот он же, но уже с видимым тегом боди и видимым контейнером следом.
<body> <a href="https://сслыка_с_фона" target="_blank"></a> <div>
Очень важно, повторюсь, запомнить id, который назначен для первого div. В нашем случае это page.
Остался последний шаг — добавить новый CSS. В некоторых темах есть возможность это сделать прямо на странице настройки темы, для остальных подойдет бесплатный плагин Custom CSS&JS. Ставим в CSS следующий код:
.takeover {
position: absolute;
display: block;
width: 100%;
height: 100%;
z-index: 1;
cursor: pointer;
}
#page {
position: relative;
z-index: 999;
}Первый блок отвечает за фон.
Называется .takeover
Название второго блока вы подставляете сами, у меня это #page. У вас будет, скорее всего, по другому.
Все, задача выполнена, фон кликабельный. CSS c обновлением темы сохранится, а вот код ссылки придется обновлять, каждый раз по новому вставлять, пока товарищи из WordPress не поставят сюда хук.
Как сделать фоновое видео для главной страницы вашего сайта
Что я должен включить в фоновое видео моей домашней страницы?
Независимо от того, решите ли вы включить видеофон на свой веб-сайт или нет, важно понимать, какие элементы в целом создают хорошую домашнюю страницу. Есть несколько важных компонентов, которые являются обязательными:
- Элементы брендинга: Убедитесь, что вы показываете пользователям, что они нашли ваш бренд, используя согласованные элементы, такие как логотип, цветовая схема и внешний вид.
- Заявление о ценности бренда: Что вы предлагаете и чем вы отличаетесь? Не забудьте попытаться свести ваш бренд к основам, чтобы даже те, у кого есть склонность к снятию сливок, ушли с правильным сообщением. Если вы уверены, что включить, рассмотрите пять «W» — кто, что, где, когда и почему — чтобы охватить все ваши основы.
Если вы уверены, что включить, рассмотрите пять «W» — кто, что, где, когда и почему — чтобы охватить все ваши основы.- Индивидуальность бренда: Ваш бренд игривый и веселый или серьезный и элегантный? Убедитесь, что ваш контент отражает вашу атмосферу! Это поможет дать вашим клиентам сплоченный опыт и ускорить узнаваемость вашего бренда.
Знаете ли вы?
Люди проводят на сайтах с видео до 88% больше времени.
Вы также захотите включить основные функции взаимодействия с пользователем, такие как:
- Привлекательные изображения и цвета: Даже если атмосфера вашей компании больше черно-белая, не забудьте выбрать цветовую палитру и придерживаться ее.
- Четкий призыв к действию:
- Привлекательный текст: Нам нравятся привлекающие внимание визуальные эффекты, но убедитесь, что вы дополняете пользовательский интерфейс забавным текстом. Это отличное место для изучения индивидуальности вашего бренда, так что проявите творческий подход!
- Оптимизация размера экрана: Убедитесь, что ваш веб-сайт и видео будут красиво смотреться на любом проигрывателе и экране любого размера. Поскольку мобильное использование всегда имеет тенденцию к росту, выберите отображение сайта, которое позволит вашим людям потреблять ваш контент из любого места.
Как дизайнер, я очень забочусь о представлении и опыте, который получают наши клиенты, просматривая наш контент или просматривая наш сайт. Функции Vimeo по умолчанию создают красивый видеоплеер».
Анна Консен, дизайнер Bloomscape
Примеры фонового видео для веб-сайтов, которые мы любим
Мы должны поговорить о чем-то.
Домашняя страница яхтенного бренда Y.Co сразу же вовлекает вас в приключения в открытом море. При посадке на этот сайт не возникает вопроса, что это за бренд — качественные, мощные гидроциклы для людей, любящих роскошь и океан. Этот сайт умело и стратегически использует текст на главной странице, чтобы легко вплести призывы к действию в пользовательский опыт.
Агентство цифрового маркетинга MediaBoom использует заниженное черно-белое видео, чтобы позволить посетителям погрузиться в свой профессиональный мир. Включение снимков, которые включают в себя различные технические устройства, такие как iPhone и ноутбуки, сразу делает очевидным, что это агентство использует технологии во всем, что они делают, при этом выделяя людей за экранами.
Patagonia известна производством качественной одежды и снаряжения для людей, которые любят активный отдых на свежем воздухе. Видео на веб-сайте Patagonia сразу же перенесет вас в несколько красивых и захватывающих мест под открытым небом, показывая великолепные высококачественные видео людей, занятых различными приключенческими мероприятиями. Этот сайт использует видео, чтобы непосредственно познакомить вас с образом жизни этого бренда и быстро просмотреть дух их компании.
Как сделать фоновое видео для сайта
Для тех из нас, кто не является профессиональным техническим специалистом, идея включения видео фона веб-сайта на домашнюю страницу может показаться немного пугающей. Однако с помощью правильных инструментов любой, у кого есть бизнес или веб-сайт, может это сделать. Vimeo Create имеет тонн шаблонов, которые позволяют легко создавать потрясающие полноразмерные видео для встраивания на свой веб-сайт или в любое место в Интернете. Вот как это сделать.
1. Выберите шаблон в Vimeo Create.
Вы можете выбрать один из сотен настраиваемых шаблонов, разработанных для множества различных вариантов использования. Независимо от того, являетесь ли вы студией йоги или сайтом электронной коммерции, у вас есть множество вариантов сделать видео, которое идеально подходит для вашего бренда.
2. Загрузите отснятый материал (или скачайте его из нашей библиотеки)
У вас есть два варианта, когда дело доходит до выбора исходного материала для вашего фонового видео: вы можете либо захватить свой собственный материал, либо использовать огромную библиотеку Vimeo для быстрого доступа к видео высокого качества. Давайте рассмотрим ваши варианты.
Съемка собственного фонового видео
Если вы хотите продемонстрировать свой реальный продукт, рабочее место или сотрудников, вы можете потратить время и деньги, чтобы снять персонализированное видео для фона вашего веб-сайта. Просто не забудьте отдавать приоритет качеству и видео в высоком разрешении, если вы собираетесь заниматься своими руками. Вы хотите произвести наилучшее первое впечатление!
Использование стоковых видеороликов для фона веб-сайта
Если ваши личные кадры не совсем на высоте (или у вас просто нет времени, мы это понимаем) — вы можете использовать наше предварительно загруженное стоковое видео в качестве фона вашего сайта.
Мы предлагаем тысячи бесплатных видеороликов, созданных одними из ведущих онлайн-создателей, и мы уверены, что вы сможете найти идеальное видео для захвата изображения, которое вы хотели бы изобразить.
3. Настройте по своему вкусу
Vimeo Create позволяет добавлять текст, собственный фирменный стиль (включая логотип!) и многое другое. Просто обрежьте видео до нужной длины, добавьте любой соответствующий текст и наклейки с изображениями, и все готово. Это делает добавление текстовых CTA очень простым, поэтому встроить их в свой веб-сайт проще, чем когда-либо.
4. Сохраняйте и делитесь!
Когда вы закончите выбирать стиль и продолжительность вашего видео, просто сохраните его прямо в своей учетной записи Vimeo или загрузите на свой рабочий стол. Простой процесс встраивания Vimeo позволяет быстро и легко создать звездную домашнюю страницу с фоновым видео. Вот как это сделать:
Как встроить фоновое видео веб-сайта:
Чтобы ваша вставка выглядела превосходно, пользователи Vimeo любого платного уровня могут скрыть элементы проигрывателя Vimeo и полностью убрать кнопку воспроизведения и индикатор выполнения.
Таким образом, вы можете получить чистое полноэкранное видео, необходимое для фона веб-сайта.
- Чтобы встроить фоновое видео, сгенерируйте код для встраивания и добавьте параметр «?background=1» в конец URL-адреса. Это отключит все переключатели проигрывателя, поместит видео в автоматический цикл, настроит автоматическое воспроизведение видео и обеспечит приглушение звука видео. В принципе, все, что вам нужно для создания видео фона!
- Если вы хотите, чтобы ваш фоновый видеоролик имел звук, просто добавьте параметр «muted=0» в свой код для встраивания. Чтобы узнать больше об использовании Vimeo для встраивания фоновых видео, ознакомьтесь с нашим полным подробным руководством.
Как мне сделать видео для моего сайта?
Существует множество способов создать видео, которое можно разместить на главной странице или на веб-сайте.
Vimeo Create предлагает множество бесконечно настраиваемых шаблонов, упрощающих работу.
Краткие советы для фонового видео
- Используйте короткий цикл видео : Лучшие фоновые видео обычно представляют собой относительно короткие циклы. Выбирайте видео, которые могут предложить плавный, бесконечный цикл, рассказывающий историю или передающий изображение. (Кроме того, длинные видео могут сделать время загрузки вашего сайта медленным, что плохо для пользователей и SEO!
- Не торопитесь выбирать правильное видео : Выбор видео, которое не передает правильное сообщение, хуже чем вообще не использовать видео. Не торопитесь, чтобы выбрать качественное видео с релевантными изображениями, которые соответствуют тону, который вы ищете.
- Меньше, как правило, больше : Хотя легко увлечься использованием самых передовых наворотов на своем веб-сайте, убедитесь, что фоновое видео не отвлекает внимание от основной цели вашего сайта. Суперкрутое видео бесполезно, если оно приводит к более высокому показателю отказов или сбивает пользователя с толку.
