Как создать веб-сайт со стоковой фотографией с Elementor

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

В этом уроке мы покажем вам, как создать веб-сайт со стоковыми фотографиями в WordPress с помощью Elementor.

Как вы, возможно, знаете, Elementor — это плагин для создания страниц для WordPress, который обладает наиболее полным набором функций. Он поставляется с функцией Theme Builder, которая поддерживает настраиваемый динамический контент (настраиваемые поля и настраиваемый тип сообщений), что позволяет вам создавать динамический веб-сайт с подходом без кода. Вы можете использовать эту функцию для создания веб-сайта со стоковыми фотографиями, такого как Unsplash или Pexels. Конечно, функции вашего веб-сайта со стоковыми фотографиями не будут такими сложными, как эти два популярных веб-сайта со стоковыми фотографиями. По крайней мере, вы можете использовать свой веб-сайт для отображения собственных фотографий.

Picjumbo — прекрасный пример успешного веб-сайта со стоковыми фотографиями, созданного с помощью WordPress. Для самого этого руководства вы можете обратиться к самому низкому ISO. Этот сайт создан с помощью Elementor.

Чтобы создать веб-сайт со стоковыми фотографиями с помощью WordPress + Elementor (подход без кода), вам понадобятся следующие плагины:

• Элементор Про (Платный)
• Дополнительные настраиваемые поля (бесплатно)
• Пользовательский интерфейс CPT (бесплатно)

Вы можете заменить Advanced Custom Fields и CPT UI на JetEngine, если хотите. Конечно, вам также нужен домен и хостинг для вашего сайта. Наши рекомендуемые услуги для получения домена и хостинга:

• Блюхост
• СайтЗемля
• DreamHost

Если вы новичок в Elementor, вы можете прочитать нашу предыдущую статью, чтобы узнать, как использовать Elementor.

Веб-сайт со стоковыми фотографиями, который мы здесь создадим, будет состоять из следующих частей:

• Домашняя страница
• Пользовательский шаблон отдельного сообщения для отображения элементов фотографий
• Пользовательские страницы архива для отображения фотографий по категориям и тегам
• Заголовок
• Нижний колонтитул

Вы можете добавить другие части в соответствии с вашими потребностями.

Давайте начнем.

Как создать веб-сайт со стоковой фотографией с Elementor

Шаг 1. Создайте пользовательский тип записи с помощью пользовательского интерфейса CPT.

Вам необходимо создать собственный тип записи (CPT), чтобы разместить контент фотографий, которые вы хотите добавить на свой веб-сайт. Как упоминалось ранее, в этом руководстве мы будем использовать CPT UI для создания пользовательского типа записи. Прежде чем начать, убедитесь, что вы установили и активировали плагин CPT UI на своем сайте WordPress. Когда вы будете готовы, перейдите в CPT UI -> Add/Edit Post Types на панели управления WordPress, чтобы создать собственный тип записи.

На следующем экране заполните все необходимые поля в блоке « Основные настройки ».

В блоке « Дополнительные метки » вы можете установить собственные метки, чтобы вам было проще управлять своими фотографиями с панели управления WordPress. Все поля в этом блоке являются необязательными.

Далее задайте основные настройки в блоке Settings . В разделе « Поддержка » выберите компоненты WordPress, которые вы хотите включить в свой собственный тип записи. В этом примере мы включаем следующие компоненты:

Вам не нужен редактор WordPress для CPT для фотографий. Чтобы добавить описание фотографии, мы будем использовать настраиваемое поле. Нажмите кнопку « Добавить тип сообщения» , чтобы создать собственный тип сообщения.

Шаг 2: Создайте пользовательские таксономии

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

• Категория фото
• Фото тег

Вы можете создавать пользовательские таксономии с помощью пользовательского интерфейса CPT.

— Категория фото

На панели инструментов WordPress перейдите в CPT UI -> Добавить/редактировать таксономии записей . В блоке основных настроек установите ярлык таксономии, метку во множественном числе и метку в единственном числе. В разделе « Прикрепить к типу сообщения » выберите пользовательский тип сообщения, который вы только что создали выше.

В блоке Дополнительные метки вы можете установить пользовательские метки. После этого перейдите в блок « Настройки », чтобы установить некоторые дополнительные настройки. В нашем примере мы используем следующие настройки.

