B1 Website Admin

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. webdesign 201 Now you are ready to start adding pages. Click the + sign next to Main Navigation or Not Linked. Pages in Main Navigation will be published when you publish your website. Pages in Not Linked will not be published but can be moved to Main Navigation when they are completed by dragging and dropping.

  23. webdesign 301 Choose what type of page you will be creating. Your first page will be the home page.

  24. webdesign 401 Give the page a title and a link text.

  25. webdesign 501 Click “Edit Content” to add content to your page using the web design elements.

  26. webdesign 601 Click the + in the top right corner to begin adding elements to your page.

  27. webdesign 701 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. webdesign 702 Click “Custom” to design your section or leave it on “Suggested” for default values.

  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. If you are using an image you can upload it from your computer or use stock images provided by B1.Church. You can also choose the background opacity or your image.

  37. webdesign 706 webdesign 707 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. webdesign 708 You can also design reusable blocks for header and footers. Click the + on Reusable Blocks

  39. webdesign 709 Give the block a name and a type

  40. webdesign 710 webdesign 711 Edit your block just like pages

41.webdesign 712 webdesign 713 If you need to edit something after you have already put it on the page just double click on the element and make your changes.

  1. webdesign 714 webdesign 715 Before you publish you will need to edit your Home page URL. Click on “Page Settings”. Delete “/Home” and replace with just the forward slash “/”