$30 off During Our Annual Pro Sale. View Details »

WordCamp London Slides

WordCamp London Slides

Slides from my lightening talk at WordCamp London 2018 demo-ing how to users can create print style hero images via the dashboard.

Using Advanced Custom Fields users can layer background and inline images and apply CSS properties such as blend-modes, rotate and opacity to any element.

Steve Honeyman

April 17, 2018
Tweet

More Decks by Steve Honeyman

Other Decks in Technology

Transcript

  1. Using Advanced Custom Fields to create multi-layered print style graphics

    in the browser, adding a little responsive type into the mix.
  2. • Image Field Type to control images • Radio Button

    Field Type to control blend-modes • Number Field Type to control opacity, rotate and letter-spacing if required. • Color Picker Field Type to control background and font colours.
  3. Use viewport width and CSS locks to scale and control.

    Apply either by; • Resetting font-size on HTML root element • Using calc() on specific elements