🔵 Curso Google Sites ✅ Crear subpáginas, insertar vídeos y formulario de contacto

Designing a Website with Google Sites: Adding Navigation Levels

Introduction to Website Structure

• The video focuses on enhancing the design of a website using Google Sites, specifically by adding a new level to the navigation menu.

• It emphasizes the importance of creating diagrams for structuring web components based on the navigation menu, facilitating quick placement of pages.

Current Website Layout

• Currently, only the homepage and three main sections (course genres, tutorials, products) are created and linked in the main navigation.

• Plans include creating individual pages for each course offered by Aulana en la Nube, starting with Guim, Google courses, and OBS Studio.

Course Page Development

• Each course will have its own page; for instance, Guim will feature separate pages for basic, intermediate, advanced courses, and text editing.

• The Google course will branch into specific topics like Google Docs and Slides. Additionally, a contact page will be updated to include a form for user inquiries.

Creating Sub-Pages

• To add sub-pages under the courses section, users can click on three dots next to "Courses" and select "Add Sub-page."

• The first sub-page created is titled "Guimp," which is adjusted to enhance SEO through keyword-rich headings.

Content Addition Process

• The title is formatted as H1 with keywords related to Guimp 2021. Additional content includes paragraphs and subtitles that provide detailed information about the course.

• A YouTube video introducing the course is embedded by selecting "Insert" from the right menu and searching for relevant videos.

Structuring Course Blocks

• After embedding videos, another subtitle indicates that the course consists of four blocks. Images representing each block are inserted below this heading.

• Clicking on any image will lead users directly to that specific course segment. This structure allows easy navigation between different levels of content within each course.

Finalizing Course Pages

• Each block requires its own sub-page; thus additional sub-pages are created under Guimp's main page (e.g., Basic Course).

• For each sub-page created (like Basic Course), titles are adjusted accordingly along with brief descriptions added beneath them.

Video Integration in Sub-Pages

• Videos corresponding to each lesson within a course are integrated similarly by searching YouTube during content creation.

Creating a Course Structure in GIM

Setting Up Video Sections

• The process involves adding videos to sections by adjusting their size and quantity. Users can specify how many videos they want per section by dragging the blue triggers.

• For instance, one might choose to place two videos in each section, ensuring that every page includes a title, brief description, and links to tutorial videos.

Linking Course Pages

• After creating subpages for the GIM course, the next step is linking images on the main GIM page to these courses.

• To link an image, select it and use the insert link button to direct it to the corresponding course page (e.g., basic course).

• It’s advisable to rename links for easier identification later; for example, changing "basic course" to "basic course GIM."

Navigation Menu Management

• Users can decide whether these pages should be visible in the main navigation menu. By previewing changes, users can see how courses appear under a dropdown menu.

• If desired, pages can be hidden from navigation by selecting them and marking them as hidden. This allows customization of what appears in the navigation menu.

Accessing Course Content

• Once set up correctly, clicking on a course name will lead users directly to its respective tutorials.

• Users can navigate back to the main GIM page or switch between different courses easily through clickable links.

Editing Contact Page

• The contact page needs editing; it currently isn’t visible in navigation. A form will be added by selecting 'insert' and then 'forms.'

• A previously created Google Form titled "MAMA Datos de Contacto" will be used here. It contains mandatory fields: name, email address, and a message field for inquiries.

Enhancing User Interaction

• To improve aesthetics on the contact page, additional elements like a Google Maps location can be included alongside contact information.

• Personal details such as name and email address are added with formatting adjustments for clarity and emphasis.

Finalizing Contact Page Setup

Previewing Website Pages

Navigating the Website

• The speaker discusses how to preview different pages of a website, including the contact page which is located on the far right.

• Upon clicking on the contact page, users can see information along with a contact form and an embedded map.