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

Introducción al curso de WordPress

Resumen de la sección: En esta sección introductoria, el instructor explica que en el curso se trabajarán en dos proyectos utilizando WordPress. El primer proyecto utilizará un tema gratuito llamado Cadens, mientras que el segundo proyecto será creado desde cero con colores amarillos. Se utilizarán las herramientas Elementor y Gutenberg para diseñar los proyectos, y se trabajará en un servidor local con XAMPP.

¿Qué es WordPress?

• WordPress es un sistema de gestión de contenido (CMS) que permite crear y mantener blogs y otros tipos de sitios web.

• Inicialmente diseñado para blogs, WordPress ha evolucionado para incluir características como páginas estáticas, tiendas en línea y más.

• Con complementos adicionales, es posible crear una amplia variedad de sitios web personalizados.

Ventajas y desventajas de WordPress

• Ventajas:

• Rápido, eficiente y económico.

• Amplia gama de complementos disponibles.

• Puede adaptarse a diferentes tipos de proyectos.

• Desventajas:

• Limitaciones en la personalización completa.

• No es utilizado por grandes empresas para soluciones a medida.

Instalación de WordPress

• Dos opciones para instalar WordPress:

• Localhost: Instalar programas como XAMPP o MAMP en tu computadora para crear un servidor local.

• Hosting y dominio: Comprar un hosting y dominio para instalar WordPress directamente en un servidor remoto.

Migración a un Hosting

Resumen de la sección: En esta sección, el orador menciona que migrará el sitio web a un hosting para que pueda ser accesible para todo el mundo. Explica que instalará WordPress y proporciona instrucciones sobre cómo descargarlo desde wordpress.org.

Instalación de WordPress

• Se debe acceder al sitio web wordpress.org para descargar WordPress.

• En la página principal de wordpress.org, se encuentra la opción "Consigue WordPress" donde se puede descargar.

• Hay diferentes versiones disponibles para Windows, Linux y Mac. Se recomienda utilizar la versión más reciente.

• Si hay problemas con la última versión, se pueden encontrar versiones anteriores en la sección de descargas adicionales.

Descarga de XAMPP

Resumen de la sección: El orador explica que es necesario descargar XAMPP, un servidor local, para trabajar con WordPress en localhost. Proporciona instrucciones sobre cómo descargar e instalar XAMPP.

Descarga de XAMPP

• Se debe acceder al sitio web Apache Friends (apachefriends.org) y seleccionar la versión adecuada de XAMPP (por ejemplo, 8.2).

• Después de descargar el archivo, se procede a instalarlo siguiendo las indicaciones del asistente de configuración.

• Durante la instalación, se seleccionan los componentes necesarios como Apache (servidor web), MySQL (base de datos) y PHP.

• También se puede optar por instalar phpMyAdmin, una interfaz gráfica para administrar MySQL.

Instalación de XAMPP

Resumen de la sección: El orador muestra el proceso de instalación de XAMPP en Windows. Selecciona las opciones predeterminadas y espera a que finalice la instalación.

Proceso de instalación

• Al ejecutar el archivo descargado, se inicia el asistente de configuración.

• Se siguen las instrucciones del asistente, aceptando los términos y condiciones.

• Durante la instalación, se selecciona la carpeta de destino (se recomienda dejarla por defecto).

• Se elige el idioma (inglés) y se completa la instalación esperando a que finalice.

Solución de problemas durante la instalación

Resumen de la sección: El orador menciona que es posible encontrar errores durante la instalación y ofrece algunas soluciones comunes. Recomienda buscar en Google para obtener más información sobre cómo solucionar problemas específicos.

Solución de errores

• Si ocurren errores durante la instalación, es recomendable reiniciar la computadora o desinstalar programas como Skype.

• En algunos casos, puede ser necesario desinstalar completamente XAMPP y volver a instalarlo.

• También es posible optar por instalar una versión anterior de XAMPP si se experimentan problemas con la última versión.

Acceso al panel de control de XAMPP

Resumen de la sección: El orador muestra cómo acceder al panel de control de XAMPP después de completar la instalación. Explica que si no aparece automáticamente, se puede buscar en las carpetas del sistema operativo.

Acceso al panel de control

• Después de completar la instalación, se puede acceder al panel de control de XAMPP.

• Si el acceso directo no aparece, se puede buscar en las carpetas del sistema operativo (por ejemplo, utilizando la búsqueda).

• Al abrir el panel de control, se tiene acceso a diferentes opciones y configuraciones relacionadas con Apache, MySQL y otros componentes de XAMPP.

Este resumen cubre los aspectos principales del video y proporciona una visión general del proceso de migración a un hosting y la instalación de XAMPP. Se recomienda ver el video completo para obtener información más detallada y seguir las instrucciones paso a paso.

Solución de errores de permisos y conflictos

Resumen de la sección: En esta parte del video, se aborda cómo solucionar errores relacionados con permisos y conflictos en el servidor.

Soluciones para errores de permisos

• Desinstalar e instalar nuevamente el software.

• Reiniciar la computadora y probar nuevamente.

• Verificar si hay programas instalados que puedan generar conflictos, como Skype, y desinstalarlos.

• Cambiar los puertos en la configuración del servidor para evitar conflictos. Esto se realiza modificando los archivos http.com y http raya al medio ssl comf.

Soluciones para conflictos en el servidor

• Cambiar los puertos en el archivo http.com mediante la edición manual del archivo.

• Modificar el archivo http raya al medio ssl comf cambiando los puertos correspondientes.

• Reiniciar el servidor después de realizar los cambios.

Instalación de WordPress utilizando XAMPP

Resumen de la sección: En esta parte del video, se explica cómo instalar WordPress utilizando XAMPP como servidor local.

Descarga e instalación de WordPress

• Descargar WordPress desde su página oficial (wordpress.org).

• Extraer la carpeta descargada y cambiarle el nombre si se desea.

• Copiar la carpeta a la ubicación adecuada dentro del directorio htdocs del servidor local (por ejemplo, C:xampphtdocsproyecto1).

Creación de una base de datos para WordPress

• Acceder a phpMyAdmin desde XAMPP.

• Crear una nueva base de datos con un nombre relevante para el proyecto (por ejemplo, "proyecto1").

Instalación de WordPress

• Abrir el navegador y acceder a localhost/nombre_de_la_carpeta (por ejemplo, localhost/proyecto1).

• Seguir las instrucciones del instalador de WordPress para configurar la conexión con la base de datos y crear un usuario administrador.

• Una vez completada la instalación, se puede acceder al sitio web de WordPress desde el navegador.

Verificación del funcionamiento del servidor

Resumen de la sección: En esta parte del video, se muestra cómo verificar que el servidor esté funcionando correctamente.

• Acceder al navegador y escribir "localhost/nombre_de_la_carpeta" en la barra de direcciones.

• Presionar Enter para cargar la página.

• Si no se muestra correctamente, forzar la carga utilizando "http://localhost".

• Si aún persisten los problemas, revisar los pasos anteriores y asegurarse de haber seguido correctamente las instrucciones.

Instalación alternativa con Laragon

Resumen de la sección: En esta parte del video, se menciona una alternativa a XAMPP para instalar y configurar un entorno local utilizando Laragon.

• Descargar e instalar Laragon desde su página oficial o buscándolo en Google.

• Seguir los pasos proporcionados por Laragon para configurar el entorno local y realizar la instalación de WordPress u otros proyectos.

Instalación de WordPress

Resumen de la sección: En esta sección, se explica cómo instalar WordPress en un servidor local.

Configuración de la instalación

• Dejar en blanco el campo de contraseña y prefijo de tabla.

• Rellenar los campos con el nombre de usuario, contraseña y correo electrónico deseados.

• Hacer clic en "Instalar".

Acceso al escritorio de WordPress

• Ingresar con el nombre de usuario y contraseña establecidos anteriormente.

• El escritorio de WordPress es donde se administra todo el sitio web.

• La URL para acceder al sitio como visitante es localhost/Proyecto1.

• La URL para acceder al escritorio del administrador es localhost/Proyecto1/wp-admin.

Explorando el escritorio de WordPress

Resumen de la sección: En esta sección, se muestra cómo funciona el escritorio de WordPress y las diferentes opciones disponibles.

Elementos del escritorio

