Custom Page Layouts

Click the numbered tab on the left to see a particular asset’s specifications

The content area of an OhioLottery.com page is able to accommodate a variety of design layouts. The only major limitation is the width of content area. At full size on a desktop screen, the content area is 864px wide, and then it scales responsively as the screen width decreases. A couple design examples are provided below.

Custom Layout Examples

Grid Layout


List Layout


Header

Grid

List


Video Modal Link

Grid

Closed
Open

List

Closed
Open

Background

List

1

Grid Header

Width

864px

Height

200-500px

File Types

.jpg, .png (24 bit)

Usage

This wide image should relate to the homepage slider image, containing the promotional logo image.

Responsive

This image will scale for responsive layouts. Make sure there is enough height to read the image clearly at 280px wide.

2

List Header

Width

400-600px

Height

200-500px

File Types

.png (24 Bit)

Usage

This image should relate to the homepage slider image, containing the promotional logo image.This image must be a .png with transparency as it will sit ontop of a background image.

Responsive

This image will scale for responsive layouts. It should be no less than 200px wide at it's smallest and no wider than 300px.

3

Grid Video Link - Closed

Width

416px

Height

316px

File Types

.jpg, .png (24 Bit)

Usage

This image should include the winner number and have a barrier (curtain, closed box, etc) that is closed.

Responsive

This image will scale for responsive layouts. All layouts become a single column as screens collapse. Make sure it reads well at 240px wide.

4

Grid Video Link - Open

Width

416px

Height

316px

File Types

.jpg, .png (24 bit)

Usage

This image should mimic the "closed" image but with the barrier opened somehow (opened curtain, open box, etc). It may also contain the messaging to prompt the user to click to view the winner reveal.

Responsive

This image will scale for responsive layouts. All layouts become a single column as screens collapse. Make sure it reads well at 240px wide.

5

List Video Link - Closed

Width

500px

Height

427px

File Types

.png (24 Bit)

Usage

This image should include the winner number and have a barrier (curtain, closed box, etc) that is closed. This image must be a .png as it will sit ontop of a background image.

Responsive

This image will scale for responsive layouts. All layouts become a single column as screens collapse. Make sure it reads well at 240px wide.

6

List Video Link - Open

Width

500px

Height

427px

File Types

.png (24 Bit)

Usage

This image should mimic the "closed" image but with the barrier opened somehow (opened curtain, open box, etc). It may also contain the messaging to prompt the user to click to view the winner reveal. This image must be a .png as it will sit ontop of a background image.

Responsive

This image will scale for responsive layouts. All layouts become a single column as screens collapse. Make sure it reads well at 240px wide.

7

List - Background

Width

2000px

Height

? as needed (Roughly 330px per winner plus header height)

File Types

.jpg, .png (24 bit)

Usage

This image is the background that the Video Link and Header image for the list view will sit on. It should be a simple background image with no text. Good examples would be simple, low contrast patterns, solid colors or vignettes with slight textures.

Responsive

This image will scale for responsive layouts. It's design should draw the user towards the center of the screen as all layouts become a single column as the screen collapses.