Skip to content
Home > Posts > How to add a COVID-19 Response Layout to a WordPress Site

How to add a COVID-19 Response Layout to a WordPress Site

April 21, 2020 | , , , ,

This post covers how to add a COVID-19 Response layout in WordPress. The customer will choose which of the 3 layouts seen here that they would like to implement on their site. Follow the instructions below for each layout to create them on request.

This article covers the following:

#OpenWeStand badges for download:

(open image to view full size version > right click and save)

COVID-19 Response Layout 1 – Collect Donations through PayPal

Backend: Set up the Give plugin

Install / Activate

  1. Go to dashboard > plugins > add new
  2. Search for “give” then install and activate the PWS-approved plugin “GiveWP – Donation Plugin and Fundraising Platform” by “GiveWP”

Set up the Form [Dashboard > Donations > Add Form > Donation Options]

  1. Once active, you’ll see a “donations” tab with the Give icon appear in the dashboard admin sidebar, hover over this and click “add form”
  2. Use the following settings for the fields in the “donation options” tab:
    • Donation Option: Set Donation
    • Set Donation: $25
    • Custom Amount: Enabled
  3. Leave the rest of the fields as they are with their default information
  4. Publish the form

General Settings [Dashboard > Donations > Settings > General]

  1. Now, from the “donations” tab in the dashboard admin sidebar, click “settings” > the “general” tab should be selected
  2. The installation of the plugin should have created 3 pages and added shortcodes to them: Donation Confirmation, Donation Failed, and Donation History. Make sure that these 3 pages have been created and set in their respective dropdowns. If they have not been auto-created for some reason, make these pages and add the shortcodes to the success and history pages, then select the pages you made in the corresponding dropdowns for each.
  3. Make sure the base country and state/province are set using the responses from the customer if provided, then save changes

Payment Gateways [Dashboard > Donations > Settings > Payment Gateways > Gateways]

  1. Staying in settings, select the “payment gateways” tab
  2. Disable “test mode”
  3. Under “enabled gateways” check the box next to “PayPal Standard” to enable it, then change it to the default payment gateway
  4. Disable test donations and offline donations, then save changes

Set up PayPal [Dashboard > Donations > Settings > Payment Gateways > PayPal Standard]

  1. Staying in settings, and staying on the “payment gateways” tab, select the blue link below it for “PayPal Standard”
  2. Add the customer’s PayPal email as provided in their response
  3. Leave all other fields as they are, then save changes

Frontend: Create the Layout

  1. Open the homepage in Beaver Builder and choose a good spot to create the layout
  2. Add a new row with 2 columns (the layout demo shows the left column at a 45% width and the right one at a 55% width, but you can leave these at 50% or change them to better suit the layout of the site as needed)
  3. Vertically align the columns to the middle
  4. Add a standard photo module to the left column – if the customer has a better photo in their media library or if they provide one, use it, else you can use the photo seen in the demo OR choose an appropriate stock photo that matches the color scheme of the site (click here for link to image from demo)
  5. Add a PowerPack Smart Headings module to the right column with the following settings:
    • Heading tag: H2
    • Heading title: Help Our Cause
    • Description: Your support and contributions will enable us to meet our goals and improve conditions. Your generous donation will fund our mission.
    • Leave the colors/sizes and fonts set to the defaults used on the site – if there’s tweaking that needs to be done to make the content look better, you may do that as you see fit
  6. In the modules drop down, search for “give” and add the “GiveWP – Donation Form” to the right column under the heading with the following settings:
    • GiveWP Form: Choose the name of the form you created from the dropdown
    • Display Style: Button
    • Floating Labels: Global Option
    • Display Content: None
  7. Save and publish your changes

Helpful Resources:

COVID-19 Response Layout 2 – Collect Donations through GoFundMe

Frontend: Create the Layout

  1. Open the homepage in Beaver Builder and choose a good spot to create the layout
  2. Add a new row with 2 columns (the layout demo shows the left column at a 45% width and the right one at a 55% width, but you can leave these at 50% or change them to better suit the layout of the site as needed)
  3. Vertically align the columns to the middle
  4. Add a standard photo module to the left column – if the customer has a better photo in their media library or if they provide one, use it, else you can use the photo seen in the demo OR choose an appropriate stock photo that matches the color scheme of the site (click here for link to image from demo)
  5. Add a standard photo module to the right column and apply the following settings:
    1. General > Photo: Use the #OpenWeStand logo png
    2. General > Link Type: URL
    3. General > Link URL: https://www.openwestand.org/ – check the box to open the link in a new window
    4. Style > Width: 70px
    5. Style > Align: Set it to the right on desktop, but set it to the center when the content stacks
  6. Add a PowerPack Smart Headings module to the right column under the #OpenWeStand logo with the following settings:
    1. Heading tag: H2
    2. Heading title: We Could Use Your Help
    3. Description: Your contribution will enable us to support our employees and continue operations. We are very grateful for your generosity.
    4. Leave the colors/sizes and fonts set to the defaults used on the site – if there’s tweaking that needs to be done with colors/sizing/margins to make the content look better, you may do that as you see fit
  7. Add any button module to the right column under the heading with the following settings:
    1. Text: Donate Now
    2. Link: paste the GoFundMe fundraiser link provided by the customer in this field – check the box to open the link in a new window
    3. Style the button as needed to match the styling of the buttons on the rest of the site
  8. Save and publish your changes

COVID-19 Response Layout 3 – Support Small Businesses #OpenWeStand

Frontend: Create the Layout

  1. Open the footer themer layout in Beaver Builder and choose a good spot to place the #OpenWeStand logo (for V2 or Genesis sites, edit the homepage and put this layout in a row above the footer area there instead)
  2. Add a standard photo module to the right column and apply the following settings:
    1. General > Photo: Use the #OpenWeStand logo png (use the colored version of the logo for light backgrounds, and use the white outlined version of the logo for dark backgrounds)
    2. General > Link Type: URL
    3. General > Link URL: https://www.openwestand.org/ – check the box to open the link in a new window
    4. Style > Width: 100px (you can adjust this slightly as needed to help it fit nicely in the desired area)
    5. Style > Align: Set it to the right on desktop, but set it to the center when the content stacks (feel free to change the alignment depending on what other items are in the footer and where it looks best)
  3. Save and publish your changes

Visual Examples:

Badge on light background
Badge on dark background
, , , , , , , , , ,
Scroll To Top