Apply Now

Building Blocks

10KFAM Style Guide

Here is a list of all the elements that have been built into your website.

Headers

Main Hero

Gutenberg Blocks
This is the exact same header section that gets auto-applied to each page. There are fields on the right side bar of the Page Editor under the tab Core Hero. Just fill those fields out along with the Featured Image and this block will be auto-appended to the top of the page.

Type in /Main and select Hero / Main Hero from the list. This block has a “Small Subtitle” that can be removed (paragraph). The large text will be auto-capitalized on the frontend (please don’t type in ALL CAPS). You can change the colors of the button, button text and button link. The “dots” get automatically added in on the frontend of the website.

Small Subtitle

About the 10K-FAM

Here is some amazing text about this and that; these and those. This will go right over here and will be a really cool place to put things about this or other items as well.

Middle Hero

Gutenberg Blocks

Type in /Middle and select Hero / Middle from the list. This block has an H1 tag for the title, center-aligned as well as some descriptive paragraph text. You can add as many buttons as you’d like in the row and alter their colors. Select the Container element to change the Background Image.

Regular Elements

Separator

Gutenberg Block

Type in /Separator to get the core “line divider” block. No settings here at all. Literally just drop it on the page and be done 🙂 If you add the CSS class is-small to the separator, it’ll make it one line + reduce the spacing above/below it.


Some random text goes here. This is just here to showcase some spacing. Nothing more. Nothing less. Just some simple placeholder text to show how much room each of these separators gives you when you apply the other CSS classes to them. Hopefully you didn’t just spend a lot of time reading this to be saddened it was just dummy text that doesn’t even matter.


CTA Strips

Gutenberg Block

Type in /CTA and select CTA Strip A, B or C (all options shown below). When you use this, please be aware of the “floating dots” on the right side so they don’t cover up buttons on the right side of the page (aka. in the section above, keep the buttons on the left).

[A] Have a question?

[B] Have a question?

[C] Have a question?

Image Treatments (Also can be used on Headers)

CSS Class

The combinations with these dot patterns are almost limitless. Rather than creating a ton of reusable blocks you may never actually use, I feel this is the one technical piece that might just be worth writing out.


The core CSS class to know is tkfam-dots-STYLE-LOCATION-COLOR where all the all caps pieces will be replaced. Now let’s dive into how to construct this CSS class name.

Style

There are six styles to pull from and each are shown in a column below. Read the descriptions below each photo to know the name of each style and what “size box” of dots it gives you.

Location

This is either left or right. Do you want the box of dots to be displayed on the left or right side of the element? You can have two class names (one long one for left and one long one for right) to have two sets of dots attached to the same element (think a header that takes up a lot of space).

Color

When you’re editing some text in Gutenberg, you know the color palette on the side that shows you all the colors in the 10kFAM palette? Hover over the top row of colors (where your main colors are). Notice, there are “numerical names” in each. That is the name of the color (ex. the bright orange color is quaternary)

tkfam-dots-smallsquare-left-primary

smallsquare style has a static height and width (no matter what size element you attach it to, it will always be a tiny square).

tkfam-dots-largesquare-left-secondary

largesquare style has a static height and width (no matter what size element you attach it to, it will always be a larger square).

tkfam-dots-fulltop-left-tertiary

fulltop style makes the dot “box” the same size as what you attach it to and pushes it up either to the left or right depending on the class name.

tkfam-dots-middlelongrectangle-left-quaternary

middlelongrectangle style creates a “dot box” that is 30% the width of the item you attached it to + about 25% taller. This is great for headers to add an accent.

NOTE: middlelongrectangle is used on CTA Strip A, B, and C on the header.

tkfam-dots-tallrectangle-left-quinary

tallrectangle style has a static height and width and aligns to the bottom of it’s element. Recommended with taller images.

tkfam-dots-tallrectangletop-left-primary

tallrectangletop style has a will be 110% the height of it’s element (be careful where you use it) and be pushed up halfway up the element you attach it to (aka. it’s going to be tall).

Columns with Outlines

Gutenberg Block
This is a normal Columns block; feel free to add or remove columns by selecting the Columns block and changing the quantity of columns.

