Often you will be using Opus Creator or Opus Pro to create interactive elements which will be part of another website. These elements are usually placed in discrete sections of the HTML called a DIV (for division) - see W3Schools for further information.
You will need to use a text editor to edit the HTM file produced by Opus as well as the HTML file you want to include your content. One of the most popular is Notepad++ which will highlight the different elements of HTML so it is easier to spot syntax errors. The illustrations below feature Notepad++ so your editor may look slightly different.
Assuming you have set the resize options in Chapter Properties as described in the preceding tutorial, you simply need to go to the Publish Settings for HTML5 and choose the Single DIV option. Then Publish your content as usual.
When published with the resizable settings the single DIV content will always try to fill the space it is placed in. This means it will need to be surrounded by another DIV which sets the space your Opus content is set to fill. This can either be a fixed size DIV (in which case it will not resize unless that DIV is resized by a script - see below) or (more usually) it will be a section of a grid-based design which sets the size of each DIV as a percentage of the available screen width. The most popular of these grid designs are those based on the Bootstrap grid system.
The Opus Content itself has several DIVS in it - for further details see Understanding Opus HTML5 Output.
Once you have published your Opus content you define a DIV in your main HTML to contain the content. In the example below the style sheet (CSS) for the page sets up a set (or class) of DIVs which are a percentage of the screen size and the opus content is placed inside a div of the class "grid_40" which will use 40% of the available width.
You can then insert your opus content into this DIV in one of two ways.
If you want to use the include tag to load the Opus HTM at run time you will need to type something similar to the following.
You will need to ensure that you upload the Opus HTM file to the same location as the HTML page which continas it, along with all the other elements which the Opus publishing process creates for the page most importantly the opus.js file.
If you have selected all the content and copied it to the clip board then place the text cursor where you want it to go in the main HTML and select paste. As you have already done the job which the include tag would do, you have no need to upload the HTM part of the Opus output but all the other elements produced by Opus will need to be uploaded.
The size of the wrapper div which contains the Opus content can either be a set size (but doesn't have to be the size you designed it at) or can be "responsive" or "adaptive" as in a Bootstrap style page.
creating responsive content in Opus Creator and Opus Pro