How to export to WordPress

[billiejackson]

Hello everyone,

I built an interactive web component in InDesign and need to place it into a WordPress website for a client. Here is a link. https://indd.adobe.com/view/71fe6951-851a-472c-b420-3f83dce885c7

Does anyone know how I would go about getting this into WordPress? Thanks for the help in advance!

[billiejackson]

Just FYI, adding iframes in text mode doesn't work: https://fisent.com/9739-2/?swcfpc=1

[BobLevine]

The iframe works fine for me (though I would use a code block) but none of this has anything to do with InDesign. Why would you want to add a non-responsive element to a responsive website and why would you want to use a page layout application to create it?

[billiejackson]

Because the client's WordPress firewall is blocking me adding any plugins as well as causing other issues. They wanted the menu to be hover capable and none of the existing plugins can do that. As a workaround, I would of designed different graphics so it looked good on all devices. I would just of had to make a phone, tablet version. It was a short term solution. I ended up rebuilding it in Slider Revolution and it's fine.

[James Gifford—NitroPress]

InDesign is not a good platform to create HTML content, especially for export and use on a generic platform. We see many here who want to create email and the like and find it's a frustrating, limited process that often just doesn't work, the more so as interactive elements and tricky links are involved.

ID's HTML export is limited to two options: fairly simple document (not website) export using Legacy HTML, which I've found useful in doing multiplatform documentation and the like, and export to Publish Online, which works fairly well but is dependent on the Adobe PO platform and host to work correctly. It sounds as if you're doing the latter.

There is a new, third option: HTML5 export. As nearly as I can tell, this is the same as export for Publish Online, but with streamlined code and no reliance on the specific PO host features. If you haven't tried that, you might.

But in the end, ID is not really an HTML/CSS code/snippet/module creator. At best, it will give you a starting point you can then apply significant code skills to for repurposing. But as you're headed to WordPress, I'd make a nickel bet you're not as strong with code rewriting etc. as this path would require. (I may be wrong!)

Even in not-quite-2025, the only way to create robust, functional, responsive HTML content is basically at the code level, with or without the help of a dedicated editor/environment like DreamWeaver. I don't know of any tools that will let you visually design an element, especially one with interactive features, and simply export it for generic web use.

[billiejackson]

what program would you recommend I use to build the feature for WordPress?

[James Gifford—NitroPress]

It depends on exactly what "the feature" is.

There may be a plugin that already does it, or is a 'platform' for adding that feature; explore the WP plugin library and ask in a WP developer forum. That's if you can't do it using WP's fairly powerful page-building tools and a bit of code editing.

If what you want is relatively simple HTML/CSS, layout plus links or simple interaction, build it as a standalone page using whatever methods you're comfortable with (simple code editor, advanced coding platform, DreamWeaver, etc.) and include it in a WP page using any compatible, probably "isolating" mode. (I'd use a <div> with some defining CSS, but <iframes> are still a thing.)

There's just no really good visual builder (at all, IMVHO) that produces solid, portable code and elements. So that's about it in choices, I think.

[Barb Binder]

Hi @billiejackson:

You might want to take a look at in5 from Ajar Productions. 

https://ajarproductions.com/pages/products/in5/?ref=footer

~Barb

[billiejackson]

Thank you! I can't install plugins but I did download it for other projects.

[Miguel Agawin]

It’s best to recreate this using a page builder that has a tab and content block/module/widget. You’ll want to make sure the block/module/widget has the option to change the position of the tabs to side (and convert to an accordion for mobile). Even if you can import the component you made in InDesign seamlessly onto WordPress, it’s not responsive which page builder blocks/modules/widgets typically are.

[billiejackson]

Thanks for your response. The client's firewall is giving me problems or I would of just installed a plugin to get the job done. I have Slider Revolution installed already so I just built it in that.

[Jeffrey_Smith]

If you would like to present the publish online document within a wordpress site, create iframe code. You can do this by selecting the 3 dots in lower right hand corner of the publish online file. Then select Embed, and Embed Options, and copy code. This iframe code would be pasted into a code container on desired page of wordpress site.

[James Gifford—NitroPress]

A technical solution, yes, and a good point, and probably as much of an answer as there is for the OP.

But does this route promote, say, code efficiency? responsiveness? or even interactivity as it would be expected to work from a WP platform? Or is it just a way to fit a tesseract into a small triangular hole?

Just to start with, I find PO/HTML5's export to be horrendously bloated and messy, and that's without any interactive elements. it's also essentialy non-editable unless you have such skills that you probably wouldn't bother trying to get a layout from ID to the web.

