Designing your website in B1.Church

  1. B1 Web Design 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 clicking 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 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. B1 Web Design 4 B1 Web Design 5 Add your logo and favicon, make sure you add one to each spot

  5. B1 Web Design 6 You can also customize your colors

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

  7. B1 Web Design 8 Give your first page the title “Home” Just put a forward slash (/) in the Url Path box. Be sure to choose a layout (you will not be able to edit without a layout) and save

  8. B1 Web Design 9 After you save you click the word “Home” to begin designing your home page

  9. B1 Web Design 10 Web design Section Every page design begins with a section. Drag and drop the section box to the top of the page.

  10. B1 Web Design 11 You can choose a variety of backgrounds. If you are using a youtube video you must own the video or have permission to use it.

  11. 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

  12. 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.

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

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

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

  16. 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.

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

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

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

  20. 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.