Recreate Nike.com with WordPress and Spectra Gutenberg Blocks in 30 minutes

Can I recreate the Nike.com ECOMMERCE website in 30 minutes using the FREE Spectra Blocks plugin and the Astra Theme. Spectra Blocks are now used on over 400,000 websites!
Links
Spectra Blocks - wpspectra.com/
Astra Theme - wpastra.com/
Storefront Blocks plugin - www.pootlepres...
👉 My WordPress Gutenberg plugins www.pootlepres... 🔥
👉 Sign up for my newsletter www.pootlepres...
👉 My courses www.pootlepres...
👉 ClubPootle clubpootle.com/
👉 Contact me at: [e-mail]

[@michaelperez5273]

I really enjoyed watching a 30 minute Nike website recreation video. I just purchased Spectra Pro myself and this video gave me so many ideas and a lot of clarity of what Spectra can do basing off your experience on the spot in live action. I hope you will do more videos like this in the future 💯😊

[@marywilliams7927]

I quite like Astra and Spectra and have built all my recent sites with it as it’s very flexible. Thank you for your demo and a great rebuild!

[@jamiewp]

Thanks Mary, yup there's some great choices out there for Gutenberg right now 👍

[@texanne99]

Thanks so much for this video. I'm new to Wordpress, Astra and Spectra, and I followed this "re-creation" step by step - it is actually very instructive. I think one of the biggest hurdles is that it is difficult to learn the ins and outs of Wordpress when you aren't quite sure what you want to create. Copying another site is a fantastic way to learn the tools. Do you have more tutorials like this? I guess it might not work for everyone, but it definitely worked for me!

[@jamiewp]

Hi Leigh , thats great hear . Yes i have quite a few other website recreation videos here Rapid Website Recreations kzbin.info/aero/PLiPorWuYVbzuVrydFJZflALOc5rpUuwgs

[@Andie_Malukutu]

You are my favorite KZbinr right now, thank you for the content.

[@jamiewp]

Thank you 🙏 tell everyone 😀

[@Andie_Malukutu]

@@jamiewp Sure, what’s your Twitter handle ? And what is the best Saas Wordpress them according to you ?

[@bradysbradys]

Genial, me gustó como explicas, la música, y por supuesto fue super útil, todavía estoy aprendiendo muchísimo y gracias a ti es otro avance en el conocimiento. Gracias. Por cierto, creo que si quieres también puedes utilizar el Post Grid para diseñar la extructura de Coaching and Wellness...

[@JamesJosephFinn]

Just wanted to say I appreciate your content. It really is very well done, and I'm learning a ton. Keep it up. +1! (Edit: I'd also love to see some GeneratePress / GenerateBlocks content, as I'm drawn to their simplified workflow. Haven't done a build with that stack yet, but am leaning that direction. Thanks again!)

[@jamiewp]

Thanks James , it's really appreciated. I did one video recently on GeneratePress, but that was really about blockifying a theme. But I'll plan to do some. I'm also a fan of their approach.

[@JamesJosephFinn]

Awesome! Looking forward to learning from your workflow. The "GeneratePress Way" is indeed an attractive approach for anyone who possesses even only basic design chops. (Shout out to David Kadavy's excellent "Design for Hackers". That book really helped me to grok the basics of design.) These all-in-one, comprehensive block packs, like Spectra, are really just a crutch for those unwilling to learn how to construct basic design patterns.

[@realfingertrouble]

Fascinating. I'm guessing Gutenberg's Cover block is a flex block, cos it does a lot of the same things? Also columns in Gutenberg, but not as flexible (hoho) as Spectra's. I found out by accident you can nest Cover blocks inside columns and other cover blocks, I was struggling with background images before that (but core really needs to allow people to do basic stuff like add images as backgrounds into columns, groups etc - still find myself reaching for CSS for basic stuff like getting all the margins and padding off images, or setting width/heights) I will take a look at Spectra! (I am a bit wary of using a lot of 3rd party blocks and themes partly because I was burned with themes not being supported after a year or two...I guess with FSE that makes things easier to find alternatives, but I know Automattic stuff will get supported, even with quirks - still hitting problems with past Galleries going weird cos they've changed how galleries work several times, I have some galleries I don't want to edit cos of this because I know I'll have to redo them!)

[@jamiewp]

Hi, yup Gutenberg uses flex in a number of core blocks now

[@geraldheagney6322]

Outstanding demo. This will serve as a guide to how to use Spectra to build great pages. Thank you!

[@jamiewp]

Thanks Gerald 😀

[@davidbanterford3216]

