Curso Wordpress desde cero 2023 - Paso a paso y gratis con Elementor, Gutenberg y Spectra

Name: Curso Wordpress desde cero 2023 - Paso a paso y gratis con Elementor, Gutenberg y Spectra
Uploaded: 2023-01-03T19:49:02.000Z
Duration: 5 h 22 min 47 s

Introduction to the Course

The instructor introduces the course and explains that there will be two projects. The first project will use a free theme called Cadens, while the second project will be built from scratch using Elementor and Gutenberg.

Project 1: Using Cadens Theme

The instructor explains that the first project will involve working with the Cadens theme, which is a free template.

The focus of this project is to learn how to work with templates and make customizations.

Project 2: Building from Scratch

The second project involves building a website from scratch using a theme with yellow colors.

This project will cover adding elements such as photos, text, and colors manually without relying on templates.

Elementor and Gutenberg will be used for building different parts of the website.

The goal is to create a responsive website that looks good on all devices.

What is WordPress?

The instructor provides an overview of WordPress as a content management system (CMS) for creating and maintaining websites.

WordPress is a CMS that allows users to quickly and easily create and maintain blogs or other types of websites.

Initially designed for blogs, WordPress has evolved to include features like pages, e-commerce functionality through WooCommerce, and various plugins for different purposes.

There are two versions of WordPress: wordpress.com and wordpress.org. For professional use, it is recommended to use wordpress.org as it offers more freedom and flexibility.

Understanding WordPress with an Analogy

The instructor uses an analogy to explain the concept of WordPress in simpler terms.

To better understand what WordPress is, think of pre-packaged instant soups like Maruchan or Ajinomoto. These soups come ready to use by simply adding water or boiling them for a few minutes.

Similarly, WordPress comes pre-packaged with everything needed to create a website. It is easy to set up and use, but it may have limitations compared to custom-built websites.

While large companies may opt for custom solutions, WordPress is suitable for 96% of projects worldwide.

Advantages and Disadvantages of WordPress

The instructor discusses the advantages and disadvantages of using WordPress for website development.

WordPress offers advantages such as speed, efficiency, and cost-effectiveness.

However, there are limitations in terms of customization compared to fully custom-built websites used by larger companies.

Despite these limitations, WordPress is suitable for 96% of projects globally and powers 44% of all websites.

Installing WordPress

The instructor explains the two options for installing WordPress - locally on your computer or on a hosting server.

Option 1: Localhost Installation

To install WordPress locally, you can use programs like XAMPP or MAMP on your computer.

After installing the program, you can then install WordPress within it.

Option 2: Hosting Installation

Alternatively, you can purchase hosting and a domain name to install WordPress directly on a live server.

This option allows others to access your website online.

Downloading and Installing WordPress

The instructor demonstrates how to download and install WordPress from the official website.

Visit wordpress.org and click on "Get Wordpress" or "Download."

Once downloaded, follow the installation instructions based on whether you are installing locally or on a hosting server.

Installing WordPress with XAMPP

In this section, the speaker discusses the process of installing WordPress using XAMPP. They provide instructions on downloading and selecting the appropriate version of XAMPP for installation.

Downloading XAMPP and Selecting Version

The speaker recommends using a specific version of XAMPP for compatibility with WordPress.

Different versions of XAMPP can be found under the "Download" section on the website.

For Windows users, it is suggested to download version 7.433 or 7.430 if using Windows 7 or Windows 10.

Installing XAMPP

After downloading the chosen version of XAMPP, locate the downloaded file and double-click to start the installation process.

Follow the installation wizard by accepting the terms and conditions.

Choose the default installation folder unless you have a specific preference.

Select English as the language during installation.

Troubleshooting Installation Errors

If encountering errors during installation, there are several possible solutions:

Restarting your computer may resolve some issues.

Uninstalling Skype or other conflicting programs could help.

Reinstalling XAMPP, either with a different version or in a different location, might solve problems.

Accessing and Configuring XAMPP Control Panel

In this section, the speaker demonstrates how to access and configure the control panel for XAMPP after successful installation.

Accessing Control Panel

To access the control panel, search for "XAMPP Control Panel" in your computer's search bar or navigate to its installed location (e.g., C:xampp).

Double-click on "xampp-control.exe" to open the control panel.

Starting Apache and MySQL Servers

In the XAMPP control panel, start both Apache and MySQL servers by clicking on the "Start" button next to each.

Wait for the servers to start successfully, indicated by green status indicators.

Troubleshooting Port Conflicts

If encountering port conflicts or permission errors, there are a few possible solutions:

Uninstalling and reinstalling XAMPP may resolve the issue.

Restarting your computer can sometimes fix port conflicts.

Modifying port settings in the "httpd.conf" file located in the "config" folder of XAMPP installation directory can help.

Completing XAMPP Installation and Accessing Control Panel

In this section, the speaker completes the installation process of XAMPP and demonstrates how to access the control panel.

Completing Installation

After successful installation, click on "Finish" to complete the setup process.

Choose whether to open the control panel immediately or manually access it later.

Accessing Control Panel

To access the control panel, search for "XAMPP Control Panel" in your computer's search bar or navigate to its installed location (e.g., C:xampp).

Double-click on "xampp-control.exe" to open the control panel.

Verifying Apache and MySQL Servers

In the XAMPP control panel, ensure that both Apache and MySQL servers are running by checking their status indicators (should be green).

Troubleshooting Errors during XAMPP Installation

In this section, the speaker provides troubleshooting tips for common errors encountered during XAMPP installation.

Troubleshooting Steps

If encountering errors during installation or startup:

Uninstalling and reinstalling XAMPP might solve some issues.

Restarting your computer can sometimes resolve errors.

Installing an older version of XAMPP could be a workaround.

Checking for conflicting programs like Skype and removing them may help.

Changing Port Settings

If port conflicts persist, modifying port settings in the "httpd.conf" file located in the "config" folder of XAMPP installation directory can be attempted.

Open the "httpd.conf" file and search for specific ports (e.g., 80) to change them to different values (e.g., 8080).

