OhioHealth Home  /  User Guide for Editors  /   /  Campaign Left or Right aligned text

OhioHealth HeartWorks at O'Bleness Hospital

Cardiopulmonary Rehabilitation and Exercise Therapy Program

link 1 optional link 2 optional

The text box can be aligned to the left or the right on the image in the header.

The box can be small, medium, or large and will grow wider with each. The height remains the same for all sizes. This example is using Large as the size.

Links are optional and can be used on any size text area. But you need to pay attention to the length of the text.  If it wraps too much, the links and/or text will be pushed out of the box. They should only be used on small and medium-sized areas if the text is short.

 

Standard header with content block

(with BG/with no BG)

https://share.goabstract.com/c97d4334-bdf8-4699-adb6-0d690a478000

 

Current set up:

Site main header (nav) on or off

Site Footer on or off

Header on or off

Current Header image will remain the same

 

 

New options/set up:

 

  1. Site main header (nav)
    • If this is turned off
      • Add new “slim main header” that shows a centered OhioHealth logo (with link to home page)
      • There is no navigation or breadcrumb showing on any platform
    • If this is turned on
      • Add the ability to show/hide breadcrumb
      • If the breadcrumb is hidden, the row goes away and content moves up

  1. No on page section navigation – always a single scroll page

 

  1. Text on image options:
    • Blue color Background with opacity
      • No color choice – must be blue
      • No choice on opacity
      • Text is always white
      • CTA button style options are ONLY white or transparent with white outline
      • White is always left CTA and white outline is always the right CTA (if there are 2)

 

  • No Background
    • Text is always blue
    • CTA button option only blue or transparent with blue outline
    • Blue is always left CTA and blue outline is always the right CTA (if there are 2)

 

 

  1. There is a height limit for the text area
    • desktop - 115px margin top and bottom
    • tablet – 50 px margin top and bottom
    • mobile doesn’t matter

  2. Content area can be left, right or centered
    • Centered content area
      • Text is always white
      • BG is always blue
      • CTA button style options are ONLY white or transparent with white outline
      • Content area and text within it is centered

  1. Desktop (this only applies to left or right positioned)
    • Text and CTA are always left aligned within the content area
    • Entire content area (with background) can be positioned right or left.
    • Entire content area is always centered vertically within the header
    • Options on the text area width will need to be finalized during exits with Janet
      • Different text area widths to start
        • 570px
        • 625px
        • 730px

  1. Tablet
    • Chosen position of the content area doesn’t matter. It will always show LEFT positioned
      • This applies to left or right positioned content area
      • Centered text is still centered
    • Text area size is fixed and the size they chose for desktop will not matter

  2. Mobile
    • Content area centered and left aligned
    • Does not show BG image if there is a background color used for the content area or if it is the centered version
    • Content area blue BG has no opacity – it is solid in mobile

  3. Padding around text on blue background is the same no matter the width (transparent doesn’t need padding)

 

  1. Uses the standard CTA font style

 

  1. In Editor
    • Headline (required)
    • Tagline
    • CTA1 (blue solid or white solid only)
    • CTA2 (transparent while outline or blue outline only)
    • Right, left or center positioned for the content area – default left
    • 3 sized box width options
    • Ability to upload 3 versions of header image
      • Desktop (required)
      • Tablet
      • Mobile <- only needed for the non-blue BG option
      • We can’t tell you the size limits on these images yet. That will be a different iteration, but the image ratio will need to be maintained no matter the size for the different versions.

 

Campaign Template fixes/updates

 

In Configuration tab:

Hide header block -> change name to Hide Page Header

Hide Site Header -> change name to Hide Site Navigation

Hide Slim Navigation -> change name to Hide Slim Site Header w/logo

 

**Hide Slim Site Header w/logo does NOT show in configuration tab

 

 

If Hide Site Navigation is checked (=true)

   Then the Slim Site Header (white with logo) shows in its place in the template, and

   The ‘Hide Slim Site Header w/logo’ checkbox shows up as an option in Configuration under the “Hide Site Navigation” option

Campaign Template fixes/updates

 

Card #1 – Task/Story

Change names of some of the items in the Configuration Tab.

  • Hide header block -> change name to Hide Page Header
  • Hide Site Header -> change name to Hide Site Navigation
  • Hide Slim Navigation -> change name to Hide Slim Site Header w/logo

 

Card #2 – Task/Story

Update the way items show up in Configuration Tab.

 

Hide Slim Site Header w/logo does NOT show in configuration tab by default.

 

If Hide Site Navigation is checked (=true)

Then the ‘Hide Slim Site Header w/logo’ checkbox shows up as an option in Configuration under the “Hide Site Navigation” option (indented a little)

 

Card #3 – Bug

The Slim Site Header w/logo is not showing up on this template.

 

When Hide Site Navigation is checked (=true)

The slim site header (white with logo) should show at the top of the page in place of the old Site Nav


Card #4 - Bug

Hide Breadcrumb checkbox not working correctly.

 

The Hide Breadcrumb option should function separately from the nav and header but right now is tied to Site Nav Header (it works correctly on Slim template). 

 

The breadcrumb should be able to be turned on or off no matter if the nav is on or off. 32