• En la columna izquierda se encuentran todas las opciones disponibles, como actualizaciones, entradas, medios, páginas, comentarios, apariencia, plugins, usuarios y herramientas.

• Las actualizaciones permiten mantener el software actualizado.

• Las entradas son utilizadas para crear publicaciones o artículos para el blog.

• Medios contiene todos los archivos multimedia del sitio web.

• Páginas permite crear páginas estáticas como inicio, servicios o contacto.

• Comentarios muestra los comentarios dejados por los visitantes del sitio web.

• Apariencia permite personalizar el aspecto visual del sitio web mediante temas (plantillas).

• Plugins son pequeñas aplicaciones que agregan funcionalidades adicionales al sitio web.

• Usuarios permite gestionar los usuarios con acceso al sitio web.

• Herramientas y ajustes ofrecen opciones adicionales de configuración.

Trabajando con temas y constructores en WordPress

Resumen de la sección: En esta sección, se explica cómo trabajar con temas y constructores en WordPress para personalizar el diseño del sitio web.

Opciones de trabajo

• Se pueden utilizar temas Premium comprados e instalados desde páginas especializadas.

• También se pueden utilizar temas gratuitos o Premium junto con un constructor como Elementor, Bricks o Gutenberg.

• Elementor es uno de los constructores más populares y ofrece una interfaz fácil de usar para personalizar el diseño del sitio web.

Mensaje sobre el cuidado de los animales

Resumen de la sección: En esta breve sección, se hace un llamado a tratar bien a los animales y ayudarlos si es posible.

Cuidado de los animales

• Se insta a ser amables con los animales y brindarles comida y agua si es posible.

• Se menciona la importancia de adoptar mascotas en lugar de abandonarlas.

The transcript provided does not have timestamps for all the sections.

Velocidad y opciones de constructores de páginas

Resumen de la sección: En esta sección, se discute la velocidad y las opciones de los constructores de páginas para proyectos grandes y pequeños. Se mencionan diferentes constructores como Elementor, Bricks, Oxygen y Gutenberg, destacando sus ventajas y desventajas.

Velocidad y opciones de constructores de páginas

• Elementor es fácil de utilizar y adecuado para proyectos pequeños.

• Bricks y Oxygen son más avanzados pero carecen de funciones completas en comparación con Elementor.

• Gutenberg ha mejorado pero aún tiene errores y no es tan completo como otros constructores.

• Se espera que Gutenberg gane fuerza en 2023 y 2024.

• Para el proyecto actual, se utilizará el editor por defecto Gutenberg junto con el tema Cadence.

Crear una web utilizando una plantilla gratuita con Gutenberg

Resumen de la sección: En esta sección, se muestra cómo crear una web utilizando una plantilla gratuita con el editor Gutenberg. Se utiliza el tema Cadence junto con las plantillas starter templates.

Crear una web utilizando una plantilla gratuita con Gutenberg

• Instalar el tema Cadence desde la sección "Apariencia" en WordPress.

• Activar el tema Cadence.

• Instalar las plantillas starter templates desde la opción "Instalar caddence starter templates".

• Elegir una plantilla gratuita que sea del agrado del usuario.

• Importar la plantilla seleccionada.

• Editar los elementos según sea necesario utilizando las opciones disponibles en Gutenberg o a través del personalizador.

Editar y personalizar la web con Gutenberg

Resumen de la sección: En esta sección, se muestra cómo editar y personalizar la web utilizando el editor Gutenberg. Se mencionan diferentes formas de editar los elementos, como cambiar el nombre de una página, utilizar el personalizador o editar directamente desde la opción "Páginas".

Editar y personalizar la web con Gutenberg

• Utilizar las opciones de edición rápida para cambiar el nombre de una página.

• Acceder al personalizador desde la sección "Apariencia" en WordPress.

• Utilizar las opciones disponibles en el personalizador para realizar cambios en la web.

• Editar directamente desde la opción "Páginas" en WordPress.

Visualización y solución de problemas

Resumen de la sección: En esta sección, se aborda cómo visualizar y solucionar problemas relacionados con la web creada con Gutenberg. Se menciona que algunos elementos pueden no mostrarse correctamente debido a ajustes en la pantalla.

Visualización y solución de problemas

• Ajustar correctamente la vista en pantalla para visualizar todos los elementos.

• Algunas zonas pueden no mostrarse debido a ajustes en pantalla, pero esto no afecta al funcionamiento general de la web.

Cambiar el diseño de la página de inicio

Resumen de la sección: En esta parte del video, el presentador muestra cómo cambiar el diseño de la página de inicio utilizando una URL y ajustando los colores. Luego, explica cómo actualizar los cambios realizados.

Cambiar la URL y los colores del diseño

• Se puede utilizar la opción "Cotizar" para cambiar la URL.

• Es posible ajustar los colores del diseño en esta sección.

• Al hacer clic en "Publicar" se guardan los cambios realizados.

Actualizar el texto de la página de inicio

• Para cambiar el texto en español, se debe acceder a la página de inicio desde las opciones de páginas.

• Se muestra cómo modificar el texto existente por uno nuevo, como por ejemplo "Limpieza Profesional".

• También es posible editar otros elementos como botones y zonas específicas.

Personalización adicional y uso de complementos

Resumen de la sección: En esta parte del video, se explora cómo personalizar otras áreas del sitio web y se introduce el uso de complementos adicionales.

Personalización adicional

• Se muestra cómo personalizar otras secciones del sitio web, como "Acerca de nosotros" y "Ver servicios".

• Es posible cambiar textos y botones según las preferencias.

• Los cambios pueden realizarse directamente desde estas opciones sin problemas.

Uso de complementos adicionales

• El presentador menciona que están trabajando con los complementos y bloques proporcionados por Cadence.

• Si se desea más funcionalidad, es posible agregar nuevos complementos escribiendo "Spectra" en la opción "Añadir nuevo".

• Se muestra cómo instalar y activar el complemento Spectra para tener más opciones de personalización.

Creación de un sitio web para una empresa de reparaciones del hogar

Resumen de la sección: En esta parte del video, se plantea el objetivo de crear un sitio web para una empresa que ofrece servicios de reparaciones del hogar. Se mencionan los elementos que se incluirán en el sitio web, como un blog, una tienda en línea, configuración SEO y seguridad.

Objetivo del proyecto

• El objetivo es crear un sitio web para una empresa que ofrece servicios de gasfitería, pintura, plomería y electricidad.

• Se utilizarán temas y complementos gratuitos.

• Se incluirá un blog y una tienda en línea.

• También se realizará la configuración SEO y se garantizará la seguridad del sitio web.

Instalación de WordPress

• Se muestra cómo descargar e instalar otra instancia de WordPress para este proyecto.

• El proceso es similar al realizado anteriormente en el proyecto uno.

• Se crea una nueva base de datos llamada "proyecto 2" en phpMyAdmin.

Conclusiones

En este video tutorial se explicó cómo cambiar el diseño de la página de inicio, personalizar diferentes áreas del sitio web y utilizar complementos adicionales. Además, se presentó el objetivo del proyecto dos, que consiste en crear un sitio web para una empresa de reparaciones del hogar con funcionalidades como blog, tienda en línea, configuración SEO y seguridad.

Instalación y personalización del tema Astra

Resumen de la sección: En esta sección, el presentador muestra cómo instalar y personalizar el tema Astra en WordPress.

Instalación del tema Astra

• Seleccionar el tema Astra para instalarlo.

• Activar el tema después de la instalación.

Personalización del logo

• Subir el logo desde la opción "Maquetador de cabeceras".

• Seleccionar y cargar el logo deseado.

• Omitir recorte si el logo ya está en las dimensiones correctas.

Configuración del icono del sitio

• Configurar el icono del sitio seleccionando la misma imagen que el logo.

• Publicar los cambios realizados.

Vista previa y configuración de páginas

• Ver cómo se ve el sitio con el nuevo logo.

• Crear nuevas páginas como "Inicio", "Blog", "Contacto" y servicios específicos (ejemplo: gasfitería, pintura, electricidad).

• Asignar una página estática como página de inicio en la configuración de lectura.

Creación y ordenamiento del menú de navegación

• Crear un nuevo menú con un nombre descriptivo.

• Agregar las páginas necesarias al menú.

• Ordenar las páginas según su posición deseada en la navegación.