Changing Port Settings in XAMPP Configuration

In this section, the speaker demonstrates how to change port settings in the XAMPP configuration file as an alternative solution for resolving port conflicts.

Modifying Port Settings

Locate the "httpd.conf" file within the "config" folder of your XAMPP installation directory.

Open the file and search for specific ports (e.g., 80) that need to be changed.

Replace those ports with different values (e.g., changing from 80 to 8080).

Save the changes made to the configuration file.

Setting up the Server

This section covers the steps to set up the server and configure it for use.

Configuring the Server

Add "tres" at the end of a port number.

Save the configuration changes.

Restart the server.

Troubleshooting with Laragon

If unable to install, try using Laragon as an alternative solution.

Testing the Server

This section explains how to test if the server is functioning correctly.

Accessing Localhost

Open a web browser and enter "localhost" in the address bar.

Press Enter to access localhost.

If not redirected, force it by typing "http://localhost".

Verifying Server Functionality

This section demonstrates how to verify that the server is working properly.

Correct URL Entry

Type "localhost" followed by the desired folder name in the address bar.

Press Enter to access the folder's contents.

Avoid clicking on any other links or buttons.

Troubleshooting URL Issues

This section provides troubleshooting tips for URL-related issues.

Forcing URL Entry

If unable to access desired folder, type "http://" followed by "localhost/" and then add your folder name after a slash (/).

Installing WordPress

This section covers installing WordPress on the server.

Downloading WordPress

Search for "WordPress" on Google.

Download WordPress from wordpress.org.

Extracting and Renaming WordPress Folder

Right-click on downloaded WordPress file and select "Extract Here".

Rename the extracted folder to a desired name.

Moving WordPress Folder

This section explains how to move the WordPress folder to the appropriate location.

Copying and Pasting

Cut or copy the renamed WordPress folder.

Navigate to the desired location (e.g., C:champhtdogs).

Paste the folder inside the htdogs directory.

Creating Database for WordPress

This section covers creating a database for WordPress installation.

Accessing phpMyAdmin

Open a web browser and enter "localhost/phpmyadmin" in the address bar.

Creating Database

Enter the desired database name (e.g., "Proyecto Uno").

Click on "Create" button to create the database.

Configuring WordPress Installation

This section explains how to configure and install WordPress.

Accessing Installation Page

In a web browser, enter "localhost/ProyectoUno" in the address bar.

Completing Installation Form

Fill in all required fields, including username, password, and email address.

Logging into WordPress Dashboard

This section demonstrates how to log into the WordPress dashboard.

Logging In

Enter your username and password on the login page.

Click on "Log In" button to access the dashboard.

Installing Themes and Plugins

This section discusses the concept of plugins in WordPress, which are similar to applications on a mobile phone. Plugins provide additional functionality to a WordPress project. The transcript also mentions the importance of being kind to animals.

Installing Plugins

Plugins are small applications that enhance the functionality of a WordPress project.

Users can install plugins for various purposes, such as user access, client management, and tools.

There are both free and premium plugins available for installation.

Elementor is recommended as a popular plugin due to its ease of use and extensive features.

Other builders like Bricks and Oxygen have their own advantages but may be more complex for beginners.

Gutenberg is the default editor in WordPress but has some limitations compared to other builders.

Working with Themes in WordPress

This section explains different approaches to working with themes in WordPress, including using premium themes or combining free themes with page builders like Elementor.

Premium Themes vs. Free Themes with Page Builders

Premium themes can be purchased from various websites and installed directly into WordPress.

Free themes can also be used along with page builders like Elementor, which offer more flexibility and customization options.

Elementor is highly recommended due to its user-friendly interface and extensive features.

Other page builders like Bricks and Oxygen have their own advantages but may lack a free version or require more technical knowledge.

Gutenberg is the default editor in WordPress but is considered less reliable compared to other page builders.

The Future of Gutenberg

This section discusses the future prospects of Gutenberg as an editor in WordPress, considering its competition with other page builders like Elementor.

Prospects for Gutenberg

Gutenberg was introduced three years ago and has faced criticism for its performance issues.

Despite improvements with the release of Spectra, Gutenberg still has several bugs and limitations.

However, it is predicted that Gutenberg will gain more popularity in 2023 and become a strong competitor to other page builders like Elementor.

Themes like Astra are already betting on Gutenberg's success.

It is expected that by 2024, Gutenberg will have resolved many of its issues and become a reliable editor.

Creating a Website with Cadence Theme and Gutenberg

This section provides instructions for creating a website using the Cadence theme and the default WordPress editor, Gutenberg.

Creating a Website with Cadence Theme

The Cadence theme is recommended for its speed and lightweight nature.

To install the theme, go to "Appearance" > "Themes" in WordPress dashboard.

Click on "Add New" and search for "Cadence."

Install the Cadence theme from the search results.

The transcript continues beyond this point, but no further timestamps are provided.

Installing Cadence Starter Templates

The speaker explains how to install Cadence starter templates using the Gutenberg editor.

Installing Cadence Starter Templates

Click on "Install Cadence Starter Templates" option.

Choose Gutenberg as the preferred editor.

Select the desired template from the available options.

Install the chosen template.

Understanding Themes and Templates

The speaker discusses the difference between themes and templates, specifically in relation to Cadence.

Themes vs. Templates

The theme being used is Cadence, which handles various configurations.

The template being installed is for visual customization of different sections.

The theme (Cadence) and template work together to create a cohesive website design.

Editing Website Elements

The speaker demonstrates how to edit various elements of the website using the customization options provided by Cadence.

Editing Elements

Edit elements such as logo, menu, buttons, colors, etc., by accessing the customization options in the WordPress dashboard.

Changes can be made directly through the "Customize" option or by using quick editing options for specific elements like pages and menus.

Customizing Text and Content

The speaker shows how to customize text and content on specific pages of the website using WordPress editing features.

Customizing Text and Content

Access specific pages through the WordPress dashboard.

