Participating Frequently

Question

How to export to WordPress

Forum|Forum|1 year ago
December 28, 2024
5 replies
15973 views

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!

J

Jeffrey_Smith

Community Expert

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

Legend

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.

B

billiejacksonAuthor

Participating Frequently

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.

Miguel Agawin

Participating Frequently

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.

B

billiejacksonAuthor

Participating Frequently

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.

Barb Binder

Community Expert

Hi @billiejackson:

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

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

~Barb

~Barb at Rocky Mountain Training

B

billiejacksonAuthor

Participating Frequently

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

James Gifford—NitroPress

Legend

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.

B

billiejacksonAuthor

Participating Frequently

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

James Gifford—NitroPress

Legend

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.

B

billiejacksonAuthor

Participating Frequently

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

BobLevine

Community Expert

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?

B

billiejacksonAuthor

Participating Frequently

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded