Adding (almost) any Codepen to your WordPress website

[@pustynnyklakier4805]

I wasted all day and I was so nervous. I founded your movie and You made my day. Thank U very much!!!!!!

[@almostInevitable]

Thank you for your kind words!

[@JesusRuiz-sq1yq]

Finally a really well job explaining all we need to add correctly a Code of Codepen in Wordpress. Well done, thanks for sharing.

[@almostInevitable]

Thank you for the kind words!

[@shellycaldwell8964]

Oh dude. I am SOOOOOOOO HAPPY to have found this video. Thank you so much. And - you have a very nice approach and style. I'm gonna watch more of your tutorials. Thanks so much!!!

[@almostInevitable]

Thank you for the kind words!

[@mohamadalhadad4435]

Big thinks to you , believe my i saw more than 10 video's and visited more than 10 websites just to know what is the correct way to add codes from codepen. You got my back 100%. Big like and heart to you

[@almostInevitable]

Thank you for your kind words!

[@vizardgaming5371]

same experience, wasted whole day, then found this jem in the end

[@law_sensei]

you are the best, if it weren't for this video, my project might still be stuck. thank you!!!

[@almostInevitable]

Happy to help!

[@mathewpatterson2187]

Dude you are awesome, really appreciate you taking the time to put this together!! Great communication and teaching skills you are awesome!!

[@almostInevitable]

Thank you for the kind words!

[@seikoruby]

Thank you! ✨

[@Jsquared2]

Absolute greatest of all time thank you so much

[@alvarocantillana7067]

Awesome! I loved this video.

[@producedbywinnie1343]

Great video mate! Learnt a lot thank you xx

[@sawdao3434]

I tried using the embed button which automatically compiles the codepen. But it shows the entire frame in my website. I assume codepen pro can change this or am I wrong? I dont want to pay and then be in the same situation.

[@vizardgaming5371]

you are the best❤

[@jointdr.hoffman5991]

Awesome stuff👍 Thank you bro ☀️

[@pixelomo5180]

This is my pen, please add a link to it in your description. The magic dust still appears without the physics plugin because the createMagicDust function uses the canvas to generate particles. The physics plugin is used to animate the background particles.

[@almostInevitable]

Hi! The link to the pen is in the tutorial post, but I've added it here as well. Thanks for the explanation!

[@pixelomo5180]

@@almostInevitable thanks :)

[@mxbolt24]

great tutorial. thank you

[@almostInevitable]

Thanks!

[@minanabil9249]

your video was so helpful ty very much . i have a problem after i add the code to the divi module the entire styling is diffrent like font size and icon size and font type . can you tell me how to fix it please?

[@almostInevitable]

Hi Mina, it'll depend on the code you copied from. Most likely, the CSS you copied includes the styling for the sizes and fonts. Take out the ones that clash with your site, and you should be good. If you're really lost on that, feel free to send me an email pk@ my website domain.

[@serialglocker]

finally a tutorial made by a asian man

[@almostInevitable]

hahaha yup

[@khaledMohamed-tp4wx]

Thanks ❤

[@freedoom4090]

nice! thanks

[@TiaDzn]

Hi! What if the "background-color" property is duplicate (the Wordpress page and the CodePen both has it)?

[@almostInevitable]

well, that would depend on what look you're going for I guess haha if the WP page has the background color you want, then take out the line from the css in the pen when you copy it over. hope that helps!

[@TiaDzn]

@@almostInevitable Thank you so much, solved! Can you help me with another question please? Could you help me understand how to edit the "single product page" via WPBakery / HTML on my site? I obviously can't find it anywhere, but I'd just like to use the existing one (that I don't know where to find) and add some tweaks, like spacing etc... Thanks in advance!!

[@almostInevitable]

@@TiaDzn hmm.. single product pages are a Woocommerce template, so it should normally be a bunch of php files in the theme's template folder. If you're looking for simple tweaks, CSS should be enough, so here's a really quick CSS crash course video: kzbin.info/www/bejne/i2GQeYx6oaiWm9E and a whole practical CSS course I've uploaded on KZbin. It'll take a bit of time to learn, but learning CSS is the quickest way to free yourself from builder settings. Sorry it's not a quick and easy answer, but that's most likely how your site is set up. PS. I haven't checked in on WPB in a while, but you might be able to assign a template to 'single product page.' A lot of the WP page builders do that nowadays. If they do, then you might be able to make some adjustments with the builder.

[@nkccorp]

thank you my g

[@sidharthsreelal2880]

Hi .can i add the animation to a specific section in a single page

[@almostInevitable]

Hi Sidharth, of course you can! Just make sure you include all the animation related code (Like CSS animations or JS) when copy pasting from the pen.

[@pksly]

I have a code pen project that i am trying to put on my website and I just can't seem to land the plane. Is there any way you would read an email about my problem and help. I can pay lol

[@almostInevitable]

sure, my email is pk@ my domain. Flick me an email and we can talk.

[@ft397]

It doesn't work, collapse button is not working, do you know what I can do?

[@almostInevitable]

hmmm it would help to see what's going on with your project, could you send me an email to pk@ _my website_ thanks

[@Bashment0815]

thanks. just complie the css... :)

[@THISISPOEP]

thanks