Use quick editing options or go into detailed page editing mode to make changes.

Modify text, URLs, buttons, and other content elements according to preferences.

Further Customization with Plugins

The speaker introduces the use of plugins, specifically Spectra, to enhance website customization options.

Using Plugins for Customization

Access the "Plugins" section in WordPress.

Install and activate the Spectra plugin to unlock additional customization options.

Utilize Spectra templates and blocks to add more elements and design choices to the website.

Creating a Website for Home Repair Company

The speaker introduces a new project of creating a website for a home repair company.

Project 2: Website for Home Repair Company

Create a website for a home repair company.

Specific details about the project are not provided in this transcript.

Installing WordPress

This section covers the process of reinstalling WordPress and creating a new project.

Reinstalling WordPress

Extract the downloaded WordPress file by right-clicking on it and selecting "Extract here".

Rename the extracted folder to the desired project name.

Cut the folder and paste it into the "htdocs" directory in XAMPP.

Access phpMyAdmin and create a new database for the project.

Open localhost in a web browser and enter the project name to start the installation process.

Provide database information (database name, username, password) during installation.

Set up an admin username, password, and email for accessing WordPress.

Installing Astra Theme

This section explains how to install and activate the Astra theme in WordPress.

Installing Astra Theme

Go to Appearance > Themes in WordPress dashboard.

Click on "Add New" button.

Search for "Astra" theme or any other preferred theme (e.g., OceanWP).

Install and activate the Astra theme.

Customizing Astra Theme

This section demonstrates how to customize the Astra theme by adding a logo.

Adding Logo to Astra Theme

Go to Appearance > Customize in WordPress dashboard.

Navigate to Header > Site Identity.

Upload your logo image by clicking on "Select Logo".

If needed, skip cropping by selecting "Skip Cropping".

Configure site icon if desired (may vary depending on browser compatibility).

Creating Pages

This section covers creating pages for different sections of a website using WordPress.

Creating Pages

Go to Pages > Add New in WordPress dashboard.

Enter a title for the page (e.g., Home, Services, Blog, Contact).

Publish the page.

Repeat the process for other pages.

Setting Homepage and Menu

This section explains how to set a static homepage and configure the menu in WordPress.

Setting Homepage and Menu

Go to Settings > Reading in WordPress dashboard.

Select "A static page" option under "Your homepage displays".

Choose the desired homepage from the dropdown menu.

Save changes.

Go to Appearance > Menus in WordPress dashboard.

Create a new menu by giving it a name (e.g., Menu 1).

Assign pages to the menu and save changes.

The transcript continues with further instructions on creating additional pages and configuring settings.

Setting up the Menu

This section focuses on setting up the menu for a blog website using WordPress.

Creating Custom Menu

To create a custom menu, go to the "Appearance" section in WordPress.

Select "Menus" and click on "Create a new menu".

Add menu items by selecting pages or custom links from the options provided.

Save the menu once all items have been added.

Designing the Menu

To customize the design of the menu, go to the "Customize" option under "Appearance".

Navigate to the "Header" section and select "Menu".

Choose a layout and style for the menu.

Make any desired changes and save them.

Adding Services to Menu

This section explains how to add services to the previously created menu.

Adding Services as a Submenu Item

In the custom menu editor, select an existing item or create a new one where you want to add services as a submenu item.

Enter "Services" as the label for this submenu item.

Save your changes.

Styling Services Submenu Item

In the customizer, navigate to the "Menus" section under "Header".

Find and select your services submenu item.

Customize its appearance by changing colors, fonts, etc.

Save your changes.

Installing Plugins: Elementor Header Footer & Essential Addons

This section covers installing two plugins - Elementor Header Footer and Essential Addons - which are required for further customization.

Installing Elementor Plugin

Installing Essential Addons Plugin

Exploring Elementor and Essential Addons Plugins

This section provides an overview of the Elementor and Essential Addons plugins and their functionalities.

Elementor Plugin

Elementor is a page builder plugin that allows easy customization of website elements.

It offers drag-and-drop functionality for adding text, images, videos, and more.

Can be used to create headers, footers, and other sections of the website.

Essential Addons Plugin

Essential Addons is a set of additional elements that complement Elementor.

It provides more options for text, images, videos, and pre-designed sections.

Enhances the capabilities of Elementor with additional features.

Creating a Header with Elementor Header Footer Builder

This section explains how to create a header using the Elementor Header Footer Builder plugin.

Creating a New Header Template

Customizing the Header Template

Exploring the Interface of Elementor Header Footer Builder

This section provides an overview of the interface in the Elementor Header Footer Builder plugin.

Selecting Columns and Editing Sections

The interface consists of columns where content can be added.

Each column can be edited individually by selecting it and choosing "Edit Column".

Adding Elements to Columns

Elements such as buttons or text can be added to each column by clicking on the "+" button in the middle.

Customize each element's appearance and settings as desired.

[t=0:56:21s] Creating Navigation Menu and Basic Button

In this section, the speaker demonstrates how to create a navigation menu and add a basic button to the webpage.

Adding Navigation Menu

Use the menu of navigation option to create a navigation menu on the webpage.

Adjust the size and position of the menu as desired.

Adding Basic Button

Select a button element from the available options.

Resize and reposition the button as needed.

[t=0:56:46s] Aligning Columns and Elements

This section focuses on aligning columns and elements within the webpage layout.

Aligning Columns

Select each column individually.

Set vertical alignment to "middle" for each column.

Aligning Elements

For buttons, set vertical alignment to "middle".

[t=0:57:12s] Styling Typography and Colors

Here, you will learn how to style typography and colors on your webpage.

Adjusting Typography

Modify font weight by changing it from 600 to 500 for a lighter appearance.

Changing Colors

Change background color when hovering over an element by selecting "on hover" option.

Set background color using a specific color code or reference an existing color from your logo.

Update text color as desired.

[t=0:58:37s] Customizing Active State

This section covers customizing the active state of elements on your webpage.

Modifying Text Color

Change text color for active state by selecting "active" option.

Choose desired color, such as yellow, for text in active state.

Modifying Background Color

Set white as background color for active state of elements.

[t=0:59:19s] Adding WhatsApp Link

Here, you will learn how to add a WhatsApp link to a button on your webpage.

Creating WhatsApp Link

Generate a WhatsApp link using the format: https://wa.me/country_code/phone_number.

Replace "country_code" with the appropriate code and "phone_number" with the desired number.

Apply the generated link to the button's URL field.

[t=1:00:08s] Adjusting Button Size and Color

This section focuses on resizing and changing colors of buttons on your webpage.

Resizing Buttons

Decrease button size by adjusting dimensions as needed.

Changing Button Color

Modify button color by selecting desired color or referencing an existing color from your design.

[t=1:00:30s] Adding Icon to Button

In this section, you will learn how to add an icon to a button on your webpage.

Selecting Icon

Choose a suitable icon from the available options.

[t=1:01:17s] Making Website Responsive for Tablets

This section covers making your website responsive for tablet devices.

Setting Breakpoint

Set breakpoint to "tablet" in order to customize layout for tablets.

[t=1:02:29s] Making Website Responsive for Mobile Devices

Here, you will learn how to make your website responsive for mobile devices.

Adjusting Column Sizes

Resize columns individually to achieve desired layout on mobile devices.

[t=1:03:30s] Previewing Responsive Design

This section demonstrates previewing the responsive design of your website across different devices.

Previewing Tablet View

Use preview mode and select "tablet" view option.

[t=1:04:00s] Creating Homepage

In this section, the speaker explains how to create a homepage for your website.

Accessing Page Settings

Navigate to the "Pages" section of the website builder.

The transcript ends abruptly and does not provide further details on creating the homepage.

Creating a Header and Formatting the Background

In this section, the speaker explains how to create a header and format the background of a document using an editor.

Creating a Header and Setting the Background

To create a header, start by dividing the document into nine squares.

Use an editor to search for the "list" button in one of the squares.

Click on the "list" button to add a header.

Move to the section with three dots and select "height."

Set the minimum height for the header, such as 450 pixels.

Go to the "style" section and choose a background option, such as "slide show."

Upload three images by selecting them while holding down the control key.

This can be done by clicking on each image individually or uploading them all at once.

Create a new gallery with these images and insert it into the document.

The order of images can be adjusted within the gallery if desired.

Configure additional settings such as background size, position, transition effect, and slide duration.

Configuring Background Settings

In this section, we learn how to configure various background settings for our document.

Configuring Background Settings

Adjust background size to cover or fit based on preference.

Choose different positions for background alignment (e.g., center).

Enable lazy loading for images that are further down in the document.

Apply Ken Burns effect for subtle movement in images within slideshows.

Adjust timing between image transitions (e.g., every 5 seconds).

Change transition effects from fade to slide down or slide right.

Adding Color and Gradient Effects

In this section, we explore how to add color and gradient effects to the background.

Adding Color and Gradient Effects

Set a solid color for the background by choosing a classic color option.

For example, select black as the background color.

Alternatively, choose a gradient effect for the background.

Select the desired colors for the gradient (e.g., yellow).

Adjust the angle of the gradient if necessary.

Formatting Text and Buttons

In this section, we learn how to format text and buttons within our document.

Formatting Text and Buttons

Copy and paste text into the designated area on the left side of the screen.

Apply desired styles to text, such as changing font color or size.

Edit button text by replacing it with "Contact" in this case.

Customize button design by selecting different styles or adding icons if desired.

Configure button behavior by setting an appropriate link destination (e.g., contact page).

Styling Buttons with Hover Effects

In this section, we explore how to add hover effects to buttons for enhanced styling.

Styling Buttons with Hover Effects

Access button styles under "Styles" in order to modify appearance when hovering over them.

Change background color to white and text color to bold when hovering over buttons.

Adjust border settings as needed (e.g., continuous border with a width of 2 pixels).

Adding Dividers and Additional Styles

In this section, we learn how to add dividers and apply additional styles to our document.

Adding Dividers and Additional Styles

Use dividers in various shapes like triangles or curves for visual separation between sections.

Choose the desired style for dividers, such as "waves."

Adjust the height of dividers to achieve the desired visual effect.

Increase the overall height of the document if needed.

Finalizing and Reviewing the Document

In this section, we finalize our document and review its appearance.

Finalizing and Reviewing the Document

Increase the height of the header section slightly for better visibility.

Save changes and preview the document in client view mode.

Ensure that all formatting and styling adjustments have been applied correctly.

Configuring Services

The speaker discusses configuring various elements of a project, such as text styles, colors, and margins.

Changing Text Styles and Colors

Adjusted the font color to yellow for better visibility.

Increased the font size of the header to 20.

Added a margin of 40 pixels at the top to create space between elements.

Creating Columns and Adding Images

Generated three columns for content placement.

Inserted an image of an electricity icon and labeled it accordingly.

Duplicated the image for other services like plumbing and painting.

Responsive Design

Tested the design on different devices, focusing on mobile responsiveness.

Made adjustments to font sizes and spacing specifically for mobile devices.

Adding Quick Solutions Section

The speaker demonstrates how to add a section called "Quick Solutions" with two columns containing images and corresponding text.

Adding Images and Text

Uploaded an image for the left column.

Duplicated the text from another section to populate the right column with "Quick Solutions" text.

Formatting Text

Changed the capitalization of "Quick Solutions" text to lowercase.

Aligned the text in both columns to be left-aligned.

These are key points from specific timestamps in the transcript that provide an overview of configuring services and adding a quick solutions section.

Creating Icon List and Pricing Section

In this section, the speaker discusses creating an icon list for a guarantee and competitive pricing. They also mention copying and pasting information.

Icon List for Guarantee and Competitive Pricing

The speaker suggests deleting three items and starting with the first item, which is a list of icons for a guarantee.

They mention duplicating the "competitive pricing" item.

The speaker notes that the information provided is fake and simulated, as it is not a real company.

They mention having 24-hour customer service.

Adjusting Colors and Margins

In this section, the speaker focuses on adjusting colors and margins to improve the appearance of the design.

Adjusting Background Color and Margins

The speaker mentions that the design needs more space between elements.

They select six dots to access advanced options.

The speaker adjusts margins to create space between sections.

They also adjust internal padding using the "padding" option in advanced settings.

Applying Gradient Background Color

In this section, the speaker demonstrates how to apply a gradient background color to enhance the design.

Applying Gradient Background Color

The speaker selects "background layer" in style settings.

They choose a gradient color scheme with shades of gray.

The gradient can be adjusted by changing angles or selecting different styles (e.g., radial).

Adding Internal Spacing with Padding

In this section, the speaker explains how to add internal spacing using padding settings.

Adding Internal Spacing with Padding

The speaker wants to add spacing within sections using padding.

They adjust the padding settings to create internal spacing above and below elements.

The speaker demonstrates how to adjust padding for specific sections or columns.

Customizing Background Gradient and Alignment

In this section, the speaker continues customizing the background gradient and alignment options.

Customizing Background Gradient and Alignment

The speaker adjusts the gradient colors by changing angles or selecting different styles (e.g., radial).

They demonstrate various alignment options such as center, left, right, top, bottom.

The speaker mentions that these customization choices depend on personal preferences.

Adjusting Column Spacing

In this section, the speaker focuses on adjusting column spacing to improve layout appearance.

Adjusting Column Spacing

The speaker selects six dots to access advanced options.

They navigate to "column spacing" under disposition settings.

By choosing "width," they can adjust the space between columns.

Saving Changes and Previewing Design

In this section, the speaker saves changes made so far and previews how the design looks in a client view.

Saving Changes and Previewing Design

The speaker suggests saving progress before previewing.

They mention checking how the design appears in different views (e.g., mobile).

Adding Testimonials Section

In this section, the speaker explains how to add a testimonials section with customer satisfaction information.

Adding Testimonials Section

The speaker creates a new single-column section for testimonials.

They copy existing content into this new section using copy-paste functionality.

Using Inner Section for Testimonials

In this section, the speaker demonstrates using an inner section to organize testimonials within a single column.

Using Inner Section for Testimonials

The speaker adds an inner section below the "clients satisfied" text.

This inner section helps keep all elements within the same section.

Adding Customer Reviews

In this section, the speaker explains how to add customer reviews or recommendations to the testimonials section.

Adding Customer Reviews

The speaker searches for a suitable element called "review" or "recommendation."

They drag and drop the chosen element into the inner section.

The speaker customizes the review by adding an image, name, company name, and opinion.

Customizing Review Style

In this section, the speaker focuses on customizing the style of customer reviews in terms of appearance and rating.

Customizing Review Style

The speaker explores different pre-set styles available under "style" settings.

They choose a preferred style for customer reviews.

Duplicating Testimonial Columns

In this section, the speaker duplicates testimonial columns to add more testimonials.

Duplicating Testimonial Columns

The speaker duplicates columns within the testimonial section to accommodate more testimonials.

Duplicating Testimonial Elements

In this section, the speaker duplicates individual testimonial elements to further expand on testimonials.

Duplicating Testimonial Elements

The speaker duplicates each testimonial element within columns to create additional testimonials.

Previewing Responsive Design

In this section, the speaker previews how the design appears on mobile devices.

Previewing Responsive Design

The speaker checks how the design looks on a mobile device.

Final Adjustments and Conclusion

In this section, the speaker makes final adjustments and concludes the tutorial.

Final Adjustments and Conclusion

The speaker suggests making any necessary changes to images or other elements.

They conclude the tutorial by mentioning that further customization is possible based on individual preferences.

Creating the Homepage and Footer

In this section, the speaker discusses creating the homepage and footer of a website using Elementor.

Creating the Footer

Create a new page for the footer by going to "Elementor Header and Footer" in the Appearance menu.

Add a new template for the footer and select "Footer" as the template type. Set it to display on all pages.

Edit the footer with Elementor to design its layout.

Designing the Footer

Divide the footer into four columns.

In the first column, add a logo using an image widget from Elementor's library.

Add a text editor widget in another column for links, such as "Home," "About Us," and "Blog."

Use an icon list widget to create links for each section, such as linking "Home" to the homepage.

Duplicate this section for additional columns like contact information or social media icons.

Customizing Elements

Adjust spacing, alignment, and size of elements using advanced settings like padding, margins, background color, font size, etc.

Customize each element individually by selecting it and modifying its properties.

Styling and Final Touches

Change colors of icons or text by accessing their style settings.

Remove unnecessary icons or elements by clicking on them and selecting delete.

Preview changes before saving them.

Adding Copyright Information

In this section, the speaker explains how to add copyright information at the bottom of a webpage using Elementor.

Adding Copyright Text

Create a new single-column section at the bottom of your webpage.

Add a heading widget within this section with appropriate text (e.g., "Developed by [Your Name]").

Format it as an H2 tag for semantic purposes.

Customize the background color of the section to black or any desired color.

Adjust the height of the section as needed.

Modify the text properties, such as font size and color, using Elementor's style settings.

Finalizing the Footer

Align the copyright text to the left within its section.

Add social media icons by using an icon list widget and selecting relevant platforms like Facebook, Instagram, TikTok, etc.

Provide URLs for each platform to link them correctly.

Preview and save changes.

The transcript provided is in a language other than English. The summary has been translated into English for clarity.

Designing the "About Us" Page

In this section, the speaker discusses the process of designing the "About Us" page using Elementor.

Designing the Header

Set up a single column layout for the "About Us" page.

Add a heading element (h1) with the text "About Us".

Customize the background image and adjust its size and position.

Set a background color for the section.

Adding Content

Create two columns below the header.

In the first column, add an image representing your team or company.

In the second column, add a title such as "Who We Are".

Copy and paste content from another page (e.g., Home page) to provide more information about your services or company.

Adding Icons and Text

Add three columns at the bottom of the page.

