EMBED Instruction: WordPress

Here is how you embed your graphic generator in WordPress

Step 1: Go to the page editor of your WordPress page.

Step 2: Create a new Custom HTML element.

Once created it should look like this:

Step 3: Copy the following code-snippet using control + c (or command + c on macOS).

{{iframeCode}}

Step 4: Paste the code-snippet into the Custom HTML element using control + v (or command + v on macOS).

Now if you click Save and view the live page, you might notice that the graphic generator is not horizontally centered...

There are many ways so solve this issue but we recommend the following steps...

Step 5: Select the Custom HTML element, click on the options-button (icon with 3 stacked dots) and click on Group.

Step 6: Open the settings (third icon from the right in the upper toolbar).

Step 7: Set the group's configuration to Row.

Step 8: Set the group's justification to Space between items.

If you click save and view the live page, the graphic generator should be horizontally centered...

You're all done!

What if you want the graphic generator to be smaller?

You can change the width and height of the graphic generator.

To change the width you need to create another group and give that new group a specific content width. To do this just follow these steps...

Step 9: With the row element selected create a new group.

Step 10: Set the new group's content width to a specific value (in this example 800 pixels).

Again, click save and view the live page to see the effect of changing the width...

Note that the content width of the newly created group elements acts as a maximum width. On smaller devices the graphic generator will automatically lower its width to fit the screen.

Next let's change the height. To do so you need to edit the code-snippet which you pasted into the Custom HTML element. Follow these steps...

Step 11: Select the Custom HTML element and find the "height: 80vh;"-parameter in the code-snippet.

Step 12: Change the "80vh" to something lower (in this example "60vh").
"vh" refers to view-height and is measured as a percentage of the height of the device on which the page is displayed. Always pick a value that works on desktop and mobile devices. Use your own mobile device as a reference.

Here's how the live page looks like now (after clicking on save)...

Thomas Wicke

Thomas Wicke

- Trying to reinvent stuff