Production Guide 

has-large-body-copy has-right-aligned-image

Retina Images = Desktop 1120x1180 | Tablet 1456x600 | Mobile: 690x600

Kathy Kline, Designer

has-right-aligned-image has-small-image

Retina Images = Desktop 910x820 | Tablet 1256x500 | Mobile 530x480

has-centered-text

Retina Images = Desktop 1120x1180 | Tablet 1456x600 | Mobile: 690x600

has-background-image has-centered-text

Retina Images = Desktop 1240X590 | Tablet 1256x500 | Mobile 690x1584

has-background-image-with-transparent-overlay has-centered-text has-large-heading has-light-text

Retina Images = Desktop 1240X590 | Tablet 1256x500 | Mobile 690x1584

has-centered-text has-divider has-large-heading has-right-aligned-image

Need Images Sizes for this one and how to treat the circle

 

The image sizes for Large, Small and Background images are as follows:

 

Slide 1: Retina Images = Desktop 1120x1180 | Tablet 1456x600 | Mobile: 690x600

 

Slide 2: Retina Images = Desktop 910x820 | Tablet 1256x500 | Mobile 530x480

 

Slide 3: Retina Images = Desktop 1120x1180 | Tablet 1456x600 | Mobile: 690x600

 

Slide 4: Retina Images = Desktop 1120x1180 | Tablet 1456x600 | Mobile: 690x600

 

Slide 5: Retina Images = Desktop 1240X590 | Tablet 1256x500 | Mobile 690x1584

 

Slide 6: To create the circle effect. Circle image size is 468 x 468 aligned to the left edge of the full image (1120 x 1180) - Remove circle or background on responsive sizes (Tablet and Mobile) 

Retina Images = Desktop 1120x1180 | Tablet 1456x600 | Mobile: 690x600

 

Slide 7: The image will pull from the video thumbnail 

Slide 8: Retina Images = Desktop 1120x1180 | Tablet 1456x600 | Mobile: 690x600

 

Additional examples on original Xd Designs - (These slide references below relate to Homepage Xd Designs:) 

Large Image (Slides 1 & 3 in Homepage Designs):
Desktop: 560x590 (Retina: 1120x1180)
Tablet: 728x300 (Retina: 1456x600)
Mobile: 345x300 (Retina: 690x600)Small Image

(Slide 2 in Homepage Designs):
Desktop: 455x410 (Retina: 910x820)
Tablet: 628x250 (Retina: 1256x500)
Mobile: 265x240 (Retina: 530x480)Background Image

(Slide 4 in Homepage Designs):
Desktop: 1240x590 (Retina: 2480x1180)
Tablet: 728x703 (Retina: 1456x1406)
Mobile: 345x792 (Retina: 690x1584)

Inspiration Slider (Featured Content Carousel) Module How to Guide

(To assign alternate layouts to the Featuerd content carousel:

1. Click on Settings Icon

2. Scroll to bottom of page and udpate, "CSS Class" field (see full list beloww) 

-Each CSS Class setting below can be used individually or in combination to create achieved layout. 

- When used in combinations there should be one space seperating each value. 

3. Save your changes on top riight to module. 

4. Save your pages on top right for Page or Post you are working in. 

5. Clear the page Cache

Settings>Cache Management > Check off Page Cached> Submit (left-hand, grey button - NOT the orange button to the right) 

6. Refresh front-end web page and view changes. 

 

To Assign content:

Upload Desktop, Tablet and Mobile images (see sizes below)

Add copy to each field

Add url as needed starting with / 

 

As you are working and producing content recommended to use 3-4 tabs and alternate between tabs instead of between areas of M2 admin. 

 

1. This page to copy/paste CSS Class IDs

2. The page you are working on in Magento admin. 

3. The Settings>Cache Management page 

4. The front-end/ (webpage) of the page you are working on in Magento

CSS Class IDs

.The default is for the image to be aligned left, which is why there's only CSS Classes to align images to the right.

You can include multiple CSS Classes, each is separated by just a single space

 

has-background-image 

has-background-image-with-transparent-overlay 

has-centered-text 

has-divider 

has-divider-desktop 

has-divider-tablet 

has-divider-mobile 

has-large-heading 

has-large-body-copy 

has-light-text 

has-right-aligned-image 

has-right-aligned-video 

has-small-heading 

has-small-image 

has-small-video

 

For examples slides above use the following combinations of CSS Class IDs: 

Slide 1: 

CSS Class ID: has-large-body-copy has-right-aligned-image

Retina Images = Desktop 1120x1180 | Tablet 1456x600 | Mobile: 690x600

 

Slide 2: 

CSS Class ID:has-right-aligned-image has-small-image
Retina Images = Desktop 910x820 | Tablet 1256x500 | Mobile 530x480

 

Slide 3: 

CSS Class ID:has-centered-text
Retina Images = Desktop 1120x1180 | Tablet 1456x600 | Mobile: 690x600

 

Slide 4: 

CSS Class ID:has-background-image has-centered-text
Retina Images = Desktop 1240X590 | Tablet 1256x500 | Mobile 690x1584

 

Slide 5: 

CSS Class ID: has-background-image has-centered-text
Retina Images = Desktop 1240X590 | Tablet 1256x500 | Mobile 690x1584

 

Slide 6: 

has-centered-text has-divider has-large-heading has-right-aligned-image

To create the circle effect. Circle image size is 468 x 468 aligned to the left edge of the full image (1120 x 1180) - Remove circle or background on responsive sizes (Tablet and Mobile) 

Retina Images = Desktop 1120x1180 | Tablet 1456x600 | Mobile: 690x600

 

Slide 7: 

CSS Class ID:has-centered-text has-right-aligned-video has-small-video

The image will pull from the video thumbnail 

 

Slide 8: 

CSS Class ID:has-small-heading

Retina Images = Desktop 1120x1180 | Tablet 1456x600 | Mobile: 690x600

 

Image Sizes for Variable Layouts