Classroom User Guide

Product Guides  Last Updated: Time to Read: 12 minutes

The Classroom Child Theme by Obox is an official child theme for Layers designed for modern, full-featured educational websites.

Below are links to helpful articles to get you going with this child theme.

Step 1: Install Layers

Classroom is a collection of styles, presets and widgets for the Layers framework, which is free. View the Layers Install Guide

Step 2: Install the Child Theme

[Theme Install]

Optional: Setup ColorKit

ColorKit is included in Play and found in your Themeforest zip file as colorkit-extension.zip

View the ColorKit User Guide

Optional: Setup DevKit

DevKit is included in Play and is found in your Themeforest zip file as devkit-extension.zip

View the DevKit User Guide

events-widget

Classroom features a unique Events widget for adding custom evsnts lists. You can see how this widget works most easily by adding the Events page preset under LAYERS ADD NEW PAGE

To add your own widget:

  1. Visit the page you want to edit and click Edit Layout or from the front-end, click Customize in the admin bar.
  2. Click Edit Layout in the Customizer menu to expand the widget panel.
  3. Click +Add Widget and select the Events Widget

When you add a new Content widget, or if you have created a page using one of the Preset layouts, the widget will display some default settings and content, and have three column panels by default.

The design bar on the right side of the widget controls the overall style and layout for the widget.

Layout

This section sets the widgets’s overall size

  • Boxed will limit the width of the widget’s content. As such, the columns also become narrower.
  • Full Width will allow the slider to span the entire browser window and is the default.

List Style

  • Grid will arrange your columns in a uniform grid with an equal height on all column blocks.
  • Masonry allows each column block to fit together at various heights (such as Pinterest)

The gutter option controls the margins/spacing between blocks. Uncheck it to remove spacing.

Text

Choose an alignment for the widget’s main Title and Description and select your preferred size.

  • Each size option is pre-configured with optimal balance, line height and size combinations.

