How To Use WordPress Gutenberg Blocks & Neve To Recreate LifeHack.org - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Wordpress ThemeIsle Video: How To Use WordPress Gutenberg Blocks & Neve To Recreate LifeHack.org.
Today we're going to use only free tools, the Neve theme and Gutenberg, to recreate the LifeHack.org homepage. We can't get it pixel-perfect, but it's really close.

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
• MailPoet tutorial: https://www.youtube.com/watch?v=zc2FVqsHJNQ

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 - Recreate the Header with the Neve Theme • 4:12
Step #2 - Recreate the Footer with the Neve Theme • 14:45
Step #3 - Recreate the Homepage with Gutenberg • 26:36

CSS used in the Customizer:

.green-button {
color:white !important;
font-weight:bold;
background-color:rgb(86,165,0);
border-radius:20px;
border-radius:20px;
padding:10px 15px;
border:none;
}

.green-button:hover {
text-decoration:none;
}

.footer-links {
margin-bottom:50px;
margin-top:20px
}

.footer-links a {
margin-right:10px;
margin-left:12px;
color:white !important;
}

.footer-bottom .dark-mode, .footer-top .light-mode {
background-color:#283646;
}

CSS used in MailPoet:

.mailpoet_text {
width:330px;
background-color:white;
padding:7px;
margin-right:-3px;
border-right:none;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
display:inline;
float:left;
}

.mailpoet_submit {
color:white;
background-color:rgb(86,165,0);
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:0px;
border-bottom-left-radius:0px;
padding:10px 10px 11px 10px;
border:none;
float:left;
}

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!

Published: Monday, August 19, 2019 5:04 PM
Category: Wordpress ThemeIsle

100 Views

Related Videos

Popular
How To Use WordPress Gutenberg Blocks To Recreate The Apple Homepage

by Best Webhosting Added 4 years ago 102 Views / 0 Likes

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 profe
Popular
Recreate The Xiaomi Homepage With Neve & Otter Blocks [FREE Tools]

by Best Webhosting Added 4 years ago 104 Views / 0 Likes

You can recreate almost any website you see on the Internet by using a free WordPress theme, WordPress blocks, and some custom CSS. Here is how to build the homepage of the Xiaomi website. Download Neve WordPress theme: http://bit.ly/NeveWPTheme The tools we used to make this happen: • Get professional hosting from Siteground, with discount* - http://bit.ly/WPHostingOffer • Neve theme mega menu: https://docs.themeisle.com/article/964-neve-mega-menu-se
Recreate The Asos Website With Neve, Elementor & Gutenberg [homepage]

by Best Webhosting Added 4 years ago 80 Views / 0 Likes

You can recreate almost any website you see on the Internet by using a free WordPress theme and Elementor. Here is how to build the homepage of the ASOS website. The tools we used to make this happen: • Neve WordPress theme: http://bit.ly/NeveWPTheme • Elementor PRO. Get it now: http://bit.ly/DownloadElementor • Get professional hosting from Siteground, with discount* - http://bit.ly/WPHostingOffer 1. Domain Wheel - https://domainwheel.com/ 2. Otter (
Popular
Gutenberg Blocks Spotlight: Kadence Blocks - Does this plugin help Gutenberg compete with Brizy?

by Best Webhosting Added 4 years ago 117 Views / 0 Likes

Gutenberg is developing at an incredible pace, but most people will tell you "It's not a page builder replacement." But with a few strategic (free) plugins, that couldn't be further from the truth! In today's video I am going to introduce Kadence blocks, one of the essential Gutenberg plugins that will enhance any basic Wordpress website to compete with the likes of Brizy, Divi, and the rest. Ready for premium Gutenberg help? Check out my new complete
Popular
WordPress Gutenberg Blocks Tutorial Showing How Gutenberg Could Be A Real Page Builder With Getwid

by Best Webhosting Added 4 years ago 134 Views / 0 Likes

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL WordPress Gutenberg Blocks Tutorial Showing How Gutenberg Could Be A Real Page Builder With Getwid https://youtu.be/1ula9g1_7fw //* Getwid plugin in repository: https://wordpress.org/plugins/getwid/ Getwid Base theme in repository: https://wordpress.org/themes/getwid-base/ Join our private Facebook group today! https://www.facebook.com/groups/wplearninglab //* Getwid is a f
Popular
Best Gutenberg Blocks Plugin - Ultimate Addons For Gutenberg (FREE)