• Общедоступный: правда
• Общедоступный запрос: True
• Иерархический: Истинно
• Показать пользовательский интерфейс: правда
• Показать в меню: Правда
• Показать в навигационных меню: True
• Вариант запроса: True
• Переписать: Верно
• Переписать с лицевой стороны: правда
• Переписать иерархию: False
• Показать столбец администратора: False
• Показать в REST API: True
• Показать в облаке тегов: False
• Показать на панели быстрого/массового редактирования: False
• Сортировка: Ложь

Нажмите кнопку « Добавить таксономию », чтобы добавить пользовательскую категорию.

— Фототег

Как и в случае с пользовательской категорией выше, вы можете перейти в CPT UI -> Добавить/редактировать таксономии записей на панели инструментов WordPress, чтобы создать собственный тег. Обязательно прикрепите пользовательский тег к пользовательскому типу записи, который вы создали выше.

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

• Общедоступный: правда
• Общедоступный запрос: True
• Иерархический: Ложь
• Показать пользовательский интерфейс: правда
• Показать в меню: Правда
• Показать в навигационных меню: True
• Вариант запроса: True
• Переписать: Верно
• Переписать с лицевой стороны: правда
• Переписать иерархию: False
• Показать столбец администратора: False
• Показать в REST API: True
• Показать в облаке тегов: False
• Показать на панели быстрого/массового редактирования: False
• Сортировка: Ложь

Нажмите кнопку « Добавить таксономию» , чтобы добавить пользовательский тег.

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

Шаг 3: Создайте настраиваемые поля

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

Есть несколько плагинов для создания настраиваемых полей. В этом уроке мы будем использовать ACF (расширенные настраиваемые поля). Вы можете использовать бесплатную версию ACF для создания основных настраиваемых полей.

После установки и активации плагина ACF перейдите в « Пользовательские поля» -> «Добавить новое » на панели управления WordPress, чтобы создать группу настраиваемых полей.

Дайте группе настраиваемых полей имя и нажмите кнопку « Добавить поле », чтобы добавить настраиваемое поле.

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

- Ссылка на скачивание

Будет использовать это настраиваемое поле для размещения URL-адреса исходного файла фотографии (файл, который будет загружен вашими посетителями). Вам нужно установить тип поля этого поля на Url . Также включите параметр « Обязательно », чтобы убедиться, что вы не пропустите ссылку для скачивания каждый раз, когда добавляете новую фотографию.

- Описание

Вы можете использовать это поле, чтобы добавить описание к вашей фотографии. Как мы уже говорили ранее, мы будем использовать настраиваемое поле для добавления описания фотографии вместо редактора WordPress (Gutenberg). Для этого поля вы можете установить тип поля Текстовая область . Вам не нужно включать опцию « Обязательно », так как описание фотографии является необязательным.

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

Затем перейдите к блоку « Настройки », если вы хотите внести дополнительные настройки в свою пользовательскую группу полей. После этого нажмите кнопку « Опубликовать », чтобы опубликовать свою пользовательскую группу полей.

А пока вы можете начать добавлять свои фотографии. Чтобы добавить новую фотографию, щелкните метку пользовательского типа записи на панели инструментов WordPress и выберите « Добавить новую ». В нашем случае это Photos .

Добавьте заголовок для фотографии, описание, избранное изображение и другие элементы. Одна важная вещь. Никогда не забывайте добавлять ссылку на оригинальную фотографию (фото в оригинальном размере). В качестве избранного изображения вы можете использовать фотографию размером около 900 пикселей.

Шаг 4. Создайте собственный шаблон отдельной публикации для фотоэлементов

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

Давайте начнем с пользовательского шаблона для фотоэлементов.

Пользовательский шаблон отдельной публикации, который мы создадим, состоит из четырех разделов:

• Раздел 1: Размещение превью фотографии/избранного изображения
• Раздел 2: Разместить фотографию профиля фотографа и кнопку загрузки
• Раздел 3: Разместить форму подписки и кнопку пожертвования
• Раздел 4: Размещение связанных фотографий

Чтобы начать создание пользовательского шаблона, перейдите в « Шаблоны» -> «Конструктор тем» на панели управления WordPress (убедитесь, что у вас установлен Elementor Pro). На экране Theme Builder наведите курсор на вкладку Single Post и щелкните значок плюса, чтобы создать новый шаблон.

