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:

The tools we used to make this happen:

• Get professional hosting from Siteground, with discount* –
• Neve theme mega menu:

1. Domain Wheel –
2. Otter (Gutenberg Blocks & Template Library) –
3. Image optimization service by Optimole –
4. Orbit FOX – 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:

/*– 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 {
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 {
font-size: 14px !important;
line-height: 40px;
font-weight: 600;

.footer-content-wrap ul li a span {
line-height: 32px;

.footer-content-wrap ul li a span:hover {

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

Website →
WordPress Articles →
Facebook →

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, 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!”


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