Caper Associates Style Guide
Edit this page in Elementor, and you’ll be able to copy and paste sections and components to help you kickstart new pages and content throughout the site.
Colors
Typography
How do I highlight some words in a heading with a different color?
In the Heading element, place <em class="orange"> before the text you want to highlight, and </em> after it. You can change “orange” to “blue”, “green”, or “white”. Inspect the examples below to see how it’s done.
Where do custom CSS styles live?
You can edit the site’s custom styles (most of which are typography-related) in the WordPress Customizer, which you can find in the Customize menu from the Admin Bar on the frontend of the site – from there, select “Additional CSS”.
Where can I find the fonts used on the site?
Sphinx of black quartz, judge my vow
Waltz, bad nymph, for quick jigs vex
Pack my box with five dozen liquor jugs
The five boxing wizards jump quickly
Amazingly few discotheques provide jukeboxes
Cozy lummox gives smart squid who asks for job pen
Jim quickly realized that beautiful gowns are expensive
When zombies arrive, quickly fax Judge Pat
My girl wove six dozen plaid jackets before she quit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pulvinar sem ornare lorem imperdiet, nec hendrerit lacus volutpat. Vestibulum auctor, tellus sit amet dapibus luctus, magna ante posuere sem, non dictum eros sapien vel diam. In hac habitasse platea dictumst. Vivamus sed eleifend enim. Morbi posuere urna sed ipsum hendrerit, a interdum erat bibendum. Mauris laoreet tortor elit, sit amet condimentum ipsum accumsan at. Etiam condimentum ante quis scelerisque ornare. Nullam felis felis, volutpat ac risus faucibus, tincidunt finibus tortor. Aliquam vel pellentesque est. Phasellus tempus scelerisque libero sit amet molestie. Nam in tellus vel urna porta sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut consequat elit eu justo ultricies sodales. Mauris tristique rhoncus vulputate.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Vestibulum pulvinar sem
- Rrnare lorem imperdiet
- Nec hendrerit lacus volutpat
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Vestibulum pulvinar sem
- Rrnare lorem imperdiet
- Nec hendrerit lacus volutpat
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Vestibulum pulvinar sem
- Rrnare lorem imperdiet
- Nec hendrerit lacus volutpat
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Vestibulum pulvinar sem
- Rrnare lorem imperdiet
- Nec hendrerit lacus volutpat
Buttons
How do I remove the animated arrow from a button?
Select the button, and open the Advanced tab in the left panel of the Elementor editor. Scroll down to CSS Classes, and add “no-animation” to remove the animation effect used on button arrows. From there, you can remove the arrow icon, replace it with a different icon, or use no icon on the button.
Should always be constrained to the same width
Forms
This form doesn’t have any actions. When you copy and paste it to a new page, make to check Content > Actions After Submit to make sure that it’s hooked up to Mailchimp, sends a notification, or anything else you want it to do!
Spacing & Sizing
Top-level sections
Top-level sections – the main rows that make up each page – should have 16px left and right padding. This ensures consistent gutters at the edge of the screen from desktop down to mobile. Inner containers should not increase the edge gutter.
Most sections will have 84px top and bottom padding. Note that this is padding, and not margin – this makes it easier to change background colors and move sections around.
On tablets, columns should stack vertically.
On phones, those values should change to:
- 40px top and bottom padding
- 20px left and right padding
Boxed containers
Boxed containers, like the one shown above in the “Forms” section, are typically the direct children of top-level sections. Apply the usual padding to a top-level section (84×20), and then drop in another container.
This container will typically have:
- 80px top and bottom padding and 48px left and right padding
- Or just 40px all around if it’s a smaller box in a column
- 94px gap
- 16px border radius
On tablets, columns should stack vertically. Only the gap should change, to 30px.
On phones, those values should change to:
- 40px top and bottom padding
- 20px left and right padding
- 30px gap
- 16px border radius
Gap
Gap is the space between rows or columns in a container. Here are some commonly-used values:
- Gap between text elements, like a heading and body text, or two body text elements, is usually 16px.
- Gap between card elements is usually 32px.
- Gap between columns is usually 84px. Reduce to 32px on tablets and phones.
Cards
Skillset cards
There are 10 “Skillsets” in the program, each represented by a card. This is a complex layout, so we’ve put it all together for you here. Be sure to copy both sections below; the “Setting the Foundation” section is repeated twice, as the first instance is better-looking on mobile. Make sure to update copy in both places if needed!
Testimonials
Testimonial cards are already styled automatically – every third card is accented in blue, then green, then orange, and so on. All you need to do is update the list of testimonials in the Content panel.
Setting the foundation.
The 10 basic skill sets equip students and young adults to do well and do good. There are 30+ exercises focused on career success and active citizenship. The muscle memory created is naturally adopted in our daily lives, allowing us to better function in life!
Setting the foundation.
The 10 basic skill sets equip students and young adults to do well and do good. There are 30+ exercises focused on career success and active citizenship. The muscle memory created is naturally adopted in our daily lives, allowing us to better function in life!
Skillset 1
Take Responsibility
- Motivate yourself
- Reduce stress
- Manage your time
- Budget your money
Skillset 2
Develop Physical Skills
- Stay healthy
- Look good
- Type well
- Take notes
Skillset 3
Communicate Verbally
- Converse 1:1
- Show examples
- Present to groups
Skillset 4
Communicate in Writing
- Create outlines
- Edit + proof
- Use word processing tools
- Send clear e-messages
Skillset 5
Work Directly with People
- Build good relationships
- Work in teams
- Teach others
Skillset 6
Influence People
- Manage effectively
- Sell successfully
- Play politics to succeed
- Lead by example
Skillset 7
Gather Information
- Search Google/AI
- Use libraries
- Interview people
- Conduct surveys
- Store your stuff
Skillset 8
Use Quantitative Tools
- Create plans
- Use spreadsheet programs
- Crunch numbers
- Design graphs + tables
Skillset 9
Think
Critically
- Detect nonsense
- Pay attention to detail
- Apply knowledge creatively
- Evaluate actions
Skillset 10
Solve Problems
- Identify problems
- Develop solutions
- Execute the fix
Real stories.
Real impact.
Content Layouts
Responsive images
Images in the layouts below are set to Object Fit: Cover in the Style tab, in order to allow them to resize responsively. When you change an image, make sure to change its Object Position so that the colors overly detail doesn’t get cropped off. For example, if the overlay is on the right side of the image (like the orange overlay in the image below), the Object Position could be set to any of the following: Top Right, Center Right, or Bottom Right. Experiment with the options to find the best one for the image’s subject.
Simple text and image on the left side.
Practical Skill Development aimed to empower individuals for success. Our approach focuses on building the muscle memory necessary to consistently apply your developed skills in everyday life. These skills are taught with an emphasis on being simple, easy, and fun. We put the needs of educators, instructors, and employers first. Our goal is to equip individuals with the tools needed in life for both career success and active citizenship.
Left image with boxed text.
Skills Win offers unique advantages for both educators and employers:
- Affordable subscription-based package specifically focused on developing workplace skills with the potential of further application in civic engagement.
- Centered on the needs of educators and employers designed to complement – not over-burden – your growing list of key priorities and requirements.
- Simple, easy to adopt and implement intended to be ‘turnkey’ such that the support and resources are available 24/7.
- Aligns educational outcomes with workplace needs to prepare for life.
Boxed section with inset image
In today’s rapidly evolving world, there comes an increasing gap between the skills taught in traditional education and those needed in life. We address this by providing a comprehensive, practical approach to skill development and application that benefits students, young adults, and employees.
Double image section with two columns
Practical Skill Development aimed to empower individuals for success. Our approach focuses on building the muscle memory necessary to consistently apply your developed skills in everyday life. These skills are taught with an emphasis on being simple, easy, and fun. We put the needs of educators, instructors, and employers first. Our goal is to equip individuals with the tools needed in life for both career success and active citizenship.
Double image section with two columns
Practical Skill Development aimed to empower individuals for success. Our approach focuses on building the muscle memory necessary to consistently apply your developed skills in everyday life. These skills are taught with an emphasis on being simple, easy, and fun. We put the needs of educators, instructors, and employers first. Our goal is to equip individuals with the tools needed in life for both career success and active citizenship.
FAQ and CTA
Who is the target audience?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
What’s the most efficient way for me to determine if this could work in the context in which I operate?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
When should I subscribe to your package?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Why is this uniquely different from similar products and services?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
How much time is needed to get the maximum value of the Skills Win package?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Still have questions?
Can’t find the answer you’re looking for or want to schedule a demo? Please fill out a form and we’ll be in touch.
