1. Encompass Support Center
  2. Events
  3. Events Tips & Tricks

Converting a Event 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 form, Registration form, or 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 an Event is hosted on your home page, users can click on the link of the Event and get redirected to the Details page. This Detail page includes specific Event details along with contact and location information.

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

Converting an Event Detail Page to a Mobile-Friendly Page

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

  1. Go to Events > Events Home.
  2. If you are aware of the Event name which is using a non-mobile-friendly Detail page, open that Event from the list or, use the search function to find the Event 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 Event 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.
    Layout_Edit.GIF
    You can see double bracketed pieces of information that are pulling from the Event 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 Event 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.
    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 Event page and all the changes get reflected there.
  12. Click Save Changes in the top toolbar to save the changes to the particular Event design.mceclip2.png

Re-using the Layout

If you have other Events 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 mceclip4.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 Event.

Related articles