Как создать целевую страницу для благотворительного вторника с помощью Divi и GiveWP

Если вы еще не слышали, мы готовимся начать масштабную кампанию «Черная пятница» и «Киберпонедельник» здесь, в Elegant Themes. Но в это время года происходит еще одна интересная вещь. Он называется Вторник для раздач (в этом году он выпадает на 28 ноября), и это попытка некоммерческих организаций мира напомнить всем, что, хотя у них есть кошельки для личных покупок, они могут захотеть подумать о том, чтобы пожертвовать тем, кто в тоже нужно. Какая классная идея! И поскольку мы занимаемся расширением прав и возможностей нашего сообщества, мы подумали, что было бы неплохо помочь тем, кто использует Divi (или Extra) и работает на некоммерческие организации, чтобы сделать лучшую целевую страницу для пожертвований Giving Monday, которую они способен.

Вот краткий обзор того, что мы будем создавать сегодня.

Конечный просмотр результатов

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

Установите плагин GiveWP и создайте новую форму

Форма пожертвования, которую мы будем использовать в этом руководстве, создается плагином GiveWP. Чтобы установить его, перейдите в админке WordPress к Плагины> Добавить новый . Там воспользуйтесь функцией поиска, чтобы найти плагин Give. Нажмите кнопку «Установить сейчас», а затем активируйте ее.

Затем перейдите в « Пожертвования»> «Добавить форму» . Введите заголовок формы. Я выбрал «Поддержите своих местных фермеров и устойчивое сельское хозяйство».

Затем вы заметите параметры формы пожертвования. Давайте пробежимся по ним вкладка за вкладкой.

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

Вариант пожертвования: многоуровневое пожертвование

Отображение пожертвований: кнопки

Специальная сумма: включена

В разделе «Уровень пожертвования» установите следующие уровни пожертвования: 1 доллар, 5 долларов, 10 долларов, 25 долларов, 50 долларов, 100 долларов. Обязательно установите уровень пожертвования в размере 5 долларов США в качестве нового значения по умолчанию.

Теперь перейдите на вкладку «Отображение формы». Единственное, что вам здесь нужно сделать, это изменить параметр «Параметры отображения» на «Модальный».