Diseño personalizado con almohadilla Michi

Resumen de la sección: En esta sección, se muestra cómo realizar un diseño personalizado utilizando una almohadilla Michi en la URL.

Diseño personalizado con almohadilla Michi

• Ir a la sección de personalización del tema.

• Agregar una almohadilla Michi en la URL para obtener un diseño personalizado.

Actualización y visualización del proyecto

• Actualizar el proyecto para ver los cambios realizados.

• Verificar que al hacer clic en el logo, se redirija a la página de inicio correctamente.

Finalización y conclusiones

Resumen de la sección: En esta sección final, se concluye el proceso de instalación y personalización del tema Astra en WordPress.

Finalización del proceso

• Guardar los cambios realizados en la configuración del menú.

• Actualizar el proyecto para asegurarse de que todo esté funcionando correctamente.

Conclusiones

• Se ha completado con éxito la instalación y personalización del tema Astra en WordPress.

• Se destaca que toda la información mostrada en el video es simulada y no representa datos o archivos reales.

Instalación de plugins Elementor Header Footer y Essential Addons

Resumen de la sección: En esta sección, el presentador menciona la necesidad de instalar tres plugins gratuitos: Elementor, Header Footer y Essential Addons. Estos plugins serán utilizados para diseñar el menú de navegación del sitio web.

Instalación de Elementor

• Se accede a la sección "Plugins" y se selecciona "Añadir nuevo".

• Se busca el plugin "Elementor" y se procede a su instalación.

• Una vez instalado, se activa el plugin.

Instalación de Essential Addons for Elementor

• Desde la sección "Plugins", se selecciona "Añadir nuevo".

• Se busca el plugin "Essential Addons for Elementor" y se procede a su instalación.

• Una vez instalado, se activa el plugin.

Explicación de los plugins

• Elementor: Es un constructor visual que permite agregar elementos como texto, imágenes, videos, entre otros, arrastrándolos y configurándolos fácilmente.

• Header Footer Builder: Permite construir la cabecera (menú superior) y pie de página del sitio web.

• Essential Addons: Complementa las funcionalidades del plugin Elementor con elementos adicionales predefinidos para su uso en el diseño del sitio web.

Uso de Elementor para diseñar la cabecera

Resumen de la sección: En esta parte del video, el presentador utiliza Elementor para diseñar la cabecera (menú superior) del sitio web.

Creación de una plantilla de cabecera

• Se accede a la sección "Apariencia" y se selecciona "Header Elementor".

• Se crea una nueva plantilla de cabecera, asignándole un nombre.

• Se elige el tipo de plantilla como "Cabecera" y se selecciona la opción "Mostrar en: Toda la web".

• Se guarda y publica la plantilla.

Diseño de la cabecera con Elementor

• Desde la lista de plantillas, se selecciona la opción "Editar con Elementor" para comenzar a diseñar.

• Se agregan elementos como columnas, texto, imágenes, etc., arrastrándolos desde el panel lateral.

• Se configuran los elementos según las preferencias del diseño.

• Se guardan los cambios realizados.

Uso de Essential Addons para complementar Elementor

Resumen de la sección: En esta parte del video, el presentador explica que Essential Addons es un conjunto de elementos adicionales que complementan las funcionalidades de Elementor.

Ventajas de Essential Addons

• Essential Addons proporciona más opciones y elementos predefinidos para utilizar en el diseño del sitio web.

• Permite ampliar las posibilidades creativas al trabajar con Elementor.

Creación del menú responsive

Resumen de la sección: En esta parte del video, el presentador muestra cómo crear un menú responsive utilizando Elementor.

Creación del menú responsive

• Desde la sección "Header Elementor", se selecciona "Añadir nuevo".

• Se establece un nombre para el menú (por ejemplo, "Cabeza").

• En el campo "Tipo de plantilla", se elige "Cabecera".

• Se selecciona la opción "Mostrar en: Toda la web".

• Se guarda y publica el menú.

Diseño del menú con Elementor

Resumen de la sección: En esta parte del video, el presentador utiliza Elementor para diseñar el menú responsive.

Diseño del menú con Elementor

• Se selecciona la opción "Editar con Elementor" para comenzar a diseñar.

• Se agregan elementos al menú, como botones o enlaces, arrastrándolos desde el panel lateral.

• Se configuran los elementos según las preferencias del diseño.

• Se guardan los cambios realizados.

Estas son las principales secciones y pasos mencionados en el video para instalar y utilizar los plugins Elementor, Header Footer y Essential Addons, así como para diseñar la cabecera y el menú responsive utilizando Elementor.

Configuración de cuadraditos y menú de navegación

Resumen de la sección: En esta sección, el instructor muestra cómo configurar los cuadraditos y el menú de navegación en Elementor.

Configuración de los cuadraditos

• Seleccionar los nueve cuadraditos.

• Comprimir en diferentes estilos haciendo clic en "Comprimir en pro", "Comprimir en general" y "Comprimir es enchalados".

• Alinear verticalmente las columnas seleccionadas al centro.

Configuración del menú de navegación

• Seleccionar el menú de navegación.

• Cambiar la alineación a "centro".

• Modificar la tipografía para que sea más delgada.

• Cambiar el color del texto al pasar el cursor sobre él.

• Actualizar para guardar los cambios.

Personalización del botón activo

Resumen de la sección: En esta sección, el instructor muestra cómo personalizar el aspecto del botón activo en Elementor.

Personalización del botón activo

• Seleccionar el botón activo.

• Cambiar el color del texto a amarillo y el color de fondo a blanco.

• Actualizar para guardar los cambios.

Configuración del botón con enlace a WhatsApp

Resumen de la sección: En esta sección, el instructor muestra cómo configurar un botón con un enlace a WhatsApp utilizando Elementor.

Configuración del enlace a WhatsApp

• Seleccionar el botón.

• Agregar un enlace personalizado de WhatsApp en el campo de enlace.

• Alinear el botón al centro.

• Cambiar el color del botón.

• Guardar los cambios.

Personalización del botón con icono

Resumen de la sección: En esta sección, el instructor muestra cómo personalizar un botón con un icono en Elementor.

Personalización del botón con icono

• Seleccionar el botón.

• Configurar las curvas del borde a 25 para darle forma redondeada.

• Agregar un icono de WhatsApp al botón.

• Guardar los cambios.

Configuración del menú de navegación para dispositivos móviles

Resumen de la sección: En esta sección, el instructor muestra cómo configurar el menú de navegación para dispositivos móviles en Elementor.

Configuración del menú de navegación para dispositivos móviles

• Cambiar al modo adaptable y seleccionar "Tableta".

• Alinear y ajustar los tamaños de las columnas y elementos para que se vean correctamente en dispositivos móviles.

• Guardar los cambios.

Configuración de la vista previa en tablet y celular

Resumen de la sección: En esta parte del video, el presentador muestra cómo configurar la vista previa en una tablet y un celular.

• Se accede a la opción "Vista previa" desde el menú desplegable.

• Se verifica que la vista previa se muestre correctamente en una tablet y un celular.

• Se realiza una corrección para asegurar que la vista previa se vea adecuadamente en ambos dispositivos.

Creación de la página de inicio

Resumen de la sección: En esta parte del video, se explica cómo crear la página de inicio utilizando Elementor.

• Se accede a las opciones de páginas y se selecciona "Inicio".

• Se utiliza Elementor para editar la página.

• Se añaden dos columnas y se agrega un encabezado y un editor de texto.

• Se configura el tamaño y estilo del fondo de la sección.

• Se suben imágenes para crear una galería deslizable con efecto kenburns.

• Se ajustan las configuraciones adicionales como el tiempo de cambio automático y el efecto de transición.

Diseño del botón "Contactar"

Resumen de la sección: En esta parte del video, se muestra cómo diseñar el botón "Contactar" en la página de inicio.

• Se selecciona el texto del botón y se le aplica estilo, como cambiar su color y tamaño.

• Se establece un enlace hacia una página específica, en este caso, hacia una página de contacto.

• Opcionalmente, se puede añadir un icono al botón para mayor personalización.

Estilos adicionales y finalización

Resumen de la sección: En esta parte del video, se realizan ajustes finales en el diseño de la página de inicio.

• Se aplican estilos adicionales como fondo y borde al botón "Contactar".

