Grow@NopalitoNetwork.com

Session 3 Outline

Session 3: Menus & Widgets

  • Navigation Menus: The part of a website that guides visitors on what is available on the site and where to find it.
    • These help people find their way around your website, like a map.

  • Widgets: Small applications or program snippets that can be embedded into a website to provide a specific function.
    • Little tools on your website that do special jobs, like showing the weather or a calendar.

We’ll be building blocks!

Click here to go to the Figjam board to find slides and exercises for this session OR select the board at the bottom left below. 

Step 1: Choose a Starting Point

  1. Create a New Page: In your WordPress dashboard, navigate to Pages > Add New. Name it “Home” or any title you prefer.
  2. Edit with Elementor: Open your new page in the Elementor editor by clicking the ‘Edit with Elementor’ button.

Step 2: Select a Template (Optional)

  1. Choose a Template: For a quick start, use the Template Library by clicking the folder icon. Search for and insert a homepage or landing page template that fits a bakery theme.
  2. Start from Scratch: Alternatively, begin with a blank page and customize your design from the ground up.

Step 3: Add Sections

  1. Header Section: Drag a “Header” widget from the black widget panel (on the left). Include your company logo and navigation menu.
  2. Hero Section: Click the “+” button to add a new section with a full-width background image showcasing your best-selling products/services. Use the “Heading” and “Text Editor” widgets for your headline and subtext.

Step 4: Customize Content

  1. About Us: Add a new section to introduce your company’s history and values with text and images.
  2. Product Showcase: Display your products using the “Image Gallery” or “Portfolio” widget, complete with descriptions and prices.
  3. Testimonials: Use the “Testimonials” widget to add customer feedback and build trust.

Step 5: Add Functional Elements

  1. Contact Form: Insert a “Form” widget to include a contact form. Customize it with fields for name, email, message, etc. (make sure to send the form to your email) TEST!
  2. Map: Add a “Google Maps” widget to show your company’s location.

Step 6: Style Your Page

  1. Customize Colors and Fonts: Match the colors and fonts to your company branding.
  2. Responsive Adjustments: Use the responsive mode icon to ensure your site looks great on all devices.

Step 7: Publish Your Page

  1. Preview: Use the ‘Preview’ button to check your page in real time. (The eyeball)
  2. Publish: Once satisfied, publish your homepage by clicking the ‘Publish’ button.

Step 8: Set as Homepage

  1. Assign Homepage: Go to Settings > Appearance > Homepage and set the “Your homepage displays” to “A static page,” selecting the page you created.

Homework Assignments to Enhance Learning:

  1. Explore Inspiration: Visit various websites that are similar to your company to understand appealing design elements and functionalities of the industry.
  2. Sketch a Website Layout: Draw a rough layout of your company homepage, including key elements like the hero section and product showcase.
  3. Write Website Content: Prepare basic content such as an “About Us” paragraph and product or service descriptions.
  4. Gather Images and Media: Collect images, logos, and other media for your website.
  5. Familiarize with Elementor: Watch introductory tutorials on Elementor Pro to get comfortable with the platform.

Making Your Menu (For The Header)

Step 1: Log Into Your Website

  • Open your web browser.
  • Go to your website’s login page (it might look like yourwebsite.com/wp-admin).
  • Type your username and password to log in.

Step 2: Go to Theme Builder

  • Find Elementor on the left side of your screen and click on it.
  • Click on Theme Builder.

Step 3: Edit or Create a Header

  • Click on Header in the Theme Builder.
  • If there’s already a header, click Edit with Elementor. If not, click Add New to make a new header.

Step 4: Add a Menu

  • In the Elementor editor, look for the Nav Menu widget on the left panel.
  • Drag the Nav Menu widget to where you want your menu in the header.

Step 5: Customize Your Menu

  • Click on the Nav Menu you added. You’ll see options on the left to change how it looks.
  • You can change things like colors, sizes, and where the menu links go.

Step 6: Publish Your Header

  • When you’re done setting up the menu, click Publish.
  • Elementor will ask where you want to show your header. Choose Entire Site to show it on all pages.

Step 7: Save and Exit

  • Click Save & Close to finish.

Step 8: Check Your Menu

  • Go to the front page of your website to see the new menu.

Step 9: Make Changes If Needed

  • If something doesn’t look right, you can always go back to Elementor and make adjustments.

And that’s it! You’ve just created a navigation menu for your website in WordPress. If something doesn’t look right or you want to change something, just go back to the Menus screen and tweak it as needed.