WordPress For Beginners – How To Use WordPress Gutenberg Blocks To Recreate The Apple Homepage

by | Feb 20, 2020 | 0 comments

WordPress For Beginners – How To Use WordPress Gutenberg Blocks To Recreate The Apple Homepage

by | Feb 20, 2020 | Wordpress Tutorials for Beginners | 0 comments

WordPress For Beginners Tutorials and information. We source some of the best tutorials online to help you manage your wordpress website.




In this rebuild tutorial, we’re going to recreate the Apple.com homepage by using WordPress Gutenberg Blocks. We’ll be also using the free Neve theme and the free Otter Blocks for Gutenberg plugin for most of the project.

Elementor Pro is required for the footer because it’s a very complex footer. Everything besides the footer is built with free tools.

The tools we used to make this happen:

• Neve WordPress theme: http://bit.ly/NeveWPTheme
• Get professional hosting from Siteground, with discount* – http://bit.ly/WPHostingOffer
• Elementor: https://elementor.com/?ref=2134&campaign=youtube

1. Stock Photos: https://mystock.themeisle.com/
2. Free Icons: https://themeisle.com/free-icons/
3. Domain Wheel – https://domainwheel.com/
4. Image optimization service by Optimole – http://bit.ly/Optimole
5. Orbit FOX – http://bit.ly/OrbitFOX

Table of Contents:

Step #1 – Customize The Navigation Menu 🕓 2:01
Step #2 – Creating The Homepage Content Using Gutenberg And Otter Blocks 🕓 9:49
Step #3 – Create The Footer Using Elementor Pro 🕓 49:31

CSS for the customizer:

/*– Navigation Styles –*/

.light-mode {background-color:black;}

.row .primary-menu-ul li:not(:last-child) {
padding-right: 83px !important;
}

CSS for Elementor Pro:

a:hover {text-decoration:underline;}

.elementor-nav-menu–layout-horizontal a {border-right:1px solid grey;}
.menu-item-167 a {border-right:none;}
Website → https://themeisle.com
WordPress Articles → https://themeisle.com/blog/
Facebook → https://www.facebook.com/themeisle/

ThemeIsle is the go-to source for the High-Quality WordPress Themes (both free & premium), and plugins every website owner needs. We’re passioned about all things WordPress, but we’re not afraid to tackle other web related subjects. Our goal is to give those websites easy-to-use themes and designs that can be managed by everyone.

* When purchasing hosting through our link, from Siteground.com, you can get a specific discount available at that moment. Doing it, you will generate a commission for us and that is helpful for making future video-tutorials. Thank you!

source

0 Comments

Submit a Comment

What Our Clients Are Saying

Uniglobe Travel – Western Canada

I enjoyed the workshop, we covered a broad range of topics in a short space of time, but I appreciated...

Ciara

Dieno Digital Marketing Services
5
2018-07-10T03:22:20+00:00

Ciara

I enjoyed the workshop, we covered a broad range of topics in a short space of time, but I appreciated that there was some concrete, actionable advice given as well!

North Burnaby Boxing Club

Thanks so much for all the great work you have done in developing our website Leland!

Manny, North Burnaby Boxing Club

Dieno Digital Marketing Services
5
2018-04-27T01:06:02+00:00

Manny, North Burnaby Boxing Club

Thanks so much for all the great work you have done in developing our website Leland!

JB Consulting

Leland built us a great site at a great price. We can’t say enough about how pleasant it was dealing...

Dave, JB Consulting

Dieno Digital Marketing Services
5
2018-04-27T01:06:57+00:00

Dave, JB Consulting

Leland built us a great site at a great price. We can’t say enough about how pleasant it was dealing with him!

Kelicor Logistics

Leland created my website for my new venture. I found his service to be excellent,was always available to answer my...

Colin, Kelicor Logistics Solutions

Dieno Digital Marketing Services
5
2018-04-27T01:07:34+00:00

Colin, Kelicor Logistics Solutions

Leland created my website for my new venture. I found his service to be excellent,was always available to answer my questions and was always prepared to go the extra mile, in order to ensure my website conveyed it's intended message,, And the cherry on top was it was most affordable. Would definitely recommend. Thanks Leland !
5
4
Dieno Digital Marketing Services
[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-name">First name or full name</label> <input class="tnp-name" type="text" name="nn" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-email">Email</label> <input class="tnp-email" type="email" name="ne" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>