I like spectra but for responsive settings it doesn't seem to inherit the settings downwards like kadence or elementor

[@dm.designermohit]

Really really good Mr. Marsland......learned a lot--a lot...thanks a lot❤....is there any specific plugin you can share for getting a search bar ?

[@jamiewp]

Theres a core search block - did you see that ?

[@PabloSerranophotography]

great video! How would you use Astra Pro and Spectra to build a news or magazine style website? can you recommend any tutorials?

[@abdullahhassaan8497]

I liked the video and the result! Thank you Jamie!

[@jamiewp]

Thanks for watching Abdullah 🙏

[@belimooo]

Do I see that correctly? The customizer.php you are working in this video is deprecated with WP 6.6? At least, when I work with Twenty Twenty-Four and some spectra gutenberg blocks, this is not there anymore.

[@pierres_blog]

What I notice about post sliders is that they don't show the edges of the next and previous images on mobile. You see they did this on the original Nike site. It is such a queue on mobile that you can swipe left-right that it's become a standard. You see it on the biggest sites/apps for mobile such as KZbin, Amazon, Netflix. I wish the blocks developers would offer that as a setting. I have a vague memory (or dream?) that you did something like that on another video using CSS.

[@realfingertrouble]

Ooh the sizes for different devices, just faffed around in CSS doing that, I'd have loved to have known that a week ago!

[@jamiewp]

Better late than never i guess 🤔😀

[@arnelGo-fj7qc]

If you find it hard to switch away from Elementor, you’ll see that Spectra’s workflow and elements are heavily inspired by Elementor.

[@오산-y9w]

Good day, may I kindly ask which browser you are using?

[@jamiewp]

It's Vivaldi (great for split screen)

[@GarySchiltz]

I'm really excited to see Spectra. It seems like Gutenberg on steroids.

[@mikerodriguez1044]

Cool bro, you could do a whole channel just doing this and it be loads of fun (educational)

[@roppor2194]

Great content that can be applied to life. I would like to watch the following video, which will tell you about the reverse side of the online store. How goods are handled, orders processed, and shipped to customers. What else do you need to run a business? How much does it cost to promote a site so that people know about the existence of your site.

[@jamiewp]

That's a great idea for a video 👍

[@fiqihalfarizy4843]

Jamie, as a newbie in Gutenberg, I always wonder, does spectra able to handle complex web development like webflow, oxygen & bricks could do??

[@jamiewp]

Well it depends what you mean by complex web development 😉

[@fiqihalfarizy4843]

@@jamiewp how about design that will need absolute position in so many objects?

[@jamiewp]

@@fiqihalfarizy4843 can you share an example?

[@URandomGuy]

The cat was like 🐈 : F**ck Y*u Jamie go yourself, I'm too busy here doing nothing🤣🤣🤣

[@jamiewp]

That’s exactly right - they have a terrible attitude 😱

[@URandomGuy]

@@jamiewp Naaa Jamie, cats are great, I have 5 🐈🐈‍⬛🐈🐈‍⬛🐈

[@jamiewp]

@@URandomGuy that's a lot of cats - we have two. My family coerced me into having them in the first place, and we didn't really get on to start with, but a grudging respect has grown over the years.

[@URandomGuy]

@@jamiewp I never wanted a cat, but he got into my house on his own, and I found the other 4 on a highway, someone had left them there when they were little. They all have different ways of being and only one of them stays by my side for 24 hours. From my point of view, cats are like little people, they have their own way of being and thinking with different temperaments. A cat judges people, you can see that in their looks, on the other hand, a dog is more slimy and trusting, if a person calls him he will go to him, but on the other hand, a cat never trusts a stranger, the first one looks and He judges you and then if he sees that he can take advantage of you, he will go to where you are.

[@spitsparrow]

Is the container block now obsolete or is it a thing with spectra only. Im using 2024 and we have group blocks. Is it the same?

[@jamiewp]

Yup the container is part of the Spectra Blocks and not core WordPress.

[@zisismwayy]

Hello, what was the point of using the Astra theme instead of, for example, 2023?

[@jamiewp]

Great question- Woocommerce doesn’t look great wirh 2023 theme

[@void-qy4ov]

I'm trying to follow you example - but I have a large spacing between the top menu and the first container. It can be solved if I use full width with the page/container setting on Astra theme. Is there is a way to reduce margin for the "main" container in Astra ?

[@jamiewp]

What block is your first container ?

[@void-qy4ov]