Use an icon box widget to represent different aspects (e.g., mission, vision, objectives).

Customize each icon box by changing its color, shape, and size.

Duplicate and modify each icon box to represent different content (e.g., vision, objectives).

Adjusting Spacing

Add spacing between sections using advanced settings in Elementor.

Adjust margins to create space between elements.

Mobile Responsiveness

This section focuses on optimizing mobile responsiveness for better user experience.

Adding Spacers

Insert spacer elements between sections to create vertical spacing on mobile devices.

Set a height of 30 pixels for spacers in specific sections like "Mission".

Customizing Mobile View

Use advanced settings in Elementor to customize how certain elements appear on mobile devices only.

For example, hide certain sections or adjust font sizes specifically for mobile view.

Saving as a Template

Save the "About Us" page design as a template for future use.

Click on the three dots in Elementor and select "Save as Template".

Give it a meaningful name, such as "About Us Template".

Reviewing Progress and Next Steps

The speaker reviews the progress made so far and discusses the next steps.

Saving as a Template (Continued)

Save the customized header section of the "About Us" page as a separate template.

Right-click on the header section, select "Save as Template", and name it accordingly.

Continuing with Other Pages

Check which other pages need to be designed or modified.

Use previously saved templates to speed up the process.

Ensure consistency in design across all pages.

Timestamps are approximate and may vary slightly.

Creating Pages for Different Services

In this section, the speaker discusses how to create pages for different services using Elementor and Gutenberg.

Creating a Page for Plumbing Service

To create a page for plumbing service, go to "Plugins" and click on "Add New".

Install the Spectra plugin.

Go to "Pages" and select the page where you want to add the plumbing service.

Click on the "+" button and choose "More".

Select "Container" and choose two columns layout.

Add an image from the media library related to plumbing service.

Add a header from Spectra templates and change the text to "Plumbing Service".

Add some placeholder text or any desired content below the header.

Customize the button by selecting a preset style or creating a custom one.

Set up the link of the button to redirect it to another page, such as a contact page.

Adding Styling and Functionality

Adjust styling options like color, size, background, etc., for elements like buttons.

Update settings like opening links in new windows or adding nofollow attributes if necessary.

Customizing Buttons

This section focuses on customizing buttons on webpages created using Elementor or Gutenberg.

Editing Button Styles

Click on the button element you want to customize.

Go to settings by clicking on the gear icon at the top panel of Elementor/Gutenberg editor.

Explore pre-designed styles available under presets or create a custom style according to preference.

Linking Buttons

Set up links for buttons by entering URLs or copying them from other pages.

Customizing Box Shadows and Spacing

In this section, the speaker discusses how to customize box shadows and spacing in HTML using advanced options in Gutenberg.

Customizing Box Shadows and Spacing

To customize box shadows and spacing, go to the "Advanced" section in Gutenberg.

The "Advanced" section allows you to add anchors, links, classes, and more.

You can assign a class to elements if you want to use CSS or JavaScript for specific calls.

Edit the button by selecting its container and applying global alignment options.

Update the changes by clicking on the "Update" button.

Editing Button Styles

This section focuses on editing button styles by modifying their alignment and other properties.

Editing Button Styles

Buttons have a container that can be edited separately from the button itself.

Adjust the alignment of the container to left align it.

Explore additional options available for buttons such as updating, refreshing, etc.

Adding Elements with Spectra

Here, the speaker explains how to add elements using Spectra in Gutenberg.

Adding Elements with Spectra

Click on the "+" icon at the bottom of the page to add new elements.

Select "Container" option from the available choices.

Add three containers by clicking on "+", then select "View All".

Choose a desired container style such as "Info Box".

Customizing Info Boxes

This section covers customizing info boxes by applying different styles and settings using Spectra.

Customizing Info Boxes

Select an info box element and apply desired styles from presets.

Activate image and icon options, and choose their positions.

Adjust the size of the image to "Full".

Align the content to the center.

Enable prefix option for additional text.

Customize separator style and position as needed.

Set custom width for images if desired.

Applying Styles to Multiple Elements

Here, the speaker demonstrates how to apply styles to multiple elements at once using Spectra.

Applying Styles to Multiple Elements

Copy the style from one element using the brush icon.

Paste the style onto another element using the brush icon again.

Apply styles individually to each image element.

Finalizing Changes and Previewing Mobile Version

This section covers finalizing changes made with Spectra in Gutenberg and previewing them on mobile devices.

Finalizing Changes and Previewing Mobile Version

Click on "Update" button to save all changes made with Spectra.

Use the "Mobile Version" option at the top of Gutenberg editor to preview changes on mobile devices.

Gutenberg vs. Elementor

The speaker discusses Gutenberg's role in adding more options and elements to Gutenberg editor, while expressing concerns about its impact on Elementor.

Gutenberg vs. Elementor

Spectra enhances Gutenberg by providing more options and elements.

However, there are still some limitations in Gutenberg compared to Elementor.

The choice between Gutenberg and Elementor depends on project requirements and personal preferences.

Conclusion

The transcript provides a comprehensive guide on customizing box shadows, spacing, editing button styles, adding elements with Spectra, customizing info boxes, applying styles to multiple elements, finalizing changes, previewing mobile version, and a comparison between Gutenberg and Elementor.

[t=1:59:42s] Adding and Editing Blog Posts

In this section, the speaker discusses how to add and edit blog posts on a website using WordPress.

Adding New Blog Posts

To add new blog posts, go to the "Posts" section in WordPress.

Click on "Add New" to create a new post.

Enter the desired content for the post, including text and images.

Set a featured image for the post by clicking on "Set Featured Image" and selecting an image from your media library.

Publish the post by clicking on "Publish".

Editing Blog Posts

To edit an existing blog post, go to the "Posts" section in WordPress.

Find the desired post and click on it to open the editing interface.

Make any necessary changes to the content of the post, such as updating text or images.

Update the featured image if needed.

Save or publish the changes.

[t=2:01:06s] Customizing Blog Layout with Elementor

