Build Customized Landing Pages

Clinical Studio 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 Clinical Studio sends the URL via notification to users, this is the page they land on first. 
    • The link that is sent to users when they are registered to use the system, prior to signing in is:

      https://www.clinicalstudio.com/Pages/Index.aspx

      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 Or study dropdown called Study Logo and Theme and upload your custom theme or just hit save the existing template!


To say this again: The four landing pages can be customized to include the content you desire.

However, if you want to build customized landing pages, YOU MUST either SIMPLY JUST SAVE THE STANDARD TEMPLATE  OR upload a customized theme. 

THIS IS REQUIRED TO BE ABLE TO ADD CUSTOMIZED LANDING PAGES!


See image below:

  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.


Please see the Theme Manager help document for more information.


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 make your experience more enjoyable.

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.