Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Navigate to your Google Doc from your Google Drive.

  2. Click “File “File” > Share “Share” > Publish “Publish to Web” for Sheets, “File “File” > Publish “Publish to Web” for Docs.

  3. Click “Embed”.

  4. Click “Publish”.

  5. Click “OK” to confirm.

  6. Copy the code.

  7. Navigate to your myClubhouse site and the CMS page you want to add the Google Doc to.

  8. Edit the page.

  9. Insert a new block or component.

  10. Click “Text”.

  11. Click in the box, and then click the HTML button.

  12. Paste in the code.

  13. Save the page as a draft.

  14. The Google Doc will likely not look correct on the page so now we need to tweak the styling.

  15. Edit the page.

  16. Edit the block.

  17. Click in the box, and then click the HTML button.

  18. Within the iframe tag, add “style=”width:100%; height: 100%;” after “<iframe”, but before “src”.

  19. Within the figure tag, add “style=”width:100%; height: 550px;” after <figure” but before “>”. You can replace 550px with a value of your choosing.

  20. Save the page as a draft.

  21. If you are happy with the styling, publish the page. If not, adjust the height in the figure tag to a size that works for your page. This may take a few attempts.

...

  1. Navigate to Google Maps.

  2. Find the location, likely your club.

  3. Click “Share”.

    Image RemovedImage Added
  4. Click “Embed a map”.

    Image RemovedImage Added
  5. Click “COPY HTML”.

    Image RemovedImage Added
  6. Navigate to your myClubhouse site and the CMS page you want to add the Google Map to.

  7. Edit the page.

    Image RemovedImage Added
  8. Insert a new block or component.

  9. Click “Text”.

    Image RemovedImage Added
  10. Click in the box, and then click the HTML button.

    Image RemovedImage Added
  11. Paste in the code.

  12. Save the page as a draft.

    Image RemovedImage Added
  13. If the styling is not right, you can change the height and width options within the code, similar to the Google Doc example above.

  14. Once happy with the Map, publish the page.

    Image RemovedImage Added

CSS

CSS is used alongside HTML to adjust how elements look on the page. Some styling will be generated from your site’s Site Styles and Colours, but you can further customise them for your CMS page. You have two main options for CSS in the CMS, inline styling or internal styling.

...