Site Specific

Training Videos

Below you'll find access to the training videos we captured during your training session.

We've noted out below the different areas discussed and what time within the video they're discussed:

Part 1a: Overview of Craft Side Nav & Singles/Channel Entry Types

TopicTime
Craft Login & Setting a Password00:42

Part 1b

TopicTime
Backend Overview: Backend Navigation00:22
Backend Overview: Entries & Entry Types01:35

Part 1c

TopicTime
Backend Overview: Entries & Entry Types00:40
Backend Overview: Globals12:05
Backend Overview: Assets40:38
Assets: Replacing Assets45:11
Entries: Titles & Slugs46:30
Entries: Secondary Navigation55:15
Entries: SEO Tab59:40

Part 2

TopicTime
Entries: Creating a New Entry00:14
Entries: Duplicating an Entry06:25
Entries: Previewing a Page08:50
Entries: Modules10:00
Modules: Module Test Page12:25
Modules: Adding a Module Block15:25

Part 3

TopicTime
Modules: Adding Modules to Existing Page00:30
Modules: Advanced Options04:55
Help Section: Overview24:35
School Recipes29:30
Sitemap Areas Needing Attention34:15

Part 4

TopicTime
Singles, Structures & Channels Recap04:11
Assets -> Documents: Adding New & Acquiring Link10:33
Placing URL Links Recap12:50
Assets -> Images: Using the Grid to Browse Images15:25
Modules: "BB" Shortcut Recap17:00
Modules: Images & Text Grid Recommendation23:20
Secondary Navigation Recap28:23
"Tertiary Page" Design vs. Overview Page Design31:52

Part 5

TopicTime
Image Size Guide Recap03:33
Modules: Intro Image & Text Module vs. Image & Text Module04:27
Tip: Watch Headers Being Bold09:50
Tip: Copying & Pasting Info/Links Retains Old Styling10:55
Headers & When to Use Them Recap13:41
Modules: When to use the Banner Module21:15
Advanced Options: Inner & Bottom Spacing Recap22:50
Page Margins & Text Alignment Resulting in White Space27:25
Help: Site Specific & Content Entry Sections33:14
Modules: Text Module Pull Quotes vs. Testimonials Module36:18
Reverting Pages Back to Previous Versions45:38
Deleting Modules Recap47:17
Saving Images for Web: Free Online Tool51:40

 

Module Stack

For ease of reference, visit the Full Module List Page in order to view what modules you can build a page with.

 

Secondary Navigation

The Secondary Navigation will automatically appear when 3 or more H2 titles appear on a page. In some instances, such as on an "Overview" page, you'll want to comment the Secondary Navigation out. In order to do this follow the steps below:

  1. Navigate to the page entry and open it.
  2. Select the "Meta" tab just below the page title.
  3. Change the "Meta-Subheader Anchors" to "Disabled."
  4. Save the page.

For a visual reference please click here.

 

Featured Entries (Reliquary) Module

This module is a bit unique in that it will allow you to perform a search within the Blog, Home Recipes, Press Room & Resource Library sections. You can then capture that search and place the results within this module on another page.

For instance, let's say you want to feature "Fruit" related Recipes on one of the pages. You can add this module to any page and display the "Fruit" Recipe results by doing the following:

 

Featured Entries (Manual) Module

This module allows you to add specific entries from anywhere on the site. To fill out this module do the following:

 

Featured Entries (Automatic) Module

This module allows you to select a specific section and will populate the module with results that are automatically displayed. To fill out this module do the following:

 

SEO

The "SEO" for each page can be accessed by doing the following:

  1. Navigate to the page entry and open it.
  2. Select the "SEO" tab just below the page title.

We've outlined below what each section is in here depending upon what you're looking do.

Title

This will auto-populate with what the "Title" is of your entry and thus will be what your page title is on the front end for users to see.

SEO Meta -> SEO Title Source

This does not need to be filled out unless you want to override what's appearing in the "Title" field above for your page title. We recommend that this section not be touched except for in the following scenario:

SEO Descriptive Source

When this area is filled out it will do two things when copy is placed in the description field:

  1. Google can use the copy for what appears in Google Search Results
  2. Places text below the title in The Lunch Box Search Results Card

SEO Global Social Media Image

