This post covers how to add a COVID-19 Community Support 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:

• How to create the “Community Support Section”

---

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)
   1. In the style tab, change the crop setting to circle.
   2. Under Align choose center.
   3. Under Border, in the general settings adjust the following:
      • Style > Solid
      • Color > #00a4a6 (or if the customer has provided a hex code or the site colors do not match this)
      • Width > 4px (link the values by clicking the link icon)
   4. Save
5. Add a PowerPack Smart Headings module to the right column with the following settings:
   1. Heading tag: H2
   2. Heading title: Show your support for 
   3. Select Dual Heading and enter the following into the Secondary title: [local charity name]
   4. Description: Contributions will help support employees and continued operations of [local charity name]. Together we can make it through these uncertain times.
   5. 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
6. Add any button module to the right column under the heading with the following settings:
   1. Text: Learn More
   2. Link: paste the 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
7. Save and publish your changes