Community forum for knowledge and support

Updated 4 weeks ago

Exporting wireframes from relume to wordpress

Hi there! I just signed up in relume that I was thinking for a long time. I'm using it to download the wireframes in HTML and include them into my wordpress website. However I tried today for the first time to export the code in HTMl and test if it's going to be shown as the wireframe. I tested it in tailwinds play editor... but unfortunately seems broken.. Am I missing anything here or the platform is not ready for something like that yet ?

1
P
T
R
16 comments

@Trung Luu Hey, do you have any idea about the above ?

I think your usecase should work.

Can you explain more about the part that u considered it as broken. A screen record would help.

Have you tested it locally instead of relying on the tailwind playground ? .

Yes, let me get the record for you from the beginning to the end

As you can see when I add this to tailwind playground it doesnt look the same as on relume. I’ve tried it locally with the cdn of tailwind and looks exactly the same. Am I doing something wrong ?

I really wanna make this work..

hey @Petros Pollakis,

with our html export, you need to add some extra configurations into the existing tailwind config.

You can follow this doc.

Since we are tightly coupled with Tailwind, you might want to take a look at this as well https://tailwindcss.com/docs/installation/tailwind-cli.

Looks like you need to install tailwind in your project and include our tailwind config https://react-docs.relume.io/getting-started/tailwind

Tailwind playground works partially, because it provides the default tailwind config, but the layout still seems a bit off because you need to load in our tailwind config values (as above) but I'm not sure if the Tailwind playground does this?

Awesome guys, I’ll check it out..🙏

I’ve added the code into windpress, a plugin for wordpress because eventually I want to run the code into wordpress. Seems that still some parts are missing from the export of the code. I don’t think the problem is the way we import tailwind but that the export doesnt provide all the code.

Also this is the FAQ section and the questions are missing..
Am I doing something wrong on the export ?

<section><br /> <div><br /> <div<br> slotName=“max-width-large”<br /> class=“rb-12 mb-12 w-full max-w-lg md:mb-18 lg:mb-20”<br /> ><br /> <h2<br> elementName=“heading”<br /> class=“rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl”<br /> ><br /> FAQs<br /> <br /> <p><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse<br /> varius enim in eros elementum tristique.<br /> </p><br /> </div><br /> <div></div><br /> <div><br /> <h4<br> elementName=“heading-2"<br /> class=“mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl”<br /> ><br /> Still have questions?<br /> <br /> <p><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /> </p><br /> <div<br> elementName=“button-group”<br /> slotName=“button-group”<br /> class=“mt-6 md:mt-8"<br /> ><br /> <button<br> class=“focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-6 py-3”<br /> elementName=“button”<br /> title=“Contact”<br /> ><br /> Contact<br /> <br /> </div><br /> <br /> <br /></section>

As a WordPress developer I would suggest you to create manually and I have completed 3 projects this way. instead of exporting. It is compatible with Webflow and does not interact with WP.

Hey @Amir Malik what do you mean manually ?

i create everything from scratch using containers

So you dont use relume ? I’m a bit confused what you mean 😅

Bro i use relume

So you dont use AI.. I’m looking to leverage the AI situation here

Add a reply
Sign up and join the conversation on Slack