Summary

  • This article covers creating a customized landing page.
     

Table of Contents

  • Build Customized Landing Pages
  • Creating Web Pages
  • Web Page Designer

Build Customized Landing Pages

Datatrak Direct allows the Website Host or Study Designer to create their own customized landing pages. These pages can be created using the Build Web Page link accessed from the Website Host for Host Landing Pages OR Study menu for Study-Specific Landing Pages.


Customized Landing pages are the standard pages that all users see in the system. They are pages that offer only static content; however, that content can be totally customized by the Website Host or Study Designer. There are four study/host landing pages in the system.


  1. Index – This is the first page a user sees. It is usually presented prior to a user signing in to the system. When Datatrak Direct sends the URL via notification to users, this is the page they land on first. 
    • There are two links sent to users when they are registered to use the system, depending on whether they are a clinician or participant/patient. 

      When the user lands on this page by clicking the link that the system sends, the page displayed will be the customized Index web page that you created.


  2. Home – This is the home page. Users signing in to your site will land on this page when they have successfully entered their e-mail and password. They also land on this page when the Home button is clicked in the Page Header area.
  3. Sign Out – When a user clicks the Sign Out link in the Page Header area, they land on this page. They also land on this page when their session has expired. Sample below:
  1. Contact Us – When a user clicks the Contact Us link in the Account Menu, they will be brought to this page. This page should supply all necessary contact information for the user in case they need to contact you, the Website Host or Study Designer.

Saving Standard Theme or adding Customized Themes Are Required


To build a customized landing page, you must first go to Host Manager dropdown called Host Theme Manager or the study dropdown called Study Logo and Theme and upload your custom theme or select save to save the existing template. You won't be able to add customized landing pages unless you save the standard template or upload a customized theme.


  1. Select Website Host or Study
  2. Choose Host/Study Logo and Theme from menu
  3. Either upload your custom theme and colors or simply just hit save button


The Ability to add custom landing pages is now enabled.



Creating Web Pages

When creating web pages, it is very important to remember this rule: add your web page content first and then format the content to achieve the look and feel you desire. The editor is available in any browser. However, because of that, we highly recommend that you follow this rule because it will save you time and improve your experience.

The basic process for creating a new web page is as follows:

First Identify the type of landing page to create (Index, Home, Contact Us, Sign Out).

then:

  1. Enter the Page Name
  2. Select Page Type 
  3. Select Theme.
  4. Select an operator for the editing type to use making the document. NOTE: HTML is great for copying templates across studies. 
  5. Create from scratch or as mentioned, copy in existing Web Page Text or HTML code in the Web Page Designer.  
  6. Save the Web Page by clicking the Save Page button located in the Create or Edit Web Page form.



The basic process for editing an existing web page is as follows:


Identify the web page to edit and click the corresponding Edit link in the Existing Web Pages table. Make all desired changes in the Web Page Designer.

Don't forget to hit the SAVE PAGE button!


Web Page Designer

 

One very handy tool is the ability to create web pages graphically or type the HTML directly in the editor. Typing the HTML directly in the editor allows you to tap into your customized themes and use the text color. For example, the following Header tags use the main theme text color.


  • <h1>This is a big header that uses the theme color</h1>
  • <h2> This is a smaller header that uses the theme color</h2>
  • <h3> This is a smaller header that uses the theme color</h3>
These tags are only available in the HTML Editor.

Themes saved at the Study level will supersede Host Web Page builder settings. If the theme at Study level had not been saved/applied, the Host settings can be used. However, it is recommended to apply themes using the Study Logo and Theme option to ensure each Study has the correct themes applied.

Need more help?

 Please visit the Datatrak Contact Information page.