Global Styling
In this video we'll be covering how to style you're Churchly site. This includes updating the colors, typography, adding new fonts, changing the site layout and more!
Introduction
The video tutorial covers finalizing branding elements such as colors, typography, and buttons in Churchly, offering guidance on styling options and adjustments.
Step-by-step guide
Step 1: Global Styling
-Click on the paintbrush icon on the left sidebar
Step 2: Text Styling
- Click on “Text Styling”
-You can choose fonts for Paragraphs, Headings and Quotes from the drop down menu
-If you don’t see a font that you like or that matches your brand, go back to the “Global Styling” menu and click on “Add Fonts”
-Click the “Add Fonts” dotted box, select the font of your choosing
-To edit the font size, letter spacing, line height, and text color, click on the font name and adjust your preferences
-You can choose the colors for Text Lines and Text Links on Mouse Over, your brand color will appear in your color library
-Toggle between the computer icon and the phone icon to set the Text Styling for mobile and desktop
-Select “Confirm” to save your changes
Step 3: Color Palette
-Set your secondary colors by choosing colors on the selector
-You can change the background color for all pages and the main text color by selecting the color circle
Step 4: Website Layout
-To change the Layout Style (Full or Box), select from the dropdown menu
-If you choose Boxed Width:
-You can select a color or pattern (or upload your own by selecting the “+” button) to appear as the background to your site pages
Step 5: Logo
-Hover over your logo in the top left corner
-Click on the gear icon to pull up the logo settings
-From here, you can drag the bar to adjust the size of your logo
Step 6: Editing background color/image in a block
-Hover over the block you want to edit
-Click on the gear icon to pull up the block settings
-Select “Overlay Color”
-Select your brand color
-Adjust the opacity using the slider so you can see the background image behind the overlay color
-You can also remove the overlay color by clicking the “Add Overlay” button
-Click on the image to change or delete it
Step 7: Editing buttons
-Hover over a button
-Click on the paintbrush icon to edit the button styling
-Select “Border Color
-Choose from the colors on the selector
Step 8: Save
-At the top of the site builder, click “Save Changes” to save the edits you have made
-If you don’t like the changes you have made, you can click “Discard” to revert to your starting point
Need Further Assistance?
If you have any additional questions or require more detailed support, don’t hesitate to use the "Need Some Help?" button available on the Churchly platform. You can send us an email or engage with our live chat during available hours. Additionally, the search box can guide you to other helpful resources.