• Se configuran los estilos de texto y color para una mejor visualización.

• Se finaliza la configuración de la página de inicio.

Este resumen proporciona una visión general de las principales acciones y pasos realizados en el video. Para obtener más detalles, consulte el video completo utilizando los enlaces proporcionados.

Configuración de estilo

Resumen de la sección: En esta sección, el orador muestra cómo configurar el estilo de un elemento en blanco. Se cambia el color de fondo a blanco y el color del texto a negro. También se ajusta el borde para que siga siendo blanco. Se agrega una animación al pasar el cursor y se configura la forma del divisor como "olas". Finalmente, se ajusta la altura del elemento y se guarda la configuración.

Configuración de estilo

• Se pinta todo de blanco cambiando el color de fondo.

• El color del texto se cambia a negro.

• El borde también se mantiene en blanco.

• Se agrega una animación al pasar el cursor, utilizando la opción "Pop".

• La forma del divisor se configura como "olas" con una ligera altura.

• Se ajusta la altura del elemento a 500.

• Se guarda la configuración.

Agregar servicios

Resumen de la sección: En esta parte, se añaden los servicios al diseño. Se utiliza un elemento llamado "Dual" para mostrar los tres servicios. Los servicios son electricidad, gasfitería y pintura. Se personaliza cada servicio cambiando los colores y agregando texto correspondiente.

Agregar servicios

• Se utiliza un elemento llamado "Dual" para mostrar los tres servicios.

• Los servicios son electricidad, gasfitería y pintura.

• Para cada servicio:

• No se muestra el icono correspondiente.

• El encabezado es personalizado como "Nuestros Servicios".

• El texto del servicio puede ser modificado según sea necesario.

• Se personaliza el color del texto y se ajusta el tamaño del título.

• Se guarda la configuración.

Ajustes finales

Resumen de la sección: En esta parte, se realizan los ajustes finales al diseño. Se aumenta ligeramente la altura del elemento de servicios. También se crea un espacio entre el elemento de servicios y el elemento superior. Se generan columnas para mostrar los servicios y se añaden imágenes correspondientes a cada servicio.

Ajustes finales

• Se aumenta la altura del elemento de servicios a 500.

• Se crea un espacio entre el elemento de servicios y el elemento superior.

• Se generan tres columnas para mostrar los servicios.

• Para cada servicio:

• Se añade una imagen correspondiente.

• El texto puede ser modificado según sea necesario.

• Los ajustes son guardados.

Modo adaptable

Resumen de la sección: En esta parte, se muestra cómo hacer que el diseño sea adaptable a diferentes dispositivos. El orador revisa cómo se ve en una tablet y realiza ajustes específicos para dispositivos móviles.

Modo adaptable

• El diseño es revisado en una tablet, pero no se realizan cambios ya que solo un pequeño porcentaje de personas utiliza tablets.

• El diseño es revisado en un dispositivo móvil y se realizan ajustes necesarios para mejorar su apariencia en ese tipo de dispositivo.

Ajuste final del encabezado

Resumen de la sección: En esta parte, se realiza un último ajuste al encabezado del diseño. El tamaño del texto se reduce y se realiza una configuración específica para la altura del elemento.

Ajuste final del encabezado

• Se reduce el tamaño del texto del encabezado a 30.

• Se ajusta la altura del elemento utilizando "vh" (viewport height) en lugar de píxeles.

Resultado final

Resumen de la sección: En esta parte, se muestra el resultado final del diseño después de todos los ajustes realizados. El orador muestra cómo se ve el diseño en diferentes dispositivos y concluye que está satisfecho con el resultado.

Resultado final

• Se muestra el resultado final del diseño después de todos los ajustes realizados.

• El orador muestra cómo se ve el diseño en diferentes dispositivos.

• El orador concluye que está satisfecho con el resultado obtenido.

Ajuste del tamaño de los servicios

Resumen de la sección: En esta parte del video, se muestra cómo ajustar el tamaño de los servicios en un sitio web. Se explica cómo reducir el tamaño predeterminado y se menciona que estos cambios solo se aplican a la versión móvil.

• Para ajustar el tamaño de los servicios, se debe hacer clic en "Nuestros Servicios" y luego en "Tipografía".

• Por defecto, el tamaño está establecido en 30. Se sugiere reducirlo a 27 o 25.

• Es importante tener en cuenta que este cambio solo afectará la versión móvil del sitio web.

Ajuste específico para celular

Resumen de la sección: En esta parte del video, se explica que algunos cambios deben aplicarse únicamente a la versión móvil del sitio web.

• Al realizar ajustes en el tamaño de los servicios, es necesario verificar si hay una opción para seleccionar "Tamaño Y" para dispositivos móviles.

• Si existe esta opción, significa que los cambios realizados solo afectarán la versión móvil.

• Una vez realizados los ajustes deseados, se debe guardar y comprobar que los cambios solo sean visibles en la versión móvil.

Espaciado entre elementos

Resumen de la sección: En esta parte del video, se muestra cómo agregar espaciado entre elementos específicos en un sitio web.

• Se observa que hay un espacio muy pequeño entre las palabras "electricidad" y "gasfitería".

• Para solucionarlo, se utiliza una función llamada "espaciador" y se ajusta a un valor de 30.

• Es importante tener en cuenta que este espaciado solo debe aplicarse en la versión móvil del sitio web.

Ocultar espaciado en versiones no móviles

Resumen de la sección: En esta parte del video, se explica cómo ocultar el espaciado agregado anteriormente en versiones no móviles del sitio web.

• Para asegurarse de que el espaciado solo sea visible en la versión móvil, se debe hacer clic en el espacio creado anteriormente.

• Luego, se accede a las opciones avanzadas y se selecciona la opción de adaptabilidad.

• Se configura para que el espacio solo sea visible en dispositivos móviles y no en computadoras o tabletas.

Duplicar elementos con espaciado

Resumen de la sección: En esta parte del video, se muestra cómo duplicar elementos con espaciado específico para mantener una apariencia consistente.

• Para duplicar un elemento con su respectivo espaciado, se debe hacer clic derecho sobre él y seleccionar "Duplicar".

• Esto permite tener el mismo elemento con el mismo espaciado tanto arriba como abajo.

• Al realizar estos pasos, se logra mantener una apariencia consistente entre los diferentes elementos.

Agregar zona de soluciones rápidas

Resumen de la sección: En esta parte del video, se explica cómo agregar una nueva zona al sitio web llamada "Soluciones Rápidas".

• Se crea una nueva sección con dos columnas.

• En la primera columna, se agrega una imagen relacionada con las soluciones rápidas.

• En la segunda columna, se duplica el texto existente para que diga "Soluciones Rápidas".

Ajustes de estilo en la zona de soluciones rápidas

Resumen de la sección: En esta parte del video, se realizan ajustes de estilo en la zona de "Soluciones Rápidas" del sitio web.

• Se selecciona el texto existente y se cambia a minúsculas para que coincida con el estilo deseado.

• Luego, se realiza una alineación izquierda para mejorar la apariencia visual.

• Además, se ajusta la alineación vertical para centrar correctamente los elementos en la columna.

Agregar textos adicionales

Resumen de la sección: En esta parte del video, se agregan textos adicionales a la zona de "Soluciones Rápidas" del sitio web.

• Se utiliza una función llamada "Lista de Iconos" para agregar diferentes textos descriptivos.

• Se duplican algunos textos existentes y luego se editan para adaptarlos a las necesidades específicas.

• Es importante tener en cuenta que estos textos son ficticios y no deben ser utilizados como información real.

Ajuste final del diseño

Resumen de la sección: En esta parte del video, se realizan los últimos ajustes finales en el diseño del sitio web.

• Se realiza un cambio en el color de fondo y tamaño del icono utilizado en "Soluciones Rápidas".

• Se ajusta el espaciado entre la sección y los elementos adyacentes para mejorar la apariencia visual.

• Además, se utiliza un degradado de color en el fondo para agregar más estilo al diseño.

Personalización adicional

Resumen de la sección: En esta parte del video, se menciona que es posible realizar más personalizaciones en el diseño según las preferencias individuales.

• Se sugiere experimentar con diferentes configuraciones y opciones para lograr el aspecto deseado.

