How to Make a WordPress Website with Elementor in 2024

01:19:17
https://www.youtube.com/watch?v=6h9Rqj6Gano

Summary

TLDRThis detailed guide teaches viewers how to build a WordPress website using Elementor, a popular page builder plugin. It starts with signing up for web hosting on Hostinger and getting a free domain name. Viewers learn to install WordPress, choose and customize a website template, and use Elementor for site layout. The tutorial also includes creating a logo, modifying headers and footers, and ensuring the website's attractiveness across all devices (mobile, tablet, desktop). By the end, the viewer has a fully functional one-page website, with tips on expanding to multiple pages if needed. The tutorial is aimed at beginners and emphasizes no coding requirement, utilizing free tools and resources throughout the guide.

Takeaways

  • 🖥️ Build a WordPress site using Elementor.
  • 🔖 Get web hosting and a free domain.
  • 🆓 WordPress installation is free.
  • 📐 Customize with easy-to-use templates.
  • 💡 Use a free page builder, Elementor.
  • 🖌️ Modify headers, footers, and more.
  • 📱 Ensure mobile compatibility.
  • 🎨 Create a free logo for branding.
  • 📂 Manage content with no coding needed.
  • 🛠️ Tools: WordPress, Elementor, Hostinger.

Timeline

  • 00:00:00 - 00:05:00

    This video tutorial guides on building a WordPress website using Elementor, starting with signing up for web hosting and securing a free domain name. You will learn to install WordPress for free and download a suitable, time-saving website template. The customization process includes using the free page builder plugin, Elementor, addressing elements like the header and footer, and designing a free logo. Ensure the website looks appealing on various platforms, such as mobile, tablet, and desktop screens. Timestamps in the video assist viewers in skipping sections, adjusting playback speed, and using arrow keys for navigation.

  • 00:05:00 - 00:10:00

    To create a website, you need a domain name for the web address and web hosting for storing the website online. Hostinger is recommended for its affordability and customer service. After selecting a hosting plan and entering billing details, receive perks like a free domain name and daily backups. Set up a website from scratch using WordPress, which requires creating login credentials. WordPress offers website templates and plugins for customization, while AI-generated website content options are available, though starting from scratch is recommended for learning purposes.

  • 00:10:00 - 00:15:00

    Use a domain name reflective of your business—e.g., "My Strength Gym." Set your website's target audience for optimized performance based on location. Gain insights into WordPress's backend H-panel, from managing databases to accessing the WordPress dashboard for web management. Understand WordPress as a significant content management system handling various assets, including images and blogs. Navigate WordPress's dashboard, encompassing blog posts, media, website pages, and comments, as well as settings linked to appearance, plugins, users, and other utilities for site management.

  • 00:15:00 - 00:20:00

    Plugins can enrich a website's functionality. Installing a complete website template saves time even for professional designers. Download a free starter template via WordPress that includes demo content and plugins. The tutorial involves customizing these templates using Elementor, which is well-suited for beginners. Elementor offers drag-and-drop simplicity, allowing easy content creation and management. After activating Elementor, choose templates, make adjustments, and understand Elementor's interface, including the content, style, and advanced tabs and how these affect the website layout and widget management.

  • 00:20:00 - 00:25:00

    Elementor provides various editing options for webpage elements, like adding images, adjusting text, and deleting sections. Change fonts and headers, modify stylistic elements under the style tab, and tweak page or section spacing under the advanced tab. Update changes frequently to ensure saving of all progress. Websites should include necessary information spread across multiple sections—the top or 'hero' section, followed by operational details, services, testimonial sections, and contact information, all composed using Elementor’s easy drag-and-drop features.

  • 00:25:00 - 00:30:00

    For visual impact, web sections can have dynamic backgrounds, including slideshows and zoom effects, improving user engagement. Customize backgrounds, adjust header sizes, and introduce horizontal arrangements for content elements. A CSS ID can be applied for navigation enhancements, letting different sections link from the top menu. Adjust the padding for containers to improve text readability and enhance browsing experience. Consistency in style, such as uniform capitalization, helps maintain a professional look across the site.

  • 00:30:00 - 00:35:00

    Use Elementor to create an impactful hero section with engaging text and dynamic backgrounds. Align sections logically, moving elements like 'About' above 'Services' if needed for coherence. Images within sections like 'About' can convey professionalism and be paired with textual information relating directly to the respective business or service provided. Assemble sections using Elementor's containers and flexbox elements for flexible layout management. Ensure visibility and proper text alignment by fine-tuning textual elements and padding distances for desktops.

  • 00:35:00 - 00:40:00

    Customizing template sections allows for personal personalization, like testimonials, to reflect client feedback, including names and photographs. Altering testimonial backgrounds to match the overall theme enhances visual coherence. Adjust textual elements under different headers to reflect service availability, personal business skills, and more. Use the anchors feature to set CSS IDs on sections, allowing smooth navigation from menu items to each section by managing hyperlinks respective to the home page.

  • 00:40:00 - 00:45:00

    Introduce additional sections like contact forms using widgets like WP Forms and enhance user interaction by presenting clear calling options to business memberships or classes. Proper placement of visual and textual elements through flexbox containers and manipulation of paddings ensures professional alignment. Side-by-side flexbox components help in visually organizing content efficiently, such as displaying contact forms next to business images. Utilize Elementor's simplicity to handle media and responsiveness adjustments across sections.

  • 00:45:00 - 00:50:00

    Google Maps widgets facilitate business location visibility on websites, directly integrated via flexible width adjustments for banners. Use Google Maps API to pinpoint exact business locations on your site. Flexbox divisions allow for contact information arrangement—location, hours of operation, and contact details. Update and refresh Elementor to ensure all sections implement recent background color changes (from default blue to a preferable shade), maintaining a pleasing aesthetic consistency throughout the website.

  • 00:50:00 - 00:55:00

    Completing a website's page involves setting the website's header and footer using WordPress's customization features. Attach the newly designed logo and set the desired favicon for site branding. Menu configurations ensure seamless navigation, facilitating easy access to different site sections. Utilize global settings to apply cohesive color themes across the website, understanding CSS ID implementation for smooth navigation. These settings ensure that site branding is consistently presented across all navigational elements via header and footer adjustments.

  • 00:55:00 - 01:00:00

    Ensuring a website is responsive is crucial, as views on mobiles differ from desktops. Use Elementor's responsive mode to adjust design elements for mobile, tablet, and desktop viewing experiences. This involves tweaking textual elements, image sizes, and navigation menus for optimal viewing. Responsive layouts appeal to a variety of devices, ensuring functionality and aesthetic appeal across platforms. The tutorial explains how to adjust individual viewing modes without affecting others, using Elementor’s device-specific settings.

  • 01:00:00 - 01:05:00

    Ensure correct functionality of navigation menus on different devices using Elementor's responsive settings, reinforcing the importance of mobile-friendly site configurations. Off-canvas menus should function correctly, linking to primary menu items for simplified user access. Through responsive checks and modifications, guarantee that the user experience remains intuitive, regardless of the device. Constantly update and save work to apply these changes effectively across desktop, tablet, and mobile layouts.

  • 01:05:00 - 01:10:00

    Throughout the final phase, simulate user interactions on different device views to confirm all site components’ operations—from navigation flow (headers/footers) to form submissions and location maps. Regular publishing of saved configurations ensures changes are active. The guidance provided addresses basic website creation using WordPress and Elementor, focusing on one-page structure, promoting functionality, aesthetics, and business objectives. A well-structured site enhances user engagement and professional reach online.

  • 01:10:00 - 01:19:17

    Pattern recognition aids in faster web building—color palettes and typography used consistently ensure hassle-free design adaptations. Enhancing design structuring with pre-built segments offers ease in managing visual and functional elements, establishing unity across a brand image. This tutorial simplifies the web design process into manageable tasks, showing how Elementor's flexibility aids non-technical users in creating visually appealing, responsive websites for diverse business needs, from start to finish.

Show more

Mind Map

Video Q&A

  • What hosting provider is recommended in the video?

    The video recommends using Hostinger for web hosting due to their good customer service and affordable pricing.

  • Is WordPress installation free?

    Yes, the video shows how to install WordPress for free.

  • What is the purpose of the Elementor plugin?

    Elementor is a popular page builder used to customize website templates easily.

  • How can you make your website mobile-responsive?

    The video provides steps to ensure your website looks good on mobile by using WordPress and Elementor settings.

  • Can you get a free domain name with this setup?

    Yes, Hostinger provides a free domain name when you sign up for hosting.

  • Is coding knowledge required to follow this tutorial?

    No, this tutorial is designed for beginners and does not require coding knowledge.

  • What additional steps are included to enhance the website's appearance?

    The tutorial includes customizing headers, footers, and creating a free logo.

  • What tools are needed to build the website?

    The necessary tools include WordPress, Elementor, and a hosting service like Hostinger.

View more video summaries