This is the image that will be used for display as the global website brand, as well as on Twitter Cards and Facebook OpenGraphs that link to the website. In order to change the SEO Global Social Media Image do the following:

  1. From Craft's Left Side Rail slick on "SEOmatic" displaying a few more options below.
  2. Select "Global SEO" from this list.
  3. On the page that appears, scroll down to the section that says "SEO Image Source"
  4. Click the "X" that appears next to the current images file name.
  5. Upload your new image.
  6. Once the image appears select the red "Save" button in the top right corner.

Click here to access a visual reference.

 

Affiliate Pop-up

If any of the conditions listed are met, the Affiliate Pop-up will trigger and a local storage variable is set on a users computer in order to prevent it from re-appearing again:

 

"Text Banner" Module

In order to have this module appear with reversed text (white text) you'll have to select one of the "Background Color" options found in the "Advanced Settings" area of the module. (Select any of the options except for either of the two "Gray" options.)

 

Modules with "Background Color"

We typically recommend that when building out your page you toggle between modules that use a "Background Color" with modules that do not. This provides a visual break for users as they scroll down the page.

Below is an example of how this would work on an interior secondary page:

  1. Start out the page with the "Text Image" Module and set the "Advanced Settings -> Background Color" to "Dotted Gray".
  2. After the above, you would then switch to using a few modules that don't have a "Background Color" set so the background would thus be white.
  3. After the above, you would switch back to using a module or few modules that use the "Advanced Settings -> Background Color" set to "Dotted Teal."

We typically don't recommend stacking modules with different "Background Colors" on top of one another for a few reasons:

 

Image Usage Tips

Below you'll find a list of when we recommend using specific types of images throughout the website, as well as helpful padding amounts.

 

Module Padding Tips

 

Image Sizes

Adhere to the following sizes for use on the site. All images should use a resolution of 72dpi and saved for web as a JPG that is 350kb or lower in file size:

Banners & Promos

  1. Homepage Banner Images = 3000px x 1500px
  2. Interior Banner Images = 3000px x 875px
  3. Square-ish Promos/Images = 1236 px x 1170 px
  4. Rectangle Promos/Images = 1236 px x 850
  5. Staff or Board of Director's Headshots = 1236 px x 1170 px

Module Specific

  1. Image and Text With Link Grid Module* = 1236 px x 1512 px
  2. Image Module = 3000 px x 1400 px
  3. Illustration Banner Module = 3848 px x 800 px (we recommend using the "Illustration-Banner.jpg" which can be found in the "Assets -> Images" area of the backend.)
  4. Text Module = 3000 px x 875 px
  5. Stats Module* = 3848 px x 1310 px

If you need a free online tool where you can upload and crop images you can use this free site found here: https://www.befunky.com/create/

*When used to house Tertiary Page Linkouts

 

Supporter Logo Size

Adhere to the following sizes for use on the site. We recommend that you center and adjust the size of each logo in relation to one another. The logo should not take up the whole space within the specified sizes as it will appear huge within the module. All should be at a resolution of 72dpi and saved for web as a PNG with a transparent background. Logos for the "Supporters" Bar in the footer should be reversed out to white:

  1. 800 px x 320 px

 

Illustration Sizes

Adhere to the following sizes for use on the site. We recommend that you center and adjust the size of each illustration in relation to one another. All illustrations should be a vector and saved for web at 72dpi as a JPG file.

For illustrations with transparent backgrounds, the illustration should not take up the whole space within the specified sizes as it will appear huge within the area where it lives. These should also be 72dpi and saved for web as a PNG with a transparent background:

  1. Square-ish Illustrations = 1236 px x 1170 px
  2. Rectangle Illustrations = 1236 px x 850

 

Icon Designations

Supporting Research Icons (Topics)

Webinar Icons (Media Type)

Project Produce Icons (Project Type)

Recipes Overview

Misc. Icons Available

These aren't featured on any page, but are available for use in other collateral items.

 

Icon Sizes Featured on Card/Tile Pages

Adhere to the following sizes for use on the site. We recommend that you center and adjust the size of each icon in relation to one another. The icon should not take up the whole space within the specified sizes as it will appear huge within the area where it lives. All icons should be a vector graphic and saved out as a SVG file:

56 px x 56 px