Integrating Twenty-Twenty Sliders in Semplice

Why use TwentyTwenty inside Semplice?

I was looking to add a Before & After slider to easily show the Photoshop and CG work I did to some source photos as part of a job for a light installation pitch for Oh Wow. I found Twenty20, which seemed like the perfect solution but I didn't know how to use it within a Semplice page because I am not a web programmer. After poking around on the Semplice help site for a while I found many others were trying to figure this out as well. So I took the time to figure it out. Hopefully other non-web developers will find this info useful.

Steps To Integrate The Code

Below are the steps I took integrate the image slider for two before and after images.

Let's start with the assumption that you have Semplice installed, working, and want to create a page with a slider for two images of the same size that you have ready to roll.
Install Twenty20 if you have not already.
Create a new Semplice page. Then add some words and get it to a point where you can save it. You will notice, you can't add the TwentyTwenty plugin to a Semplice page, but only to a standard WordPress blog page. So instead, just save this page for now as we'll get back to it in a bit.
Create a new blog post. This post will essentially be thrown away, so don't worry about title or any meta crap.
Click the Add Twenty20 button at the top of the page near add media. It looks like this:
Upload and select your two images, the before and after dialogue should look like this:
When you press Insert Shortcode, it will spit out something like this inside brackets
```
 twenty20 img1="658" img2="656" offset="0.5" 
```
and on a normal blog page looking like this:
Copy this short code, then and close the blog post. There is no need to save because it's no longer needed. Basically, I'm using the tools to generate a proper bit of short code since I don't know what I am doing if I had to write it from scratch. Doing it this way also makes sure the short code links to the proper images.
Now open the Semplice page you started earlier. Click to edit it's content:
Next click modules up top. Then choose </code>
Click code editor in the following dialogue:
This is where you will paste the short code you copied earlier.
Press the check mark and save to view the post. Everything should work. 🙂
It's quite simple really, it just wasn't obvious at all to me at first as I am not super-familiar with all the WordPress and Theme nuances.
If someone has a way to do this with video, it would be appreciated if you let me know in a comment.