​@@jamiewp thank you for the fast reply, I tried to use "Container Layout" - normal on the Astra theme customization layer, but I assume I have to use "Wide" on the free version :( otherwise there is a padding/margins of class="ast-container" I assume if I want "boxed" style - I will need to go with 4 containers and place spacers.

[@muratje]

Why classic Astra and not FSE Spectra One?

[@jamiewp]

Good question - you could certainly use Spectra One now 👍

[@visualmodo]

Very good content!

[@keywordniches]

i am getting better and better at gutenberg with gutenberg. But got an issue i cant figure out. I want to have 2 columns next to each other which is easy. But the second column on the rightit has 2 background images below each other with heading, text and a cta button on each of the images. But for some reason i cant get this to work. How could i fix this?

[@jamiewp]

Can you share a screenshot of the design?

[@ozgunmunar]

Hi, Is it legal to rebuild a website if I won't host it under any domain? I just want to make a youtube video of it so that I can show my future potential employer that I can make a website. Thanks for the content. Take care.

[@jamiewp]

If you are copying someone else's website then i would put it behind a private login, so you can still give access to potential employers, but it's not publicly visible. A plugin like this will do the trick wordpress.org/plugins/maintenance/

[@GaryMatthews]

Great demo as usual, Jamie. Hmm. So many razzle-dazzle third-party block plugins now available -- plain-vanilla Gutenberg is starting to seem downright old-school. ≧◔◡◔≦ Speaking of which -- you mentioned this is a sponsored video. Just out of curiosity, how hard would it be to rebuild the Nike website using just core Gutenberg blocks and the Twenty Twenty-Three default theme? (Plus maybe adding your Storefront plugin as you did here. But the point being, steering clear of third-party products generally?) I'm thinking, along the lines of the comment by @timbearcub, of future-proofing as much as possible.

[@jamiewp]

Hi Gary, great question - there's a few things that would be more difficult / time consuming / impossible with Naked Gutenberg. e.g those Nike product carousels, the video would be possiblle with the cover block (but the container block is more flexible). The header layout would be possible with a Block Theme, but FSE still has a steep learning curve, which some people won't want to embark on. I'm actually planning a video called WordPress Technical Debt (needs a more catchy title though, so ideas welcome :)

[@frankvidiyo]

I'm a little confused as to why you're using both Spectra AND Astra. Isn't the whole point of Spectra that you don't need to install another Theme like Astra? Doesn't adding Astra add more bloat and potential compatibility issues? I'm not an expert here, so may not fully understand Astra and what it brings vs Spectra (or vs Spectra One for that matter).

[@jamiewp]

Hi Frank, you still need a theme even if you use the Spectra add on plugin, and Astra is a great choice as it's fast and lightweight.

[@frankvidiyo]

@@jamiewp Thanks for the reply. However, isn't Astra a classic theme vs a block theme like Spectra One? If you wanted to go pure Gutenberg and FSE would that be the better route? Thanks again!

[@jamiewp]

yup that's correct 👍@@frankvidiyo

[@SmallBizGeekUK]

Do you create child themes as part of the FSE?

[@jamiewp]

You can do

[@SmallBizGeekUK]

@@jamiewp is it necessary though? Is it something you do? I can put any custom css into a custom css plugin, so there’s no need to create child folders as with classic themes. Same for functions.pho as well, I think?

[@beardlong8235]

dude you are good thank you

[@jamiewp]

Thanks for watching 🙏

[@waltermadrigalugalde]

Can I use spectra with FSE? Or any other theme but ASTRA?

[@jamiewp]

Yes you can use spectra with any block theme

[@waltermadrigalugalde]

@@jamiewp thanks...i love your videos...big fan here

[@jamiewp]

@@waltermadrigalugalde tks Walter 😀

[@rweaver-eh1qn]

hi great presentation thanks.👍 on a liter note tabby cats are just amazing my one opens the window to get out and jumps up on the back door handle to open and come in and thinks my dangling hand is something to be hunted like a giant mouse every where i go in the house🐭🐱

[@jamiewp]

That is amazing 🤩 🐱

[@bradysbradys]

spectra plugin lightbox not working

[@Meliodas-os4dl]

Can i do this in free version

[@beardlong8235]

When I change sth in the mobile tab it also changes how it looks on mobile....Why??? Damn

[@jamiewp]

Um isnt that whats meant to happen ?

[@beardlong8235]

sorry i meant to write on desktop as well. Thats my problem@@jamiewp

[@flu-flamer]

u kept skipping parts i wanted to learn to fully do and what to click on

[@jamiewp]

Let me know which bits (i have many other step by step tutorials)

[@sigma_z]

Next time someone on fiverr says it takes them 2 week. 😅

[@jamiewp]

😀😬