I don't know, and could be utterly wrong, but I'd expect this route — trying to get from complex page layout to the essentially dumbed-down E-Z world of WordPress — to have so many points of failure and awkward aspects that it's essentially useless... and that's before trying to accommodate interactive elements.

I am dismayed at the increasingly pervasive idea that because interactivity, multimedia, animation etc. are so gosh-darn easy to use, they must be easy to create using whatever tool happens to be at hand, without any real understanding of what host and support platforms do. My dismay is compounded when essential design tools like ID are increasingly bent to serve this sector at no little cost to professional users — and to grasp what I mean there, consider what "Publish Online" might be if it were not boxed and automated and limited and E-Z'ed to accommodate the lowest tier of user.

[billiejackson]

I’m very well versed in building websites in Dreamweaver but some of my smaller clients want to use WordPress. Wordpress is a pain in the rear to get anything external from itself to work. I ended up using a plugin and writing code to alter it the way I needed it to work. Assuming that I’m playing in a playground I’m too small for is pretty assuming. Obviously, if I was able to get the graphic from InDesign to work I would have made alternate versions for phone and tablet.

[BobLevine]

Obviously, if I was able to get the graphic from InDesign to work I would have made alternate versions for phone and tablet.
By @billiejackson

There is nothing obvious about it. And again, a chain is only as strong as its weakest link and that link is called Publish Online. You can create as many versions of that document as you want but they still won't be responsive.

This is one of those instances where I'm glad I'm pretty old and turn down work. I've had a couple clients ask about doing things like this and once I explain the issues, they're good with not using it.

[billiejackson]

I apologize for being blunt, but to be honest you have written many times on my post and not one word is helpful. The only reason I even put the question here is because the site I'm working on has a firewall that is making my job infinitely more difficult. I'm was trying to find a quick workaround because I can't install any plugins. Don't talk to me about responsive like it's not Webdesign 101. Obviously it wouldn't be but it would still look steller on all devices, which is literally the whole point. I enjoy a challenge and get the job done no matter the roadblocks and the only clients I turn down are rude or condesending clients. To be a productive member of this forum, my advice would be for you to scroll past instead of wasting people's time on your soapbox.

[James Gifford—NitroPress]

You continue to miss the point that Publish Online is not a general web or presentation solution; it is a closed ecosystem with InDesign at one end and a specialized hosting platform at the other. That you cannot repurpose its content, or make that content work in any general web context, has been said several times. All comments about skill levels etc. are asides to that.

I'm sorry you are not getting the answer that you expect, and one that is within your range of ability to use. That is largely because there isn't such an answer. You should not have used ID/PO to create this element of your project.

[billiejackson]

I get it, seriously, completely, 100%. I knew it wasn't a great solution when I asked the question. The fact is, it was a short term fix and since you have absolutely, no idea, how it was going to be used, your rambling posts were no help since I am already aware of the difference and uses of all of Adobe's programs. I was hitting issues and just needed it short term for a presentation. It wasn't going to ever be used on the client's live site. And yes, I was able to get the graphic into WordPress with the helpful plugin someone mentioned. and also by embedding a PDF, which was perfectly adequate for presentation purposes.

[James Gifford—NitroPress]

Just to be clear, I wasn't dismissing your skill level and can only make some educated guesses about any specfics. That you are using two visual-builder tools to create a web page through the semi-hack of an <iframe> seems to define both; if you have strong HTML code skills, it seems to be you would have been able to resolve this problem without asking here, or even noted that PO's code and hosting is almost useless outside of its closed ecosystem.

It is not, even in 2025, possible to build complex websites without advanced understanding of at least HTML and CSS, and some grasp of PHP and JS. The visual tools, even that aspect of DreamWeaver, just aren't there. And trying to blend the product of two or more wholly incompatible (or at least "not on speaking terms") visual builders... well, that's what underlies my comment above.

[BobLevine]

The OP used an iframe and as far as I could tell, it was working.

I'm a big fan of WordPress. Most of my work these days is done with it, but it's not magic and it can't take non-responsive Publish Online and somehow turn it into anything more than what it is.

[James Gifford—NitroPress]

WP is a great platform for 'expedient midlevel web development.' Most of these tools etc. have their strong points as well. My concern is with the rising tide of designer/developers who don't seem to understand anything about what goes into "interactivity" and assume any interactive element created in any app for any platform is as mutable/portable as a JPEG image.

Yes, everything is interactive these days. But not because the app you're familiar with has "interactive" options for its documents.

[billiejackson]

It was working fine in the browser but I couldn't get into WordPress because of the client's firewall which is why I asked the question I did. I wasn't asking advice for it to be responsive, I would have handled that by

another workaround. I needed it in WordPress but fortunately someone had a great solution which I didn't use but just rebuilt it in Slider Revolution.