Create a FREE One Page Elementor Website using hello theme

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 */
}

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users