Designing your website in B1.Church

  1. Slide 1 In order to design your website in B1.Church you must first be an administrator in B1.Church. You can check to make sure you are an admin by going to CHUMS, click on “Settings”, navigate to Roles then to B1 Admin. and see if your name is there. If your name is not there you will need to have the Admin add you to the list.

    The first step to designing your website is to click on your name in the top righ hand corner, go to Switch App and choose B1.Church

  2. B1 Web Design 2 Next, click on the gear on the left side of the screen

  3. B1 Web Design 3 Click on the website icon

  4. Global 1 Manage the Global Appearance of your website.

  5. Global 2 You can customize your colors, fonts and logos.

  6. Global 4 First choose your color palette. These colors will be the default colors of your website.

  7. Global 5 Click on the color palette you would like to use (you can change this any time).

  8. Global 6 Be sure to save your choice.

  9. Global 7 You can now choose your font.

  10. Global 8 Choose from the fonts offered. Examples of the fonts are listed below.

  11. Global 9 Be sure to click “Save”.

  12. Custom CSS The Custom CSS feature is an advanced feature for those who know HTML/CSS.  You can globally change how aspects of the site look with it such as making all links underlined by adding CSS code.

  13. Global 10 You can now add your logos.

  14. Global 13 Add four logos, be sure to follow the size and background suggestions for each logo. Click the logo icon.

  15. Global 14 Click “upload” to find the logo on your computer.

  16. Global 15 Once you find the logo you want to use, double click it to add it.

  17. Global 16 The logo will load to your Global Style page.

  18. Global 17 Click update to save the logo.

  19. Global 18 Follow the same procedure for the other three logos.

  20. Global 19 Be sure to “save”.

  21. Global 20 Your logos are now ready. You can change your logo at any time.

  22. B1 Web Design 22 Now you are ready to start adding pages. Click the + sign in the Pages box

  23. B1 Web Design 23 Give your first page the title “Home” Put a forward slash (/) in the Url Path box and click the “check” button. Be sure to choose a layout, typically “header & footer” (you will not be able to edit without a layout) and click “save”.

  24. B1 Web Design 24 After you save, click the word “Home” to begin designing your Home page.

  25. B1 Web Design 25 To begin adding content to your page, click the “+” in the top right corner.

  26. B1 Web Design 26 Choose “Simple Elements”

  27. B1 Web Design 27 Drag and drop the section icon onto the page. Every design begins with a section. Once the section is in place you can add the elements.

  28. B1 Web Design 28 Click “Manually Select Colors” to design your section.

  29. B1 Web Design 29 You can choose your background color, image or YouTube video.

  30. B1 Web Design 30 You can also choose the heading color, text color, and link color.

  31. B1 Web Design 31 Click the style editor to ad a variety of styles to the section.

  32. B1 Web Design 32 Click in the property field to choose a style.

  33. B1 Web Design 33 Choose from any of these styles.

  34. B1 Web Design 34 You can designate a style for Desktop, Mobile or both platforms.

  35. B1 Web Design 35 B1 Web Design 36 You can toggle between desktop and mobile view by clicking the computer icon in the top right corner.

  36. B1 Web Design 12 B1 Web Design 13 B1 Web Design 14 B1 Web Design 15 B1 Web Design 16 If you are using an image you can upload it from your computer or use stock images provided by B1.Church

  37. Screen Shot 2023-07-28 at 3 05 37 PM Screen Shot 2023-07-28 at 3 06 44 PM Screen Shot 2023-07-28 at 3 08 31 PM Screen Shot 2023-07-28 at 3 09 51 PM You are now ready to add an element to the page. There are several different elements available. Just drag and drop the element you want to use into the section and customize it.

  38. B1 Web Design 18 You can also design reusable blocks for header and footers. Click the + on the Reusable Blocks block

  39. B1 Web Design 19 B1 Web Design 20 Give the block a name and a type

  40. B1 Web Design 21 Edit your block just like pages

  41. B1 Web Design 22 B1 Web Design 23 B1 Web Design 24 If you need to edit something after you have already put it on the page just click on the edit pencil and make your changes.

  42. B1 Web Design 25 To put your pages in order just add them to the navigation links

  43. B1 Web Design 26 Remember the home link only needs the / as a URL

  44. B1 Web Design 27 Add each page to the navigation links

  45. B1 Web Design 28 B1 Web Design 29 B1 Web Design 30 If you want to look at the finished project or see how it looks as you go just click on the home edit pencil and open the home link. You will be able to see how your pages will look when they are online.