• Es importante tener en cuenta que las personalizaciones pueden variar según las herramientas utilizadas y las habilidades técnicas del usuario.

Ajuste de columnas

Resumen de la sección: En esta parte, se realiza el ajuste de las columnas en el diseño de la página.

Ajuste del espacio entre columnas

• Seleccionar las dos columnas.

• Ir a "Disposición" y seleccionar "Espacio entre columnas".

• Establecer el ancho deseado para separar las columnas.

Prueba del diseño en vista del cliente

• Guardar los cambios realizados.

• Verificar cómo queda el diseño en la vista del cliente.

Creación de sección para testimonios

Resumen de la sección: En esta parte, se crea una nueva sección para mostrar testimonios de clientes satisfechos.

Creación de una nueva sección

• Crear una nueva sección con una sola columna.

• Copiar y pegar el contenido necesario dentro de la nueva sección.

Alineación y texto

• Alinear el contenido a la izquierda.

• Agregar un texto arriba con el título "Clientes satisfechos".

• Personalizar el texto según sea necesario.

Uso de secciones interiores

• Utilizar la opción "Sección interior" para agrupar todo el contenido dentro de una misma sección.

• Mantener todos los elementos relacionados dentro de esta sección interior.

Agregar testimonios

• Buscar y agregar un elemento llamado "Recomendación" o similar dentro de la sección interior.

• Configurar los detalles del testimonio, como nombre, empresa y opinión.

Estilo y duplicación

Resumen de la sección: En esta parte, se realiza la personalización del estilo y se duplican elementos para crear múltiples testimonios.

Personalización del estilo

• Explorar las opciones de estilo disponibles.

• Seleccionar el estilo deseado para los testimonios.

Duplicación de elementos

• Copiar y pegar los elementos necesarios para tener múltiples testimonios.

• Duplicar columnas y otros elementos según sea necesario.

Ajuste de espacios

Resumen de la sección: En esta parte, se realizan ajustes en los espacios entre elementos.

Espacio entre "Clientes satisfechos" y el contenido superior

• Añadir espacio utilizando los ajustes avanzados.

• Establecer un valor de 50 para el espacio superior e inferior.

Creación del pie de página

Resumen de la sección: En esta parte, se crea el pie de página o footer.

Creación del pie de página

• Acceder a "Apariencia" y seleccionar "Elementor Header and Footer".

• Crear un nuevo pie de página y configurarlo para mostrar en toda la web.

Diseño del pie de página

• Dividir el diseño en cuatro columnas.

• Agregar el logo en una columna.

• Agregar un editor de texto en otra columna.

Links, contactos y redes sociales

Resumen de la sección: En esta parte, se agregan links, información de contacto y enlaces a redes sociales al pie de página.

Configuración básica

• Agregar encabezados correspondientes a cada columna.

• Personalizar el diseño y estilo de cada elemento según sea necesario.

Ajustes avanzados

• Utilizar los ajustes avanzados para establecer espacios, colores de fondo, etc.

Resultado final

Resumen de la sección: En esta parte, se muestra el resultado final del diseño y se verifica cómo queda en la página actualizada.

Verificación del diseño

• Actualizar la página para ver cómo quedó el diseño finalizado.

• Revisar que todos los elementos estén correctamente alineados y configurados.

Este resumen proporciona una visión general de las diferentes secciones y pasos realizados durante el video.

Diseño de la página de inicio

Resumen de la sección: En esta sección, el diseñador trabaja en el diseño de la página de inicio del sitio web. Ajusta la alineación y el tamaño del logo, agrega texto y enlaces personalizados, y selecciona iconos para los diferentes elementos.

Alineación y tamaño del logo

• Se ajusta la alineación del logo a la izquierda.

• Se modifica el tamaño del logo para que sea más grande.

Agregar texto y enlaces personalizados

• Se añade un texto personalizado en un área designada.

• Se agregan enlaces personalizados a diferentes páginas, como "Inicio", "Nosotros" y "Blog".

• Cada enlace se dirige a una página específica del sitio web.

Selección de iconos

• Se busca una lista de iconos para agregar a los enlaces.

• Se seleccionan iconos correspondientes a cada página, como "inicio", "nosotros" y "blog".

• Los iconos no deseados se eliminan.

Colores y estilos

• Se cambian los colores y tamaños de los elementos según las preferencias del diseñador.

• Se ajusta el espaciado entre los elementos para mejorar su apariencia visual.

Pie de página

Resumen de la sección: En esta sección, el diseñador trabaja en el diseño del pie de página del sitio web. Agrega información como derechos reservados, desarrollador y redes sociales.

Desarrollado por y derechos reservados

• Se agrega un texto indicando que el sitio web fue desarrollado por alguien específico.

• Se añade un enlace al desarrollador del sitio web.

Redes sociales

• Se agrega una sección para mostrar los iconos de las redes sociales.

• Se seleccionan iconos correspondientes a diferentes plataformas, como Facebook, Instagram y TikTok.

• Se añaden enlaces a las cuentas de redes sociales correspondientes.

Diseño del texto y estilo

• Se ajusta el tamaño y color del texto en el pie de página.

• Se cambia el fondo y la altura mínima para mejorar la apariencia visual.

Diseño de la página "Nosotros"

Resumen de la sección: En esta sección, el diseñador trabaja en el diseño de la página "Nosotros" del sitio web utilizando Elementor.

Edición con Elementor

• El diseñador accede a la página "Nosotros" para editarla con Elementor.

Configuración de imagen de fondo

Resumen de la sección: En esta sección, el orador explica cómo configurar una imagen de fondo en el diseño del sitio web.

Selección de la imagen de fondo

• Ir a "Estilo" y seleccionar una imagen para el fondo.

• Ajustar la altura y posición según sea necesario.

Estilo y capa de fondo

• Configurar un color en la capa de fondo.

• Ajustar la posición, repetición y tamaño de la imagen.

• Seleccionar un color para el texto.

Agregar una foto y título

• Agregar una foto en la primera columna.

• Insertar un título relevante.

• Duplicar el contenido para las siguientes columnas.

Edición del contenido

Resumen de la sección: En esta sección, el orador muestra cómo editar y personalizar el contenido del sitio web.

Copiar y pegar contenido existente

• Abrir la página deseada en otra pestaña.

• Editar con Elementor.

• Copiar y pegar el contenido existente en la nueva ubicación.

Personalización del texto

• Editar el texto según sea necesario.

• Alinear verticalmente las columnas.

Agregar iconos e información adicional

Resumen de la sección: En esta sección, se explica cómo agregar iconos e información adicional al sitio web.

Agregar iconos

• Buscar "caja de icono" para encontrar los iconos deseados.

• Cambiar los colores y estilos según sea necesario.

Separar secciones

• Agregar espaciadores para separar las secciones.

• Ajustar la visualización en diferentes dispositivos.

Guardar como plantilla

Resumen de la sección: En esta sección, el orador muestra cómo guardar una sección como plantilla para su uso futuro.

Guardar como plantilla

• Hacer clic derecho en los seis puntitos y seleccionar "Guardar como plantilla".

• Asignar un nombre descriptivo a la plantilla guardada.

Este resumen proporciona una visión general de los pasos y conceptos clave presentados en el video. Se recomienda ver el video completo para obtener una comprensión completa del contenido.

Creación de páginas con Spectra

Resumen de la sección: En esta sección, el instructor muestra cómo crear páginas utilizando el plugin Spectra en lugar del editor Elementor. Se enfoca en la creación de una página para un servicio de gasfitería.

Creación de la página de gasfitería

• Utilizar el plugin Spectra para crear páginas en lugar del editor Elementor.

• Ir a "Páginas" y seleccionar la opción "Añadir nuevo".

• Buscar y seleccionar el bloque "Contenedor" para tener dos columnas en la página.

• Agregar una imagen desde la biblioteca de medios relacionada al servicio de gasfitería.

• Añadir un encabezado personalizado utilizando los estilos proporcionados por Spectra.

• Agregar un texto descriptivo utilizando el bloque de texto o cualquier otro bloque disponible.

• Personalizar el diseño y estilo del botón utilizando los ajustes disponibles en Spectra.

• Configurar el enlace del botón para redirigir a otra página, como por ejemplo, la página de contacto.

Personalización del botón

Resumen de la sección: En esta sección, el instructor muestra cómo personalizar y configurar un botón creado con Spectra.