На вкладке «Цель пожертвования» сначала включите параметр «Цель пожертвования». Как только вы это сделаете, установите желаемую сумму. Я установил свою на 1000 долларов. Я также установил формат цели в процентах. Это позволит зрителям формы узнать процент нашей цели, которую мы достигли, а не фактическую сумму денег, которую мы собрали. И, наконец, я немного изменил цвет индикатора выполнения, чтобы он соответствовал тому же зеленому цвету, который используется на остальной части моего веб-сайта (# 07c907).

Наконец, нам нужно добавить содержимое формы. На вкладке «Содержимое формы» включите параметр «Отображать содержимое». Затем добавьте текст в область содержимого.

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

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

Подготовьте свои изображения

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

Для создания этого изображения я использовал Photoshop, но вы, вероятно, также можете использовать бесплатное программное обеспечение под названием Gimp. Это инструмент с открытым исходным кодом, который имеет много одинаковых функций.

Вот как это сделать.

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

Вот изображение, которое я нашел.

Затем я открыл это изображение в фотошопе.

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

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

Затем перейдите в верхнем меню к Image> Canvas Size и измените размер холста до 1920 × 1080. Когда вы это сделаете, ваши элементы, скорее всего, будут очень большими по сравнению с вашим новым, меньшим холстом.

На клавиатуре нажмите command + T или перейдите в Edit> Transform> Scale . Измените размер слоя с изолированными элементами, чтобы он соответствовал новому размеру холста.

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

Создание дизайна в Divi

Если вы еще этого не сделали, вы захотите загрузить и установить наш новый (бесплатный) пакет макетов Farmers Market Layout Pack. Следуйте инструкциям в этом посте по установке пакета макетов. После его установки следуйте инструкциям в этом сообщении в блоге, чтобы настроить свой сайт для следующего этапа настройки, который мы рассмотрим здесь.

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

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

Затем, все еще находясь на вкладке «Содержимое», прокрутите вниз и откройте настройки ссылки. В заголовке поля URL кнопки №1 поместите текст «#donate». Это будет работать как якорная ссылка на форму, которую мы создадим ниже.

Наконец, перейдите на вкладку Дизайн и откройте настройки текста подзаголовка. Установите жирность шрифта подзаголовка.

Первый раздел завершен. Прокрутите вниз до третьего раздела (с большой цитатой) и щелкните значок шестеренки на синем элементе управления разделом. Установите цвет фона на # F6F6F6.

Затем откройте настройки модуля для модуля текста цитаты. Также измените фон на # F6F6F6.

Этот раздел теперь тоже завершен. Перейдите к четвертому разделу сразу под ним. Это наш раздел формы пожертвования.

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

Начнем с настроек раздела и поработаем. Во-первых, нам нужно изменить цвет фона. Установите тот же # F6F6F6, что и в разделе выше.

Затем на вкладке «Дизайн» откройте параметры «Интервал». Добавьте следующий пользовательский отступ:

Сверху: 250 пикселей

Справа: 40 пикселей

Внизу: 250 пикселей

Слева: 40 пикселей

Наконец, не выходя из настроек раздела, перейдите на вкладку «Дополнительно» и откройте элементы управления идентификаторами и классами CSS. Под CSS ID напишите слово «пожертвовать».

Сохраните ваши новые настройки.

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

В новом тестовом модуле разместите шорткод для созданной нами ранее формы пожертвования. Установите фон на сплошной белый цвет (#ffffff).

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

В текстовых параметрах настройте следующие параметры:

Размер текста текста: 18 пикселей

Высота текстовой строки: 1,8 м

В разделе «Параметры текста заголовка для H2» настройте следующие параметры:

Размер текста заголовка 2: 36 пикселей

Высота строки заголовка 2: 1,5 м

В разделе «Параметры интервала» настройте следующие параметры:

Пользовательское заполнение: 50xp (для всех полей)

Под опциями Box Shadow выберите последний вариант в верхнем ряду (крайний правый). Затем настройте эту опцию:

Сила распространения тени коробки: -2 пикселя

Наконец, в разделе «Параметры анимации» настройте следующие параметры:

Стиль анимации: отскок

Направление анимации: вверх

Продолжительность анимации: 800 мс

Задержка анимации: 400 мс

Начальная непрозрачность анимации: 100%

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

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

Перейдите к параметрам своей темы, выбрав Divi> Библиотека Divi> Общие. Прокрутите вниз до поля Custom CSS и вставьте туда следующие стили кнопок:

/*Give Plugin Styles*/

.give-btn.give-btn-modal {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

#give-purchase-button.give-submit.give-btn {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

Сохраните изменения и вернитесь на страницу пожертвования. Обновите его и посмотрите на свою форму. Теперь это должно выглядеть так.

Теперь мы куда-то идем! Добавим последний штрих. Фоновое изображение раздела мы начали создавать ранее.

Чтобы завершить его, измените размер окна браузера до 1920 × 1120. Вы можете использовать такой веб-сайт, как whatsmybrowsersize.com.

Затем сделайте снимок экрана своей страницы пожертвования с нашей новой формой по центру. Должно получиться вот так.

Откройте этот новый снимок экрана в Photoshop вместе с файлом Photoshop, который мы создали ранее.

Используйте инструмент «Прямоугольная область», чтобы выбрать форму. Затем перейдите в Select> Inverse, чтобы выбрать все, кроме вашей формы. Удалите ваш новый выбор. Теперь у вас должен получиться холст, который выглядит так.

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

На панели слоев отрегулируйте непрозрачность слоя формы до 50%. Затем, когда форма еще выбрана, щелкните значок замка и заблокируйте ее. Теперь это должно выглядеть так.

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

Когда у вас будет собственная окончательная конфигурация, вы перейдете в меню «Файл»> «Экспорт»> «Экспортировать как» и выберите PNG, чтобы сохранить прозрачный фон.

Теперь мы можем добавить это изображение в раздел «Форма пожертвования» на нашей странице пожертвований на нашем веб-сайте Divi.

Откройте настройки раздела. В разделе «Фон» оставьте цвет, который мы установили ранее, и выберите вариант изображения. Добавьте сюда ваше новое фоновое изображение. Затем настройте следующие параметры:

Размер фонового изображения: фактический размер

Положение фонового изображения: по центру

Сохраните эти настройки. Теперь ваш раздел формы должен быть заполнен.

Чтобы полностью доработать свой дизайн (чтобы он соответствовал нашему полному предварительному просмотру страницы с начала публикации), просто измените цвета фона остальных разделов страницы, чтобы они соответствовали тем, что на скриншоте. Вы будете использовать серый (# F6F6F6) или белый (#ffffff).

Удачного сбора средств!

С Divi и таким мощным плагином, как Give, мы уверены, что ваши усилия Giving Monday обязательно будут большим успехом. Спасибо за то, что следуете за мной. Если вам все еще нужна помощь в чем-либо, описанном в этом руководстве, я проведу прямую трансляцию сегодня в 15:00 на нашей странице в Facebook и на канале YouTube, где я покажу весь этот процесс одним дублем. Я также буду отвечать на вопросы по ходу дела. Надеюсь увидеть тебя там!