Не существует готовых шаблонов отдельных постов, предназначенных для стоковых фотографий, поэтому вам нужно создать их самостоятельно. Просто закройте появившееся окно библиотеки шаблонов, чтобы открыть редактор Elementor.

- Секция 1

Щелкните значок плюса в области холста, чтобы добавить новый раздел. Выберите структуру из трех столбцов. Установите ширину каждого столбца со следующей конфигурацией:

• Первая колонка: 14%
• Средняя колонка: 72%
• Третий столбец: 14%

Чтобы установить ширину столбца, вы можете щелкнуть маркер столбца, чтобы изменить его. Затем перейдите на панель настроек и введите ширину в поле « Ширина столбца » под блоком « Макет ».

Закончив настройку ширины столбцов, добавьте виджет «Изображение» в средний столбец. На панели настроек щелкните значок «Динамические теги» в блоке « Изображение » и выберите « Избранное изображение ».

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

• Ширина: 100%
• Максимальная ширина: 100%
• Высота: 620 пикселей
• Подходит для объекта: содержит

— Раздел 2

Как упоминалось ранее, Раздел 2 используется для размещения изображения профиля фотографа (вас) и кнопки загрузки. Добавьте раздел, щелкнув значок плюса в области холста. На этот раз вы можете выбрать структуру с одним столбцом.

• Виджет информации о сообщениях

Первый виджет, который вам нужно добавить в этот раздел, — это виджет Post Info. Мы будем использовать этот виджет для отображения аватарки фотографа, а также имени. Вы также можете использовать Image Box, если хотите. После добавления виджета «Информация о публикации» перейдите на панель настроек, чтобы установить типы метаданных. В этом уроке нам нужны только метаданные автора, чтобы получить фотографию и имя профиля. Обязательно включите параметр « Аватар », чтобы отобразить изображение профиля.

Выполнив основные настройки на вкладке « Контент », вы можете переключиться на вкладку « Стиль », чтобы дополнительно оформить виджет «Информация о публикации».

• Виджет кнопки

Виджет-кнопка — как вы можете догадаться — служит для размещения ссылки на скачивание исходного файла фотографии. Вы можете разместить этот виджет прямо под виджетом Post Info.

После добавления виджета перейдите на панель настроек, чтобы выполнить некоторые настройки. В разделе « Ссылка » на вкладке « Содержимое » щелкните значок «Динамические теги» и выберите « Поле URL-адреса ACF » .

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

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

— Раздел 3

Этот раздел используется для размещения формы подписки и кнопки пожертвования. Для добавления этих элементов можно использовать виджет «Форма» и виджет «Кнопка PayPal». Оформление этого раздела полностью зависит от вас. Для этого урока мы используем горизонтальную компоновку следующим образом:

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

Когда столбцы будут готовы, добавьте виджет «Форма» в первый столбец. Вы можете связать форму с вашими любимыми инструментами электронного маркетинга. От MailPoet, MailerLite, ActiveCampaign до GetResponse.

После завершения настройки и оформления виджета «Форма» в первом столбце переключитесь на второй столбец, чтобы добавить виджет «Кнопка PayPal». Вы можете прочитать нашу предыдущую статью, чтобы узнать больше о том, как использовать виджет. Когда-то важная вещь. Поскольку вы хотите использовать кнопку PayPal для принятия пожертвований, убедитесь, что для параметра Тип транзакции установлено значение Пожертвование .

— Раздел 4

Мы будем использовать этот раздел для размещения связанных фотографий. Добавьте новый раздел, щелкнув значок плюса в области холста. Вы можете выбрать одноколоночную структуру для этого раздела. Добавьте виджет Post в раздел, который вы только что добавили. На панели настроек откройте блок настроек макета на вкладке « Содержимое », чтобы выполнить основные настройки. В этом примере мы используем следующие настройки:

• Кожа: Классический
• Количество столбцов: 3
• Сообщений на странице: 9
• Положение изображения: сверху
• Кирпичная кладка: Да
• Размер изображения: Полный
• Ширина изображения: 100%
• Название: Инвалид
• Выдержка: инвалид
• Метаданные: нет
• Подробнее: Инвалид

Затем откройте блок Query и установите для Source значение Related . В поле Термин выберите параметр, который вы хотите использовать для фильтрации связанных фотографий. В этом примере мы фильтруем фотографии по тегам фотографий.

Выполнив основные настройки, вы можете перейти на вкладку « Стиль », чтобы изменить стиль виджета.