In this section, the speaker explains how to customize the layout of a blog page using Elementor.

Using Elementor for Blog Layout

Go to your website's dashboard and navigate to Pages > All Pages > Blog Page (or any other relevant page).

Click on "Edit with Elementor" to open Elementor's editing interface for that page.

Choose a layout template from Elementor's library or create a custom layout using various elements available.

Customize each element according to your preferences, such as adjusting font size, colors, spacing, etc.

Save or update your changes.

[t=2:03:19s] Styling Blog Titles with Spectra

In this section, the speaker demonstrates how to style blog titles using Spectra.

Styling Blog Titles

In the Elementor editing interface, locate the blog title element.

Customize the typography, color, and spacing of the title.

Optionally, add hover effects to make the title change appearance when hovered over.

Save or update your changes.

[t=2:04:40s] Configuring Blog Post Grid with Spectra and Gutenberg

In this section, the speaker explains how to configure a blog post grid using Spectra and Gutenberg.

Configuring Blog Post Grid

In the Elementor editing interface, add a "Post Grid" element to your layout.

Configure settings such as the number of posts to display, sorting options, and design preferences.

Choose whether to show or hide post images, titles, metadata, and read more buttons.

Adjust other design elements like borders and spacing as desired.

Save or update your changes.

[t=2:05:56s] Customizing Individual Blog Posts with Gutenberg

In this section, the speaker discusses customizing individual blog posts using Gutenberg.

Customizing Individual Blog Posts

Open an existing blog post in WordPress's Gutenberg editor.

Remove any default content generated by Gutenberg if not needed for customization purposes.

Make desired changes to the content of the blog post by adding text or media elements.

Customize formatting options such as font styles, alignment, headings, etc., using Gutenberg's block editor features.

Save or update your changes.

The transcript provided does not cover all aspects of creating and customizing a blog. It focuses on specific topics related to adding/editing posts and customizing layouts.

Curso de WordPress Avanzado

In this section, the speaker discusses advanced features and customization options in WordPress.

Customizing Post Display

By default, 6 posts are displayed on the category page.

Posts can be sorted by title, random order, or date (ascending or descending).

The height of post excerpts and images can be adjusted.

Options to show author name, dates, taxonomy categories, icons, and excerpts are available.

"Read More" links can be customized with pre-defined styles or edited manually.

Conditional display settings based on user roles, browsers, or operating systems are possible.

Improving Blog Layout

The speaker demonstrates how to adjust the layout of individual blog posts using Elementor and Spectra plugins.

Free plugins have limitations compared to premium ones like Crocoblock or Elementor Pro.

Appearance settings for blog layout can be accessed through the WordPress customizer.

Content boxes and sidebar placement can be configured for a better visual presentation.

Customizing Colors

Global color settings can be modified in the WordPress customizer under "Colors".

Specific elements like links can be individually changed by selecting them and choosing a new color.

Enhancing Website Design

In this section, the speaker discusses further improvements to website design using widgets and additional customization options.

Widget Customization

Widgets allow for customization of various sections on the website.

Recent posts widget appearance can be modified by changing colors and font weight.

However, excessive modifications may result in an unappealing design.

Adjusting Content Settings

Individual post content settings can be accessed through widget configuration options.

Options include showing excerpts or full content, displaying author names and dates,

adjusting image thumbnail size and alignment.

Customizing Colors (Continued)

Color customization options are available in the WordPress customizer under "Colors".

Specific elements like links can be individually changed by selecting them and choosing a new color.

Final Touches and Conclusion

In this section, the speaker concludes the tutorial by making final adjustments to the website design.

Final Adjustments

The speaker removes excessive formatting from recent posts widget.

Additional adjustments can be made to improve the overall appearance of the website.

These include modifying colors, font styles, and other design elements.

Premium Plugins vs. Free Plugins

The speaker mentions that using premium plugins like Crocoblock or Elementor Pro would provide more flexibility and advanced features.

However, free plugins can still achieve satisfactory results with some limitations.

Wrapping Up

The speaker encourages further exploration and experimentation with website design.

Additional improvements can be made using premium plugins or alternative page builders like Bricks or Oxygen.

Timestamps have been associated with relevant bullet points as per the provided transcript.

Creating a Blog with Spectra and Elementor

In this section, the speaker discusses how to create a blog using Spectra and Elementor.

Installing WP Forms Plugin

Install the WP Forms plugin by going to Plugins > Add New.

Search for "wp forms" and click on the plugin.

Click on "Install Now" and then "Activate".

Creating a Contact Form

Go to WP Forms > Add New to create a new form.

Choose the "Contact Form" template.

Customize the form by adding fields such as name, email, comment, and message.

Add an additional field for phone number and make it mandatory.

Save the form.

Adding Contact Form to Website

Copy the shortcode provided for the contact form.

Edit the contact page with Elementor.

Insert a two-column layout and add the contact form shortcode in one column.

Align the form to the left side of the column.

Add text content from another page using Elementor's copy-paste feature.

Migrating to Hosting with Domain

This section covers migrating a website to hosting with a domain.

Understanding Hosting and Domain

A hosting is where all website files are stored on an internet server. It is like an online hard drive for your website content.

A domain is the URL or web address that people use to access your website. It is your website's name in internet terms (e.g., amazon.com).

Acquiring Hosting and Domain

Choose a reliable hosting provider (link provided in video description).

Select a plan that suits your needs, considering factors like price and features offered.

Enter desired domain name during signup process (.com, .mx, .es, etc.).

Provide necessary information and payment details to complete the purchase.

Understanding Hosting and Domain

This section provides a detailed explanation of hosting and domain.

Hosting

Hosting is the space on the internet where all website files are stored.

It acts as a virtual hard drive for your website's content.

The cost of hosting can vary but is typically around $60 per year.

Domain

A domain is the URL or web address that people use to access your website.

Examples include .com, .org, .net, .store, etc.

Domains usually cost around $13 per year.

Acquiring Hosting and Domain

This section explains how to acquire hosting and domain.