Get instant access to free YouTube video summaries powered by AI!
Subtitles
en
Auto Scroll:
  • 00:00:00
    I'm going to show you how to build a
  • 00:00:01
    WordPress website with Elementor in just
  • 00:00:03
    a few easy steps first I'm going to show
  • 00:00:05
    you how to sign up for web hosting and
  • 00:00:07
    also how to get your own free.com domain
  • 00:00:10
    name then I'll show you how to install
  • 00:00:11
    WordPress to your website which is also
  • 00:00:13
    for free then we're going to be
  • 00:00:14
    downloading a website template that's
  • 00:00:16
    also free and is going to save you time
  • 00:00:18
    and money after that I'll show you how
  • 00:00:20
    to customize your website with a free
  • 00:00:22
    page builder plugin that is the most
  • 00:00:24
    popular and easy to use then we're going
  • 00:00:26
    to customize the header and footer of
  • 00:00:27
    the website and don't worry I'm going to
  • 00:00:29
    show you how to make a logo for free as
  • 00:00:31
    well lastly we will make sure your
  • 00:00:33
    website looks good on all platforms
  • 00:00:35
    whether it be a phone screen a tablet or
  • 00:00:37
    a desktop view and then you're done by
  • 00:00:39
    the end of this video you're going to
  • 00:00:40
    have a website up and ready to go now
  • 00:00:42
    I'm going to leave timestamps down in
  • 00:00:44
    the description of this video so you can
  • 00:00:45
    jump around to different parts of this
  • 00:00:47
    tutorial if you think I'm talking too
  • 00:00:49
    fast or too slow you can just adjust the
  • 00:00:51
    playback speed of this video to be
  • 00:00:53
    faster or slower depending on your needs
  • 00:00:55
    and as always you can use the arrow keys
  • 00:00:58
    to skip forwards or backwards by seconds
  • 00:01:00
    at any time let's get started to get
  • 00:01:02
    started building a website you have to
  • 00:01:03
    have two things without a doubt you have
  • 00:01:05
    to have a domain name which is the
  • 00:01:07
    address to your website and you have to
  • 00:01:08
    have web hosting which is where your
  • 00:01:10
    website will be stored and be accessible
  • 00:01:12
    to the internet now your domain name is
  • 00:01:14
    what people are going to enter into the
  • 00:01:15
    search bar to find your website so
  • 00:01:17
    something like yourwebsite.com and
  • 00:01:19
    webhosting is just renting space on a
  • 00:01:22
    server that's connected to the internet
  • 00:01:23
    so now that you know what they are how
  • 00:01:25
    do you get them well you can shop for
  • 00:01:27
    hosting providers all day long and then
  • 00:01:29
    through your hosting provider you can
  • 00:01:30
    get your domain name but let me go ahead
  • 00:01:32
    and share you the trouble and share with
  • 00:01:33
    you my favorite hosting company out of
  • 00:01:35
    all of them and that's hostinger
  • 00:01:37
    hostinger is the web hosting provider
  • 00:01:38
    that I use for all of my websites and
  • 00:01:41
    they're really easy to work with they've
  • 00:01:42
    got great customer service and their
  • 00:01:44
    tech support is always ready to help you
  • 00:01:46
    out not to mention their pricing is very
  • 00:01:48
    affordable now I'm going to go ahead and
  • 00:01:49
    leave a link down in the description so
  • 00:01:51
    you can follow along with me or you can
  • 00:01:53
    go to creat apro website.com hostinger
  • 00:01:56
    and it'll take you to a page that looks
  • 00:01:58
    like this now this is where you're going
  • 00:01:59
    to be able to select which hosting plan
  • 00:02:01
    you want to use now I always recommend
  • 00:02:04
    the business plan for just under $4 a
  • 00:02:06
    month because of all of the wonderful
  • 00:02:08
    features it has available for you but
  • 00:02:09
    you can also opt in for the Premium plan
  • 00:02:11
    if you'd like to save a little bit of
  • 00:02:12
    money also hostinger is offering 3
  • 00:02:15
    months free for a limited time so be
  • 00:02:16
    sure to take advantage of that deal
  • 00:02:18
    after you click on add to cart you'll be
  • 00:02:20
    prompted to choose what period you would
  • 00:02:22
    like to make your payments and I'm going
  • 00:02:23
    to select every 12 months and then move
  • 00:02:25
    on down to enter my billing information
  • 00:02:27
    notice everything here that you're
  • 00:02:28
    getting discounted you have your
  • 00:02:30
    business web hosting package which is
  • 00:02:31
    discounted around $60 which by the way
  • 00:02:34
    you're paying for all 12 months up front
  • 00:02:35
    you also have daily backups of your
  • 00:02:37
    website included for free which means
  • 00:02:39
    that your website is saved as a backup
  • 00:02:41
    daily so just in case something happens
  • 00:02:43
    to your website you can always throw it
  • 00:02:45
    back up you get a domain name completely
  • 00:02:47
    for free which is what we're going to be
  • 00:02:49
    setting up in just a second you also get
  • 00:02:50
    domain privacy protection which just
  • 00:02:52
    protects your personal information from
  • 00:02:54
    telemarketers and solicitors I'm going
  • 00:02:56
    to fill out my information and I'll see
  • 00:02:57
    you guys on the next screen all right so
  • 00:02:59
    once you're done filling out your
  • 00:03:00
    billing information you'll be met with
  • 00:03:01
    this screen right here and they're going
  • 00:03:03
    to ask do you want to create a website
  • 00:03:05
    or migrate one and so we're going to
  • 00:03:07
    create one from scratch for this
  • 00:03:08
    tutorial so we'll click on Create and
  • 00:03:10
    then next and after that it's going to
  • 00:03:12
    ask if you want to build a website with
  • 00:03:14
    WordPress or if you want to use the
  • 00:03:16
    hosting or website builder and I've got
  • 00:03:17
    tutorials on how to use this one if you
  • 00:03:19
    want but for today's tutorial we're
  • 00:03:21
    going to be using Wordpress to build our
  • 00:03:23
    website so I'm going to click on select
  • 00:03:25
    WordPress and move on after that we get
  • 00:03:27
    to create our login for our WordPress
  • 00:03:30
    account and this is also the admin
  • 00:03:32
    account for your website so you'll be
  • 00:03:33
    using this to log into your website
  • 00:03:35
    pretty often so just make sure that you
  • 00:03:37
    write it down so once you enter in your
  • 00:03:38
    password we can go ahead and move on and
  • 00:03:41
    next we get to choose what kind of
  • 00:03:42
    website we want to build and so you'll
  • 00:03:44
    see that they have an online store blog
  • 00:03:47
    online business card portfolio affiliate
  • 00:03:49
    marketing and other for now I'm just
  • 00:03:50
    going to click on other so that it's not
  • 00:03:52
    trying to fill out any templates for me
  • 00:03:54
    or anything like that and I'll click on
  • 00:03:56
    next after that it's going to ask if we
  • 00:03:57
    want to start with some pre-built
  • 00:03:59
    templates or if we want to look at some
  • 00:04:00
    standard themes I'm going to show you
  • 00:04:02
    guys how to download a template a little
  • 00:04:04
    bit later in the video from WordPress so
  • 00:04:06
    we're just going to skip the
  • 00:04:08
    step after that it's going to ask do you
  • 00:04:10
    want pre-selected plugins for your
  • 00:04:12
    website and you can have all of these
  • 00:04:14
    pre-selected plugins installed on your
  • 00:04:16
    website or we can choose to manually
  • 00:04:18
    install what we want and so that's what
  • 00:04:20
    we're going to do and click on next and
  • 00:04:22
    after that it's asking if you want those
  • 00:04:24
    four again so I'm just going to uncheck
  • 00:04:27
    all of them cuz we're going to download
  • 00:04:29
    the necessary plugins that we need later
  • 00:04:31
    in the video so once you're done with
  • 00:04:33
    that we can go ahead and click on next
  • 00:04:35
    well okay it looks like we have to click
  • 00:04:37
    on skip after that do you want to
  • 00:04:39
    generate website content with AI and
  • 00:04:41
    that would be perfectly fine if we kind
  • 00:04:42
    of had an idea of what we're doing but
  • 00:04:44
    I'm going to walk you guys through
  • 00:04:45
    everything step by step uh so we're
  • 00:04:47
    going to build everything from scratch
  • 00:04:48
    ourselves so we're going to skip the AI
  • 00:04:50
    for now and move on next you get to put
  • 00:04:53
    in what your domain name is going to be
  • 00:04:55
    for your website so this is where you
  • 00:04:57
    get to choose your for your website so
  • 00:05:00
    for the website I'm building I'm going
  • 00:05:02
    to pretend like I'm building a gym or
  • 00:05:03
    like I own a gym and so I need a website
  • 00:05:05
    for it so I'm calling it my strength gym
  • 00:05:08
    capw forc creater website.com and so
  • 00:05:11
    once you click here and press enter and
  • 00:05:13
    you've confirmed that it's available we
  • 00:05:15
    can go ahead and click on next to
  • 00:05:17
    continue after that it's going to ask
  • 00:05:19
    where is your target audience and so you
  • 00:05:21
    guys can see your United States and it's
  • 00:05:23
    Arizona or United States Massachusetts
  • 00:05:25
    and so they're basically doing CDN
  • 00:05:28
    settings so basically trying to get your
  • 00:05:30
    website to load as fast as possible
  • 00:05:32
    where you target people to show up and
  • 00:05:33
    so if I'm in Texas I probably want my
  • 00:05:35
    website to be stored as close as
  • 00:05:37
    possible to Texas so I'm going to choose
  • 00:05:39
    Arizona right here so let's go ahead and
  • 00:05:41
    click on next all right welcome to your
  • 00:05:44
    website H panel this is basically the
  • 00:05:46
    backend server side of your website and
  • 00:05:48
    you'll notice that we're logged into our
  • 00:05:50
    hosting your account and so this is
  • 00:05:51
    where you can manage things like your
  • 00:05:52
    databases and how your website is stored
  • 00:05:54
    and things like that from here if you
  • 00:05:56
    want to enter into your WordPress
  • 00:05:58
    dashboard so that we can start making
  • 00:05:59
    changes to your website you'll just
  • 00:06:01
    click on this little admin panel button
  • 00:06:03
    right here and you'll notice it has the
  • 00:06:05
    WordPress logo right here and that's
  • 00:06:07
    because it's going to take us directly
  • 00:06:08
    to our WordPress dashboard step number
  • 00:06:10
    two is a WordPress overview with our
  • 00:06:12
    domain and web hosting out of the way we
  • 00:06:14
    can now focus on building your website
  • 00:06:16
    welcome to your WordPress dashboard and
  • 00:06:17
    WordPress by the way is just a software
  • 00:06:19
    that you use to build websites it's also
  • 00:06:21
    the most popular system for building
  • 00:06:23
    websites in the entire world I think
  • 00:06:25
    around 43% of all websites on the entire
  • 00:06:28
    internet use WordPress so trust me
  • 00:06:30
    you're in good hands now WordPress is a
  • 00:06:32
    Content management system so it
  • 00:06:34
    basically just helps you manage all of
  • 00:06:36
    the content that's on your website like
  • 00:06:37
    pictures videos blog posts and so on so
  • 00:06:41
    over here on the left hand side is your
  • 00:06:43
    menu and this is where you can jump to
  • 00:06:44
    different parts of your website to
  • 00:06:46
    manage your assets you can also go to
  • 00:06:48
    your blog posts right here and you can
  • 00:06:50
    add or remove media on this tab I'm
  • 00:06:52
    going to go ahead and just upload all of
  • 00:06:54
    the pictures I'm going to use right away
  • 00:06:56
    you can also view all of the pages that
  • 00:06:57
    are on your website right here and then
  • 00:06:59
    finally you can view all of the comments
  • 00:07:01
    that people are leaving on your website
  • 00:07:03
    right here whether that be on blog posts
  • 00:07:05
    or products or whatever you have after
  • 00:07:07
    that block we have all of the settings
  • 00:07:09
    for your website under the appearance
  • 00:07:11
    tab you can add themes to change the
  • 00:07:13
    look of your website then you can go to
  • 00:07:14
    the plugins Tab and you can see all of
  • 00:07:16
    the plugins that are installed on your
  • 00:07:17
    website after that you have users tools
  • 00:07:20
    and settings luckily we're not really
  • 00:07:22
    going to be touching any of these
  • 00:07:23
    settings so we can go ahead and move on
  • 00:07:25
    to step number three which is installing
  • 00:07:27
    a complete website template even pro web
  • 00:07:29
    designers like myself still use website
  • 00:07:32
    templates to save us time when building
  • 00:07:34
    websites for clients or for myself so
  • 00:07:36
    that's what we're going to be doing
  • 00:07:37
    today I'm going to have you guys
  • 00:07:38
    download a free website template to save
  • 00:07:40
    you probably a couple hours worth of
  • 00:07:42
    your time in building it from scratch
  • 00:07:44
    from your WordPress dashboard hover your
  • 00:07:46
    mouse over the plugins Tab and then
  • 00:07:48
    click on add new from here we can use
  • 00:07:50
    the search bar in the top right corner
  • 00:07:52
    to look for a plug-in called starter
  • 00:07:54
    templates after we have activated it we
  • 00:07:56
    will now be asked if we want to use the
  • 00:07:58
    new AI Builder or we just want to browse
  • 00:08:00
    through their templates which I'm going
  • 00:08:01
    to just browse through the templates
  • 00:08:03
    next select Elementor because that's the
  • 00:08:05
    drag and drop page builder that we're
  • 00:08:06
    going to be using from here you'll see
  • 00:08:08
    tons and tons of different templates
  • 00:08:10
    that are available for you to browse
  • 00:08:11
    through back up at the top you'll have
  • 00:08:13
    these categories that you can look
  • 00:08:14
    through as well I'm just going to use
  • 00:08:15
    the search bar and type in Hope and
  • 00:08:17
    select this template right here just a
  • 00:08:19
    heads up it doesn't really matter which
  • 00:08:20
    template you use because you're just
  • 00:08:22
    going to end up swapping out all of the
  • 00:08:23
    pictures and text and we're going to
  • 00:08:25
    make it look completely different from
  • 00:08:26
    the template you're basically just
  • 00:08:27
    deciding which layout you like the best
  • 00:08:29
    after you select your template It'll ask
  • 00:08:31
    you to make some changes to it and
  • 00:08:32
    customize it just a little bit more you
  • 00:08:34
    can add your logo right here which I'm
  • 00:08:36
    going to go ahead and do because I
  • 00:08:38
    created it off camera and don't worry
  • 00:08:40
    I'm going to show you how to make this
  • 00:08:41
    logo that I made right here for free
  • 00:08:43
    later on in the video next It'll ask you
  • 00:08:45
    for a font combo Choice and then you can
  • 00:08:47
    play around with that as well as you can
  • 00:08:49
    choose a color palette after that just
  • 00:08:50
    make sure all of the boxes are checked
  • 00:08:52
    except for this one and then click on
  • 00:08:54
    submit and build my website and just
  • 00:08:55
    like that congratulations you've
  • 00:08:57
    downloaded a complete website template
  • 00:08:59
    for free let's go ahead and take a look
  • 00:09:01
    at it navigate back to your WordPress
  • 00:09:02
    dashboard from here you can click on the
  • 00:09:04
    website name up here in the top left
  • 00:09:06
    corner and this will open up your
  • 00:09:08
    website you'll see that the website
  • 00:09:09
    template we downloaded is displaying
  • 00:09:11
    whenever you actually go to your domain
  • 00:09:13
    name mission accomplished all right now
  • 00:09:15
    it's time to move on to my overview of
  • 00:09:17
    Elementor so that you have a basic
  • 00:09:19
    understanding of how to use it trust me
  • 00:09:21
    it's very beginner friendly when we
  • 00:09:23
    downloaded our website template just a
  • 00:09:24
    moment ago it also installed all of the
  • 00:09:27
    demo content all of the plugins and all
  • 00:09:29
    the things that we're going to need in
  • 00:09:30
    order to have this website up and
  • 00:09:32
    running so now we can just open up our
  • 00:09:33
    website inside of Elementor without even
  • 00:09:36
    having to download it and that's because
  • 00:09:37
    it's already been done for us now
  • 00:09:39
    there's two ways you can do this you can
  • 00:09:41
    just open up your website by clicking on
  • 00:09:43
    your website name in the top left corner
  • 00:09:45
    and then you can just click on edit with
  • 00:09:46
    Elementor up on top or you can go to the
  • 00:09:48
    pages Tab and hover your mouse over the
  • 00:09:50
    page that you want to edit and then
  • 00:09:52
    click on edit with Elementor welcome to
  • 00:09:54
    Elementor similar to Wordpress Elementor
  • 00:09:56
    is probably the most popular page
  • 00:09:58
    builder in existence right now that you
  • 00:10:00
    can use completely for free it's so good
  • 00:10:02
    that I still use it as a pro web
  • 00:10:04
    designer and half the time I don't even
  • 00:10:06
    need the pro version the free version
  • 00:10:07
    works just fine that's what we're going
  • 00:10:09
    to be using today on the left hand side
  • 00:10:11
    you'll see that your menu is where you
  • 00:10:12
    can make all of the necessary changes
  • 00:10:14
    that you need when you're editing your
  • 00:10:16
    website on the right hand side of your
  • 00:10:17
    screen is where you'll see the website
  • 00:10:19
    preview where you can see all of the
  • 00:10:21
    changes that you make live on your
  • 00:10:22
    website whenever you click on this
  • 00:10:24
    little Rubik's Cube icon right here
  • 00:10:26
    you'll be shown all of the widgets that
  • 00:10:27
    you can throw onto your website you've
  • 00:10:29
    got images videos text editors buttons
  • 00:10:32
    and so much more whenever you click on
  • 00:10:34
    one of the items in your website that
  • 00:10:36
    you want to edit you'll see the settings
  • 00:10:37
    for it show up on the left hand side now
  • 00:10:39
    you have three different tabs the
  • 00:10:41
    content tab the style Tab and the
  • 00:10:43
    advanced tab the content tab is where
  • 00:10:45
    you're going to make changes to the
  • 00:10:46
    content so if you're changing a heading
  • 00:10:48
    text or a text editor widget then you're
  • 00:10:50
    just going to be adjusting all of the
  • 00:10:51
    text that appears if you're editing an
  • 00:10:53
    image then the content tab is where
  • 00:10:55
    you're literally going to change the
  • 00:10:57
    picture that's being displayed it's
  • 00:10:58
    pretty self-explained inventory the
  • 00:10:59
    style tab is where you can change the
  • 00:11:01
    stylization of whatever you're editing
  • 00:11:03
    this is where you can make changes to
  • 00:11:04
    typography the color the size and so
  • 00:11:08
    much more lastly you have the advanced
  • 00:11:10
    tab which is where you have a bunch of
  • 00:11:11
    advanced options most of the time we're
  • 00:11:13
    not really even going to touch the
  • 00:11:14
    advanced tab except for just adding some
  • 00:11:16
    margins and padding which is basically
  • 00:11:18
    just adding a little bit of spacing
  • 00:11:20
    between your widgets now down at the
  • 00:11:21
    bottom left corner you have the update
  • 00:11:23
    button which is basically your save
  • 00:11:25
    button whenever you click on it you're
  • 00:11:26
    going to update your website with all of
  • 00:11:28
    the changes that you're making right now
  • 00:11:30
    whenever you want to add something to
  • 00:11:31
    your website just click on the Rubik's
  • 00:11:33
    Cube icon and drag it into place
  • 00:11:35
    directly over your website if you want
  • 00:11:37
    to remove it just rightclick on it and
  • 00:11:39
    then click on delete if you want to
  • 00:11:40
    change the text on your screen just
  • 00:11:42
    click on it and then you can type
  • 00:11:43
    directly on your website I'm telling you
  • 00:11:45
    Elementor is the best page builder out
  • 00:11:47
    there and it's so easy to use now that
  • 00:11:49
    you have a basic understanding of
  • 00:11:51
    Elementor and where everything is let's
  • 00:11:53
    go ahead and move on to customizing your
  • 00:11:54
    website so today I'm going to pretend
  • 00:11:56
    that I own a gym and so I'm going to be
  • 00:11:58
    building a site for my business
  • 00:12:00
    obviously whatever your small business
  • 00:12:02
    is you're just going to insert pictures
  • 00:12:04
    of that instead of pictures of a gym
  • 00:12:06
    we're going to take this boring looking
  • 00:12:08
    template and we're going to change it
  • 00:12:09
    into something a little cooler like this
  • 00:12:11
    let's get started on the hero section
  • 00:12:13
    first so we're going to be starting with
  • 00:12:15
    the first section on your website and
  • 00:12:17
    then we'll just start moving our way
  • 00:12:18
    down and editing one section at a time
  • 00:12:21
    and so each section is basically
  • 00:12:23
    surrounded by this little pink Square as
  • 00:12:25
    you can see it goes all the way around
  • 00:12:27
    what is called a section right here here
  • 00:12:29
    you can barely see it but it's there if
  • 00:12:31
    I scroll down to this next one you'll
  • 00:12:33
    see that the pink highlight kind of goes
  • 00:12:34
    all the way around this little spot
  • 00:12:36
    right here so you break up your website
  • 00:12:37
    into sections so if we scroll up to the
  • 00:12:39
    top this one is always called the hero
  • 00:12:41
    section because it's the first section
  • 00:12:43
    that's showing on your website so let's
  • 00:12:44
    go ahead and start with this one so the
  • 00:12:46
    first change that I'm going to make is
  • 00:12:48
    I'm actually going to rightclick just
  • 00:12:49
    out here in the background and I'm going
  • 00:12:51
    to say edit container and it's the same
  • 00:12:53
    thing as hovering my mouse over these
  • 00:12:55
    six dots right here and you'll see that
  • 00:12:57
    it says edit container and so what doing
  • 00:12:59
    is I'm basically editing the background
  • 00:13:01
    of this section and so when I come over
  • 00:13:03
    here we've got the content tab which is
  • 00:13:05
    now the layout tab cuz whenever you edit
  • 00:13:07
    a container like this you're basically
  • 00:13:09
    editing the layout not the content
  • 00:13:11
    because the content is directly for like
  • 00:13:12
    widgets like this so if I click on this
  • 00:13:14
    heading widget you'll see I have content
  • 00:13:16
    and if I click on the button it's
  • 00:13:18
    content so but you still usually have
  • 00:13:20
    the same three tabs right here content
  • 00:13:22
    style and Advance tab so again we're
  • 00:13:25
    going to say edit the container which is
  • 00:13:27
    like this whole background area and if
  • 00:13:29
    if we go over to the style tab we can
  • 00:13:31
    change the background image so let's go
  • 00:13:33
    ahead and do that right now I'm going to
  • 00:13:34
    click on it so I can choose an image and
  • 00:13:36
    if you haven't already uploaded your
  • 00:13:38
    files from your computer you just click
  • 00:13:41
    on this tab right here and you would
  • 00:13:42
    click on select files and then you can
  • 00:13:44
    install them from your computer just
  • 00:13:46
    like this but remember earlier on from
  • 00:13:49
    our WordPress dashboard inside of media
  • 00:13:51
    right here and you don't have to follow
  • 00:13:53
    along I'm just showing you remember when
  • 00:13:54
    I uploaded them all right here this is
  • 00:13:56
    my website media library so on my
  • 00:13:59
    website I have some storage and that's
  • 00:14:01
    where I put all my pictures and so
  • 00:14:03
    that's what I'm looking at right here
  • 00:14:04
    you'll see it says media library you can
  • 00:14:06
    also go one more tab over to free images
  • 00:14:09
    and it connects to a website called
  • 00:14:11
    pixabay and just a heads up if you go to
  • 00:14:14
    pixabay it's actually a website where
  • 00:14:16
    you can just get 4.4 million free images
  • 00:14:19
    and so you can scroll through here and
  • 00:14:21
    so basically what this tab is is it's
  • 00:14:24
    connected to this website and so they're
  • 00:14:27
    basically the same pictures you can use
  • 00:14:28
    the search bar if you want and get some
  • 00:14:29
    free images for your website oh that's
  • 00:14:31
    cool they've got some AI images in here
  • 00:14:33
    as well anyways that's how you can get
  • 00:14:35
    some free images but I went ahead and
  • 00:14:36
    already downloaded all of the pictures
  • 00:14:38
    that I'm going to use for my gym and
  • 00:14:39
    then obviously if you guys don't own a
  • 00:14:41
    gym and you own some other kind of small
  • 00:14:44
    business you would just put pictures of
  • 00:14:45
    your business so uh let's go ahead and
  • 00:14:47
    decide I'm going to use this picture
  • 00:14:49
    right here for the hero section and then
  • 00:14:50
    I can come to the bottom right corner
  • 00:14:52
    and click on select and now as you can
  • 00:14:54
    see we have changed the background of
  • 00:14:55
    our website pretty simple now there's
  • 00:14:57
    actually something a little more special
  • 00:14:59
    that I want to do to the background
  • 00:15:00
    rather than just changing the picture
  • 00:15:02
    and what I want to do is actually make
  • 00:15:03
    it a slideshow in the background so it's
  • 00:15:05
    a bit more Dynamic and that's really
  • 00:15:07
    easy to do if you go over here right
  • 00:15:09
    above the image you'll see that we have
  • 00:15:10
    different types of a background we can
  • 00:15:12
    do classic a gradient like this which is
  • 00:15:15
    kind of a bad gradient let's do
  • 00:15:17
    something that's a little bit more
  • 00:15:18
    prominent for you guys to see change
  • 00:15:21
    this one to Blue and so as you can see
  • 00:15:23
    you can make a gradient uh you can do a
  • 00:15:25
    video which would be a YouTube link and
  • 00:15:27
    you just put it right here and then we
  • 00:15:29
    can also do a slideshow and so I'm going
  • 00:15:30
    to be doing a slideshow so once you
  • 00:15:32
    choose your slideshow you just basically
  • 00:15:34
    pick your images right here and it's
  • 00:15:36
    really easy we go to the media library
  • 00:15:38
    and I can pick a couple images that I
  • 00:15:40
    really like so we could do this picture
  • 00:15:41
    right here and then we could choose this
  • 00:15:43
    one and maybe this one as well I think
  • 00:15:45
    those three are good ones and you'll see
  • 00:15:46
    they have a little check button right
  • 00:15:48
    next to them so that means that I'm
  • 00:15:49
    using them and we'll go ahead and create
  • 00:15:50
    a new gallery and then this is where
  • 00:15:52
    it's confirming hey these are the three
  • 00:15:54
    images you chose you can also rearrange
  • 00:15:56
    them if you want by dragging and
  • 00:15:57
    dropping them and then we can just go to
  • 00:15:59
    the bottom right corner and click on
  • 00:16:00
    insert gallery and so now every 5
  • 00:16:03
    Seconds you'll see that the background
  • 00:16:04
    is going to change but what I also want
  • 00:16:06
    to do is make it even more Dynamic and
  • 00:16:08
    I'm going to do the Ken Burns effect
  • 00:16:09
    right here and so whenever you click on
  • 00:16:11
    it you'll see that it basically slowly
  • 00:16:12
    Zooms in which is pretty cool you can
  • 00:16:15
    also change it to zoom out if you want
  • 00:16:17
    to but I'm not going to now the next
  • 00:16:18
    thing that we can do is also change the
  • 00:16:20
    duration so right now it's every 5
  • 00:16:22
    seconds because it's in milliseconds if
  • 00:16:24
    you see that right there so 5,000
  • 00:16:26
    milliseconds is 5 Seconds you can just
  • 00:16:28
    basically take the the zeros off I'm
  • 00:16:29
    going to change it to be every 7 Seconds
  • 00:16:31
    just so that it takes a little bit
  • 00:16:33
    longer and it's not changing so fast in
  • 00:16:35
    the background okay so we're off to a
  • 00:16:37
    good start we've got a really good
  • 00:16:38
    picture in the background another thing
  • 00:16:39
    that we can do is actually go over to
  • 00:16:41
    the background overlay oh well first I
  • 00:16:43
    want to actually change the background
  • 00:16:44
    size to be cover which is going to
  • 00:16:46
    automatically stretch these images to
  • 00:16:47
    kind of fit the background which they
  • 00:16:49
    already were but I just wanted to double
  • 00:16:50
    check so next what we can do is we can
  • 00:16:52
    decide if we want the position to be
  • 00:16:54
    Center or not which will just focus on
  • 00:16:55
    the center of the image but it looks
  • 00:16:57
    like they're already optimized to kind
  • 00:16:58
    of fit the Center so we didn't even need
  • 00:17:00
    that all right so now we can move over
  • 00:17:01
    to the background overlay and this is
  • 00:17:03
    where I'm actually going to add a little
  • 00:17:04
    bit of more of like a dark bluish black
  • 00:17:06
    color and then you can change the
  • 00:17:08
    opacity right here to be completely that
  • 00:17:10
    color or none of the color whatsoever so
  • 00:17:13
    opaque or transparent and so I'm going
  • 00:17:15
    to kind of go for something a little bit
  • 00:17:16
    more of like a in the middle so probably
  • 00:17:18
    like a 50% like this and that just makes
  • 00:17:20
    it a lot easier to read your text as
  • 00:17:22
    opposed to this where it kind of doesn't
  • 00:17:23
    really bounce off the background it kind
  • 00:17:25
    of Blends in it's hard to read whenever
  • 00:17:26
    you start to add an overlay it's a
  • 00:17:28
    little bit easy easier to read your text
  • 00:17:30
    and so I might actually even play with
  • 00:17:31
    the color a little bit and kind of go a
  • 00:17:33
    little bit less blue and a little bit
  • 00:17:35
    more on the black side so something like
  • 00:17:37
    this I think that looks pretty good and
  • 00:17:39
    that's just personal preference of
  • 00:17:40
    course okay so I think the background is
  • 00:17:42
    looking fantastic now let's go ahead and
  • 00:17:44
    move on to editing the text as well as
  • 00:17:46
    the button here and I might even
  • 00:17:48
    actually go in here and change this to
  • 00:17:50
    be almost like 10 seconds instead of
  • 00:17:52
    just
  • 00:17:53
    seven because it feels like it's just
  • 00:17:55
    changing so fast oh it went down to no
  • 00:17:58
    that is 10 seconds okay cool I thought
  • 00:18:00
    it went down to 1,000 but I guess
  • 00:18:01
    there's an extra zero back here as you
  • 00:18:03
    can see oh and now I'm changing it hang
  • 00:18:05
    on there we go so now every 10 seconds
  • 00:18:08
    it's going to change so it's not as
  • 00:18:10
    distracting in the background I do want
  • 00:18:11
    it to be slightly Dynamic but I also
  • 00:18:13
    don't want to completely distract people
  • 00:18:15
    where they're focusing on the pictures
  • 00:18:16
    and they're not paying attention to what
  • 00:18:17
    I'm actually offering for my business
  • 00:18:19
    okay so the next thing I'm going to do
  • 00:18:21
    is we're going to make some changes to
  • 00:18:22
    this container so we actually need to
  • 00:18:24
    change the text to be full width so
  • 00:18:26
    let's go over to the layout tab and this
  • 00:18:28
    is where editing this container in the
  • 00:18:30
    background and so I'm basically about to
  • 00:18:31
    make changes to where I want the items
  • 00:18:34
    inside of this container to be
  • 00:18:35
    positioned and so right now I can change
  • 00:18:37
    my items to be stacked vertically like
  • 00:18:39
    this or I could choose them to be in a
  • 00:18:41
    row and so now instead of stacking
  • 00:18:42
    vertically they stack horizontally which
  • 00:18:45
    I still think I want them vertically
  • 00:18:46
    like this I can also have them stack
  • 00:18:48
    backwards and so now the button is first
  • 00:18:49
    as you can see and I can have them
  • 00:18:51
    reversed vertically as well so these are
  • 00:18:53
    kind of quick rearranging buttons which
  • 00:18:55
    is kind of nice I want them to
  • 00:18:57
    sequentially move down and so that's
  • 00:18:59
    what I'm doing and then I can justify
  • 00:19:00
    the content right now it's centered if I
  • 00:19:02
    choose the top it's up on top if I
  • 00:19:04
    choose the bottom it's on the bottom and
  • 00:19:07
    you guys get the idea so I'm actually
  • 00:19:09
    going to come over here to align items
  • 00:19:11
    and I'm going to change it to the left-
  • 00:19:12
    hand side and so now inside of the
  • 00:19:14
    containers it's going to align them to
  • 00:19:15
    the left and so I also want them on the
  • 00:19:18
    very edge of my website so let's go
  • 00:19:19
    ahead and change boxed to full width and
  • 00:19:21
    so now whenever I choose if I want them
  • 00:19:23
    in the center or on the side you'll see
  • 00:19:25
    that they actually move and that's
  • 00:19:27
    because now the container is not putting
  • 00:19:28
    them inside of a box in the center it's
  • 00:19:31
    stretched to the full width okay so all
  • 00:19:33
    I've been doing right now is just some
  • 00:19:34
    layout changes so that my text is now
  • 00:19:37
    going to be thrown over to the left hand
  • 00:19:38
    side just like this but I also don't
  • 00:19:40
    want this completely on the edge because
  • 00:19:41
    if I'm previewing this like this like if
  • 00:19:43
    I was actually a visitor to the website
  • 00:19:45
    it looks weird how the text is like snug
  • 00:19:47
    up against the side I kind of want it to
  • 00:19:48
    be starting right about here and that's
  • 00:19:50
    a really easy change to make by the way
  • 00:19:52
    I'm just clicking on this little arrow
  • 00:19:53
    key right here and it hides the menu so
  • 00:19:55
    if I want some space I can go to the
  • 00:19:56
    advaned tab and I can come over here to
  • 00:19:59
    padding and for this container if I want
  • 00:20:01
    on the left hand side to have a little
  • 00:20:03
    bit of padding I can just click on left
  • 00:20:05
    and drag my mouse and you'll see that
  • 00:20:07
    I'm basically controlling how much
  • 00:20:08
    padding I want you can also enter in an
  • 00:20:10
    actual value but I find it easier to
  • 00:20:12
    just drag like this CU you can kind of
  • 00:20:13
    visually say h right about there I think
  • 00:20:15
    looks good and who knows I would have
  • 00:20:17
    guessed 164 but as you can see dragging
  • 00:20:19
    makes it easier all right so now that
  • 00:20:21
    I've got my text right here I can go
  • 00:20:22
    ahead and move on to actually adding
  • 00:20:24
    some more elements so the first thing
  • 00:20:26
    I'm going to do is change this to be all
  • 00:20:28
    caps so let's go over here to the style
  • 00:20:30
    Tab and we're going to change the
  • 00:20:31
    typography and we're going to transform
  • 00:20:33
    the text to be uppercase and so now it's
  • 00:20:36
    completely uppercase and let's change
  • 00:20:37
    this to the name of the gym that we're
  • 00:20:39
    building so I'm going to pretend that my
  • 00:20:40
    the name of my gym is just strength gym
  • 00:20:42
    because I couldn't think of anything
  • 00:20:44
    like a play on words and I was just like
  • 00:20:45
    you know what we're going to create a
  • 00:20:47
    business and I'm too lazy to think of
  • 00:20:48
    something cool so this is what you get
  • 00:20:51
    okay so now we're going to go back into
  • 00:20:52
    the little pencil icon to edit the
  • 00:20:54
    typography which typography is just
  • 00:20:56
    basically all of your settings for your
  • 00:20:57
    font so you've got your font font size
  • 00:20:59
    you've got your font weight so I can go
  • 00:21:01
    down to make it thin if I want to we're
  • 00:21:02
    going to go back to default you can do
  • 00:21:04
    decoration like if you want to underline
  • 00:21:05
    through line or whatever it's pretty
  • 00:21:07
    self-explanatory it's just like if
  • 00:21:08
    you're making changes in Microsoft Word
  • 00:21:10
    or in notes or something like that I'm
  • 00:21:12
    going to adjust the letter spacing to
  • 00:21:13
    increase just a little bit so something
  • 00:21:15
    like this and I think that looks pretty
  • 00:21:16
    good okay so I think this looks
  • 00:21:19
    fantastic as my heading text and you can
  • 00:21:20
    also see the HTML tag as H1 which is
  • 00:21:23
    what I wanted so now what we're going to
  • 00:21:24
    do is duplicate this so I just right
  • 00:21:26
    click on it and say duplicate right here
  • 00:21:28
    this saves me the trouble of having to
  • 00:21:30
    click on the Rubik's Cube icon find the
  • 00:21:32
    heading and drag it in just like this
  • 00:21:34
    right so I'm going to delete it so
  • 00:21:36
    anytime you want to add some more text
  • 00:21:38
    you can always just duplicate like this
  • 00:21:39
    which I actually am going to duplicate
  • 00:21:41
    it twice because I want text on top and
  • 00:21:42
    on the bottom so now that I have text on
  • 00:21:44
    the top and on the bottom I'm going to
  • 00:21:46
    click on the first text and let's make
  • 00:21:47
    some changes so the first thing I'm
  • 00:21:48
    going to do is change it to H2 which is
  • 00:21:50
    instantly going to change how my text
  • 00:21:52
    looks or not okay that's fine normally
  • 00:21:55
    in a lot of different templates it would
  • 00:21:56
    actually change because they have these
  • 00:21:58
    set to look different if it doesn't
  • 00:21:59
    that's perfectly fine we'll leave it at
  • 00:22:01
    H2 and now we're going to go to the
  • 00:22:02
    style Tab and change what it actually
  • 00:22:04
    looks like well first of all let's just
  • 00:22:06
    change the text and remember you can
  • 00:22:08
    literally type on screen you'll see my
  • 00:22:09
    cursor is now on screen or you can just
  • 00:22:11
    type over here inside of the content tab
  • 00:22:14
    it's basically the same thing okay so
  • 00:22:16
    power and might is going to be like my
  • 00:22:17
    little slogan and so we'll go to the
  • 00:22:19
    style tab now and first of all we're
  • 00:22:21
    going to reduce the size significantly
  • 00:22:23
    and then we can also change the weight
  • 00:22:25
    to be something like 400 so it's a
  • 00:22:27
    little bit thinner cuz I want it to be
  • 00:22:28
    kind of like a subtitle but on top and
  • 00:22:30
    then if we really want to we can also
  • 00:22:31
    adjust the letter spacing to be a little
  • 00:22:33
    bit less it's completely up to you guys
  • 00:22:35
    but I think that looks pretty decent so
  • 00:22:36
    now actually I'm going to delete this
  • 00:22:38
    one and I'm actually going to duplicate
  • 00:22:39
    this guy right here and then I'm going
  • 00:22:41
    to drag from the pencil icon and move
  • 00:22:43
    him below there we go all right and now
  • 00:22:44
    we've made a lot of changes just to be
  • 00:22:46
    safe I'm going to click on update to
  • 00:22:48
    save my work and you'll notice that I
  • 00:22:49
    try to save my work pretty often so that
  • 00:22:51
    I don't lose any progress just in case
  • 00:22:53
    if my internet goes out or if I get uh
  • 00:22:55
    if I accidentally close the tab or
  • 00:22:57
    something like that you'd be surprised
  • 00:22:58
    it's just a good habit to get into okay
  • 00:23:00
    so now we can change this subtitle right
  • 00:23:02
    here to say something a little different
  • 00:23:03
    so let's try something like
  • 00:23:06
    this so do you want to join our
  • 00:23:08
    community and then let's go ahead and
  • 00:23:09
    put a new widget right here so I'm going
  • 00:23:11
    to go over to the Rubik's Cube icon I'm
  • 00:23:13
    going to search for an icon list and
  • 00:23:16
    you'll see it show up right here so
  • 00:23:17
    we'll drag this bad boy
  • 00:23:19
    in right over the button and so now let
  • 00:23:22
    me first change the text color under the
  • 00:23:24
    style tab so that you guys can actually
  • 00:23:25
    see what's happening so I'm going to go
  • 00:23:26
    to the text tab right here and and we'll
  • 00:23:29
    do the color right here and so we can
  • 00:23:31
    just change it to the white I'm going to
  • 00:23:32
    click on the default Global colors and
  • 00:23:35
    I'm going to use my Global color palette
  • 00:23:36
    and the reason I'm going to do that is
  • 00:23:38
    so that later on if I ever want to
  • 00:23:39
    change all of the colors on my website
  • 00:23:41
    oh it looks like I left an F there
  • 00:23:43
    somehow there we go so the reason that
  • 00:23:44
    I'm doing the global color is because if
  • 00:23:47
    I ever want to change all of the colors
  • 00:23:49
    of my website at the same time all I
  • 00:23:51
    have to do is change my Global color
  • 00:23:52
    palette which is all these colors right
  • 00:23:54
    here the theme colors and then the
  • 00:23:55
    entire website coloring is going to
  • 00:23:57
    change and that's kind of similar IL to
  • 00:23:58
    when we were under and you don't have to
  • 00:24:00
    follow me but I just want to show you
  • 00:24:01
    guys when we were over here looking at
  • 00:24:03
    starter templates and we chose to look
  • 00:24:06
    at a template so let's just pick a
  • 00:24:08
    random one really quickly this one when
  • 00:24:10
    we were playing around with these color
  • 00:24:11
    palettes right here as you can see
  • 00:24:13
    whenever I click on it you see how it
  • 00:24:14
    completely changes all of the colors of
  • 00:24:16
    the website at the same time that's
  • 00:24:18
    because I'm changing the global color
  • 00:24:19
    palette right here and so if I were to
  • 00:24:21
    close out of this tab and again you
  • 00:24:24
    don't have to follow along I just want
  • 00:24:25
    to show you guys so you understand what
  • 00:24:26
    we're editing here and if I were to
  • 00:24:28
    actually customize my current website
  • 00:24:30
    that I'm editing right now so as you can
  • 00:24:32
    see the strength gym website that we're
  • 00:24:34
    editing right now inside of Elementor if
  • 00:24:35
    I go over to the global colors and don't
  • 00:24:37
    worry I'm going to show you how to do
  • 00:24:38
    this later I'm just kind of showing you
  • 00:24:40
    visually so you understand what we're
  • 00:24:41
    doing this is my Global color palette
  • 00:24:43
    right here and that's the same thing as
  • 00:24:45
    when I click on this Global color
  • 00:24:46
    palette that's these same colors right
  • 00:24:48
    here so you'll see light blue dark blue
  • 00:24:50
    black gray light blue dark blue black
  • 00:24:53
    gray and so on right and so if I were to
  • 00:24:55
    change these colors the colors on my
  • 00:24:57
    website are also going to change so I
  • 00:24:59
    don't want to do it right well I guess I
  • 00:25:00
    could let me just show you really
  • 00:25:01
    quickly I'll copy this color code so I
  • 00:25:02
    don't lose it if I were to change this
  • 00:25:04
    to Red for example oh I changed the
  • 00:25:05
    wrong one so we're actually using this
  • 00:25:07
    blue color so let me control or command
  • 00:25:09
    V let's change this color instead copy
  • 00:25:12
    it and if I were to change it to like
  • 00:25:14
    red you'll see that now the button
  • 00:25:15
    changed to red and I didn't even do
  • 00:25:17
    anything right and so if I scroll on
  • 00:25:18
    down I'm sure yep there's the red color
  • 00:25:20
    right here here's the red color right
  • 00:25:22
    here if I were to change that color
  • 00:25:23
    instead to Yellow now it's all yellow
  • 00:25:26
    see how it's yellow and then it's yellow
  • 00:25:28
    so it's really important to try and use
  • 00:25:30
    your Global colors as much as possible
  • 00:25:32
    and I just pasted the same color code so
  • 00:25:33
    that I didn't lose my color there we go
  • 00:25:36
    so it's really important to try and use
  • 00:25:37
    these Global colors as much as you can
  • 00:25:39
    so that later on if you ever want to
  • 00:25:41
    change the colors of your website it's
  • 00:25:43
    super easy you literally just change one
  • 00:25:45
    color and the entire website changes so
  • 00:25:47
    that's just my recommendation for you
  • 00:25:49
    every once in a while I'll be stubborn
  • 00:25:50
    and I'll actually pick a custom color
  • 00:25:52
    but it's more important to actually go
  • 00:25:54
    over here to the global and then use
  • 00:25:55
    your theme colors so anyways so now
  • 00:25:58
    change the text let me also change the
  • 00:25:59
    icon color really quickly so I go to
  • 00:26:01
    Icon and we'll choose white perfect so
  • 00:26:04
    now you can see what I'm doing so we'll
  • 00:26:05
    go back to the content tab so you'll
  • 00:26:07
    notice that these correspond to these so
  • 00:26:09
    if I want the check mark to be second I
  • 00:26:10
    can just drag it and now you'll see it's
  • 00:26:12
    second place so it's pretty
  • 00:26:14
    self-explanatory if you click on it
  • 00:26:15
    you'll see I've got the text right here
  • 00:26:17
    and here's the icon so it's really easy
  • 00:26:19
    to make changes to if you want to so now
  • 00:26:21
    we're going to go ahead and change this
  • 00:26:22
    up a little bit so let's try the first
  • 00:26:24
    one to be something like personal
  • 00:26:26
    training and then we can click to close
  • 00:26:28
    it we'll go to the second one and we can
  • 00:26:29
    change this to be something like open
  • 00:26:31
    classes and then we can change the third
  • 00:26:33
    one to be membership
  • 00:26:34
    options or it could say anything I mean
  • 00:26:37
    it could say like affordable memberships
  • 00:26:38
    basically I'm giving them three reasons
  • 00:26:40
    that they might want to join my
  • 00:26:41
    community hey we've got personal
  • 00:26:42
    training we have classes that you can
  • 00:26:44
    sign up for and then we also have
  • 00:26:45
    affordable memberships and so I just
  • 00:26:47
    said membership options cuz again this
  • 00:26:49
    is just an example I'm not trying to be
  • 00:26:50
    like a perfect website right now I'm
  • 00:26:51
    just trying to give you guys ideas here
  • 00:26:53
    right so I think this looks pretty good
  • 00:26:54
    and so from here what we can do is also
  • 00:26:56
    change the icon so I can click on person
  • 00:26:58
    training and we might try something like
  • 00:27:00
    shaking hands so we might try something
  • 00:27:02
    like this and so that's personal
  • 00:27:04
    training like you're getting uh someone
  • 00:27:06
    working with you and then maybe for open
  • 00:27:08
    classes I don't know let's try and pick
  • 00:27:10
    something here we could look through
  • 00:27:11
    here and try and pick something that
  • 00:27:13
    looks like membership classes I don't
  • 00:27:14
    know this looks like a university so we
  • 00:27:16
    can just say open classes with a
  • 00:27:18
    university icon probably not the best
  • 00:27:20
    one but I'm just trying to do this fast
  • 00:27:21
    for you guys and so then we can also do
  • 00:27:23
    one for membership options and so maybe
  • 00:27:25
    we choose like a clipboard where it
  • 00:27:26
    looks like they're writing down they're
  • 00:27:28
    information or something I don't know
  • 00:27:29
    you'd probably want to be a little bit
  • 00:27:30
    more intentional on what you pick for
  • 00:27:32
    your membership or for your icons or
  • 00:27:34
    whatever see if they have like a
  • 00:27:35
    clipboard yeah they have a clipboard
  • 00:27:37
    cool membership options done probably
  • 00:27:40
    not the best icons you guys can pick
  • 00:27:42
    some better ones for whatever you're
  • 00:27:43
    doing but you get the idea you can kind
  • 00:27:45
    of make this look pretty good and then
  • 00:27:46
    we can go over to the style Tab and I
  • 00:27:48
    can change the spacing between which is
  • 00:27:50
    kind of nice which I think is fine at
  • 00:27:52
    zero or we could just clear it out so
  • 00:27:54
    it's using default we can go to the icon
  • 00:27:55
    and change the size to be a little bit
  • 00:27:57
    bigger and then we can go to the text
  • 00:27:58
    and also make the text a little bit
  • 00:28:00
    bigger so it's a little easier to see
  • 00:28:02
    and then we can actually go back to the
  • 00:28:03
    list and kind of increase the space now
  • 00:28:04
    that everything's bigger so that's an
  • 00:28:06
    idea like that okay cool and now we can
  • 00:28:08
    click on update to save our work okay so
  • 00:28:10
    now what we can do is we can also change
  • 00:28:12
    this button so if we go into Elementor
  • 00:28:14
    we can make changes to all of the
  • 00:28:16
    buttons on our website or we can just
  • 00:28:18
    edit one individually so you'll notice
  • 00:28:20
    that this button right here looks
  • 00:28:21
    identical to this button right here
  • 00:28:24
    which you know these are also the
  • 00:28:25
    secondary buttons but this is the
  • 00:28:27
    primary butt button on your website so
  • 00:28:29
    kind of in the same way of using Global
  • 00:28:31
    colors you also have a global template
  • 00:28:33
    for a button so bear with me guys let's
  • 00:28:36
    go ahead and see if we can change this
  • 00:28:37
    without having a touch Elementor that
  • 00:28:38
    way all of the buttons change at the
  • 00:28:40
    same time but to be honest I don't
  • 00:28:42
    really think you need to change this
  • 00:28:43
    button very much actually you know what
  • 00:28:44
    to save us time especially cuz this
  • 00:28:46
    tutorial is already going to be long
  • 00:28:47
    we're not going to do that I think the
  • 00:28:48
    buttons work just fine the way they are
  • 00:28:50
    you don't really need to change the look
  • 00:28:51
    of them right now if you change your
  • 00:28:53
    Global colors the button color is going
  • 00:28:55
    to change so there's no reason to try
  • 00:28:56
    and style it to look any different so
  • 00:28:58
    I'm going to leave it but the one thing
  • 00:28:59
    that we can do is if you click on the
  • 00:29:01
    little icon the little pencil icon right
  • 00:29:02
    here to edit your button as you can see
  • 00:29:04
    what we can do is we can change the text
  • 00:29:06
    right here so instead of get started
  • 00:29:07
    maybe we want to say sign up and then we
  • 00:29:09
    could also go over to the style Tab and
  • 00:29:11
    we could change the typography to be
  • 00:29:13
    uppercase if we want
  • 00:29:16
    to so something like this wow that looks
  • 00:29:19
    really aggressive but we're just going
  • 00:29:21
    to leave it for now all right so now we
  • 00:29:23
    can click on update to save our work I
  • 00:29:25
    think that looks pretty good so for a
  • 00:29:26
    hero section I think that's looking
  • 00:29:28
    pretty good for now we can go ahead and
  • 00:29:29
    move on to the next section if you guys
  • 00:29:31
    obviously want to change anything to
  • 00:29:32
    look a little different you can totally
  • 00:29:34
    do that but this is just how I chose to
  • 00:29:36
    make my hero section look okay so now if
  • 00:29:38
    we scroll on down the next thing is the
  • 00:29:40
    three services that you can offer and so
  • 00:29:42
    you can choose the layout of your
  • 00:29:43
    website but I think what I'm going to do
  • 00:29:45
    is actually come down here and I'm going
  • 00:29:46
    to take this about section and I'm going
  • 00:29:48
    to move it up on top and so there's two
  • 00:29:51
    ways of doing this first is actually I'm
  • 00:29:53
    not even really going to use this about
  • 00:29:55
    section I'm actually going to kind of
  • 00:29:56
    build it from scratch so a you could
  • 00:29:59
    just delete it and then I could create a
  • 00:30:01
    new one up on top or if you personally
  • 00:30:03
    like this about section and you just
  • 00:30:05
    want to change the picture to be a
  • 00:30:06
    picture of you and the text to be you
  • 00:30:09
    know whatever you want to say then what
  • 00:30:10
    you can do is you can click and drag on
  • 00:30:12
    the six dots like this and watch this I
  • 00:30:13
    can scroll up and I can change the order
  • 00:30:15
    on my website by dragging this on top so
  • 00:30:17
    now I just switched orders right so if
  • 00:30:19
    you guys want to let me scroll up here
  • 00:30:22
    you guys can drag this one to be up
  • 00:30:25
    above the services right here but
  • 00:30:27
    personally I'm just going to delete
  • 00:30:27
    delete this real quick by clicking on
  • 00:30:29
    that little X icon because I'm going to
  • 00:30:32
    put my about section up here so I'm
  • 00:30:33
    going to build it from scratch just like
  • 00:30:35
    this and I'm going to choose flex boox
  • 00:30:37
    and I'm going to choose let's see the
  • 00:30:39
    down perfect and we're ready to go so
  • 00:30:42
    now that I have my new section here I
  • 00:30:44
    can actually drag the services section
  • 00:30:46
    beneath the little testimonial section
  • 00:30:48
    right here so now this looks a little
  • 00:30:49
    bit better so the first thing I'm going
  • 00:30:50
    to do is change the background color cuz
  • 00:30:52
    I don't want it to be blue I want it to
  • 00:30:53
    be white so we'll go to the style tab
  • 00:30:55
    after you click on the six dots right
  • 00:30:56
    here we'll choose classic and let's
  • 00:30:59
    choose our theme color which is six
  • 00:31:02
    right here so now our background color
  • 00:31:03
    is white and so next what we're going to
  • 00:31:05
    do is just add a bunch of stuff into our
  • 00:31:07
    container right here so the first thing
  • 00:31:09
    you click on the plus button and it's
  • 00:31:10
    the same thing as clicking on the
  • 00:31:11
    Rubik's Cube I'm going to drag an image
  • 00:31:13
    in here and then I can go ahead and add
  • 00:31:15
    a picture so let's just pick this one I
  • 00:31:17
    think this is a good about picture it's
  • 00:31:19
    like about me and I'm looking all tough
  • 00:31:21
    that's not me obviously that's a picture
  • 00:31:22
    of some random dude but you know cool
  • 00:31:24
    all right so now that we have that we
  • 00:31:26
    can go ahead and click on the Rubik's
  • 00:31:27
    Cube icon again and let's drag in a
  • 00:31:29
    heading text right underneath him and
  • 00:31:31
    then we can drag in another one if we
  • 00:31:35
    want and then lastly we can go ahead and
  • 00:31:38
    drag in some text editors actually let's
  • 00:31:41
    be a little complicated uh drag in a
  • 00:31:43
    container like this and then inside of
  • 00:31:45
    this container we can click on the
  • 00:31:47
    container to make changes and we'll say
  • 00:31:49
    we want this one to be row horizontal
  • 00:31:51
    and that way when I put in two text
  • 00:31:52
    editors well I put one in and then I
  • 00:31:54
    duplicate they're going to be side by
  • 00:31:56
    side like this that that's the point
  • 00:31:58
    okay and then now that we have all of
  • 00:32:00
    our elements in place I'm going to go up
  • 00:32:02
    here and add some padding on the top and
  • 00:32:04
    bottom so I'm going to click on the six
  • 00:32:05
    dots advaned tab unlink the values
  • 00:32:08
    together cuz if they're linked together
  • 00:32:09
    and I add you see how it goes all over
  • 00:32:11
    the place I don't want that we're going
  • 00:32:13
    to delete unlink the values together and
  • 00:32:15
    I'm going to add to the top let's just
  • 00:32:17
    say about that much so 100 and then
  • 00:32:20
    we'll do the same to the
  • 00:32:22
    bottom perfect so now as you can see we
  • 00:32:25
    have our text spaced out from the bottom
  • 00:32:27
    we have our picture spaced out from the
  • 00:32:29
    top okay so now it's time to make some
  • 00:32:30
    changes let's go ahead and edit the text
  • 00:32:33
    first and so the first thing that we'll
  • 00:32:34
    do is we'll change this to say something
  • 00:32:36
    like about the
  • 00:32:37
    founder so about the founder and so
  • 00:32:40
    actually I'm going to delete this bottom
  • 00:32:41
    one and we'll just duplicate this in a
  • 00:32:42
    second I'm going to go style tab
  • 00:32:45
    typography and I'm going to choose to
  • 00:32:47
    capitalize each word and so now it looks
  • 00:32:49
    like a title now we're going to
  • 00:32:50
    duplicate it and I've already duplicated
  • 00:32:52
    the capitalization which is kind of nice
  • 00:32:54
    that's why I did that it's just a skip a
  • 00:32:56
    step and now we can change this to be
  • 00:32:57
    the sub title and let's just pretend
  • 00:32:59
    this guy's name is
  • 00:33:01
    Andre I don't know how old this dude is
  • 00:33:04
    I'm not trying to say he looks older
  • 00:33:05
    than he is I just put in a random date I
  • 00:33:07
    don't even know what age that makes him
  • 00:33:08
    what is it 2024 right now so whatever
  • 00:33:11
    but let's just say Andre has been in the
  • 00:33:12
    fitness industry for uh or since 1986
  • 00:33:16
    let's maybe say 96 just so he doesn't
  • 00:33:17
    look so old my goodness okay so now
  • 00:33:20
    let's go a and make this look like a
  • 00:33:21
    subtitle by going and adjusting the
  • 00:33:23
    style size so we can go ahead and make
  • 00:33:25
    it look more like a subtitle so
  • 00:33:27
    something like like this we can change
  • 00:33:29
    the weight to be something a little bit
  • 00:33:31
    less bold and we could even increase the
  • 00:33:32
    letter spacing just a little bit if we
  • 00:33:34
    really wanted to something like this
  • 00:33:35
    maybe a little
  • 00:33:37
    smaller and then what we can do is click
  • 00:33:39
    on about the founder right here go to
  • 00:33:41
    the advanced Tab and I'm going to unlink
  • 00:33:43
    the values together under margin and
  • 00:33:45
    remove margin from the bottom which is
  • 00:33:47
    going to drag my subtext up a little bit
  • 00:33:49
    I think that looks a little bit better
  • 00:33:50
    for your dummy text right here you guys
  • 00:33:52
    can put in whatever you want but just to
  • 00:33:53
    make it look a little bit more full I'm
  • 00:33:55
    going to put in some text here
  • 00:33:58
    there we go and then see the width needs
  • 00:34:01
    to be
  • 00:34:03
    50/50 or actually we're going to clear
  • 00:34:05
    that out well you know what we're going
  • 00:34:07
    to do so contrl all contrl C contrl all
  • 00:34:12
    contrl V there we go now it's going to
  • 00:34:14
    be identical so it fits perfectly okay
  • 00:34:16
    so we'll click on update to save our
  • 00:34:17
    work just to make sure that everything
  • 00:34:19
    is saved and ready to go all right so I
  • 00:34:21
    think the about section is looking
  • 00:34:22
    pretty good the one last thing that I
  • 00:34:23
    don't like is how the image is not big
  • 00:34:25
    enough to kind of stretch to the edges
  • 00:34:27
    of the text and so the way you can do
  • 00:34:28
    that is you just click on the image and
  • 00:34:30
    then we can change the size to be full
  • 00:34:33
    there we go now it looks so much better
  • 00:34:35
    okay so now I think it looks a lot
  • 00:34:37
    better for the about section I think
  • 00:34:38
    we're pretty much done so we've got hero
  • 00:34:40
    section done about section is done and
  • 00:34:42
    so now we can scroll on down to this
  • 00:34:44
    little testimonial section right here so
  • 00:34:46
    for my example I'm not really going to
  • 00:34:47
    make too many changes to this the only
  • 00:34:49
    thing that I want to do is just change
  • 00:34:50
    the background color so we'll go to the
  • 00:34:52
    style tab click on global and from here
  • 00:34:56
    I'm going to kind of choose like the
  • 00:34:57
    darker color like this and so the only
  • 00:34:59
    thing I'm going to show you guys how to
  • 00:35:00
    do is how to make changes to this but
  • 00:35:02
    honestly I wasn't going to make any
  • 00:35:04
    changes cuz it's just a testimonial so
  • 00:35:06
    it's not like it actually needs to be
  • 00:35:07
    anything for you guys anyways but how
  • 00:35:09
    you would change this obviously if you
  • 00:35:10
    had someone who left a testimonial for
  • 00:35:12
    you is the first thing you'd want to do
  • 00:35:13
    is upload a picture of them and so it's
  • 00:35:15
    really easy to do you just upload a file
  • 00:35:17
    from your computer right and so they're
  • 00:35:18
    just using this picture right here and
  • 00:35:20
    you would insert it by clicking on
  • 00:35:21
    select and so that's how you would do it
  • 00:35:23
    and then you would change the size from
  • 00:35:25
    something like large you could change it
  • 00:35:27
    down to
  • 00:35:28
    thumbnail if you wanted like 150150 so
  • 00:35:30
    nice and small picture we could click on
  • 00:35:32
    the text right here and so first thing
  • 00:35:34
    I'm going to do is just change the text
  • 00:35:35
    color because you can't even see it so
  • 00:35:38
    something like that but obviously all
  • 00:35:39
    this is is you just click right here and
  • 00:35:41
    you can change their name so if it
  • 00:35:42
    wasn't Ruth and you had someone named
  • 00:35:44
    John leave a testimonial for you you
  • 00:35:46
    would just put JN right here it's pretty
  • 00:35:47
    self-explanatory and then right here
  • 00:35:49
    this text again you click on it and you
  • 00:35:51
    can type in whatever they said so tell
  • 00:35:53
    your friend whoever's leaving you a
  • 00:35:54
    testimonial hey send me an email just
  • 00:35:56
    saying how much you like it and I'll
  • 00:35:57
    paste it on my website and then you
  • 00:35:59
    literally just copy and paste from the
  • 00:36:00
    email and put it right here pretty
  • 00:36:01
    self-explanatory but I am going to
  • 00:36:03
    change the text color again cuz we made
  • 00:36:04
    the dark background so we need light
  • 00:36:05
    text and lastly same thing for the
  • 00:36:08
    button just click on the pencil icon
  • 00:36:10
    we'll go over to the style Tab and we're
  • 00:36:12
    looking for text color as well as the
  • 00:36:14
    Border color so text color is black as
  • 00:36:17
    you can see and Border color is black so
  • 00:36:20
    let's just change it to
  • 00:36:25
    White easy peasy lemon squeezy click on
  • 00:36:27
    update to save your work and now our
  • 00:36:30
    testimonial section is a little bit more
  • 00:36:31
    of like a dark theme which is kind of
  • 00:36:32
    like what we're going with for the
  • 00:36:33
    website bunch of dark images so I
  • 00:36:35
    figured I'd make this dark another thing
  • 00:36:37
    you could do if you really wanted to I
  • 00:36:38
    don't necessarily think I like this
  • 00:36:40
    bluish gray so let's see if we have
  • 00:36:42
    something else I could do ooh the kind
  • 00:36:43
    of Royal dark blue looks good what other
  • 00:36:46
    theme colors do I have let's see what's
  • 00:36:47
    eight Eight's like even darker my
  • 00:36:49
    goodness nine o I like nine that's the
  • 00:36:52
    desaturated gray I was looking for I
  • 00:36:54
    didn't really want to clash light blue
  • 00:36:55
    with dark blue so I wanted something
  • 00:36:57
    that's a little bit less colored I think
  • 00:36:58
    that looks the best yeah perfect so I'm
  • 00:37:00
    going to go with theme color 9 of course
  • 00:37:02
    you guys can go over to that customize
  • 00:37:04
    tab that I just showed you a second ago
  • 00:37:06
    if you really wanted to kind of
  • 00:37:07
    customize those colors to be something
  • 00:37:09
    different you can but I'm just going to
  • 00:37:10
    leave it the way it is cuz it works so
  • 00:37:12
    anyways I like how this looks so now we
  • 00:37:14
    can move on to the next section which is
  • 00:37:16
    the services section all right so for
  • 00:37:18
    the services section what I'm going to
  • 00:37:20
    do is obviously first change the
  • 00:37:22
    pictures and then also the text so
  • 00:37:24
    actually let's change let's just go top
  • 00:37:25
    to bottom we'll change the text first so
  • 00:37:27
    this text up here could say something
  • 00:37:28
    like certified certified personal
  • 00:37:31
    trainer based in Oakland California
  • 00:37:34
    perfect you want to know how I'm going
  • 00:37:35
    to fix this cuz it's caps and not caps
  • 00:37:37
    you guessed it I'm going to be lazy and
  • 00:37:39
    change the typography to uppercase so I
  • 00:37:41
    don't have to go and retype all that in
  • 00:37:43
    lower case or uppercase or whatever you
  • 00:37:44
    want nice so now that's uppercase and so
  • 00:37:47
    I'm a certified personal trainer based
  • 00:37:49
    in Oakland California I I guess my gym
  • 00:37:51
    is in California now that's cool so next
  • 00:37:53
    I can change the the uh heading text
  • 00:37:55
    right here and so we can change this
  • 00:37:57
    from prob I can help with let's try
  • 00:37:58
    Services I can offer you and again I'm
  • 00:38:01
    being super lazy typing everything in
  • 00:38:03
    lowercase and changing it to whatever
  • 00:38:05
    transformation I want because later on
  • 00:38:07
    if I ever decide to change anything I
  • 00:38:09
    don't have to go over here and make sure
  • 00:38:10
    I'm capitalizing everything like no all
  • 00:38:12
    I got to do is just start typing and
  • 00:38:14
    everything is the same look so that's
  • 00:38:16
    why I always do that I'm trying to
  • 00:38:17
    Future proof my own website if that
  • 00:38:19
    makes sense okay so now I've changed
  • 00:38:21
    these two we can move on to the pictures
  • 00:38:23
    again you guys kind of get the idea of
  • 00:38:25
    how to use Elementor by now I'm sure so
  • 00:38:27
    we'll click on uh this one right here
  • 00:38:29
    choose the image and let's just pick
  • 00:38:31
    something like this one I think looks
  • 00:38:33
    pretty good so we've got obviously not
  • 00:38:36
    web design so let's call this uh
  • 00:38:38
    personal training all right so we've got
  • 00:38:41
    personal training next we can click on
  • 00:38:43
    this one and what were the services we
  • 00:38:44
    provide we've got personal training open
  • 00:38:46
    classes and membership options so
  • 00:38:49
    personal training open
  • 00:38:51
    classes and membership
  • 00:38:55
    options okay there we go and so for this
  • 00:38:57
    picture we'll say open classes let's
  • 00:38:59
    kind of pick a picture that looks like
  • 00:39:00
    you're in a class I think this one's
  • 00:39:02
    pretty good so it's a picture of her she
  • 00:39:03
    looks like she's maybe in one of those
  • 00:39:05
    you know hit classes or something like
  • 00:39:06
    that and then lastly we'll change this
  • 00:39:08
    picture as well and we can choose
  • 00:39:10
    something like I don't know what would
  • 00:39:12
    signify open
  • 00:39:13
    membership let's just do a picture of
  • 00:39:15
    the gym cool so we've got personal
  • 00:39:17
    training open classes and membership
  • 00:39:19
    options and in the future what I would
  • 00:39:20
    do is have multiple pages on this
  • 00:39:22
    website obviously today I'm just showing
  • 00:39:24
    you how to build a onepage website but
  • 00:39:26
    what I would do is make this a
  • 00:39:28
    multi-page website and then I would
  • 00:39:30
    click on this text right here and I
  • 00:39:31
    would add a link so let's just for
  • 00:39:33
    example let's obviously pretend it's not
  • 00:39:35
    YouTube and let's say that whenever they
  • 00:39:37
    click on personal training it takes them
  • 00:39:38
    to the personal training page on my
  • 00:39:40
    website whenever they click on classes
  • 00:39:42
    it'll take them to a page that talks
  • 00:39:43
    about classes and then whenever they
  • 00:39:44
    click on membership it would take them
  • 00:39:46
    to a page that has like a pricing table
  • 00:39:48
    and it would show off you know different
  • 00:39:50
    membership options I have but for
  • 00:39:51
    example if you add a link like this and
  • 00:39:54
    then I were to click on update to save
  • 00:39:55
    my work and this little eyeball right
  • 00:39:57
    here here next to updates is preview
  • 00:39:59
    changes and it's going to open your
  • 00:40:00
    website on a new tab so that you can
  • 00:40:02
    interact with everything if I go down
  • 00:40:04
    here and I click on that link it'll take
  • 00:40:07
    you to that link so for example YouTube
  • 00:40:09
    so you guys get the idea I'm going to
  • 00:40:10
    clear that link out and click on update
  • 00:40:12
    to save but uh you would find you would
  • 00:40:14
    go and build another page in your
  • 00:40:16
    website right and then you would link it
  • 00:40:18
    to this button right here which it's not
  • 00:40:20
    really a button it's text but you get
  • 00:40:21
    the idea whenever someone wants personal
  • 00:40:23
    training they would go to that page
  • 00:40:24
    classes that page membership options go
  • 00:40:26
    to that page okay so my services is done
  • 00:40:29
    for now I'm just showing what I offer
  • 00:40:31
    and then at the bottom we'll have like a
  • 00:40:32
    contact form where they can get in
  • 00:40:33
    contact with me because this is a
  • 00:40:35
    onepage website so I don't want to get
  • 00:40:36
    too complicated but in the future you
  • 00:40:38
    guys would probably want to add more
  • 00:40:39
    pages and I would definitely recommend
  • 00:40:41
    that and so I think at the very end of
  • 00:40:43
    the video I'll probably link to one of
  • 00:40:45
    my other tutorials and it's a really
  • 00:40:46
    short one where I tell you how to add
  • 00:40:48
    pages to your website so anyways now
  • 00:40:50
    that we're done with the services
  • 00:40:51
    section we can move on all right so next
  • 00:40:53
    what we're going to do is add a call to
  • 00:40:55
    action right here and so what a call to
  • 00:40:56
    action is basically you're calling the
  • 00:40:59
    visitor of your website to do something
  • 00:41:01
    so for example hey sign up now join our
  • 00:41:04
    community now sign up for classes now
  • 00:41:06
    sign up for a membership right now so
  • 00:41:08
    that's a call to action so right here is
  • 00:41:10
    where you would say something like want
  • 00:41:12
    to join our
  • 00:41:15
    community and we'll make that uppercase
  • 00:41:17
    really quickly uh and we can reduce the
  • 00:41:19
    size a little bit if we really want to
  • 00:41:20
    so do you want to join our community
  • 00:41:22
    let's go to the style tab on this one
  • 00:41:24
    and just reduce the size a little bit so
  • 00:41:26
    it looks more like a subtitle there we
  • 00:41:28
    go so do you want to join our community
  • 00:41:30
    get in touch today and so there's the
  • 00:41:32
    button to get in touch and so what we'll
  • 00:41:33
    do is we'll say edit this background the
  • 00:41:35
    container way out here or click on the
  • 00:41:38
    six dots and we'll just pick a picture
  • 00:41:40
    for the background that's gym related
  • 00:41:42
    let's do this one because he's like
  • 00:41:43
    deadlifting and it looks cool and then
  • 00:41:46
    also what I'm going to do is change the
  • 00:41:47
    attachment to fixed and so now whenever
  • 00:41:50
    you scroll it does this really cool
  • 00:41:51
    Parallax effect check that out so now as
  • 00:41:54
    they're scrolling through the website it
  • 00:41:55
    looks like there's like a
  • 00:41:55
    threedimensional background and it kind
  • 00:41:57
    of pans up this guy's body doing dead
  • 00:41:59
    lft so it's like hey do you want to join
  • 00:42:01
    our strength Community get in touch and
  • 00:42:03
    they'd click on it and they would take
  • 00:42:04
    him to the contact form right so that's
  • 00:42:07
    pretty cool and so then click on update
  • 00:42:09
    to save our work that's pretty much done
  • 00:42:11
    you'd want to obviously change this text
  • 00:42:12
    to say something like if you're
  • 00:42:13
    interested in joining the membership is
  • 00:42:15
    really affordable get in touch with us
  • 00:42:16
    you know say something right there and
  • 00:42:18
    then now we can go ahead and add a
  • 00:42:20
    contact Section so let's just add one
  • 00:42:21
    from scratch again and so again anytime
  • 00:42:23
    you want to add a section it's really
  • 00:42:25
    simple you just click on the plus button
  • 00:42:26
    right there there and it opens up like a
  • 00:42:28
    little tab right here and you can choose
  • 00:42:30
    to build one from a template starter
  • 00:42:32
    templates or you can hit the plus button
  • 00:42:33
    to build from scratch we'll choose Flex
  • 00:42:35
    box and we'll do a side by side so I
  • 00:42:38
    want this one I basically want it to
  • 00:42:39
    look like this so actually let's click
  • 00:42:41
    on this one duh might as well have two
  • 00:42:43
    containers ready to go in the first
  • 00:42:44
    container click on the plus button and I
  • 00:42:47
    can add an
  • 00:42:48
    image uh so let's go ahead and add an
  • 00:42:50
    image of like this guy and then on the
  • 00:42:52
    right hand side we can add our contact
  • 00:42:55
    form so search WP forms in the search
  • 00:42:58
    bar up on top there we go I don't know
  • 00:43:00
    why it didn't show up the first time
  • 00:43:02
    because WP WP but whatever drag in your
  • 00:43:04
    WP form which is a widget for your
  • 00:43:06
    contact form and then make sure you
  • 00:43:08
    select your actual contact form and
  • 00:43:10
    voila you have a contact form on your
  • 00:43:12
    website super easy and then next let's
  • 00:43:15
    go ahead and add like a little heading
  • 00:43:16
    widget as well so Rubik's Cube icon
  • 00:43:18
    again drag a heading widget on top and
  • 00:43:20
    we'll say something
  • 00:43:22
    like let's sign you up and again I
  • 00:43:25
    messed up my capitalization cuz I got
  • 00:43:27
    lazy halfway through so we'll just
  • 00:43:29
    uppercase it like that kind of similar
  • 00:43:31
    to how we're doing everything is
  • 00:43:32
    uppercase or for the most part at least
  • 00:43:34
    you want to be consistent by the way I'm
  • 00:43:36
    being lazy because I'm just showing you
  • 00:43:37
    how to use Elementor but obviously if I
  • 00:43:39
    was building this for a client if one
  • 00:43:41
    title is all caps the rest of them have
  • 00:43:43
    to be all caps so all caps I would have
  • 00:43:45
    to change this one to be all caps which
  • 00:43:47
    was a really easy change might as well
  • 00:43:49
    do it really quickly uppercase and then
  • 00:43:51
    this one all caps so if one title's all
  • 00:43:53
    caps then you want them all to be
  • 00:43:54
    uppercase right so let's come back down
  • 00:43:56
    here we can change the size of the image
  • 00:43:58
    so instead of large we could do medium
  • 00:44:00
    oh God never mind uh and so another way
  • 00:44:02
    that we could kind of reduce the size is
  • 00:44:04
    we actually delete the image and instead
  • 00:44:07
    we can edit the container right here and
  • 00:44:09
    make the background image the same
  • 00:44:12
    picture so I can do this and then
  • 00:44:14
    obviously set it to focus on the center
  • 00:44:16
    of the picture and then we can set the
  • 00:44:19
    size to be cover which will stretch the
  • 00:44:22
    picture I think that looks so much
  • 00:44:23
    better cuz it's kind of cropped to the
  • 00:44:25
    bottom of the contact form as opposed to
  • 00:44:27
    that image which looked way too big okay
  • 00:44:30
    so now we can also click on the six dots
  • 00:44:32
    right up here and we can go over to the
  • 00:44:34
    style let's go to Advan Tab and we can
  • 00:44:37
    increase padding on the top and bottom
  • 00:44:39
    so unlink the values together and on the
  • 00:44:42
    top we can add let's say 100 and then on
  • 00:44:45
    the bottom 100 perfect we can also even
  • 00:44:48
    add a little bit of padding in between
  • 00:44:50
    these two so if I click on this one
  • 00:44:51
    right here to edit this container
  • 00:44:53
    advaned Tab and I could just add a
  • 00:44:55
    little bit of padding on the left side
  • 00:44:58
    yeah I think that looked a little bit
  • 00:44:59
    better so there's a little bit of space
  • 00:45:01
    in between the two and then we can click
  • 00:45:03
    on update to save our work let me just
  • 00:45:05
    preview it really quickly because I want
  • 00:45:06
    to see what it looks like so I can
  • 00:45:08
    scroll on
  • 00:45:10
    down yeah I like how much spaces in
  • 00:45:13
    between there that looks really good
  • 00:45:15
    okay so we'll close that so I think the
  • 00:45:17
    contact form is done now let's finally
  • 00:45:19
    just add some hours of operation and
  • 00:45:21
    kind of a map pointing to where my gym
  • 00:45:23
    is and I think that'll be enough contact
  • 00:45:25
    information for people to be able to get
  • 00:45:27
    touch if they really wanted to so in
  • 00:45:29
    order to do that we're going to add
  • 00:45:31
    another section from
  • 00:45:33
    scratch this one can just focus on a
  • 00:45:35
    downward Direction click on the plus
  • 00:45:37
    button and from here we can look for
  • 00:45:39
    Google Maps and now we have a Google
  • 00:45:41
    Maps widget we can throw in here and you
  • 00:45:44
    see how it's not full width I want it to
  • 00:45:45
    be like a banner that's full width so
  • 00:45:47
    let's click on the six dots and instead
  • 00:45:49
    of box let's change to full width so now
  • 00:45:52
    it's going to stretch it across which I
  • 00:45:53
    think looks so much better and then
  • 00:45:55
    lastly we can actually click on the
  • 00:45:57
    pencil icon right here to edit our
  • 00:45:59
    Google Maps and we can change the
  • 00:46:01
    address to Austin Texas cuz that's where
  • 00:46:03
    I am right now but you would obviously
  • 00:46:05
    want to put in the exact address of
  • 00:46:06
    wherever your business is and that's how
  • 00:46:09
    people would know where your address is
  • 00:46:10
    so maybe instead of Austin Texas let's
  • 00:46:12
    just uh well you know what I don't
  • 00:46:14
    really want to put in a fake address and
  • 00:46:15
    go find one so for now I'm just going to
  • 00:46:16
    have it set to Austin Texas but if you
  • 00:46:18
    put in the actual address you can have a
  • 00:46:20
    pin show up so people are like oh okay
  • 00:46:22
    so like right there I can see is where
  • 00:46:24
    his gym is that's probably only 10
  • 00:46:25
    minutes for me so that's kind of an
  • 00:46:27
    example right there you can adjust the
  • 00:46:28
    height of this Banner so all you do is
  • 00:46:31
    just drag it and so you can make it a
  • 00:46:32
    lot taller as you can see or a lot
  • 00:46:34
    shorter so I think about that size looks
  • 00:46:36
    good and then you can also adjust the
  • 00:46:37
    zoom so right now it's zoomed out I can
  • 00:46:40
    kind of zoom in if I want to oops that
  • 00:46:42
    zooms out okay so let's go more so let's
  • 00:46:44
    go like 13 and now I'm zoomed in even
  • 00:46:47
    more to the Austin area right okay I
  • 00:46:49
    think that looks pretty good so now that
  • 00:46:51
    we have a map and we're pretending that
  • 00:46:52
    there's a pin on some address that I
  • 00:46:54
    actually put in here but I'm just too
  • 00:46:56
    lazy to go find a fake address now we
  • 00:46:58
    can add the hours of operation and like
  • 00:47:00
    our email or contact information and
  • 00:47:03
    stuff like that okay so in order to do
  • 00:47:05
    that we can click on the new container
  • 00:47:06
    button again and this time I'm going to
  • 00:47:09
    choose four but I actually only want
  • 00:47:12
    three so I'm going to click on it so
  • 00:47:13
    that it puts four in there and then I'll
  • 00:47:15
    just remove one just like that super
  • 00:47:17
    easy I can also click on my six dots
  • 00:47:20
    right here and I can justify my content
  • 00:47:21
    to the center and that'll fix the
  • 00:47:23
    problem of why it was off center like
  • 00:47:25
    that so we'll just enter our content
  • 00:47:27
    like this and now we have perfect three
  • 00:47:29
    little boxes to put some information and
  • 00:47:31
    so I'll click on the plus button or the
  • 00:47:33
    Rubik's Cube whichever one you want and
  • 00:47:35
    I can add a heading text as well as
  • 00:47:39
    Let's do an icon
  • 00:47:42
    list okay so we're going to finish this
  • 00:47:44
    one and then I'll just duplicate it two
  • 00:47:46
    more times all right so what we're going
  • 00:47:48
    to do is change the text first we'll say
  • 00:47:51
    location and let's change the style to
  • 00:47:54
    first of all let's Center the text and
  • 00:47:55
    let's make the side is a lot smaller
  • 00:47:57
    oops didn't mean to do that
  • 00:48:00
    clear okay well we're going to have to
  • 00:48:02
    choose a color now so let's choose theme
  • 00:48:03
    color three and we'll change the size to
  • 00:48:06
    be a little bit smaller so something
  • 00:48:07
    like location like this I think it looks
  • 00:48:09
    good and then now we can adjust the line
  • 00:48:12
    items so we could say something
  • 00:48:15
    like and then this third one I'm just
  • 00:48:17
    going to remove just by clicking on the
  • 00:48:19
    x button right there and so now all I
  • 00:48:21
    got to do is just remove those icons so
  • 00:48:22
    it looks like I just have text
  • 00:48:23
    underneath a heading and so the way I'm
  • 00:48:25
    going to do that is just delete delete
  • 00:48:27
    the icon pretty
  • 00:48:29
    simple just like that so now it looks
  • 00:48:31
    like I've got my address under location
  • 00:48:33
    and then lastly if I want I can do let's
  • 00:48:37
    see alignment is going to be Center and
  • 00:48:39
    so now they kind of Center up underneath
  • 00:48:40
    my text which looks good okay so now
  • 00:48:42
    let's just duplicate this two more times
  • 00:48:44
    so actually what I'm going to do is just
  • 00:48:46
    duplicate the entire container and
  • 00:48:48
    delete the one next to it and then
  • 00:48:50
    duplicate the entire container and
  • 00:48:53
    delete the one next to it okay there we
  • 00:48:55
    go so now I've got three and I'm just
  • 00:48:57
    going to change the text hours and then
  • 00:48:59
    this one can be something
  • 00:49:01
    like contact us okay so the hours let's
  • 00:49:04
    go and change these
  • 00:49:06
    out uh let's do Monday through Friday
  • 00:49:09
    let's just put a dash Monday through
  • 00:49:12
    Friday there we go and then we'll say
  • 00:49:14
    this is going to be like 5: to 9:00 p.m.
  • 00:49:17
    wow that's terrible uh let's say 5:00
  • 00:49:19
    a.m. to 9:00
  • 00:49:21
    p.m. let's go 5 a.m. to 900 p.m. there
  • 00:49:24
    we go so our hours are Monday through
  • 00:49:26
    Friday 5: to 9:00 there we go and then
  • 00:49:28
    for our contact us you can obviously put
  • 00:49:30
    in your contact information so let's
  • 00:49:32
    just put in like a fake phone number and
  • 00:49:35
    I'll put in you know like some kind of a
  • 00:49:37
    fake email address cool example
  • 00:49:39
    email.com okay and so now you guys get
  • 00:49:41
    the idea of what I was trying to do down
  • 00:49:43
    here so after they come down here they
  • 00:49:45
    have a get in touch button which could
  • 00:49:47
    either take them to a landing page or
  • 00:49:48
    you could just have it linked where if
  • 00:49:49
    they click on it it just drags them
  • 00:49:51
    right down here and so now you've got
  • 00:49:53
    your contact form right here where they
  • 00:49:54
    can fill out all of their information
  • 00:49:56
    and they can sign up down below if they
  • 00:49:58
    were just looking for information cuz
  • 00:49:59
    they wanted to call you they could just
  • 00:50:01
    scroll down and they'll be like oh okay
  • 00:50:03
    so I can contact them at this phone
  • 00:50:04
    number and they're open right now and
  • 00:50:06
    this is where they are so you have all
  • 00:50:07
    of the information that you need other
  • 00:50:09
    than that I just want to change the
  • 00:50:10
    background color to be white again I
  • 00:50:12
    don't know why it keeps using this blue
  • 00:50:13
    I mean I do know why by the way uh if I
  • 00:50:15
    go to dashboard and customize you do not
  • 00:50:17
    have to follow along let me just show
  • 00:50:19
    you what I mean I know why it's taking
  • 00:50:21
    this color is if you go over here to the
  • 00:50:23
    global colors really fast the site
  • 00:50:26
    background is using this blue color so
  • 00:50:29
    instead if I really wanted to I could
  • 00:50:30
    just change it to use the white color
  • 00:50:32
    super easy actually if you guys want to
  • 00:50:34
    do that let me just show you really fast
  • 00:50:36
    so from your WordPress dashboard you go
  • 00:50:39
    appearance and then you click on
  • 00:50:40
    customize and it'll open up this
  • 00:50:43
    page and then from here you would go
  • 00:50:46
    over to the global Tab and then colors
  • 00:50:50
    and then under colors is where you have
  • 00:50:51
    all these colors you can just change the
  • 00:50:53
    site background to use your white color
  • 00:50:55
    instead so these are your global colors
  • 00:50:57
    right here change it to white instead of
  • 00:50:58
    that blue and so now you'll see that the
  • 00:51:01
    background is white this is white
  • 00:51:03
    everything is white so I think it looks
  • 00:51:05
    good cool so we can close out of that
  • 00:51:06
    customize Tab and I can go back to
  • 00:51:08
    Elementor that's why I like opening
  • 00:51:09
    things on new tabs so that I can just
  • 00:51:11
    bounce back and forth and so the way
  • 00:51:12
    that we make sure that this changes
  • 00:51:14
    you'll notice it's still blue is because
  • 00:51:15
    just click on update to save and refresh
  • 00:51:17
    the
  • 00:51:19
    page perfect so now if we scroll on
  • 00:51:23
    down perfect you'll see it's using a
  • 00:51:25
    white background so it looks really good
  • 00:51:27
    all right I think our website is looking
  • 00:51:30
    fantastic now we're going to work on the
  • 00:51:32
    header and the footer and then I'm also
  • 00:51:34
    going to show you guys how to build a
  • 00:51:35
    complete logo for free let's get started
  • 00:51:37
    so now from inside of Elementor we can
  • 00:51:39
    just close out of this tab or if you
  • 00:51:41
    don't have another tab with your
  • 00:51:43
    dashboard open what you do is you click
  • 00:51:45
    on the hamburger icon right here in the
  • 00:51:47
    top left corner and then you click on
  • 00:51:49
    exit and it's going to ask hey you're
  • 00:51:51
    exiting where do you want to go and you
  • 00:51:53
    can say your WordPress dashboard and so
  • 00:51:55
    now you'll be taken back to your
  • 00:51:56
    WordPress dashboard now I always
  • 00:51:58
    recommend opening things on new tabs so
  • 00:52:00
    if you open up your website like this
  • 00:52:02
    open it on a new tab and that's by right
  • 00:52:04
    clicking on it and I say open on a new
  • 00:52:06
    tab or you can middle Mouse button click
  • 00:52:08
    the reason I do that is so if I'm
  • 00:52:09
    editing an Elementor over here I can
  • 00:52:11
    just jump right back into my dashboard
  • 00:52:13
    if I need to do something so I always
  • 00:52:14
    like having multiple tabs open anyways
  • 00:52:16
    now that our website is good to go we
  • 00:52:18
    want to work on the header and footer so
  • 00:52:20
    from your WordPress dashboard we'll go
  • 00:52:22
    over to the appearance Tab and click on
  • 00:52:24
    customize which again I'm going to move
  • 00:52:26
    move on a new tab so now what we're
  • 00:52:28
    going to be editing is this up here
  • 00:52:30
    which is your header and then we're
  • 00:52:31
    going to edit down below the footer
  • 00:52:33
    which is this down here and then also
  • 00:52:34
    I'm going to show you guys how I made
  • 00:52:36
    this logo and you guys can make it too
  • 00:52:38
    completely for free so we'll do that in
  • 00:52:39
    just a second here so let's go ahead and
  • 00:52:41
    focus on your navigation menu first
  • 00:52:43
    right here so normally when you go up to
  • 00:52:45
    your navigation menu you click on the
  • 00:52:46
    about page and it would take you to a
  • 00:52:48
    separate page and this is your about
  • 00:52:50
    page and then you go to your services
  • 00:52:51
    page and your contact page right and so
  • 00:52:55
    right now none of these are custom ized
  • 00:52:57
    because we only customized the homepage
  • 00:52:59
    and if I tried to show you guys how to
  • 00:53:00
    build a complete website with multiple
  • 00:53:02
    pages and multiple sub pages and all
  • 00:53:04
    that it would take way too long so today
  • 00:53:06
    I'm just showing you how to build
  • 00:53:07
    onepage website which has everything on
  • 00:53:09
    it right so they have an about section
  • 00:53:11
    yeah it's right here I have a Services
  • 00:53:13
    section it's right down here and then I
  • 00:53:16
    have a contact Section which is down
  • 00:53:18
    below right so a onepage website is
  • 00:53:21
    simple and it's easy for beginners if
  • 00:53:23
    you guys want to you can go and
  • 00:53:24
    customize each one of these pages and
  • 00:53:26
    the way that you do that let me refresh
  • 00:53:28
    the page is you open up your website on
  • 00:53:30
    a new tab and normally you would click
  • 00:53:32
    on edit with Elementor right here but
  • 00:53:33
    this is a perfect example of sometimes
  • 00:53:35
    your website glitches out a little bit
  • 00:53:37
    and so you won't see the edit with
  • 00:53:38
    Elementor ribbon up here and so if you
  • 00:53:40
    don't see that ribbon up there you can
  • 00:53:41
    always go over to your pages like I was
  • 00:53:44
    showing you earlier and you hover over
  • 00:53:46
    what page you want to edit like the
  • 00:53:47
    homepage and you can click on edit with
  • 00:53:49
    Elementor right here so if you want to
  • 00:53:51
    edit the about page you would just click
  • 00:53:52
    on edit with Elementor right here and
  • 00:53:55
    now as you can see see I'll be editing
  • 00:53:57
    the about page and you guys can do all
  • 00:53:59
    of the same changes you guys did on the
  • 00:54:01
    homepage here and then that's the same
  • 00:54:03
    situation with the contact
  • 00:54:05
    page as you can see I can make changes
  • 00:54:08
    to whatever I want so this is where it's
  • 00:54:09
    up to you guys if you want you can try
  • 00:54:12
    to edit all of these pages and have them
  • 00:54:14
    linked up to all of the buttons that you
  • 00:54:16
    have so all these buttons and stuff like
  • 00:54:17
    that or you can just make a single page
  • 00:54:19
    website and that's what this tutorial is
  • 00:54:21
    going to be so for the sake of this
  • 00:54:23
    tutorial and for the sake of keeping
  • 00:54:24
    things simple I'm actually going to
  • 00:54:26
    delete all these other pages so under
  • 00:54:28
    the pages tab on my WordPress dashboard
  • 00:54:30
    I'm going to select the other pages and
  • 00:54:32
    I'm going to bulk action I'm going to
  • 00:54:33
    move them to the trash bin and so now
  • 00:54:35
    all I have is one page now again this is
  • 00:54:38
    up to you guys if you want to keep
  • 00:54:39
    things simple cuz you're a beginner and
  • 00:54:41
    just make a single page website this is
  • 00:54:43
    what you're going to do follow along
  • 00:54:44
    with me but if you want to keep all
  • 00:54:45
    those other Pages you can leave them
  • 00:54:47
    there and you can go and customize them
  • 00:54:48
    it's up to you but so for this tutorial
  • 00:54:50
    we're going to stick to one page so now
  • 00:54:52
    I can go ahead and close out of this tab
  • 00:54:54
    refresh my customize page and you'll
  • 00:54:56
    notice that all those pages disappeared
  • 00:54:58
    because they're no longer on my website
  • 00:55:00
    so good now in order to edit this we can
  • 00:55:02
    either click on the pencil icon right
  • 00:55:04
    here and you'll see that it's
  • 00:55:05
    automatically going to take me to the
  • 00:55:06
    settings on the Le hand side or for
  • 00:55:09
    y'all's knowledge I'm going to show you
  • 00:55:10
    how to get there on your own so if you
  • 00:55:12
    want to edit the header we're going to
  • 00:55:13
    go to the header Builder and then from
  • 00:55:15
    here we have the site title and Logo
  • 00:55:18
    which the logo is right here we have the
  • 00:55:20
    button which is over here and then we
  • 00:55:22
    have the primary menu which is right
  • 00:55:24
    here or it used to be right you also Al
  • 00:55:26
    have a visual representation down below
  • 00:55:28
    so you have the logo over here on the
  • 00:55:30
    left and it's on the left you've got the
  • 00:55:32
    menu right here on the left hand side of
  • 00:55:34
    the button but it's on the right hand
  • 00:55:35
    side of the screen and then you have the
  • 00:55:37
    button which is on the right hand side
  • 00:55:38
    of the menu and so for example if I were
  • 00:55:40
    to move the button to this middle spot
  • 00:55:42
    now you'll see that the button's in the
  • 00:55:43
    middle so this is a visual
  • 00:55:44
    representation of what you're editing up
  • 00:55:46
    on top so first I'm going to show you
  • 00:55:48
    guys how to customize this button right
  • 00:55:49
    here which has a phone number on it if
  • 00:55:51
    you guys want to leave this as the
  • 00:55:52
    company phone number for your gym then
  • 00:55:54
    all you would have to do is click on on
  • 00:55:56
    the button right here and you can
  • 00:55:57
    literally change the text right here so
  • 00:56:00
    it's 202 555 7890 you guys could change
  • 00:56:03
    this to say something different and then
  • 00:56:05
    the link is just telephone number and
  • 00:56:06
    then here's your phone number so just
  • 00:56:07
    put in your actual phone number right
  • 00:56:09
    here and then when people click on it
  • 00:56:10
    it'll try to actually call right so
  • 00:56:12
    that's how the button works I'm not
  • 00:56:13
    going to make a change to it cuz I think
  • 00:56:15
    it's fine I'm just going to show you
  • 00:56:16
    guys how to add your navigation menu
  • 00:56:17
    right here but now you know how to
  • 00:56:19
    change the text if you want to you could
  • 00:56:21
    also have this link somewhere else so
  • 00:56:22
    for example you could have this link to
  • 00:56:23
    a contact page put the URL of your
  • 00:56:25
    contact page right here and then you
  • 00:56:26
    could just say the words contact right
  • 00:56:28
    here and then it'll just say contact and
  • 00:56:30
    you could click on it and it'll take you
  • 00:56:32
    to your contact page but as you can see
  • 00:56:34
    right now it's asking when I click on it
  • 00:56:35
    do you want to FaceTime this website
  • 00:56:38
    because there's a phone number behind
  • 00:56:39
    the button as you can see so it's trying
  • 00:56:41
    to basically FaceTime this phone number
  • 00:56:43
    so that's how you guys can put in your
  • 00:56:44
    own phone number right here if you want
  • 00:56:45
    anyways let me show you guys how to make
  • 00:56:47
    changes to your navigation menu you
  • 00:56:48
    would think that you would click on
  • 00:56:49
    primary menu but you'll notice that it's
  • 00:56:51
    not right here you have to configure the
  • 00:56:53
    menu over here which is going to take
  • 00:56:55
    you to a completely different place let
  • 00:56:57
    me show you how to get there so instead
  • 00:56:58
    of the header Builder we'll go down to
  • 00:57:00
    menus and then we'll view the main menu
  • 00:57:03
    and you'll notice that they're all
  • 00:57:04
    invalid because we don't have those
  • 00:57:06
    pages anymore so if you click on plus
  • 00:57:08
    add items you'll see a little X appears
  • 00:57:10
    and now you can just delete them quickly
  • 00:57:12
    otherwise you would have to click on it
  • 00:57:13
    and then click on remove and then you
  • 00:57:15
    click on the next one and then click on
  • 00:57:17
    remove so I always like just opening
  • 00:57:18
    this up and then you just click on the
  • 00:57:19
    the x button right here so we have the
  • 00:57:21
    homepage which takes you to the front
  • 00:57:23
    page of the website now we're going to
  • 00:57:24
    add custom links that link you to
  • 00:57:26
    different portions of the website so let
  • 00:57:28
    me show you what I mean we're going to
  • 00:57:29
    put an anchor right here called hashtab
  • 00:57:33
    and then whenever you click on the
  • 00:57:35
    button up here that says about I want it
  • 00:57:37
    to drag your screen down to the about
  • 00:57:39
    section okay so the way that we do that
  • 00:57:41
    is first we just have to put the title
  • 00:57:44
    about that's what's going to display and
  • 00:57:47
    then we actually have to put the URL
  • 00:57:48
    behind what displays and the URL is
  • 00:57:51
    going to be
  • 00:57:52
    hasht about add to menu all right so now
  • 00:57:54
    you see we have home and out right there
  • 00:57:57
    so let's go and do the same thing for
  • 00:57:58
    the next one which is the services
  • 00:58:00
    section and then we would do hash
  • 00:58:03
    Services add to menu and then next we're
  • 00:58:05
    going to do what's the next one
  • 00:58:07
    contact yeah contact oh it has to be all
  • 00:58:11
    caps because the rest of more and then
  • 00:58:13
    we would say hasht
  • 00:58:15
    contact add the menu click on publish in
  • 00:58:18
    the top right corner to save your work
  • 00:58:20
    and publish it live on the internet and
  • 00:58:21
    you're done now your navigation menu is
  • 00:58:23
    displaying but when you click on it
  • 00:58:25
    nothing happens as you can see except
  • 00:58:28
    for the home button because that's
  • 00:58:29
    actually linked to a page okay so in
  • 00:58:31
    order to make that work we have to jump
  • 00:58:33
    back inside of Elementor so from your
  • 00:58:35
    WordPress dashboard normally you would
  • 00:58:37
    just open up your website and then click
  • 00:58:38
    on edit with Elementor right here oh now
  • 00:58:40
    it's showing for some reason as you can
  • 00:58:42
    see sometimes it just glitches out it's
  • 00:58:43
    whatever I'm going to click on edit with
  • 00:58:45
    Elementor right here and again that's
  • 00:58:47
    cuz from the dashboard I click on my
  • 00:58:49
    website and then you just click on edit
  • 00:58:51
    with Elementor right here okay so now
  • 00:58:53
    that you're inside of Elementor again
  • 00:58:54
    and notice how I have my t open so I can
  • 00:58:56
    jump back and forth now that you're in
  • 00:58:58
    Elementor we have to label with an
  • 00:59:00
    anchor we have to tell the computer that
  • 00:59:03
    this is your an about section right so
  • 00:59:05
    the way we do that is just edit with the
  • 00:59:06
    six dots right here go to the Advance
  • 00:59:08
    Tab and you're going to add a CSS ID
  • 00:59:10
    which is basically an anchor and just
  • 00:59:11
    call this the about just like that so
  • 00:59:14
    now you'll notice that up in the
  • 00:59:16
    navigation menu up here on the top we
  • 00:59:18
    put in hashtag about and that's because
  • 00:59:20
    that hashtag is going to search your
  • 00:59:21
    website for an anchor which this is the
  • 00:59:23
    anchor about so whatever you put in
  • 00:59:25
    front of the hash tag is what's calling
  • 00:59:27
    on this CSS ID okay in the most simple
  • 00:59:29
    way that I can say so now that we have
  • 00:59:32
    this one as about click on update we'll
  • 00:59:34
    do that for the rest of them so for the
  • 00:59:35
    services section click on the six dots
  • 00:59:38
    Advanced
  • 00:59:40
    tab Services all lowercase and then
  • 00:59:43
    lastly contact right here advaned tab
  • 00:59:46
    CSS ID
  • 00:59:48
    contact update okay so now if I click on
  • 00:59:51
    the preview changes button which opens
  • 00:59:53
    up my website on a new tab now whenever
  • 00:59:55
    I click on hash
  • 00:59:56
    about you'll see it drags me to the
  • 00:59:58
    about section if I click on Services it
  • 01:00:01
    drags me straight to services and if I
  • 01:00:03
    click on contact it's going to throw me
  • 01:00:04
    straight to the contact form pretty neat
  • 01:00:06
    right I think that looks really cool so
  • 01:00:08
    now also actually let me show you again
  • 01:00:10
    so now we're back on Elementor I'm just
  • 01:00:11
    going to close out of this tab and I'm
  • 01:00:13
    going to open up my website on a new tab
  • 01:00:15
    right so now pay attention to the
  • 01:00:16
    hyperlink while I make my clicks okay
  • 01:00:19
    you'll notice that when I click on the
  • 01:00:20
    about button oh interesting it's not
  • 01:00:22
    doing it what it's going to do is it
  • 01:00:23
    normally would put like a hashtag about
  • 01:00:26
    right behind it so if I do this
  • 01:00:28
    hashtab it's going to take me to that
  • 01:00:30
    CSS ID and so if I go hash Services it's
  • 01:00:34
    going to take me straight to the
  • 01:00:35
    services button it looks like that's a
  • 01:00:36
    new update where it doesn't actually
  • 01:00:37
    show what you click on which is kind of
  • 01:00:39
    cool but what basically this button is
  • 01:00:41
    doing is when you click on it it's
  • 01:00:42
    taking you to strength jimc apw.com
  • 01:00:48
    hasab and then it would take you to the
  • 01:00:50
    about section that's basically what your
  • 01:00:51
    browser is doing and that's what the
  • 01:00:53
    custom link is so I'm just explaining it
  • 01:00:55
    to you so you have a better
  • 01:00:56
    understanding of what it's doing and
  • 01:00:57
    that's why when I type in the the URL
  • 01:01:00
    you know ashab like this it'll take you
  • 01:01:02
    straight to the about section so that's
  • 01:01:04
    what's happening but it looks like it's
  • 01:01:05
    not even showing that which is kind of
  • 01:01:07
    cool so now when you click on about it
  • 01:01:09
    just goes down so used to be it would
  • 01:01:11
    actually show the hashtag about when you
  • 01:01:12
    click on it okay so now your navigation
  • 01:01:14
    menu is done so let's go ahead and focus
  • 01:01:16
    on the logo so now I'm going to show you
  • 01:01:18
    guys how to build a logo completely for
  • 01:01:20
    free and the way you do that is you open
  • 01:01:21
    a new tab and you go to a website called
  • 01:01:23
    logo maker
  • 01:01:27
    but without the e so logo maker like
  • 01:01:30
    this and so now you can either choose
  • 01:01:32
    from one of their templates or click on
  • 01:01:34
    start my design I'm going to actually
  • 01:01:36
    pick a template save myself some time
  • 01:01:38
    and the one that I actually chose is
  • 01:01:39
    this one you'll probably think it looks
  • 01:01:40
    pretty similar to this one right here so
  • 01:01:43
    when you click on it now it's really
  • 01:01:45
    easy because the template did most of
  • 01:01:47
    the work for me and now I just got to
  • 01:01:48
    change the icon in the text rather than
  • 01:01:50
    building it from scratch so the first
  • 01:01:53
    thing I'm going to do let's close out of
  • 01:01:54
    that tab is I need to pick the dumbbell
  • 01:01:57
    so let me walk you through logo maker
  • 01:01:58
    really quickly top left corner is where
  • 01:02:00
    you can search from over 3 million
  • 01:02:02
    Graphics so I'm going to click on back
  • 01:02:04
    to Canvas the left hand side is where
  • 01:02:05
    you have basic functions like text
  • 01:02:07
    triangles pencil Paint Bucket and then
  • 01:02:10
    on the right hand side is where you can
  • 01:02:11
    change the color the saturation and
  • 01:02:13
    everything of whatever object you're
  • 01:02:15
    editing so the first thing I'm going to
  • 01:02:16
    do is delete this icon so you click on
  • 01:02:18
    it and I'm just going to click on delete
  • 01:02:20
    let's go ahead and add a
  • 01:02:21
    dumbbell and I can't remember exactly
  • 01:02:24
    which one I used so this one's kind of
  • 01:02:25
    of like this and it's got a a flat side
  • 01:02:28
    so it's kind of similar to this one I
  • 01:02:30
    think I scrolled through for a while and
  • 01:02:31
    found one and it's probably really far
  • 01:02:33
    down and I don't want to try and go find
  • 01:02:34
    it so for now we're just going to pick
  • 01:02:37
    one and I think you know what let's just
  • 01:02:39
    go with this one it's not exactly what I
  • 01:02:41
    have on mine but it's because I just
  • 01:02:42
    kept scrolling for a really long time so
  • 01:02:45
    you get what you get all right so now
  • 01:02:46
    I'm going to use the corner to drag it
  • 01:02:48
    and make it a little bit bigger so now
  • 01:02:49
    it'll kind of stretch across my text
  • 01:02:52
    like that and that's basically what I
  • 01:02:53
    did for this one as you can see so now
  • 01:02:55
    we can change the color of this icon
  • 01:02:57
    here okay the reason you can't grab your
  • 01:02:58
    icon is because the square is in front
  • 01:03:00
    of it click on the clip art right here
  • 01:03:02
    as you can see and now I've selected it
  • 01:03:04
    and now I can drag it around right
  • 01:03:05
    center it up if I come over here I can
  • 01:03:07
    change the color as you can see I can
  • 01:03:08
    desaturate it and then I can also change
  • 01:03:11
    the color right but that's one color
  • 01:03:13
    you'll notice that mine is a gradient
  • 01:03:14
    from red to blue and so if you want to
  • 01:03:16
    do that you can just click on a linear
  • 01:03:17
    gradient right here and now you'll see
  • 01:03:19
    that it's two colors right here and so I
  • 01:03:21
    can drag this over and I'll change this
  • 01:03:23
    one to like a red color and then I'll
  • 01:03:25
    change this one to like a blue color
  • 01:03:26
    it's literally that easy done oops if
  • 01:03:29
    you accidentally click you can just drag
  • 01:03:30
    it away and now it's no longer there but
  • 01:03:32
    that's for like if you want to add a
  • 01:03:33
    third color so like green and so now it
  • 01:03:35
    goes red green blue uh but we'll take
  • 01:03:37
    that out okay so now all we got to do is
  • 01:03:39
    change the text so let's click on it and
  • 01:03:41
    we'll type something else there we go so
  • 01:03:44
    strength gy and so I think that looks
  • 01:03:46
    good we can kind of increase the size if
  • 01:03:47
    we really really want to here let's see
  • 01:03:49
    if we can increase the weight line width
  • 01:03:51
    letter spacing word spacing fixed no
  • 01:03:53
    okay so we would have to change the font
  • 01:03:55
    so I'm going to hit controller command Z
  • 01:03:57
    wow stuff is really glitching out right
  • 01:03:58
    now I did not change you to be something
  • 01:04:00
    like that I just had you as a solid
  • 01:04:02
    color there we go okay so the way I did
  • 01:04:04
    that was I just clicked on the Square
  • 01:04:05
    that's back here it's just a square
  • 01:04:07
    that's all it is and I just changed it
  • 01:04:08
    to Black so you can see what we're
  • 01:04:09
    working on because if it was like white
  • 01:04:12
    you see how you can't see the text so I
  • 01:04:14
    just made it black okay so let's goe and
  • 01:04:15
    change the text again because
  • 01:04:16
    everything's glitching right now for
  • 01:04:18
    some reason I think I don't even think I
  • 01:04:20
    included gy I think I just said strength
  • 01:04:22
    right yeah it just says strength and
  • 01:04:23
    then power and might is the slogan so
  • 01:04:25
    let's change the slogan right here cool
  • 01:04:28
    and that's how I made my logo it was so
  • 01:04:30
    easy right and so now finally if I save
  • 01:04:33
    this it's going to save the black Square
  • 01:04:35
    behind it so it was nice to have it so I
  • 01:04:37
    know what I was doing but now I need to
  • 01:04:39
    delete the square so I'm just going to
  • 01:04:40
    click on the Square and then hit the
  • 01:04:41
    delete button I know you can't see it
  • 01:04:43
    but the text is still here so don't
  • 01:04:45
    worry but you need to leave it white so
  • 01:04:46
    that on a dark background you can see
  • 01:04:48
    the white text so now that my logo's
  • 01:04:50
    done I'm going to go over to the top
  • 01:04:51
    right corner and click on Save logo and
  • 01:04:53
    it's going to load for a second and then
  • 01:04:54
    if you click on this button it's going
  • 01:04:56
    to open a new tab and say hey give me
  • 01:04:58
    your
  • 01:04:59
    money don't do it you don't have to pay
  • 01:05:01
    $29 or $60 I'm I just told you it's free
  • 01:05:04
    and it is this is for the high
  • 01:05:06
    resolution file so you're getting a
  • 01:05:08
    large file we're going to download the
  • 01:05:09
    low resolution file completely for free
  • 01:05:11
    so skip this button go right here it
  • 01:05:13
    says download low resolution PNG
  • 01:05:16
    file and then you just have to accept
  • 01:05:18
    the terms enter your email and it's
  • 01:05:20
    going to send it to your email so click
  • 01:05:22
    on so this is my email create a pro
  • 01:05:24
    portfolio we're going to hit send email
  • 01:05:26
    boom completely for free I just
  • 01:05:28
    downloaded my low resolution file and
  • 01:05:30
    you'll see it was for free so now we can
  • 01:05:32
    close out of this tab cuz we don't
  • 01:05:33
    really need it anymore well actually let
  • 01:05:34
    me show you guys how to make a favicon
  • 01:05:36
    as well so this is called a favicon
  • 01:05:38
    right here same thing with this little
  • 01:05:39
    Globe icon you'll notice that yours has
  • 01:05:41
    the default Globe icon cuz we haven't
  • 01:05:43
    actually created a special one if I were
  • 01:05:45
    to go to YouTube you'll see that YouTube
  • 01:05:47
    has its own favicon as well let me show
  • 01:05:49
    you how to make that right now we're
  • 01:05:50
    going to delete the text so I'm going to
  • 01:05:51
    highlight both of my text and just hit
  • 01:05:53
    delete so now there's just the Dum
  • 01:05:55
    dumbbell and we're going to save this
  • 01:05:57
    one one more time so let's click on Save
  • 01:05:58
    logo download the low resolution file
  • 01:06:01
    put in my email send all right so now
  • 01:06:03
    that we're done we can close out of this
  • 01:06:04
    tab CU we don't need it anymore next
  • 01:06:06
    what you can do is go over to your email
  • 01:06:09
    and you'll see that I have two emails
  • 01:06:10
    from logo maker and this is where I can
  • 01:06:12
    download my file for free so if I hit
  • 01:06:14
    download you'll see that I just
  • 01:06:15
    downloaded my logo and so there it is
  • 01:06:18
    right there so I can do the same thing
  • 01:06:20
    one more time and I can download down
  • 01:06:22
    below here which is the second email
  • 01:06:24
    this is my fab
  • 01:06:26
    and so now you see it's the favicon
  • 01:06:28
    perfect okay close out of your email now
  • 01:06:30
    we're back on your website so now if you
  • 01:06:32
    want to add your logo you go over to the
  • 01:06:34
    header Builder and then you go to site
  • 01:06:36
    title and logo and so now my logo is
  • 01:06:38
    already there because remember when we
  • 01:06:39
    downloaded the template I installed it
  • 01:06:41
    automatically this is where you're going
  • 01:06:42
    to finally put it so you would hit
  • 01:06:44
    change logo and you would upload the
  • 01:06:46
    file from your computer and so I'm
  • 01:06:48
    actually going to upload the favicon cuz
  • 01:06:50
    I don't already have it just so that
  • 01:06:52
    it's there and ready to go but I'm still
  • 01:06:53
    going to use my logo so you would click
  • 01:06:55
    on select you can skip the cropping if
  • 01:06:57
    you want and so now your logo is going
  • 01:06:59
    to display done so now if you want your
  • 01:07:01
    favicon to display just scroll down a
  • 01:07:02
    little bit and it's at the very bottom
  • 01:07:04
    right here click on it and now you're
  • 01:07:06
    going to select your site
  • 01:07:08
    icon it's going to ask if you want to
  • 01:07:10
    crop and right now it's making my icon
  • 01:07:12
    really small so I'm actually am going to
  • 01:07:14
    see if I can crop can I nope it's not
  • 01:07:16
    going to let me all right so that's
  • 01:07:17
    about as big as I get it so I can
  • 01:07:19
    actually skip cropping and we'll see if
  • 01:07:20
    it makes it bigger but here's an example
  • 01:07:22
    of what it's going to look like as you
  • 01:07:23
    can see so say skip cropping and and
  • 01:07:25
    boom as you can see the it's a low
  • 01:07:27
    resolution file so it's really small but
  • 01:07:30
    you guys get the idea that's how you can
  • 01:07:32
    upload your own favicon if you want so
  • 01:07:34
    anyways maybe on logo maker you would
  • 01:07:36
    just make it bigger and then download it
  • 01:07:38
    I just downloaded one that was
  • 01:07:39
    absolutely tiny so that's why it looks
  • 01:07:42
    really small okay so once you're done
  • 01:07:44
    with your site logo and your favicon
  • 01:07:47
    publish it to make it live okay so now
  • 01:07:49
    we can go ahead and move on to the
  • 01:07:50
    footer of the website and so the footer
  • 01:07:52
    we just click on footer Builder right
  • 01:07:53
    here and it's automatically going to
  • 01:07:55
    throw us to the very bottom so obviously
  • 01:07:57
    the first thing we want to do is change
  • 01:07:58
    the logo and if we look at our visual
  • 01:08:00
    representation we see that HTML is the
  • 01:08:02
    logo this right here is the copyright
  • 01:08:05
    and this right here is a footer menu and
  • 01:08:07
    so you'll see them over here as well I
  • 01:08:08
    wanted to explain that because if you're
  • 01:08:10
    like whoa what's html1 what does that
  • 01:08:12
    mean why doesn't it just say site title
  • 01:08:14
    and Logo well it's a little different
  • 01:08:15
    for the footer so that's why so if you
  • 01:08:17
    click on HTML 1 you'll see it's a
  • 01:08:18
    picture so then you just click on the
  • 01:08:20
    picture and hit remove and now with that
  • 01:08:23
    gone we can go ahead and click on the
  • 01:08:25
    plus button button and we can add our
  • 01:08:26
    own logo and so I'm just going to put
  • 01:08:28
    the site favicon right here and voila
  • 01:08:31
    you'll see it'll pop up in the bottom
  • 01:08:32
    right here perfect so now we've got our
  • 01:08:34
    logo centered next we can edit the
  • 01:08:35
    copyright you just click on it as you
  • 01:08:37
    can see it takes you to the copyright
  • 01:08:39
    and so now instead of Hope starter
  • 01:08:40
    design you could say something like
  • 01:08:41
    strength gy right 2024 strength gym
  • 01:08:45
    publish and then over here on the left
  • 01:08:46
    hand side we have our footer menu which
  • 01:08:49
    is automatically pulling from the
  • 01:08:51
    navigation menu which is way up on top
  • 01:08:53
    so this same menu up here is the same
  • 01:08:55
    menu down below so we actually don't
  • 01:08:56
    have to make any changes to it cuz now
  • 01:08:58
    whenever you click on services and
  • 01:09:00
    contact it all works so uh there's
  • 01:09:02
    really no reason to change that so now
  • 01:09:04
    we're actually done that was really fast
  • 01:09:05
    but the footer was super easy to change
  • 01:09:07
    you just change the picture and the
  • 01:09:09
    copyright perfect and whenever you're
  • 01:09:10
    done just make sure you hit publish and
  • 01:09:11
    then we can close out of that Tab and go
  • 01:09:13
    back to the WordPress dashboard our
  • 01:09:14
    final step to complete this website is
  • 01:09:16
    double-checking the mobile
  • 01:09:18
    responsiveness of our site now we just
  • 01:09:20
    created our website on a desktop view
  • 01:09:22
    but what happens if you look at this
  • 01:09:23
    website on your cell phone we just
  • 01:09:25
    created created it inside of a
  • 01:09:26
    horizontal rectangle view but a cell
  • 01:09:28
    phone is more of a vertical rectangle
  • 01:09:30
    View and what about a tablet which is
  • 01:09:32
    basically the same as a laptop screen
  • 01:09:33
    it's a little bit smaller than a desktop
  • 01:09:35
    view it's not necessarily a vertical
  • 01:09:37
    rectangle but it's definitely a lot more
  • 01:09:39
    narrow than it's supposed to be on a
  • 01:09:41
    desktop view you need to make sure that
  • 01:09:42
    your website looks good on all modes of
  • 01:09:44
    viewing in order to do that we can hop
  • 01:09:46
    back into Elementor so inside of
  • 01:09:48
    Elementor if we want to change the
  • 01:09:50
    mobile responsive mode of our website we
  • 01:09:52
    would go over here to the left hand side
  • 01:09:54
    and we're going to see the bottom left
  • 01:09:55
    corner right next to preview changes
  • 01:09:57
    you'll see responsive mode you're going
  • 01:09:59
    to click on it and then you'll see a
  • 01:10:00
    banner appear on the top right up here
  • 01:10:02
    and so now we have desktop tablet and
  • 01:10:05
    mobile so if I go from desktop to tablet
  • 01:10:07
    you'll see that this looks more of like
  • 01:10:09
    a laptop screen or a tablet and then if
  • 01:10:11
    I go from tablet to mobile you'll see
  • 01:10:12
    that now my website looks like I'm
  • 01:10:14
    viewing it on a mobile screen so for
  • 01:10:17
    desktop view everything looks good right
  • 01:10:19
    but if I switch over to tablet view
  • 01:10:21
    you'll see that my hero section looks
  • 01:10:23
    crazy and wonky so we're going to have
  • 01:10:25
    to make some some changes my about
  • 01:10:26
    section looks perfectly fine I just
  • 01:10:28
    might want to add some spacing on the
  • 01:10:29
    sides testimonial looks good and
  • 01:10:31
    services looks fantastic we might want
  • 01:10:33
    to adjust the text here contact looks
  • 01:10:35
    just fine and so does this so let's make
  • 01:10:38
    those changes now by the way let me
  • 01:10:40
    click on this this widget right here
  • 01:10:41
    anytime you're about to make a change to
  • 01:10:43
    an object on your website you'll notice
  • 01:10:45
    that right here I've got a little tablet
  • 01:10:47
    icon right here or if I'm on the desktop
  • 01:10:49
    view you'll see that it says the desktop
  • 01:10:51
    view right here anytime you have this
  • 01:10:53
    icon right here it means that whatever
  • 01:10:54
    changes you make on this viewing mode
  • 01:10:57
    will not affect the other viewing modes
  • 01:11:00
    okay so for example if we're on the
  • 01:11:02
    tablet View and I make this text super
  • 01:11:05
    small because this is the subtitle text
  • 01:11:07
    so if I go to the style Tab and let's
  • 01:11:08
    just say actually I make it massive like
  • 01:11:10
    this and then I go back over to desktop
  • 01:11:12
    view you'll notice it did not change the
  • 01:11:15
    desktop view and that's because this
  • 01:11:17
    size has the little icon right next to
  • 01:11:20
    it that says that this is different for
  • 01:11:21
    all three modes so if I go back to
  • 01:11:23
    tablet view you'll see that it's massive
  • 01:11:26
    so let's go ahead and Shrink that down
  • 01:11:27
    and make it some subtitle text so
  • 01:11:28
    something like this strength gym is
  • 01:11:31
    supposed to be my H1 massive text so we
  • 01:11:33
    can go to the style tab typography and
  • 01:11:36
    we can increase the size of this one if
  • 01:11:38
    we want to and then power and might we
  • 01:11:40
    kind of want it to be basically the same
  • 01:11:41
    size as this so if you want you can just
  • 01:11:43
    right click and say copy and then we can
  • 01:11:45
    right click and say paste style and
  • 01:11:47
    you'll see that it's going to copy the
  • 01:11:48
    same style the sizing basically next we
  • 01:11:51
    need to shrink these down a little bit
  • 01:11:52
    cuz they're a little too big for the
  • 01:11:54
    tablet View so we go to style and we go
  • 01:11:57
    to Icon and you'll see that the size of
  • 01:11:58
    the icon is also individual for
  • 01:12:01
    different viewing modes so we can reduce
  • 01:12:03
    the size we can go to the text size
  • 01:12:06
    which is also limited so we'll shrink
  • 01:12:08
    that down a little bit and then we can
  • 01:12:10
    go to the list and the space between is
  • 01:12:12
    also individual from all other viewing
  • 01:12:13
    modes so we can go ahead and remove the
  • 01:12:15
    Gap entirely oops let's actually go down
  • 01:12:17
    to zero perfect okay so everything looks
  • 01:12:19
    good I could use a little bit more
  • 01:12:21
    spacing between the bottom and the top
  • 01:12:23
    text so if I really wanted to I could
  • 01:12:25
    edit this container the six dots go to
  • 01:12:27
    the advanced Tab and again the padding
  • 01:12:29
    is different than the desktop version so
  • 01:12:32
    on the left I might want a little bit
  • 01:12:33
    more spacing on the bottom I might want
  • 01:12:35
    a little bit more as well so something
  • 01:12:36
    like this and I think that looks pretty
  • 01:12:38
    good and then on top I've got 70 so
  • 01:12:40
    maybe I shrink the 70 to about 45 and
  • 01:12:42
    now it's a little bit more centered so
  • 01:12:43
    now on a laptop you know everything
  • 01:12:45
    looks like it's sized correctly scroll
  • 01:12:47
    on down and we have the about section
  • 01:12:49
    and so I think what I might do is add
  • 01:12:51
    just a little bit of padding so if I go
  • 01:12:53
    to my six dots here Advan tab it's
  • 01:12:56
    different than the desktop view right so
  • 01:12:58
    if I adjust the top and bottom it's not
  • 01:13:00
    going to change the desktop view so
  • 01:13:02
    let's go ahead and you'll notice the
  • 01:13:03
    second you try to make a change it
  • 01:13:04
    instantly flips so let's just delete
  • 01:13:06
    that really quickly we'll leave the
  • 01:13:08
    values not linked so let's do this
  • 01:13:10
    actually looks better when they're all
  • 01:13:12
    linked on the mobile view or on the
  • 01:13:14
    laptop view so I think I'm going to
  • 01:13:15
    leave that and let's just go to 25
  • 01:13:17
    perfect I think that looks so much
  • 01:13:18
    better so now on a laptop you scroll on
  • 01:13:20
    down and that's what you see so much
  • 01:13:22
    better we could also adjust the text
  • 01:13:23
    size right here to be a little bit more
  • 01:13:24
    of like a subtitle size so again you
  • 01:13:27
    click on it style tab we can just reduce
  • 01:13:29
    the size a little bit easy peasy and
  • 01:13:32
    again if I were to switch to desktop
  • 01:13:33
    view none of the changes I'm making as
  • 01:13:35
    you can see is adjusting the desktop
  • 01:13:37
    view everything still looks good so
  • 01:13:39
    that's good to know we'll go back to
  • 01:13:40
    tablet Services looks fantastic we don't
  • 01:13:42
    need to make changes I'm going to shrink
  • 01:13:44
    the text down a little bit on this
  • 01:13:45
    section right here so we'll kind of
  • 01:13:46
    reduce it a little bit I think it looks
  • 01:13:48
    so much better and then we'll scroll on
  • 01:13:49
    down a little bit more contact Section
  • 01:13:51
    looks good and so does the information
  • 01:13:53
    of our business now one that I might
  • 01:13:55
    change is this looks a little bit taller
  • 01:13:57
    on the tablet View and you'll notice
  • 01:13:58
    that the height is an individual change
  • 01:14:00
    so it's not affecting everything else so
  • 01:14:02
    I might shrink it a little bit just like
  • 01:14:03
    that so now that I've made my changes to
  • 01:14:05
    the tablet view I can go ahead and click
  • 01:14:07
    on update to save my work and then let's
  • 01:14:09
    move over to the mobile view which looks
  • 01:14:11
    so much worse actually not that bad so
  • 01:14:14
    let's go and make changes to our mobile
  • 01:14:15
    view first of all let's change the text
  • 01:14:18
    sizes again which again are individual
  • 01:14:20
    to the mode that you're working on so
  • 01:14:22
    we'll make this a little bit more of
  • 01:14:23
    like a 20 I guess this one can be a
  • 01:14:26
    little bit bigger depending on what look
  • 01:14:28
    you're going for again this is all
  • 01:14:30
    personal preference and then I'll just
  • 01:14:31
    copy this one and paste the style and
  • 01:14:34
    then we're also going to change it from
  • 01:14:35
    centered to be a line to the left there
  • 01:14:37
    we go we could also shrink this down
  • 01:14:38
    even more and make it one line if we
  • 01:14:40
    really wanted to so we could do this if
  • 01:14:42
    we really wanted to you see how I went
  • 01:14:44
    down just by two and it made it stretch
  • 01:14:46
    in there so that's pretty cool again
  • 01:14:47
    it's all just personal preference but if
  • 01:14:49
    you like how that looks then we're good
  • 01:14:50
    so now I think the everything else looks
  • 01:14:52
    perfectly fine in terms of sizing so
  • 01:14:54
    from here I'm going to scroll on down
  • 01:14:55
    and go to the about section let's try
  • 01:14:57
    shrinking the text to see if it makes it
  • 01:14:59
    look a little bit less congested right
  • 01:15:01
    here so let's adjust the size a little
  • 01:15:02
    bit maybe say about the founder all in
  • 01:15:05
    one line and then we can shrink the size
  • 01:15:07
    of this subtext as well so something
  • 01:15:09
    like this and then also on the mobile
  • 01:15:11
    view this looks a little too close so I
  • 01:15:13
    can actually adjust that margin that I
  • 01:15:15
    did if you guys remember on the desktop
  • 01:15:17
    view we'll go to the advanced Tab and
  • 01:15:18
    you remember how I added minus 26 well I
  • 01:15:20
    might be able to go let's go and zero it
  • 01:15:22
    out real quick unlink the values and on
  • 01:15:25
    the bottom we'll just remove a little
  • 01:15:27
    bit less instead of - 26 we'll just say
  • 01:15:30
    what is it -4 so it's a little bit
  • 01:15:32
    better and again this is not making any
  • 01:15:34
    changes to the other versions as you can
  • 01:15:35
    see okay so the about section looks good
  • 01:15:37
    testimonial looks good Services looks
  • 01:15:39
    perfect and we can see that we stacked
  • 01:15:41
    all three of them so that's good and
  • 01:15:43
    then we have our call to action which
  • 01:15:45
    looks a little wonky so let's just
  • 01:15:47
    adjust the size again something like
  • 01:15:49
    this think it looks a little bit better
  • 01:15:51
    scroll on down a little more so it
  • 01:15:53
    looked like for the contact form it just
  • 01:15:54
    stacked our image on top of our contact
  • 01:15:57
    form so first of all we can go ahead and
  • 01:15:59
    finally adjust remember I added a little
  • 01:16:01
    bit of space in between these two well
  • 01:16:03
    now it's showing up on the left and it
  • 01:16:04
    just kind of has it a skew so I just
  • 01:16:06
    click on the container right here and
  • 01:16:07
    under the advaned tab you'll see that
  • 01:16:09
    the padding is still 29 on the left well
  • 01:16:11
    now we can just zero that out and you'll
  • 01:16:13
    see that it kind of fits perfectly now
  • 01:16:14
    if you want to add a little bit of
  • 01:16:15
    padding you can so if we want to add a
  • 01:16:17
    little padding on all sides so that it
  • 01:16:19
    looks like it's not touching the edges
  • 01:16:20
    as you can see and then we'll adjust
  • 01:16:22
    adjust the text right here so we can
  • 01:16:23
    change the style typography and we can
  • 01:16:25
    reduce the size a little bit so much
  • 01:16:27
    better and then if we want to we can
  • 01:16:28
    just increase the size of this guy right
  • 01:16:30
    here so if we want we could do minimum
  • 01:16:32
    height is not going to adjust the other
  • 01:16:34
    viewing modes so under mobile I could
  • 01:16:36
    actually adjust the height and still
  • 01:16:38
    have the picture visible but then on the
  • 01:16:39
    desktop view it still didn't change how
  • 01:16:41
    big the picture is as you can see I
  • 01:16:43
    think that looks a lot better and then
  • 01:16:44
    finally we have our maps and then all
  • 01:16:46
    three of our informations uh or little
  • 01:16:48
    segments right here stacked so I think
  • 01:16:50
    everything looks good and then we have
  • 01:16:51
    the footer as well now there's one last
  • 01:16:54
    final thing that I forgot to tell you
  • 01:16:56
    about and it has to do with our mobile
  • 01:16:57
    responsiveness so let's click on update
  • 01:16:59
    to save our work so our website looks
  • 01:17:01
    good on all mobile responsive modes uh
  • 01:17:03
    we've got laptop desktop and mobile but
  • 01:17:05
    what about our header menu if we go over
  • 01:17:07
    here to customize one last time we can
  • 01:17:09
    also do the same thing we've got our
  • 01:17:11
    mobile responsive modes down here in the
  • 01:17:13
    bottom left corner of our screen you see
  • 01:17:14
    this down here so we're on desktop we
  • 01:17:16
    can go to the tablet View and as you can
  • 01:17:18
    see our menu Isn't there anymore we have
  • 01:17:20
    this little toggle button that shows you
  • 01:17:22
    our menu right and then also the same
  • 01:17:24
    thing for the mobile we have this little
  • 01:17:26
    hamburger icon right so the way that you
  • 01:17:28
    can edit this by the way is you go over
  • 01:17:29
    to the header Builder and you'll see
  • 01:17:31
    that we have uh where is it ah the off
  • 01:17:34
    canvas menu it's right down here in the
  • 01:17:35
    bottom left corner you'll see that on
  • 01:17:37
    our off canvas menu you can click on the
  • 01:17:39
    settings button and you can choose kind
  • 01:17:41
    of some settings here you can also pick
  • 01:17:42
    the design I'm not really going to make
  • 01:17:44
    any changes because it works perfectly
  • 01:17:45
    fine the way it is for your template so
  • 01:17:47
    for your website it'll still be colored
  • 01:17:49
    the same as all of your buttons but
  • 01:17:51
    you'll see that right here you can add
  • 01:17:52
    different icons so as well if you really
  • 01:17:55
    wanted to we could add a widget if we
  • 01:17:58
    really wanted to just as an example and
  • 01:17:59
    then inside of this widget just as just
  • 01:18:01
    as an example you don't have to follow
  • 01:18:03
    along I could put an image and I could
  • 01:18:05
    upload our
  • 01:18:06
    logo and then every time you open up the
  • 01:18:08
    menu you have our logo down here as well
  • 01:18:10
    you guys can get kind of creative with
  • 01:18:12
    what's on your off canvas menu but for
  • 01:18:14
    now let's keep it simple okay we're not
  • 01:18:16
    going to add anything all you need to
  • 01:18:18
    make sure is that your primary menu is
  • 01:18:20
    also inside of your off canvas right
  • 01:18:22
    here and that's only for your tablet and
  • 01:18:24
    your mobile cuz you'll notice when I go
  • 01:18:26
    to desktop that disappears it's no
  • 01:18:28
    longer there because you have the full
  • 01:18:29
    menu so if we go to the laptop screen or
  • 01:18:31
    the tablet screen you'll see that now we
  • 01:18:33
    have our menu which let's double check
  • 01:18:34
    it works if I click on about yep it's
  • 01:18:36
    going to move me good and contact
  • 01:18:39
    perfect so it works and you can do the
  • 01:18:41
    same thing to double check for your
  • 01:18:42
    mobile view but it's going to so we're
  • 01:18:45
    good to go so I just wanted to double
  • 01:18:46
    check that this was linked up because on
  • 01:18:48
    some templates you download this won't
  • 01:18:50
    have the primary menu installed and so
  • 01:18:52
    all you would have to do is just click
  • 01:18:53
    on it and just add the primary menu from
  • 01:18:55
    here but it's not here because it's
  • 01:18:57
    right there so you guys get the idea
  • 01:18:59
    okay so that is how you can change the
  • 01:19:00
    mobile responsive mode of your website
  • 01:19:02
    so we click on publish to save our work
  • 01:19:04
    and we can jump back into the dashboard
  • 01:19:06
    now your website looks great but there's
  • 01:19:07
    only one page to it if you're looking to
  • 01:19:09
    add more pages to your website check out
  • 01:19:11
    this video right here where I show you
  • 01:19:13
    how to in just two easy steps I'll see
  • 01:19:16
    you guys there
Tags
  • WordPress
  • Elementor
  • Website Building
  • Hosting
  • Domain Name
  • Customization
  • Tutorial
  • Beginner Friendly
  • Responsive Design
  • Logo Creation