In this video, I show you how can take advantage of the free Hello elementor theme to create a fully functional website either single or multi-page in WordPress for free.

You’ll learn how to create a header and footer with the Hello theme, customise the theme settings, create a sticky header add, page content using a free elementor template library.

If you’re getting started and want to build a website with little to no budget, this video is for you.

Tools mentioned in the video

Enroll in my elementor pro bootcamp: https://bootcamp.gotechug.com/

✅ Get free elementor templates (required): https://gotechug.com/templately

✅ Get elementor pro (not required): https://gotechug.com/elementor

✅ Get essential addons (not required): https://gotechug.com/essential-addons

CSS snippet for the header

/* Make the header sticky */
.site-header {
    position: sticky;
    top: 8%; /* Adjust this value as needed */
    transform: translateY(-50%);
    background-color: #141BCFE3; /* Set your desired background color */
    z-index: 1000; /* Ensure it's above other elements */
}

/* Responsive header for tablets and mobiles */

@media screen and (max-width: 1024px) {
    .site-header {
        position: sticky;
        top: 0%;
        transform: translateY(-10%);
    }
    
}
    

/* Customize hamburger icon */
.site-navigation-toggle-holder .site-navigation-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    padding: 0.25em;
    cursor: pointer;
    border: 0 solid;
    border-radius: 3px;
    background-color: rgb(255 255 255);
    color: #141bcfe3;
}

/* Download Button (menu item 31) */
.download {
    background-color: #ff006c; /* Replace with your preferred color code */
    transition: background-color 0.3s ease; /* Add a smooth transition effect */
    border-radius: 5px; /* Adjust the radius value as needed */
}

/* Style the link within the menu item */
.download a {
    color: #ffffff; /* Replace with your preferred text color */
    text-decoration: none; /* Remove underline from the link */
    padding: 7px 20px; /* Adjust padding as needed */
    display: block; /* Ensure the link takes up the full width of the menu item */
}

/* Add background color on hover */
.download:hover {
    background-color: #1a8deb; /* Replace with your preferred hover color code */
}