1. Encompass Support Center
  2. Online Giving
  3. Donations Tips & Tricks

Converting a Donation Detail Page to a Mobile Friendly Layout

Print Friendly and PDF Follow

TABLE OF CONTENTS

The Details page is created automatically for the Event, Donation, and Membership Form. Details page can also be referred to as landing page. This page can be used to list out goals of the Donation events, Benefits of purchasing membership, time and location of an Event, etc.

The page also includes a button that links to the Donation/Registration/Membership purchased form. Each Details page has an individual URL. Users can land on these pages automatically when the URLs are linked with the actual Donation/Registration/Membership purchased form.

Navigating to a Details Page

If a Donation is hosted on your home page, users can click on the link of the Donation and get redirected to the Details page. This Detail page includes specific Donation campaign details along with contact and location information.

To donate, click on the Donation Button. Admins can always access these pages from the Admin side.

Converting a Donation Detail Page to a Mobile-Friendly Page

To convert a Detail page from non-mobile-friendly to a mobile-friendly page:

  1. Go to Donations > Donations Home.
  2. If you are aware of the Donation Campaign name which is using a non-mobile-friendly Detail page, open that Donation from the list or, use the search function to find the Donation Campaign and open it.
  3. Click View Content, here you can review how the non-mobile-friendly page looks like.
  4. Click View Mode > Layout Edit. This takes you to the Content Editor and helps you to confirm if the Donation details are non-mobile-friendly.
    Now, as you move around different areas, the areas are shedding in green.
    To make the changes to the Detail page, move your mouse to the top, next to the Title, this highlights the entire page in green, and click once. This pops up the Modify Layout window.
    Donation_Layout.GIF
    You can see double bracketed pieces of information that are pulling from the Donation properties. If you see dash lines, these represent the Details page contains tables. Remember, the tables are not mobile-friendly.
  5. Get the HTML snippet from the support center to convert a non-mobile-friendly Details page layout to a mobile-friendly layout.
  6. Go to Mobile Donation Detail Page Layouts and chose from the predefined layout present on the page.
  7. Copy the HTML code for the predefined templates and go back to the Modify Layout window.
  8. Click <>HTML next to Design, and Delete the current non-responsive HTML code.
    Donation_HTML_Delete.GIF
  9. Paste the copied HTML code from the support center.
  10. Go to Design mode to see the new view after placing the new HTML code. You can further modify the design from this page. If you do not want any double bracketed items, you can remove them from here.
  11. Click Save after making the changes. This takes you to the Donation page and all the changes get reflected there.
  12. You need to click Save Changes in the top toolbar to save the changes to the particular Donation Campaign design.
    mceclip1.png

Re-using the Layout

If you have another Donation Campaign to create and you want to use the same layout, you can save the newly created layout and use it when required.

Click Reuse Layout, you are prompted to add a Layout Name, after adding a Layout Name click mceclip2.png.

You can see this newly saved Layout under the Layout dropdown list that appears towards the bottom of the first page of the properties when building a new Campaign.

 

Related articles