Web Editor Style Guide

Welcome to our style guide & layout examples page!

  • Always feel free to ask the R10 Web Team for assistance with your page layout & design

  • Communications can help also with obtaining images, marketing, and social media

  • View other R10 website pages for design and layout inspiration


Scroll down this page to see examples and configuration setting notes for various page content elements

Web Team Contacts

Web Services Coordinator
Denise Barker
972-348-1516
Email Denise Barker

Web Accessibility Specialist
Tracee Lamberth
972-348-1612
Email Tracee Lamberth

Contacts section Notes:
Right Sidebar Layout

Use this layout for programs with when Contacts are needed in the right column. See style example in right column...

Contacts Notes:

  • The Web Team will continue to update the Contacts section for Programs BUT KNOW.... Web Editors can now also update their Contacts lists, so double-check your Program pages to verify any updates are done on ALL program pages (we didn't miss one)

  • Contact Title MUST be the OFFICIAL titles PROVIDED by Human Resources (Do NOT create your own titles or alter them from HR title!

  • Names & emails should be OFFICIAL from Human Resources

  • Can copy & paste Contacts from another page

  • Contacts can be different for each Program page if needed

  • Update Contacts list on ALL pages within that program (system does NOT do this automatically as in prior site)

  • Do notify the Web Team of any name, title, or phone number changes so they can update the Staff Directory (Web Editors cannot update the official website directory)

Upcoming Events button (usually above Contacts heading) is outline style, left justified -- it opens the 'Apex' calendar showing all events for this program (events are pulled from escWorks)

Upcoming Events

Contacts

Use "Heading 2" for "Contacts" header

... then use regular text block for actual names, phone, email

USE 'SHIFT + ENTER' to keep Contact's vertical line spacing closer together

*** Italicize Job Titles
*** Bold Staff Names

IMPORTANT: Click on Email text to update underlying Link URL (don't just change display text only)

Button Examples

Do NOT use 'pill shape' buttons or 'Large' buttons please.

Example of Regular Outline button
Example of Regular Light button
Example of Regular Dark button
Square button with icon, dark theme

Social Media Buttons

Use the Square Light button theme with the icons shown below. Add YOUR social media link to the button.

Buttons example below built in single column layout

Facebook
X (Twitter)
Instagram

Card - Configurations

Several hands holding letters spelling Tips

Heading on card (Image position toggle to right side)

  • Text or lists go here

  • Turn image off in card settings to make a rectangular box with border outline (see more info on card below)


  • No Clip Art images

  • No screenshots of webpages or PDFs

  • Images must NOT have a lot of text on them (any text must be entered into Alt Text field)

  • All Logos must be approved by Communications

Frustrated man

Card with Text wrapped around image

Contact the Web Team if you need assistance building cards and fixing layout issues

Wrap text by turning on 'Wrap Text' slider in card settings.
Card image can be on left or right side by using 'Toggle image position' slider on card image settings

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Lorem Ipsum is not just random words - it comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomized words which don't look even slightly believable.

SPACING between paragraphs

Optional -- To add more spacing between paragraphs, use the Space content object and adjust the height of the spacing
Or add a Separator line (with thickness of '1' )

Headline (in 2 column layout)

(headlines are blue; large text is black)

Caption (A caption does NOT replace Alt Text)

Image with caption... You MUST add Alt Text to ALL IMAGES. Any Text on the image must go into Alt Text.

Gallery of images

  1. Select number of columns for gallery -- we recommend using multiple columns for smaller images. An image in a single column can be too large and overwhelming.

  2. Add images -- Each image must have 'Alt text' on it. Any words on the image must be entered in Alt text field

  3. No clip art

  4. No copyrighted images (Ask Communications team for images, or use free images from Pexels, Unsplash)

  5. Logos for R10 programs/events must be submitted to and approved by Communications dept

young kids
elementary kids
high school students
Graduation students

Slider of Images (rotates through images)

  • Recommend using two or more Column layout elements if you want smaller slider images on your page. A single column slider is really, really large.

  • Can adjust the speed of rotation (3 to 6 seconds), location of right-left arrows, location of dots that indicate number of images

  • No clip art

  • No copyrighted images (Ask Communications team for images, or use free images from Pexels, Unsplash)

  • Logos for R10 programs/events must be submitted to and approved by Communications dept

Slider is playing

Quote text goes here (Use Quote Design 1 ... Do NOT change color)

Author names go here  

   Source of quote goes here