Recreate The Xiaomi Homepage With Neve & Otter Blocks [FREE Tools]



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-setup

1. Domain Wheel – https://domainwheel.com/
2. Otter (Gutenberg Blocks & Template Library) – http://bit.ly/OtterBlocks
3. Image optimization service by Optimole – http://bit.ly/Optimole
4. Orbit FOX – http://bit.ly/OrbitFOX

Xiaomi.com is a popular tech gear website with a lot of content and pages but I will recreate only the homepage, step by step.

Step #1 – Get a domain name 🕓 1:24
Step #2 – Get professional WordPress hosting 🕓 2:03
Step #3 – Recreate the header using Neve + CSS 🕓 2:56
Step #4 – Recreate the footer using Neve + CSS 🕓 14:07
Step #5 – Recreate the content using Otter Blocks 🕓 18:21

Custom CSS

Download and import the Customizer settings including the custom CSS: https://bit.ly/2IRvnwh

/*– Main nav menu style –*/
.nav-menu-primary {font-size:14px;}

.nav-menu-primary ul li span {color:#fff;}

.nav-menu-primary ul li ul li span {color:black;}

.row .primary-menu-ul .sub-menu li {border:none}

/*– Homepage content styles –*/

.header {z-index:1;}

/*– Make navigation menu background transparent –*/

.nv-navbar, .light-mode {background-color:transparent;}

/*– slider styles –*/
.metaslider {
width: 100vw !important;
left: 0 !important;
}

/*– add a shadow to images when hovered –*/
figure.wp-block-image img:hover {
box-shadow: 0 8px 16px rgba(0,0,0,.18);}

/*– Footer styles –*/

.site-footer {
background-color:#212121;
padding:30px 0 0 0;
}

.footer-top .light-mode {
background-color:transparent !important;
}

.builder-item–footer_copyright {
color: #b0b0b0;
}

.site-footer .builder-item { align-items: normal;
}

.footer-content-wrap .widget-title {
text-transform:uppercase;
font-size: 14px !important;
line-height: 40px;
font-weight: 600;
color:#b0b0b0;
}

.footer-content-wrap ul li a span {
color:#b0b0b0;
font-size:14px;
line-height: 32px;
text-decoration:none;
}

.footer-content-wrap ul li a span:hover {
color:#fff;
}

.footer-bottom .dark-mode {
background-color:#212121;
border-top:1px solid #424242;
}

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

Related posts

One Thought to “Recreate The Xiaomi Homepage With Neve & Otter Blocks [FREE Tools]”

  1. Thank you for posting this video. Observation: Gutenburg and Otter Blocks looks tedious dealing with the image padding/margin and non WYSIWYG You can't copy and paste styles? Wouldn't this be better done using another page builder, Elementor for instance?

Leave a Comment