Choosing a Hosting Provider

Use the provided link in the video description to access a reliable hosting provider.

Explore different plans and select one that suits your needs.

Enter desired domain name during signup process (e.g., example.com).

Completing Purchase

Provide required information during signup process.

Enter payment details to complete the purchase.

Review the summary of your purchase before finalizing it.

The transcript contains additional information about installing an online store theme and adding products, which will be covered later in the video.

Setting up the Domain

The speaker explains how to set up a domain and register it.

Registering the Domain

Click on the domain registration link.

The registered domain will automatically appear.

Continue by clicking "Next" and then select "Skip and create an empty site".

Finally, click on "Finish".

SSL Certificate

The speaker discusses the importance of SSL certificates for website security.

Enabling SSL Certificate

Go to Side Tools > Security > SSL Manager.

Select your domain and choose "Let's Encrypt SSL".

Click on "Obtain" to activate the green security lock icon.

Some hosting providers offer free SSL certificates, so be cautious of additional charges.

Troubleshooting Installation Issues

The speaker addresses potential installation issues and advises patience when setting up a new domain.

Installation Troubleshooting Tips

If installation fails, try again multiple times.

New domains may take some time (a few minutes or hours) to function properly due to DNS propagation.

Wait for a few hours if necessary before retrying the installation process.

WordPress Installation

The speaker demonstrates how to install WordPress on the newly created site.

Installing WordPress

Access the Site Tools section or go to WordPress in the dashboard.

Click on "Install & Manage" > "WordPress".

Provide a username, password, and email address for your WordPress account.

Uncheck unnecessary options and click on "Install".

Migrating WordPress Site

The speaker explains how to migrate a WordPress site from localhost to a live hosting environment.

Migrating the Site

Install the "All-in-One WP Migration" plugin.

Export the site from localhost as a file.

Import the file into the live WordPress installation using the same plugin.

Choosing a Hosting Provider

The speaker recommends a reliable and fast hosting provider for WordPress websites.

Recommended Hosting Provider

The recommended hosting provider offers excellent speed and security.

It is suitable for both budget-conscious users and those prioritizing security.

Consider using this hosting provider for optimal performance.

Final Steps

The speaker concludes by emphasizing patience during the migration process and proceeding with the import.

Completing the Migration

Wait for a few seconds while the migration process finishes.

Click on "Proceed" to complete the migration.

Configuring Permalinks and Accessing the Admin Panel

The speaker discusses how to configure permalinks and access the admin panel.

Configuring Permalinks

To configure permalinks, go to "Settings" and then "Permalinks".

Enter your username in the field provided.

Click on "Save Changes".

Accessing the Admin Panel

If you don't remember how to access the admin panel, click on "Side Tools" in the administration panel.

This will automatically take you to the admin panel.

Once in the admin panel, navigate to "Settings" and then "Permalinks".

Scroll down and click on "Save Changes".

Troubleshooting Common Issues with Permalinks and Elementor

The speaker addresses potential errors related to permalinks and provides troubleshooting tips for Elementor.

Troubleshooting Permalink Errors

Sometimes, there may be errors related to permalinks. Most of these can be resolved by configuring permalinks correctly.

If styles or elements are not loading properly, go to Elementor > Tools > Regenerate. Click on "Regenerate" and then "Save".

Customizing Snippets for SEO Purposes

The speaker explains how to customize snippets for better SEO visibility.

Editing Snippets

Go to the homepage of your website.

Locate the page titled "Proyecto 2" (Project 2).

Click on it and select "Edit Snippets".

Modifying Title and Description

Change the title according to your business name or project.

Modify the description with relevant information about your services.

Ensure the title length is between 59 and 60 characters.

Add a description that highlights your company as a provider of plumbing, electrical, and painting services.

Installing RamMad for SEO

The speaker discusses the installation of RamMad for SEO purposes.

Installing RamMad Plugin

Go to "Plugins" and click on "Add New".

Search for the "RamMad" plugin and install it.

Enhancing Security with SiteGround Optimizer and SiteGround Security

The speaker explains how to enhance security using SiteGround Optimizer and SiteGround Security plugins.

Activating Security Plugins

Go to "Plugins" and activate both the "SiteGround Optimizer" and "SiteGround Security" plugins.

Configuring Security Settings

Configure security settings by going to the respective plugin's configuration page.

Customize login URL to add an extra layer of security.

Limit access attempts to prevent unauthorized login attempts.

Adding WooCommerce Plugin for Online Store

The speaker demonstrates how to add the WooCommerce plugin for creating an online store.

Installing WooCommerce Plugin

Go to "Plugins" and click on "Add New".

Search for the "WooCommerce" plugin and install it.

Setting up WooCommerce

In this section, the speaker explains how to set up WooCommerce and add necessary pages to the online store.

Adding Store Functionality with WooCommerce

WooCommerce adds online store functionalities to a website.

Skip the initial setup by clicking on "Skip" when prompted.

Go to "Pages" in the WordPress dashboard to find new pages created by WooCommerce.

Adding Pages for Store Functionality

Under "Appearance", click on "Menus".

Add new pages such as "Shop" and "My Account" using the menu editor.

Save changes and preview the project to see the newly added pages.

Adding Products to the Store

This section focuses on adding products to the online store using WooCommerce.

Adding Products

Go to "Products" in the WordPress dashboard and click on "Add New".

Fill in product details such as name, price, description, and featured image.

Publish the product.

Displaying Products on Website

Visit your website's shop page and refresh if necessary.

If products do not appear, go to "Settings" > "Permalinks" and save changes.

Refresh the shop page again to display products.

Finalizing Purchase Process

The speaker demonstrates how customers can finalize their purchases on an online store created with WooCommerce.

Testing Purchase Process

Click on a product and add it to cart.

View cart, proceed to checkout, and complete purchase process.

Conclusion

The transcript provides instructions for setting up an online store using WooCommerce. It covers adding necessary pages for store functionality, adding products, and finalizing purchases. Following these steps will help users create a functional online store using WooCommerce.