Skip to main content

[2.0] How to add Code Block

Written by Paul Cox

  1. Create a New Page

    • Log in to your Church Co dashboard.

    • Navigate to the Pages section.

    • Click on the option to create a new page.

    • Name the page appropriately, for example, "Code Block."

  2. Add the Code Block

    • In the page editor, locate the plus icon at the top left corner.

    • Click the plus icon to open the block selection menu.

    • In the search bar, type "Code" to find the Code block and add it to your page

  3. Insert Your Code

    • Once the Code block is added to your page, you can insert your custom code.

    • For example, you can add HTML code such as:

      <p>Hello, world!</p>
    • To preview the code, click the "eye" icon. This will display the rendered HTML content.

  4. Customize Surrounding Elements

    • You can edit the heading, buttons, or any other elements around the Code block to fit your page design.

    • For example, you might want to add a heading like "Custom HTML Section" or buttons for user interactions.

  5. Additional Customizations

    • You can add more complex elements such as iframes, custom scripts, or styled components within the Code block.

    • Example of an iframe:

      <iframe src="https://www.example.com" width="600" height="400"></iframe>
  6. Save Your Changes

    • Once you have inserted and customized your code, make sure to save your changes.

Did this answer your question?