А пока ваш собственный шаблон готов к публикации. Нажмите кнопку ПУБЛИКАЦИЯ в нижней части панели настроек, чтобы опубликовать его.

В появившемся окне добавьте условие отображения, нажав кнопку ДОБАВИТЬ УСЛОВИЕ .

Выберите пользовательский тип записи, который вы создали ранее выше, в раскрывающемся меню. Нажмите кнопку НАЖМИТЕ И СОХРАНИТЕ , чтобы опубликовать шаблон.

Шаг 5: Создайте собственный шаблон для архивных страниц

На шаге 2 выше вы создали две пользовательские таксономии с помощью пользовательского интерфейса CPT, которые используются для сортировки ваших фотографий. На этом этапе мы создадим собственный шаблон для этих пользовательских таксономий, чтобы при доступе ваших посетителей к URL-адресам пользовательских таксономий — например, https://yourdomain.com/photo_category/animal/ — они видели список фотографий, связанных с пользовательские таксономии. Вот примеры.

В этом руководстве мы покажем, как создать простой пользовательский шаблон архива, состоящий из двух разделов. Для получения более подробных руководств о том, как создать пользовательскую страницу архива с помощью Elementor, вы можете обратиться к этому сообщению.

Чтобы приступить к созданию пользовательского шаблона архива, перейдите в « Шаблоны» -> «Конструктор тем» на панели управления WordPress. На экране Theme Builder наведите курсор на метку « Архив » и щелкните значок «плюс».

Просто закройте появившуюся библиотеку шаблонов, так как мы создадим собственный архив с нуля.

- Секция 1

В редакторе Elementor щелкните значок плюса, чтобы добавить новый раздел. Вы можете выбрать одноколоночную структуру для этого раздела. После добавления раздела добавьте виджет «Заголовок архива».

После добавления виджета «Заголовок архива» вы можете перейти на панель настроек Elementor, чтобы изменить его стиль.

— Раздел 2

Мы будем использовать этот раздел для размещения виджета «Архив сообщений». На самом деле вы можете поместить виджет в тот же раздел, что и виджет «Заголовок архива» выше. Но размещение двух виджетов в разных разделах обеспечивает гибкость дизайна на случай, если вы захотите изменить дизайн страницы архива в будущем.

Просто щелкните значок плюса в области холста, чтобы добавить новый раздел. Вы можете выбрать одноколоночную структуру для этого раздела. Когда раздел будет прочитан, добавьте в него виджет «Архивировать сообщения».

Перейдите на панель настроек, чтобы выполнить настройки и применить стили. В блоке настроек макета примените следующие настройки:

• Кожа: Классический
• Количество столбцов: 3
• Положение изображения: сверху
• Кладка: Вкл.
• Размер изображения: Полный
• Ширина изображения: 100%
• Название: Инвалид
• Выдержка: инвалид
• Мета: Нет
• Подробнее: Инвалид

После выполнения настроек в блоке « Макет » переключитесь в блок « Разбиение на страницы», чтобы установить разбиение на страницы. Вы можете применить пять стилей разбивки на страницы: число, предыдущее/следующее, число+предыдущее/следующее, загрузить еще, бесконечная загрузка.

Вы можете прочитать нашу предыдущую статью, чтобы узнать больше о нумерации страниц в Elementor.

После того, как вы закончите с разделом 2, то есть вы отредактировали пользовательскую страницу архива, нажмите кнопку ПУБЛИКАЦИЯ , чтобы опубликовать шаблон. Добавьте условие отображения, нажав кнопку ДОБАВИТЬ УСЛОВИЕ в появившемся окне. Укажите, где вы хотите применить настраиваемый шаблон. Поскольку вы хотите использовать его в пользовательских таксономиях, обязательно выберите их.

Нажмите кнопку СОХРАНИТЬ И ЗАКРЫТЬ , чтобы применить изменения.

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

Шаг 6: Создайте пользовательскую домашнюю страницу

Домашняя страница — главная страница вашего сайта. Это страница, на которой вы можете отображать основные вещи, которые вы предлагаете через свой веб-сайт (в данном случае фотографии). На этом этапе мы покажем вам, как создать домашнюю страницу для вашего веб-сайта со стоковыми фотографиями. Мы создадим простую домашнюю страницу, состоящую из двух разделов:

• Раздел 1: Главный раздел для размещения заголовка вашего веб-сайта.
• Раздел 2: Раздел для размещения ваших фотографий