Personalización del botón

• Editar las propiedades del botón haciendo clic en él y accediendo a las opciones disponibles.

• Cambiar los estilos predefinidos del botón según las preferencias personales.

• Configurar el contenido del botón, como cambiar el texto o añadir iconos.

• Establecer el enlace del botón para redirigir a otra página, como la página de contacto.

Configuración del enlace del botón

Resumen de la sección: En esta sección, el instructor muestra cómo configurar el enlace del botón creado con Spectra.

Configuración del enlace del botón

• Copiar el enlace deseado desde otra página, como la página de contacto.

• Pegar el enlace en la configuración correspondiente al botón creado con Spectra.

• Verificar que el enlace esté funcionando correctamente y redirija a la página deseada.

No seguir enlaces y eliminar texto

Resumen de la sección: En esta parte del video, se explica cómo evitar que los enlaces sigan a otros sitios web y cómo eliminar texto no deseado. También se muestra cómo editar el texto.

Evitar que los enlaces sigan a otros sitios web

• Para evitar que los enlaces sigan a otros sitios web, se debe utilizar la etiqueta "nofollow" en el enlace.

• Esto es especialmente útil cuando se visitan sitios web diferentes o irrelevantes al propio.

• Al agregar la etiqueta "nofollow", se le indica al motor de búsqueda que no siga ese enlace.

Eliminar texto no deseado

• Si se desea eliminar texto no deseado, se puede hacer mediante la edición del contenido.

• Seleccionar el texto y borrarlo para eliminarlo por completo.

Cambiar estilo de un elemento

Resumen de la sección: En esta parte del video, se muestra cómo cambiar el estilo de un elemento utilizando las opciones disponibles.

Cambiar color, tamaño y fondo

• Es posible cambiar el color del texto normal utilizando las opciones de estilo.

• También es posible cambiar el icono asociado al elemento.

• Se pueden ajustar el tamaño, colores y fondo según las preferencias deseadas.

Personalizar elementos con más opciones

Resumen de la sección: En esta parte del video, se exploran más opciones para personalizar elementos como botones.

Opciones avanzadas para anclaje HTML

• Existen opciones avanzadas relacionadas con anclajes HTML.

• Estas opciones permiten asignar clases o utilizar llamadas específicas para personalizar elementos con CSS o JavaScript.

Editar contenedor de un botón

• Al editar un botón, se puede observar que tiene un contenedor asociado.

• Al hacer clic fuera del contenedor, se pueden acceder a más estilos y opciones para personalizar el elemento.

Estilos adicionales y actualización de cambios

Resumen de la sección: En esta parte del video, se exploran estilos adicionales y se muestra cómo actualizar los cambios realizados en un elemento.

Alineación global y más opciones

• Se puede ajustar la alineación global de los elementos.

• Existen varias opciones adicionales para personalizar aún más el diseño.

Actualización de cambios en el botón

• Después de realizar los cambios deseados en el botón, es necesario actualizarlo para ver los resultados.

• Al hacer clic en el botón "Actualizar", se aplican los cambios realizados.

Agregar cajas de información

Resumen de la sección: En esta parte del video, se explica cómo agregar cajas de información utilizando Spectra.

Agregar cajas de información con Spectra

• Para agregar cajas de información, se debe acceder a las opciones disponibles en Spectra.

• Seleccionar la opción "Caja de información" y explorar las diferentes variaciones disponibles.

Personalizar cajas de información

Resumen de la sección: En esta parte del video, se muestra cómo personalizar las cajas de información agregadas anteriormente.

Cambiar estilo y contenido de las cajas

• Se pueden seleccionar diferentes estilos predefinidos para las cajas de información.

• Es posible activar imágenes e iconos en las cajas y ajustar su posición y tamaño.

• Se pueden agregar descripciones, separadores y personalizar el ancho, color y espaciado.

Ajustes finales y aplicar estilos

Resumen de la sección: En esta parte del video, se realizan los ajustes finales y se aplican los estilos a las cajas de información.

Ajustes finales antes de aplicar estilos

• Antes de aplicar los estilos, se pueden realizar ajustes adicionales como alinear contenido, agregar prefijos o descripciones.

Aplicación de estilos a las cajas

• Se puede copiar el estilo de una caja ya configurada y pegarlo en otras cajas para mantener la coherencia visual.

• Se pueden personalizar aspectos como el tamaño de la imagen, el color del título y el grosor del separador.

Detalles adicionales en la personalización

Resumen de la sección: En esta parte del video, se exploran detalles adicionales para personalizar elementos como títulos y separadores.

Personalización adicional del título

• Es posible ajustar el margen inferior del título para crear espacios visuales entre elementos.

• También es posible cambiar el grosor y color del separador asociado al elemento.

Últimos ajustes antes de finalizar

Resumen de la sección: En esta parte del video, se realizan los últimos ajustes antes de finalizar la personalización.

Ajustes finales y aplicabilidad

• Se pueden realizar ajustes finales en términos de espaciado, color y tamaño.

• Estos ajustes se pueden aplicar a todos los elementos de manera individual o en conjunto.

Este resumen cubre las principales secciones del video, brindando una visión general de los temas tratados y los pasos clave para personalizar elementos utilizando Spectra.

Diseño de página de Blog y los post

Resumen de la sección: En esta sección, el orador muestra cómo diseñar una página de blog y agregar entradas al blog utilizando Elementor y Spectra en Gutenberg.

Diseñando la página de Blog

• Utilizar Spectra para añadir más elementos a Gutenberg y tener más opciones de diseño.

• El orador menciona que Gutenberg aún tiene fallas, pero cree que en 2024 será el año de Gutenberg.

• El orador expresa su preocupación por lo que sucederá con Elementor y si las personas seguirán usándolo o se decantarán por otras opciones como Spectra o Gutenberg.

• La elección entre Elementor, Spectra o Gutenberg dependerá del proyecto y sus necesidades específicas.

Añadiendo entradas al blog

• Utilizando Elementor, el orador muestra cómo añadir nuevas entradas al blog.

• Se copian textos desde otra fuente para crear las entradas del blog.

• Se añaden imágenes a las entradas utilizando Elementor.

• Se establece una imagen destacada para cada entrada del blog.

• Se crea un nuevo post en el blog utilizando Elementor.

Diseñando la visualización de las entradas del blog

• El orador muestra cómo editar la página del blog utilizando tanto Elementor como Spectra en Gutenberg.

• Utilizando Elementor, se configura una cuadrícula de entradas para mostrar las publicaciones del blog.

• Se ajustan los parámetros de visualización, como el número de entradas mostradas, la disposición y el diseño.

• Se personaliza el estilo del título utilizando Elementor.

• El orador muestra cómo aplicar cambios en tiempo real utilizando Spectra en Gutenberg.

Conclusiones finales

Resumen de la sección: En esta sección final, el orador concluye que el diseño del blog y las entradas pueden ser realizados tanto con Elementor como con Spectra en Gutenberg. La elección entre estas herramientas dependerá de las necesidades específicas del proyecto. También enfatiza la importancia de estar abierto a nuevas tecnologías y adaptarse a los avances en el campo del diseño web.

Configuración del contenido del blog

Resumen de la sección: En esta sección, el orador menciona que el contenido del blog es un desastre y decide arreglarlo utilizando Spectra y Gutenberg como editores. Luego, muestra cómo eliminar el contenido existente y crear una cuadrícula de entradas utilizando plantillas predefinidas.

Configuración inicial del blog

• El orador menciona que el contenido actual del blog es un desastre.

• Decide utilizar Spectra y Gutenberg como editores para mejorar el aspecto del blog.

• Elimina todo el contenido existente en el editor de WordPress.

Creación de una cuadrícula de entradas

• El orador selecciona la opción "Cuadrícula de entradas" en las plantillas disponibles.

• Explora diferentes opciones de plantillas predefinidas, como "Heading".

• Personaliza la plantilla agregando un título y contenido actualizado.

• Ajusta los bordes, fondos y otras configuraciones según sea necesario.

• Muestra cómo ocultar los posts anteriores en la cuadrícula.

Configuración adicional

• El orador accede a la configuración general para mostrar las entradas en lugar de las páginas.

• Selecciona la opción para ordenar las entradas por fecha descendente.

