{"id":1456,"date":"2026-08-02T10:41:35","date_gmt":"2026-08-02T17:41:35","guid":{"rendered":"https:\/\/blogs.ubc.ca\/rankang\/?p=1456"},"modified":"2026-08-04T15:24:26","modified_gmt":"2026-08-04T22:24:26","slug":"how-to-convert-your-visual-syllabus-into-an-embeddable-link-for-wordpress","status":"publish","type":"post","link":"https:\/\/blogs.ubc.ca\/rankang\/how-to-convert-your-visual-syllabus-into-an-embeddable-link-for-wordpress\/","title":{"rendered":"How to Convert Your Visual Syllabus Design into an Embeddable Link"},"content":{"rendered":"\n
<\/div>\n\n\n\n

Now that you have created your visual syllabus design along with the AI prompts, here is how you can convert your design into a web link and embed it into your site such as WordPress.<\/p>\n\n\n\n

\n \n <\/path>\n <\/path>\n <\/path>\n <\/svg>\n
\n Tip:<\/strong> It’s easier than you might imagine. Don’t get anxious\u2014just follow along with each step. <\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n

How to Convert Your Design into a Web Link<\/h2>\n\n\n\n
<\/div>\n\n\n\n

Step 1:<\/strong> Prepare Your HTML File<\/h3>\n\n\n\n

Ask the AI to generate a single, standalone HTML file (or a full HTML, CSS, and JS package). While the package option is helpful if you want to make custom code tweaks, the single HTML file is the quickest, easiest route if you want to deploy without touching any code. Ensure your primary file is named index.html<\/code><\/strong>.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Step 2:<\/strong> Create a GitHub Repository<\/h3>\n\n\n\n

Sign in to your GitHub<\/strong> account, create a new repository, and upload your HTML file to it.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Step 3: <\/strong>Enable GitHub Pages Hosting<\/h3>\n\n\n\n

Go to Settings<\/strong> tab in your repository. Click Pages<\/strong> in the sidebar menu. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Under the Build and deployment<\/strong> section, set the source to Deploy from a branch<\/strong>. Select your main branch (e.g., main<\/code> or master<\/code>) and folder (usually \/root<\/code>), then click Save<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Step 4: <\/strong>Retrieve Your Web Link<\/h3>\n\n\n\n

Wait 1\u20132 minutes, refresh the page, and click the live link generated at the top of that menu.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

How to Embed Your Design in Your Site<\/h2>\n\n\n\n
<\/div>\n\n\n\n

Step 1: <\/strong>Select Custom HTML<\/h3>\n\n\n\n

Select Custom HTML<\/strong> from your WordPress blocks. <\/p>\n\n\n\n

<\/div>\n\n\n\n

Step 2: <\/strong>Embed Using iframe Code <\/h3>\n\n\n\n

Copy the following code, then replace YOUR WEB LINK<\/strong> with the web link to your design.<\/p>\n\n\n\n

<iframe src=\"YOUR WEB LINK\" width=\"100%\" height=\"900\" style=\"border:none;\" loading=\"lazy\">\n<\/iframe><\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
Complete! <\/strong>Your visual syllabus design can now be embedded into any website that supports HTML code.<\/p>\n\n\n\n
If you’d like to see the tutorial, check out this video.<\/p>\n\n\n\n
\n