Skip to content
Colorado State University

Information Technology

IT Services

  • All IT Services
  • Purchasing & Surplus
  • Software
  • Computer & Device Support
  • Computer Replacement Program
  • Security
  • Documentation

Web Services

  • All Web Services
  • Design Process
  • Site Managers
  • Site Manager Introduction
  • Web Governance
  • Documentation
  • Forms

Remote Resources

Resources for remote teaching and working.

Remote Resources

Documentation

Search our self-help guides.

Self-Help Guides

Support

Reach out to us to get support.

Request Support

A College of Liberal Arts Division

Beaver Builder

Home » Beaver Builder
Last UpdatedJuly 12, 2019
Table of Contents
  1. Summary
  2. CSS Classes
    1. Adding CSS Classes
    2. Colors
    3. Effects
    4. Layout
    5. Site Specific

Summary

This reference guide is intended for Department or Center websites that use Page Builder. For guides explaining the basics of using Page Builder please view the Documentation Guides section instead.

CSS Classes

Adding CSS Classes

Screenshot - Page builder CSS class

While using Page Builder, CSS Classes can be added to modules, columns, and rows to modify their behavior, layout, and style.

Below is a list of CSS Classes that are available, along with their descriptions, and an example of the expected output.

Colors

To see a full list of color classes look at the Visual Brand Language doc.

Effects

shadow
Adds a shadow to the outer perimeter of the current module

shadow-inset
Adds an inward facing shadow to the outer perimeter of the current module

shadow-inset-top-bottom
Adds an inward facing shadow to the outer perimeter along the top and bottom of the current module

Layout

fl-col-gutter-double
Increases the gutter width between columns to be double the default. This class can be used on a row to affect all columns in the row or on a column to affect only that one column.

no-margin
Removes any extra margin around a row, column, or module.

Site Specific

Music, Theatre, and Dance Expand

cla-events-list
Must be used with the Events module and will change the display style from the default grid to a list style.

cla-events-no-featured-image
Must be used with the Events module and will hide the event featured image from displaying.

entry-header-has-bg
Intended to be added to a row (generally the first row in the page, which includes the page title), and sets up the proper styling for the row height, text color, text shadow, and background gradient overlay.

Related Articles
  • Beaver Builder
Categories
  • Web20
  • Web Editing12
Tags
  • Beaver Builder3
  • CSS1
  • Plugin Reference4
Share on facebookShare on linkedinPin on pinterestTweet on twitter

Post Navigation

Previous

Visual Brand Language

Next

Guide to Logging In

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Liberal Arts
  • Student Accessibility
  • Faculty Accessibility
  • FSAS Help
  • FSAS Login
  • CLA Brand
  • CLAHub
  • CLA Help Desk
  • Admissions
  • Disclaimer
  • Equal Opportunity
  • Employment
  • Privacy Statement
  • Login
Colorado State University
© 2022 Colorado State University - College of Liberal Arts, Fort Collins, Colorado 80523 USA