Type in /Columns and select Columns / Outlines. When you’re editing the individual column, if you change the background color of the column, it will actually set the outline and the shadow (and not the background). The first paragraph in the column should be a single word and will be automatically BOLD AND CAPITALIZED while the proceeding paragraph(s) will be normal.

Character

kjasd ka sdsdja sdaj lfj flajs dkahsd ajs dlasj dahsd jas djags dja sdkja kldjs lfjas ldaj sdkhas dajsldaj sdlj asd

Competency

kasd hjas dia fie qi laj dakjsd akhsd ajhsdjs dans dman efkwjf lj alsjd aljsd lasjf kejf wj qlw qlwj elqj elqjw elas dl

Community

ah dew oqi rlqw eqlwe lqje lqjw eqhw ejqw ehqbw enqw enbqw ekas dlajsd lqjw lqjs dlasj dakhsd abns dnab d

Circle Image Captions

Gutenberg Block
This is a normal Cover block with a CSS class of tkfam-circle-caption. You can then add is-COLOR to change the hover background color (and the text color will automatically be changed)

Type in /Circle and select Circle Image Captions [COLOR]. All you need to do is edit the “bold” text and then the “sub” text. You don’t have to worry about changing colors – all of that is handled in the code. Please use a square image when you replace the image.

Name Here

Title

Title Here

Small Caption

Samantha

This Here

Todd

Another One

Person Here

Caption

Post Callout

Custom Block

Type in /Post and select Post Callout. This is a custom-built block, so you will be greeted with a form to fill out. You can toggle it from Horizontal / Vertical view. If you choose Vertical, make sure this place this block in a thin column. If you’re in Horizontal mode, you can turn on Carousel mode. You can filter by Category (and then choose an amount of posts) or by Manual Posts and select the precise posts you want to show.

3 Posts from Podcast Category / Horizontal

Podcast

Preston Sprinkle

Episode – 09.06.2022

Podcast

Transition, Songwriting & Making Disciples

Episode – 08.09.2022

Podcast

Prayer, Perseverance & Returning Home

Episode – 07.05.2022

4 Posts from Blog Category / Horizontal /Carousel

Blog

Q: How do I pick songs for a specific passage of scripture my pastor is speaking on?

06.03.2022

A: I’ll never understand a worship set that has nothing to do with the accompanying sermon. It is such a wasted opportunity when we arbitrarily pick songs that people may like yet don’t serve to orient us towards where the pastor is about to take us, or don’t pick up from where the sermon lands […]

Read More >

Blog

Q: Should I talk between songs?

06.03.2022

A: Look at the Psalms. Some of them have superscriptions before verse 1. Some don’t. Some have built-in interjections like, “Selah.” I like this because, sometimes, the last thing you need to hear, as a worshiper, is someone talking. But sometimes, it’s exactly what you most need. How do you know when’s which? As a […]

Read More >

Blog

Q: What are some great, scriptural upbeat songs to kick worship services off with?

06.04.2020

A: Here are some of my favorite openers that I’ve used consistently over the years. I’d love to hear your additions! There is a Savior (Aaron Williams) Awesome is He (Luke & Anna Hellebronth) Creed (Rich Mullins) Make a Way (Jon Egan) Everlasting Joy (Jon Egan) Only King Forever (Elevation) Call Upon the Lord (Elevation) […]

Read More >

Blog

Garageband for Songwriters – Part Two

03.02.2020

Welcome to Part Two of our series on Garageband for songwriters. In Part One, we went over how to get set up and start recording. Here, we will discuss basic editing and mixing that can be done in Garageband to make basic tracks sound great. To reiterate, the goal is to get your music heard, […]

Read More >

Blog

Garageband for Songwriters – Part One

01.08.2020

Garageband, whether you like it or not, has ushered in thousands of new songwriters, producers, composers, and all-around musicians. Apple is probably surprised at how predominant it has become for both amateur and professionals. It is incredibly useful and with each new version, becomes more and more intricate. It can be used as a quick […]

Read More >

Blog

Ten Ways to be a Better Worship Leader

07.11.2019

LEAD BY EXAMPLE. It’s a bit cliche, but only because it’s true. Worship band leaders should always be considering how their actions and attitudes affect (and reflect) the band. Always show up on time, have your instrument and gear tuned and ready, know the songs, and have chord charts ready. Whatever it is your band […]

Read More >

2 Manual Video Posts / Horizontal

Ninja Forms