Legend

How to read the code easily

For the most part, you should be able to simply highlight the code snippet, copy it, and then paste it into the section of the site you need to use it in. You may have to make adjustments such as the URLs for links, the names of titles and text, and the SRC path for images.

When you drop the code into the Cascade editor, you should be able to switch from the source code editor back to the WYSIWYG editor. When you do this, you are then able to double-click each piece and make edits to it using the link tools, image placement tools, or text editing that’s built into Cascade.

If that doesn’t work for you, then you will simply need to replace the text or URLs in the code.

Additionally, you may find comments in the code snippets to help provide some reference. These comments can be deleted when using the snippet on your site, but it is recommended to retain them as they may help future editors.

Working with Code: 101

How to work with code

We understand that coding is not everyone’s area of expertise. Luckily, by using the snippets provided, knowing how to copy-paste is as far as you’ll have to delve into the world of web development. You’ll still be part of the web page building process in terms of the content you supply, but no coding experience is necessary to use the Wowbook.

What we provide: Code snippets (i.e.: the "infrastructure")

HTML and CSS tell a page how to look and behave, and contain all text, hyperlinks and audio-visual content included on a given website. You can think of these code snippets as empty structures that are waiting for material in order to serve their function — not unlike a pre-assembled IKEA shelf. Here is an example of an HTML code snippet for creating a paragraph beneath a title:


<h2>My Title</h2>

<p>My ideas, more ideas, and more things I want to express.</p>

Notes
  • The <h2> heading tells web browsers "this is a title", which helps with SEO/findability and makes this text appear larger & in bold to your visitors
  • <p> tells the webpage to display this text as a paragraph.
  • In each case, there must be a start tag and an end tag — the end tag is always placed after your content is defined and is identified with a forward slash “/” telling when this piece of information is complete.

What you provide: the content

Depending on what type of module or feature you are building in Cascade, you will need to provide content inputs such as:

  • URLs for hyperlinks
  • names or titles
  • text content
  • SRC path for images or videos (the source path for linking images from your Media Library or video content from YouTube/Vimeo).

But wait - How do I actually do this?

To use any Wowbook module on your website, simply highlight the code we’ve provided and copy-paste it into your Source Code Editor.

To access your source code, select the Source Code Editor button (< >) from your WYSIWYG editor toolbar, which gives access to the HTML and CSS on the web page you are working on.

Once you’ve pasted your code snippet, switch out of Source Code Editor (< >) and back to your WYSIWYG editor to change or add content to the code infrastructure you’ve just dropped in. At this point, you should be able to see the new structures you’ve loaded in.

You’re almost finished! Now, you may begin updating the content. To do this, double-click on the element you wish to change and make edits to it using Cascade’s link tools, image placement tools, or text editor. Below is a screenshot of the image, video, and hyperlink tools in your WYSIWYG editor toolbar:

wysiwyg-editor

What if I can't get the desired result using my WYSIWYG Editor?

If using the WYSIWYG tools doesn’t work for you, simply go back into your Source Code Editor (< >) and replace the text or URLs in the code.

If that still doesn't work, or you run into other issues, please send the UR Digital Team a small work request. We are here to help.

One last thing...

You may notice that some parts of the code snippets appear inside these <!-- tags --> — these are not actual code, but rather text comments included in the HTML. Comments help provide an explanation or instructions regarding the code snippet being used.

These comments can be deleted without impacting how the code behaves; however, we recommend you retain them as these comments may help future website editors.

WYSIWYG editor: Acronym for what the web development community calls the “What You See Is What You Get” editor. It’s where the source code translates into the content that will be displayed to your web visitors. It looks just like your classic Word, Google Docs, or email editor.