Начните с создания новой страницы и отредактируйте ее с помощью Elementor. Вы можете дать название страницы «домашняя», «домашняя страница» или что-то подобное.

- Секция 1

В редакторе Elementor щелкните значок плюса в области холста, чтобы добавить новый раздел. Вы можете выбрать одноколоночную структуру для этого раздела. Откройте блок « Макет » на панели настроек, чтобы установить макет. В этом примере мы используем следующие настройки макета:

• Ширина содержимого: в штучной упаковке
• Расстояние между столбцами: по умолчанию
• Высота: Минимальная высота
• Минимальная высота: 600 пикселей
• Положение столбца: растянуть
• Вертикальное выравнивание: посередине
• Переполнение: по умолчанию

Затем отредактируйте столбец раздела, щелкнув маркер столбца.

На панели настроек перейдите на вкладку Стиль и откройте блок Фон . Установите тип фона на Классический и выберите изображение. Вы можете использовать большое изображение в качестве фона столбца (например, 1600 x 600 пикселей).

После настройки раздела, а также столбца добавьте виджет «Заголовок», перетащив его в область холста.

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

— Раздел 2

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

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

Когда раздел будет готов, добавьте виджет «Сообщения», перетащив его с панели виджетов/настроек. После добавления виджета перейдите в блок « Макет » на вкладке « Содержимое » на панели настроек, чтобы установить макет. В этом примере мы используем следующие настройки макета:

• Кожа: Классический
• Количество столбцов: 3
• Сообщений на странице: 27
• Положение изображения: сверху
• Размер изображения: полный
• Ширина изображения: 100%
• Название: Инвалид
• Выдержка: инвалид
• Метаданные: нет
• Подробнее: Инвалид

Затем откройте блок запросов , чтобы отфильтровать фотографии. В опции « Источник » выберите пользовательский тип записи, который вы создали на шаге 1 выше. Задайте параметры фотографий в полях « Включить по » и « Срок ».

После того, как вы закончите с блоком Query , вы можете переключиться на блок Pagination , чтобы установить нумерацию страниц. В этом примере мы не используем нумерацию страниц на главной странице.

Вы можете добавить дополнительные элементы на свою домашнюю страницу, если хотите. Закончив редактирование страницы, нажмите кнопку ПУБЛИКАЦИЯ , чтобы опубликовать ее.

После публикации домашней страницы перейдите в «Настройки» -> «Чтение» на панели инструментов WordPress. В параметре Отображение домашней страницы установите значение Статическая страница и выберите страницу, которую вы только что создали, из раскрывающегося списка.

Шаг 7: Создайте верхний и нижний колонтитулы

Вы почти закончили. После того, как все страницы и пользовательские шаблоны созданы, следующим шагом будет создание верхнего и нижнего колонтитула. В Elementor вы можете создать верхний и нижний колонтитулы из Theme Builder точно так же, как настраиваемые шаблоны для архивных страниц и отдельных сообщений, которые вы создали выше. У вас есть безграничные варианты дизайна и поведения для вашего верхнего и нижнего колонтитула. Например, вы можете создать прозрачный заголовок, липкий заголовок и так далее.

Для получения более подробных руководств о том, как создать верхний и нижний колонтитулы в Elementor, вы можете прочитать наши предыдущие статьи ниже:

• Как создать собственный заголовок в WordPress с помощью Elementor
• Как создать собственный нижний колонтитул в WordPress с помощью Elementor

Итог (+ бонус)

Elementor — мощный плагин для создания страниц для WordPress. Благодаря функции Theme Builder, которая поддерживает обширные типы динамического контента, вы можете создать любой тип веб-сайта без кода. Один из типов веб-сайтов, которые вы можете создать с помощью Elementor, — это веб-сайт со стоковыми фотографиями, как мы только что рассмотрели выше. Поскольку WordPress поддерживает многопользовательский режим, вы можете принять регистрацию, если хотите, чтобы другие люди добавляли фотографии. Вы также можете создать пользовательскую страницу регистрации с Elementor, если хотите.

Если вы хотите увидеть вживую то, о чем мы рассказали в этой статье, вы можете посетить lowiso.com. Сайт создан на WordPress+Elementor Pro. В качестве подарка мы также включили пользовательские шаблоны, а также страницы, используемые на веб-сайте, которые вы можете скачать ниже.