Как добавить кнопку PayPal Donate на свой сайт Divi

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

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

Начиная

Подпишитесь на наш канал Youtube

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

• Некоммерческая
• Школа
• Политическая
• Личное

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

После выбора личного

На следующей странице прокрутите вниз, пока не увидите текст «Узнайте о создании кнопки пожертвования», и щелкните его.

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

Создание кнопки

Когда вы щелкаете ссылку для создания кнопки пожертвования, вы попадете на страницу, где происходит волшебство. Однако вы должны отметить, что Paypal не будет предлагать вам войти в систему. Повторите: Paypal не будет предлагать вам войти в систему. Вы сможете сделать это ближе к концу процесса, но не беспокойтесь об этом на этом этапе –Ничего не случилось.

Шаг 1

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

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

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

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

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

Здесь вы должны войти в систему, если у вас есть учетная запись Paypal. Если нет, создайте его, чтобы на вас распространялись различные средства защиты PayPal. (Если вы решите не использовать учетную запись Paypal, просто введите свой адрес электронной почты, и вы все равно сможете получать пожертвования через Paypal без каких-либо дополнительных мер безопасности.)

После входа в систему вы должны увидеть это:

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

Вы почти готовы разместить кнопку пожертвования Paypal в WordPress!

Необязательные шаги 2 и 3

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

Код кнопки Paypal Donate

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

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

Скопировав код, перейдите на панель управления WordPress. Здесь все может немного отличаться, потому что все захотят, чтобы их кнопка для пожертвований Paypal находилась в другом месте, но общая идея та же.

Для пользователей Divi у нас есть много вариантов для вас.

Над или под сообщениями

Чтобы разместить кнопку «Пожертвовать» Paypal в начале или в конце сообщений в блоге, перейдите к параметрам темы Divi и перейдите на вкладку «Интеграции».

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

То, что они делают, говорит само за себя.

Перед публикацией:

После публикации:

Имейте в виду, что это полностью не стилизованные кнопки, поэтому, если вы хотите, чтобы они делали больше, чем просто сидели на них, я бы предложил обернуть код, который предоставляет Paypal, примерно так:

<div class=”paypal-donate”> PAYPAL DONATE BUTTON CODE GOES HERE </div>

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

Пост за постом или постранично

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

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

Как и раньше, просто вставьте сгенерированный Paypal код в настройки модуля. Однако здесь нет необходимости заключать его в div. Вы можете просто использовать раздел «Главный элемент» в разделе «Пользовательский CSS» на вкладке «Дополнительно», чтобы изменить способ отображения кнопки в сообщении или на странице.

На боковой панели

Наиболее распространенным местом для кнопок пожертвований Paypal, вероятно, является боковая панель. Он отображается на каждой странице и на каждой публикации, которую вы хотите, но не прерывает поток вашего контента. Кроме того, это безумно легко настроить! Просто вернитесь на свою панель инструментов и нажмите «Внешний вид»> «Виджеты».

Затем щелкните виджет «Текст» и добавьте его на свою боковую панель в нужном месте. Имейте в виду, что WordPress 4.8 изменил виджет Text по сравнению с тем, каким он был в течение многих лет. Теперь у нас есть редактор форматированного текста, который мы не хотим использовать.

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

Текстовая вкладка работает почти так же, как и старый текстовый виджет до 4.8 (за исключением включения кнопок кода. Просто введите свой HTML и нажмите "Сохранить". Вуаля, у вас есть кнопка денег в верхней части боковой панели!

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

Вы готовы получить эти деньги!

Теперь вы полностью готовы добавить кнопку пожертвования Paypal на свой сайт WordPress! Независимо от того, какая тема используется на вашем сайте или на что вы принимаете пожертвования, все готово. (Но давайте будем честны друг с другом - это все же для щенка, правда?).

Миниатюра изображения статьи от mohamed1982eg / pixabay.com