🔵 Curso Google Sites ✅ Menú de navegación

How to Customize Navigation Menus in Google Sites

Introduction to Customization

• The video focuses on customizing the navigation menu in Google Sites, including adding and hiding pages for visibility.

• A secondary page will be personalized with different section designs compared to previous videos.

Adding New Pages

• The current website layout is reviewed, showing only one page titled "Inicio."

• To add a new page, click the "+" icon at the bottom of the right panel, name it (e.g., "cursos"), and it will automatically create an editable page.

• Additional pages are created: "tutoriales," "productos," and "contacto," with titles adjusted to avoid overlapping with headers.

Navigation Menu Overview

• Each added page generates a corresponding link in the navigation menu at the top: Inicio, cursos, tutoriales, productos, and contacto.

• The appearance of the navigation menu varies by device; mobile displays a three-line icon that expands into a dropdown.

Device-Specific Views

• On tablets, all pages appear in the upper right corner of the screen. Desktop views align similarly.

• In mobile view, if scrolling down reveals that while the menu remains visible, the icon may disappear due to color blending with a white background.

Icon Visibility Considerations

• To ensure visibility of icons against backgrounds (like white), choose contrasting colors or adjust header settings accordingly.

• Similar issues occur on tablet and desktop views where scrolling can cause icons to vanish unless properly configured.

Adjusting Navigation Settings

• Access settings via an icon next to the logo type; options include positioning menus vertically or horizontally and selecting color schemes.

• Choosing black for navigation ensures visibility against lighter logos; previewing changes shows how adjustments affect mobile views.

Finalizing Design Choices

• Users can change logo colors or images as needed; ensuring contrast between elements is crucial for consistent visibility across devices.

Designing a Website Header and Navigation Menu

Modifying the Logo and Header Appearance

• The speaker plans to remove the logo from the website's header, opting for a transparent header instead. This change aims to streamline the visual presentation of the site.

• In tablet view, the header will remain without a logo when scrolling down, maintaining a clean look with only a white menu visible.

• The same design principles apply to mobile devices, where users will see an upper header followed by navigation icons upon scrolling.

Editing Navigation Pages

• Each added page appears in the navigation menu by default; however, pages can be hidden from this menu if desired.

• To hide a page (e.g., "Contact"), users can click on three dots next to it and select an option to conceal it from navigation while keeping its functionality intact.

• Users can also rearrange pages in the menu by dragging them up or down; blue lines indicate movement during this process.

Creating Sub-Pages

• When dragging one page into another (e.g., "Products" into "Courses"), it creates a sub-page structure that updates automatically in the navigation menu.

• Hovering over parent pages reveals dropdown menus showing their respective sub-pages, enhancing user navigation experience.

Finalizing Navigation Structure

• The speaker decides to revert changes made during experimentation with sub-pages to maintain four main sections in the navigation menu.

• After clarifying how to manage navigation menus effectively, attention shifts towards editing specific pages like "Courses."

Editing Course Page Design

Customizing Page Titles and Text Styles

• The title of the course page is changed from "Courses" to "My Courses," with adjustments made for font size and style for better visibility.

Adding Course Content

• A new section titled “Image and Video Courses” is created. Images related to these courses are inserted after adjusting text styles for consistency.

Inserting Additional Course Sections

• Another section titled “Google Courses” is duplicated from above for efficiency. It includes various Google tools such as Docs and Sheets as part of its content.

Image Adjustments

Creating a Google Slides Presentation

Inserting and Resizing Images

• The process begins with inserting images into Google Slides by clicking on the circle icon, dragging it to the desired location, and resizing the image for better fit.

• After resizing, additional cropping is performed to ensure that all images are fully visible. This involves selecting each image individually for precise adjustments.

Duplicating Sections and Adding Text

• A new section titled "Otros Cursos" (Other Courses) is created by duplicating an existing section. This allows for consistent formatting across the presentation.

• Below this new section, text is added by double-clicking to paste a pre-copied paragraph, enhancing content flow and organization.

Incorporating Additional Course Images

• Six images representing free courses (e.g., JavaScript, Java, Blender, Krita, Inkscape) are selected and inserted into the slide. These visuals aim to enrich the course offerings presented.

Formatting Enhancements

• To differentiate sections visually, background colors are adjusted using "Fasis 2," creating a cohesive look throughout the presentation.

• The footer logo is centered for improved aesthetics and alignment within the overall design of the slides.

Navigation Features