To set a custom color, click on the Color option and select a color from the palette or enter an HTML hex value (ie. #123456)

Background

The background option affects the widget area

Choose Image

Click here to choose an image if you want it to fill the entire widget behind the content with something other than a solid color.

Textures, photos and images without embedded text are best.

Full-size images you will not be tiling should be at least 1908px wide and as tall as your slider height to ensure highest quality at all screen sizes.

Background Color

To choose a background color, click the color palette or enter an HTML hex value.

Repeat

If using a tileable image, choose a Repeat option

Position

This option aligns your image vertically and can help you adjust the placement of the subject of your background if needed.

Stretch

Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

Darken

Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

Advanced

This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom css that will load only when a widget with this class is loaded. This is useful in cases where you want to style widgets differently from one another and want the styling to be saved in the page’s export data. This has advantages over using the global CSS area when creating style kits, for example.

You may also increase or decrease widget padding and margins here.

If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

See How to Use the Advanced Design Bar Option

Classroom features a handful of pre-built custom classes you can add to the Custom Class field of any Content Widget to replicate effects seen in some of the preset pages. Class names outlined at the end of this guide can be placed into the Custom Classes field of this Advanced option without any further CSS.

 

You may enter a title and short description here, if desired, or leave this section blank.

Title sets the “H3” on the widget, which takes the text size, color and alignment you set in the Design Bar

The Description field, containing “Our services run deep and are backed by over ten years of experience.” by default, includes rich text editing and supports basic HTML input via the Code view, much like the WordPress editor. The most common use is to enter a short excerpt of 1-3 sentences to introduce the following content. This field may optionally be left blank.

  • You cannot put scripts into this field such as javascript snippets
  • You should not paste text/html from Word or other text editors into this field or it may carry over unpredictable code that causes formatting issues.
  • Shortcodes are OK, but the element pulled in may not jive well with the widget limitations and may be best in a column or require Advanced CSS styling.

widget-options

The widget options bar is something you will see in most Layers widgets. These menus give you detailed control over the content of the widget, much like the WordPress post editor.

background-iconBackground

Choose Image

Click here to choose an image if you want it to fill the entire slide behind the content with something other than a solid color.

Textures, photos and images without embedded text are best.

Full-size images you will not be tiling should be at least 1908px wide and as tall as your widget height to ensure highest quality at all screen sizes. Tiles or repeatable images can be any size you want.

Color

Choose a background color.

Repeat

If using a tileable image, choose a Repeat option

Position

This option aligns your image vertically and can help you adjust the placement of the subject of your background if needed.

Stretch

Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

For the pros, this option sets the background-size: cover; property.

Darken

Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

image-iconFeatured Media

This setting adds an image or video player to the content area of your slide. Unlike the background, this media is responsive.

Choose Image

Click here to choose or upload an image in the Media Library. For best results, use images at least 960px wide. They will be resized automatically based on the image layout and ratio you choose in the next few options.

Video URL

You can add a video from any hosted source by pasting the oEmbed URL into this field.

Most major providers support oEmbed, including YouTube, Vimeo, SoundCloud, Twitter and Vevo.

The URL is copied from the "Share" link on the video itself.

video-widget
Image Ratio

The icon bar at the bottom of the Featured Media panel controls how your image is scaled or cropped. When using embedded video, these options will only control the width of the player and the circle option is ignored.

From left to right:

  • Portrait: Uses the 340px wide scale of portrait oriented images, or crops your image to 340px from center. The original height is maintained.
  • Landscape: Uses the 480px wide scale of landscape oriented images, or crops your portrait images from center.
  • Square: crops your image to 480x480 from center
  • Original: Uses the original image, scaled proportionately to fit the layout. For left and right aligned images, this is a max of 630px wide. For center-aligned images, this is a max of 1000px wide.
  • Circle: Sets a radius on your image.  To get a perfect circle, your original image must be square. Portrait and Landscape originals will produce ovals.
 

image-alignContent Alignment

Select your desired alignment for your image.

text-iconText

Choose an alignment for your text and your preferred size.

  • Each size option is pre-configured with optimal balance, line height and size combinations.

To set a custom color, click on the Color option and select a color from the palette or enter an HTML hex value.

columns-iconColumn Width

The column menu sets the width of this specific column based on what percentage of the total it is. This takes a little bit of basic math. You must essentially take the number of columns blocks you have, and determine how many you want on each row. From there, you must divide the number of Layer columns each takes up to end up with a total of 12 or less.

  • The grid in Layers has 12 possible columns.
  • For one column block to span the full width of the page, you would choose 12 of 12 columns, which is equal to 100%.
  • For 3 columns to be equally balanced, you would choose 4 of 12 columns for each (4+4+4=12)
  • For 4 columns to be equally balanced, you would choose 3 of 12 columns for each (3+3+3+3=12)
  • To get an offset look with two column blocks, you could choose 9 of 12 columns for one and 3 of 12 for the other.

You can mix and match these, and create rows with varying width blocks. View the Layers Grids page for a visual guide to how grids work and how you might combine them for different layouts.

Title

This sets the heading in each column block and may optionally be left blank.

Excerpt

This field works like a lite version of the post editor and can take a small amount of text or basic HTML. The most common use is to enter a short excerpt of 1-3 sentences. This field may optionally be left blank.

  • You cannot put scripts into this field
  • You can put shortcodes into this field
  • You should not paste text/html from Word or other text editors into this field

What kind of HTML works best in rich-text fields?

The text fields have a <> button that activates the code view, similar to the Text tab of your post editor. You can use this view to add or edit the HTML of your content.

Each new row will automatically be wrapped in paragraph tags to keep the layout integrity of text-based content.  You can replace these with spans, add custom or framework classes to existing elements, or insert arbitrary HTML such as

<button>
s

or icon fonts. We do not recommend adding  structural elements such as sections, headers, footers or asides etc.

You cannot insert scripting (Javascript, PHP or non-HTML code) into the RTE field! Shortcodes are OK.

Each field is optional. If left blank, it will not appear.

Date

Enter the event date. You can use any date format here. Example: 1/2/2015 or Jan 1, 2015 or Tuesday, October 13, 2015

Time

Enter the event date. You can use any date format here. Example: 16:00 or 2PM or 2:00 PM

Place

Enter the location. This can be a venue, city, or address.

Links and Maps

You can link to a map or information page by adding an HTML link like so:

<a href="http://www.yourlink.com" target="_blank">Link Text</a>

To embed a map:

  1. Go to http://maps.google.com and create a new map or add the address in the top-left search to set the pin
  2.  Click the menu icon at top-left and choose Share or Embed Map.
  3. Click the Embed Map tab and select Custom Size from the size drop-down (set to Medium by default)
  4.  Click Preview Actual Size and adjust the height and width to your desired size to fit the column in your widget.  300×200 is a good starting point.
  5. Copy the embed code and paste it into the Place field.

Button Link & Button Text

The Button Text field creates a button. The Button URL field links the button, column title and image. Button Text must have a Button URL for the button to be visible, but a Button URL may be added without Button Text if you only want to link the column Title and Featured Image to your link and not display a button.

To add more column blocks, simply click the +ADD NEW EVENT bar. This will duplicate your last column block to help speed up customization.

To delete a column block, click the pencil icon in the right corner of the column’s title bar to expand it, then click the red trash-can icon.

Save your layout any time by clicking SAVE & PUBLISH

The Classroom demo uses the StoreKit extension for the menu cart and product widgets  demo’s Shop pages, which require WooCommerce to be installed and configured first.

Optional: Install and Setup WooCommerce

This step is optional if you awant to setup an online store. Stores are a wonderful addition to educational sites and can be used for sale of supplies, text books, seminars, courses ticklets or anything you can think of!

For help installing and configuring WooCommerce for Layers, visit the WooCommerce Install Guide

Also check out How to Setup an Online Store with Layers for other great tips!

Optional: Setup StoreKit

This step is optional, but well worth the time and investment. StoreKit adds additional functionality to Layers such as shop and product customization, product widgets for your builder pages and a header cart, bringing the grand total cost of a site worth more than $1000 to less than a traditional premium  theme!

StoreKit is included in Play and found in your Themeforest zip file as storekit-extension.zip

View the StoreKit User Guide

Layers themes use Presets instead of traditional demo content that you load via an XML, but we do provide this file if you want to rapidly setup a copy of our demo site, and is found inside the Themeforest zip package. Note that this will add over 10 pages which can significantly slow your Customizer! The XML also will not setup widgets, customizer settings or plugins, it will only auto-load posts, products and images.

You can install just the Classroom pages you want under LAYERS ADD NEW PAGE

The Shop Page demo uses the StoreKit product widgets, which grab Product posts by ID. You will need to configure the widgets with your own product post content, as IDs are unique to each WordPress install and will not carry over in demo content.

WooCommerce  offers some starter product content to populate your store and give you an idea of how products are put together. See the Importing WooCommerce Content for details and how to load it into WordPress.

The following custom classes can be used in the Content Widget Advanced Options to apply special styling to that widget’s content. To see what settings the demo widgets use with each, reference the widget specified in the associated Preset pages noted below.
feature-photo
As seen on the Cafeteria Preset, this custom class will center text horizontally and vertically inside the block and is best used in combination with the full width layout with no gutter, where the “featured image” is actually a column of its own, with no text, proceeding or following this column.

  1. This column’s featured image
  2. Title
  3. Excerpt

feature-class
soft-highlight
Adds a padded frame border around each column, as seen on the Athletics Preset. This is best used in combination with the gutter option enabled.

soft-highlight
point-list
Styles any bulleted list created in the Content Widget column’s excerpt field using the list button on the toolbar as seen on the Transport Preset.

  1. Type your items, one per row
  2. Highlight them and click the list button
  3. Click Advanced and add this class to Custom Classes field

Example below highlights the content affected by this style

list-style
facts-figures
This custom class can be used with Content Widgets to add additional padding and rounded corners to each column for use with background textures. In the Home page preset and our Demo homepage, we added four columns to the widget, each 3/12 wide. The first column has only a title and excerpt. The next three get a background image, featured image, title and excerpt, with the featured image being the 98% heading – you can substitute with testimonial avatars, icons or your own small heading images for a similar effect.

facts-figures

 
site-wide-cta-banner
Allows you to use the Slider Widget as a Call To Action Banner, as outlined in our How to Create a Call to Action Banner tutorial. This style is best used on sliders with one slide that have a title, button link and button text. You may use boxed or full width layouts and add a slide background color or texture. As seen on the Classroom home page Preset and demo, we set the Slider Height in the Design Bar to 100px and use the left-aligned text option in the slide content.

classroom-cta

The following extensions greatly enhance Layers in general and can help you turn Classroom into anything.

Our demo also makes use of Layers Pro to add Social links to the menus