by Best Webhosting Added 4 years ago 119 Views / 0 Likes

With so many blocks to choose from, what block pack should you choose? In this video, I will be taking a look at Ultimate Add-ons For Gutenberg which is the #1 most used Gutenberg block package. This is the 1 package I will be using on all of my websites. You install UAG right from within your website. ~~~~~~~~~~~~~~~~~~~~~ All of my opinions in this video are my own, I was not paid to make this video. Whenever there is a link in any of my videos, if
How to Create a Custom Page Header For Your WordPress Blog Using Otter Blocks & Neve Pro [2022]

by Best Webhosting Added 1 year ago 32 Views / 0 Likes

This video demonstrates how to create a custom page header for your WordPress Blogs (with Gutenberg) using the Custom Layouts Module from Neve Pro and the Otter Section Block. Neve is a super-fast, easily customizable, multi-purpose theme. It's perfect for blogs, small businesses, startups, agencies, firms, e-commerce shops (WooCommerce storefront), personal portfolio sites, and most types of projects. Download Neve → https://themeisle.com/themes/neve
Create a 404 Page in WordPress Using Otter Blocks, Neve Custom Layouts, and Lottie Animations [2022]

by Best Webhosting Added 2 years ago 28 Views / 0 Likes

This is a quick and easy tutorial where you will learn how to build amazing animated WordPress 404 pages in Gutenburg, using Neve's Custom Layouts Module, Otter Blocks and Lottie Animations. You would need a Neve Pro License to access the Custom Layouts Module. Download Neve 👉 https://themeisle.com/themes/neve/pricing/ Check out Otter Blocks 👉 https://themeisle.com/plugins/otter-blocks/ Get your Lottie animations here 👉 https://lottiefiles.com/ Websit
Popular
WordPress: Reusable Gutenberg Blocks

by Best Webhosting Added 4 years ago 124 Views / 0 Likes

In this little tutorial quickly show you the concept of Reusable Blocks (or Saved Blocks) in the upcoming new WordPress Gutenberg editor (version 2.0). What do you think of reusable blocks? And what are your ideas of on how to use them or develop them further? Please let me know your thoughts in the comments below :) -- Helpful Gutenberg Links: Gutenberg Info on WordPress.org: https://wordpress.org/gutenberg/ Gutenberg Plugin: https://wordpress.org/pl
Popular
WordPress: Alle Gutenberg Blocks erklärt

by Best Webhosting Added 4 years ago 105 Views / 0 Likes

Um einen etwas tieferen Einblick in den kommenden neuen Gutenberg Editor für WordPress zu geben, zeige ich in diesem Video alle Blocks und ihre Funktion Schritt für Schritt. --- Hilfreiche Gutenberg Editor Links: Gutenberg kurz vorgestellt: https://youtu.be/_bl_UmsOB9w Gutenberg im WordPress.org Plugin-Verzeichnis: https://wordpress.org/plugins/gutenberg/ Frontend Test Version von Gutenberg: https://frontenberg.tomjn.com/ Das Gutenberg Handbook: https
Popular
WordPress: Standard Gutenberg Blocks Explained

by Best Webhosting Added 4 years ago 119 Views / 0 Likes

Since we prepared our WordPress theme "Pukeko" to support the Gutenberg plugins (version 2.8), I created a little video to show you all currently available standard Gutenberg blocks. I really like the new editing experience Gutenberg offers already. What are your thoughts on the upcoming changes to WordPress that Gutenberg will bring: Are you excited? Do you have questions? Please let me know in the comments below! -- Helpful Links from the Video: Gut
WordPress: Reusable Gutenberg Blocks vorgestellt (Deutsch)

by Best Webhosting Added 4 years ago 90 Views / 0 Likes

In diesem kleinen Video Tutorial stelle ich das Konzept der "Reusable Blocks" im neuen WordPress Gutenberg Editor (derzeit Plugin-Version 2.0) kurz vor. Wie findest du die Reusable Blocks bisher? Welche Einsatzmöglichkeiten könntest du dir in der Zukunft vorstellen? Hast du Fragen zu Gutenberg oder WordPress allgemein? Schreib mir doch einfach einen Kommentar! --- Hilfreiche Gutenberg Ressourcen: Gutenberg auf WordPress.org: https://wordpress.org/gute