• Iguala la altura de las imágenes en la cuadrícula.

• Personaliza el texto mostrado para cuando no hay publicaciones encontradas.

• Ajusta el tamaño y posición de las imágenes en la cuadrícula.

Opciones adicionales

• El orador muestra opciones adicionales como mostrar autor, fechas, taxonomía e iconos.

• Explica cómo personalizar el enlace de "Leer más" utilizando diferentes estilos predefinidos.

• Menciona que se pueden aplicar condiciones para mostrar ciertos elementos según el usuario, navegador o sistema operativo.

Finalización de la configuración

• El orador guarda los cambios y muestra el resultado final de la cuadrícula de entradas en el blog.

• Comenta que ha utilizado plugins gratuitos para esta configuración, pero menciona que con plugins premium como Crocoblock o Elementor Pro se podrían obtener mejores resultados.

Instalación del plugin Double Play

Resumen de la sección: En esta sección, el orador menciona que falta algo en la configuración del blog y decide instalar el plugin Double Play para solucionarlo. Explica que está utilizando plugins gratuitos en este momento, lo cual puede limitar algunas funcionalidades.

Instalación del plugin Double Play

• El orador menciona que falta algo en la configuración actual del blog.

• Decide instalar el plugin Double Play para solucionar este problema.

• Comenta que está utilizando plugins gratuitos en este momento, lo cual puede tener limitaciones comparado con versiones premium o suites como Crocoblock o Elementor Pro.

Conclusiones

En estas secciones del video tutorial, se abordaron los siguientes temas:

1. Configuración inicial del contenido del blog utilizando Spectra y Gutenberg como editores.

2. Creación de una cuadrícula de entradas utilizando plantillas predefinidas y personalizando su apariencia.

3. Configuraciones adicionales como ordenamiento, ajuste de imágenes y opciones de visualización.

4. Instalación del plugin Double Play para mejorar la configuración del blog.

Es importante tener en cuenta que el orador menciona que está utilizando plugins gratuitos, lo cual puede limitar algunas funcionalidades. Se sugiere considerar opciones premium o suites como Crocoblock o Elementor Pro para obtener resultados más completos.

Configuración de apariencia y diseño del blog

Resumen de la sección: En esta parte del video, se muestra cómo configurar la apariencia y el diseño de un blog utilizando WordPress. Se explican los pasos para personalizar el recuadro de contenido, cambiar colores y estilos, y ajustar la barra lateral.

Personalización del recuadro de contenido

• Acceder a la sección "Apariencia" y luego seleccionar "Blog".

• Dentro de "Blog", elegir "Entrada individual" para personalizar el recuadro de contenido.

• Ajustar el ancho completo del contenido y probar diferentes opciones.

Cambio de colores y estilos

• Para cambiar los colores, acceder a la sección "Global" y luego seleccionar "Colores".

• Modificar los colores según las preferencias personales.

• Ejemplo: Cambiar el color de los enlaces a amarillo.

Establecer énfasis en el texto

• Configurar el estilo del texto en negrita o cursiva.

• Cambiar el color del texto cuando se pasa por encima.

Mejorando la apariencia del blog

Resumen de la sección: En esta parte del video, se continúa mejorando la apariencia del blog mediante ajustes adicionales en WordPress. Se eliminan elementos no deseados, se cambia el formato de las entradas recientes y se realiza una revisión general.

Eliminación de elementos no deseados

• Acceder a la sección "Apariencia" y luego seleccionar "Widgets".

• Personalizar las opciones dentro de "Entradas recientes" para cambiar el color y formato.

• Eliminar elementos no deseados, como la barra lateral.

Cambio del formato de las entradas recientes

• Dentro de "Entradas recientes", ajustar los colores y estilos según las preferencias personales.

• Probar diferentes opciones hasta obtener el resultado deseado.

Instalación del plugin WP Forms

Resumen de la sección: En esta parte del video, se muestra cómo instalar y utilizar el plugin WP Forms para crear un formulario de contacto en WordPress.

Instalación del plugin WP Forms

• Acceder a la sección "Plugins" y seleccionar "Añadir nuevo".

• Buscar el plugin WP Forms e instalarlo.

• Activar el plugin una vez instalado.

Creación de un formulario de contacto

• Dentro de WP Forms, crear un nuevo formulario llamado "Contacto".

• Utilizar una plantilla predefinida para facilitar la creación del formulario.

• Agregar campos adicionales según sea necesario, como el campo para ingresar el número de teléfono.

• Guardar los cambios realizados en el formulario.

Creación de la página de contacto con Elementor

Resumen de la sección: En esta parte del video, se explica cómo crear una página de contacto utilizando Elementor en WordPress. También se menciona que este contenido forma parte del curso avanzado gratuito sobre WordPress disponible en el mismo canal.

Creación de la página de contacto con Elementor

• Copiar el shortcode proporcionado por WP Forms.

• Utilizar Elementor para crear una nueva página llamada "Contacto".

• Pegar el shortcode dentro del contenido de la página.

• Guardar los cambios realizados en la página.

Conclusión

En este video se muestra cómo configurar la apariencia y el diseño de un blog utilizando WordPress. Se explican los pasos para personalizar el recuadro de contenido, cambiar colores y estilos, ajustar la barra lateral, instalar el plugin WP Forms y crear un formulario de contacto.

Insertar formulario en una página web

Resumen de la sección: En esta sección, el orador muestra cómo insertar un formulario en una página web utilizando Elementor. Explica los pasos para crear el formulario y personalizarlo según las necesidades. También menciona la opción de agregar texto adicional a la página.

Creación del formulario

• Utilizar Elementor para insertar un formulario en una página web.

• Configurar el diseño del formulario con dos columnas.

• Pegar el shortcode del formulario en el espacio designado.

Agregar texto adicional

• Copiar y pegar texto existente de otra página utilizando Elementor.

• Alinear el texto a la izquierda.

• Agregar otro texto debajo del formulario.

Personalización del formulario

• Incluir información relevante en los campos del formulario, como número de teléfono, correo electrónico y dirección.

• Agregar una lista de iconos para mostrar información adicional, como horario de atención.

• Personalizar los colores de los iconos según preferencia.

Diseño y migración a un Hosting con dominio

Resumen de la sección: En esta sección, el orador explica cómo diseñar un sitio web y migrarlo a un servicio de hosting con un dominio propio. También proporciona información sobre qué es un hosting y un dominio.

Diseño del sitio web

• Utilizar Elementor para diseñar el sitio web.

• Explorar opciones adicionales, como temas específicos para tiendas online.

Migración a un Hosting con dominio

• Explicación sobre qué es un hosting y su función como espacio en internet donde se almacenan los archivos del sitio web.

• Costo aproximado de un hosting: alrededor de 60 dólares al año.

• Explicación sobre qué es un dominio y su función como nombre de la URL en internet.

• Costo aproximado de un dominio: alrededor de 13 dólares.

Adquisición del Hosting y dominio

• Recomendación de un proveedor de hosting con buenas ofertas (enlace proporcionado en la descripción del video).

• Proceso para adquirir el hosting y registrar un dominio.

• Pago mediante tarjeta de crédito.

Configuración del Hosting

• Acceder a la página de configuración del hosting después del pago.

• Crear un nuevo sitio web utilizando el dominio recién registrado.

• Configurar SSL para garantizar la seguridad del sitio web.

Finalización del proceso de migración

Resumen de la sección: En esta sección, el orador muestra los últimos pasos para finalizar el proceso de migración a un hosting con dominio propio.

Creación del sitio web

• Verificar que el sitio web ha sido creado correctamente en el panel de control del hosting.

Configuración SSL

• Acceder a la sección "Seguridad" en las herramientas del hosting.

• Seleccionar SSL encriptado para obtener el candado verde que indica seguridad en el sitio web.

Finalización y resumen

• Revisar los detalles finales antes de completar la migración.

• Confirmar los datos ingresados y realizar el pago correspondiente.

• Una vez realizado el pago, acceder a una página que confirma la bienvenida al servicio contratado.

Configuración inicial del Hosting y dominio

Resumen de la sección: En esta sección, se explica que al comprar un hosting y un dominio, puede tomar algunos minutos u horas para que funcionen correctamente debido a que son nuevos. Se recomienda tener paciencia y esperar unas horas antes de continuar con la configuración.

