Page Comparison

...

Google Docs are an excellent collaboration tool for working on documents together. You sometimes also want to include the information in them in your CMS page, but don’t want to have to update the page every time the document changes. This is where embedding comes into play.

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

2. Click

...

1. File >

...

1. Share >

...

1. Publish to

...

1. Web.

...

1. Image Added

2. Click “Embed”.

   Image Modified

3. Click “Publish”.

4. Click “OK” to confirm.

   Image Modified

5. Copy the code.

   Image Modified

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

7. Edit the page.

...

1. Image Added

2. Insert a new block or component.

3. Click “Markdown”.

...

1. Image Added

2. Paste in the code.

3. Save the page as a draft.

   Image Modified

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

5. Edit the page.

...

1. Image Added

2. Edit the block.

3. Click “Edit Markdown”.

...

1. Image Added

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

   Image Modified

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

   Image Modified

4. Save the page as a draft.

   Image Modified

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

   Image Modified

Embed Google Maps

A map can be a great way to help your new and existing members and visitors find your club. While one can be included on the Contact Us page, you may want someone on another CMS page or the Home page. Follow the instructions below to embed a Google Map:

1. Navigate to Google Maps.

2. Find the location, likely your club.

3. Click “Share”.

   Image Modified

4. Click “Embed a map”.

   Image Modified

5. Click “COPY HTML”.

   Image Modified

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

7. Edit the page.

...

1. Image Added

2. Insert a new block or component.

3. Click “Markdown”.

...

1. Image Added

2. Paste in the code.

3. Save the page as a draft.

   Image Modified

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

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

   Image Modified

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.

...