Configuración inicial del Hosting y dominio

• Al comprar el hosting y el dominio, es importante tener en cuenta que pueden tardar unos minutos u horas en funcionar correctamente.

• Esto se debe a que los DNS y otros elementos del sitio aún no están completamente configurados.

• Se recomienda tener paciencia y esperar unas horas antes de continuar con la configuración.

• Es posible que sea necesario intentarlo varias veces antes de que todo funcione correctamente.

Instalación de WordPress

Resumen de la sección: En esta sección, se explica cómo instalar WordPress en el hosting. Se menciona la importancia de tener paciencia durante el proceso.

Instalación de WordPress

• Para instalar WordPress, accede al panel de administración del hosting.

• Busca la opción "WordPress" o "Instalar y gestionar" dentro del panel.

• Ingresa un nombre de usuario, contraseña y correo electrónico para tu cuenta de WordPress.

• Haz clic en "Instalar" para completar la instalación.

• Es posible que aparezcan ventanas emergentes bloqueadas durante el proceso. Asegúrate de permitir las ventanas emergentes necesarias.

• Una vez instalado, podrás acceder al panel de administración de WordPress desde tu sitio web.

Migración de WordPress

Resumen de la sección: En esta sección, se explica cómo migrar un sitio web de WordPress desde localhost a un hosting y dominio real utilizando el plugin "All-in-One WP Migration".

Migración de WordPress

• Para migrar un sitio web de WordPress, instala el plugin "All-in-One WP Migration".

• Activa el plugin y ve a la opción "Exportar" en la pestaña "WP Migration".

• Descarga el archivo de exportación generado.

• Accede al panel de administración del sitio web donde deseas importar el contenido.

• Instala y activa nuevamente el plugin "All-in-One WP Migration" en este nuevo sitio.

• Ve a la opción "Importar" en la pestaña "WP Migration" y selecciona el archivo descargado anteriormente.

• Espera a que se complete la importación del contenido.

Recomendaciones para elegir un Hosting

Resumen de la sección: En esta sección, se brindan recomendaciones para elegir un hosting adecuado basado en factores como velocidad y seguridad.

Recomendaciones para elegir un Hosting

• Si buscas velocidad, se recomienda elegir un hosting que sea extremadamente veloz.

• Si buscas una opción económica con buena relación calidad-precio, puedes considerar Vanahosting.

• Si priorizas la seguridad, es recomendable optar por Webempresa o cualquier otro proveedor confiable en términos de seguridad.

• Evalúa tus necesidades específicas antes de tomar una decisión final sobre qué hosting utilizar.

Problemas de carga de estilos y regeneración

Resumen de la sección: En esta parte, el hablante menciona que a veces puede haber problemas con la carga de estilos en el sitio web. Sugiere regenerar los estilos y guardar los cambios para solucionar este problema.

• A veces puede ocurrir que los estilos no se carguen correctamente.

• Para solucionarlo, se recomienda hacer clic en "regenerar" y luego en "guardar".

• Aunque es un problema raro, a veces sucede.

• Se verifica si todos los elementos necesarios están presentes, como el servicio de gaspintería, el blog y la página de contacto.

Verificación del funcionamiento del sitio web

Resumen de la sección: El hablante confirma que todo está funcionando correctamente en el sitio web.

• Se verifica que todos los elementos necesarios estén presentes y funcionando.

• El hablante pregunta si hay algo más que se deba verificar.

Instalación del plugin Rammad para SEO

Resumen de la sección: El hablante explica cómo instalar el plugin Rammad para mejorar el SEO del sitio web.

• Se accede a la sección de plugins y se selecciona "Añadir nuevo".

• Se busca e instala el plugin deseado llamado "Rammad" para mejorar el SEO.

• El hablante menciona que tiene un video explicativo sobre cómo instalar este plugin.

• Si ya se ha instalado antes, se puede omitir las opciones iniciales y volver al escritorio.

Edición de la página de inicio

Resumen de la sección: El hablante muestra cómo editar la página de inicio del sitio web.

• Se accede a la sección de páginas y se busca la página de inicio.

• Se selecciona la opción para editar los snippets.

• Se cambia el título por uno personalizado, como "Servicios de gasfitería, electricidad y pintura".

• El hablante menciona que esto afectará cómo aparece en los resultados de búsqueda de Google.

Configuración del título para SEO

Resumen de la sección: El hablante muestra cómo configurar el título para mejorar el SEO en los resultados de búsqueda.

• Se cambia el título por uno más descriptivo, como "Servicios de gasfitería, electricidad y pintura".

• Esto afectará cómo aparece en los resultados de búsqueda en Google.

• Se recomienda limitar el número máximo de caracteres a 59 o 60 para una mejor visualización.

Descripción para SEO

Resumen de la sección: El hablante muestra cómo agregar una descripción adecuada para mejorar el SEO en los resultados de búsqueda.

• Se agrega una descripción que resuma los servicios ofrecidos, como "Somos una empresa que ofrece servicios profesionales en gasfitería, electricidad y pintura con garantía".

• Esta descripción será visible en los resultados de búsqueda en Google.

Guardar cambios y visualización en Google

Resumen de la sección: El hablante guarda los cambios realizados y muestra cómo se verá en los resultados de búsqueda de Google.

• Se guarda la configuración realizada.

• El hablante menciona que los cambios pueden tardar un poco en reflejarse.

• Se verifica cómo aparecerá el sitio web en los resultados de búsqueda de Google.

• Se enfatiza la importancia de configurar correctamente para una apariencia atractiva en Google.

Repetir configuraciones para otras páginas

Resumen de la sección: El hablante explica que las mismas configuraciones deben repetirse para todas las páginas relevantes del sitio web.

• Se recomienda repetir las mismas configuraciones para todas las páginas importantes, como gasfitería y electricidad.

• El hablante menciona que está considerando crear un curso sobre SEO en el futuro.

• Se sugiere utilizar plugins adicionales, como Cloudflare, para mejorar la seguridad del sitio web.

Configuración básica de seguridad

Resumen de la sección: El hablante muestra cómo realizar una configuración básica de seguridad utilizando plugins específicos.

• Se accede a la sección de plugins y se activan los plugins "SiteGround Optimizer" y "SiteGround Security".

• Se realiza una configuración básica, como bloquear carpetas y limitar intentos de acceso.

• Se recomienda utilizar contraseñas seguras y evitar usar el mismo nombre de usuario que el dominio.

• También se sugiere utilizar Cloudflare como capa adicional de seguridad contra ataques.

Instalación del plugin WooCommerce

Resumen de la sección: El hablante muestra cómo instalar el plugin WooCommerce para agregar una tienda en línea al sitio web.

• Se accede a la sección de plugins y se busca el plugin "WooCommerce".

• Se activa el plugin para comenzar a configurar una tienda en línea.

• El hablante menciona que hay varios videos disponibles en su canal sobre cómo trabajar con tiendas en línea utilizando WooCommerce.

Configuración inicial de WooCommerce

Resumen de la sección: En esta sección, se realiza la configuración inicial de WooCommerce para agregar las funcionalidades de una tienda en línea. Se omiten algunas opciones y se añaden nuevas páginas automáticamente.

Configuración de páginas

• Se accede a la sección "Páginas" para verificar las nuevas páginas creadas automáticamente por WooCommerce.

• Se ingresa a "Apariencia > Menús" para añadir las páginas necesarias, como "Tienda" y "Mi Cuenta".

Añadir productos a la tienda

• Se accede a la sección "Productos > Añadir nuevo" para agregar nuevos productos a la tienda.

• Se completa la información del producto, como nombre, precio, descripción y imagen destacada.

• El producto es publicado y se verifica su aparición en el sitio web.

Solución de problemas

• Si el producto no aparece en la tienda después de ser publicado, se soluciona actualizando los enlaces permanentes en "Ajustes > Enlaces permanentes".

• Se actualiza la página y el producto ahora es visible en la tienda.

Conclusión del curso

Resumen de la sección: El curso ha finalizado y se brindan buenos deseos al estudiante.

• Se muestra un mensaje final al estudiante deseándole que haya disfrutado del curso y que tenga energías positivas.

• Se invita al estudiante a repetir el proceso para agregar más productos si así lo desea.

• Finalmente, se le desea salud, bienestar y prosperidad al estudiante.