Cómo editar una página de inicio de WordPress (fácil y eficaz)

Publicado: 2022-12-08


¿Quieres crear una página de inicio personalizada para tu sitio de WordPress?

De forma predeterminada, la página de inicio de WordPress muestra las publicaciones de su blog, pero puede editarla para mostrar algo diferente. Por ejemplo, su página de inicio podría ser una página de destino que destaque sus productos y servicios.

En este artículo, le mostraremos cómo editar y personalizar fácilmente su página de inicio de WordPress.

How to Edit a WordPress Homepage (Easily & Effectively)

¿Qué es la página de inicio de WordPress?

Su página de inicio es la 'página principal' de su sitio web de WordPress. Es la primera página que aparece cuando un usuario visita su nombre de dominio.

Por ejemplo, si escribe www.wpbeginner.com en su navegador, la página en la que aterriza es la página de inicio de nuestro sitio web, donde puede ver las últimas publicaciones de nuestro blog:

The WPBeginner Homepage

¿Por qué editar la página de inicio de WordPress?

Si ha decidido crear un blog, entonces tiene mucho sentido mostrar las publicaciones de su blog en la página de inicio.

Pero, ¿qué sucede si usa WordPress para crear un sitio web para una pequeña empresa o incluso para administrar una tienda en línea? En esos casos, es posible que prefiera resaltar sus productos o promociones en su página de inicio.

Aquí hay un ejemplo de la página de inicio de un sitio web comercial de OptinMonster, el mejor complemento emergente de WordPress que existe. Su sitio tiene un gran blog, pero ese no es el enfoque de su página de inicio. En cambio, tienen un llamado a la acción muy claro.

The OptinMonster Homepage

Tal vez ya haya intentado establecer una página personalizada como página de inicio en WordPress, pero está luchando para que se vea bien.

Si ese es el caso, entonces estás en el lugar correcto.

Lo guiaremos paso a paso para configurar una página de inicio y personalizarla para que se ajuste a sus necesidades. De esa forma, puede causar una excelente primera impresión y alentar a sus visitantes a realizar las acciones que son más importantes para la misión de su sitio.

Eso podría significar comprarle un producto digital, registrarse para unirse a su sitio de membresía o donar a su campaña de recaudación de fondos.

Vamos a cubrir algunos métodos diferentes que puede usar para crear su página de inicio personalizada de WordPress.

Puede usar estos enlaces rápidos para saltar directamente a las diferentes partes del tutorial:

  • Edición de su página de inicio con el personalizador de temas
  • Edición de su página de inicio con el editor de bloques
  • Edición de su página de inicio con un complemento de generador de temas
  • Edición de su página de inicio con un complemento de Page Builder
  • Configuración de su página de inicio en WordPress

Edición de su página de inicio con el personalizador de temas

Algunos de los mejores temas de WordPress crearán un diseño de página de inicio para usted y le brindarán opciones para que pueda editarlo fácilmente.

Puede encontrar estas opciones visitando Apariencia » Personalizar en la barra lateral de administración. Esto iniciará el personalizador de temas de WordPress con una vista previa en vivo de su tema.

Using WordPress's Theme Customizer

El personalizador de temas tendrá diferentes opciones para diferentes temas. Su vista previa y las opciones disponibles pueden verse diferentes según el tema que esté utilizando. Estamos usando el tema gratuito de Hestia en este ejemplo.

Para editar cualquier parte de la página de inicio, simplemente haga clic en el ícono de lápiz azul al lado. Aquí, estamos editando la imagen, el texto y el botón en la parte superior de la página de inicio.

Editing the Top Section of the Homepage in Hestia

Nota: Tan pronto como realice ediciones, se mostrarán en la vista previa de su sitio. Esos cambios no estarán activos en su sitio hasta que los publique.

Si desea eliminar una sección de la página de inicio, solo tiene que hacer clic en el ícono del ojo azul en la esquina superior izquierda de esa sección.

Remove a Section of the Default Hestia Homepage

También puede eliminar secciones y volver a agregarlas usando la pestaña 'Secciones de portada'.

Una vez que esté satisfecho con su página de inicio, debe hacer clic en el botón 'Publicar' para publicarla.

Click the Publish Button to Make Your Homepage Live

Así es como se ve nuestra página de inicio, en vivo en el sitio web:

The Finished Homepage Live on the Website

Usar las opciones integradas de su tema es la forma más rápida de configurar su página de inicio. Sin embargo, es posible que algunos temas no tengan muchas opciones o que no esté satisfecho con el aspecto de su página de inicio.

No se preocupe, hay muchas otras formas de editar su página de inicio y darle el aspecto que desea.

Edición de su página de inicio con el editor de bloques

El editor de bloques de WordPress es una forma sencilla de crear una página de inicio personalizada, aunque está limitada por el diseño de su tema.

Para usar el editor de bloques, simplemente vaya a la pantalla Páginas » Todas las páginas y edite la página 'Inicio' que creó anteriormente.

Editing the 'Home' Page With the Block Editor

Ahora puede comenzar a crear el contenido para su página.

En esta parte del tutorial, usaremos algunos bloques simples para crear una página de inicio básica.

Primero, agregaremos un mensaje de bienvenida a la página. Puede hacer esto simplemente haciendo clic en la página para comenzar a escribir. WordPress creará automáticamente un bloque de párrafo para usted.

Adding Text in the Block Editor

Si desea agrandar el texto, es fácil hacerlo en la configuración del bloque en el lado derecho. Simplemente haga clic en uno de los tamaños preestablecidos, o puede hacer clic en el ícono 'Establecer tamaño personalizado' y escribir el tamaño que desee.

También puede cambiar el color de su texto, usando las opciones de 'Color' para el texto o el fondo.

Changing the Text Size in the Block Editor

A continuación, añadiremos una imagen a la página. Puede hacer esto haciendo clic en el símbolo (+) y luego seleccionando el bloque Imagen.

Lo encontrará en la sección Medios, o puede buscarlo usando la barra de búsqueda.

Adding an Image Block to Your Homepage

Puede elegir una imagen de su biblioteca de medios o cargar una nueva.

A continuación, agregamos otro bloque de párrafo, con el texto "Mira nuestras últimas publicaciones aquí".

Luego agregamos un bloque de 'Últimas publicaciones', que configuramos para mostrar el extracto de la publicación y las imágenes destacadas, así como los títulos de la publicación. Puede obtener más información sobre el bloque Últimas publicaciones en nuestro tutorial sobre cómo mostrar publicaciones recientes en WordPress.

Adding a List of Your Latest Posts to the Homepage

Puede agregar tantos bloques como desee a su página de inicio. También puede usar una plantilla de 'ancho completo' o 'sin barras laterales' para su página si su tema tiene una.

Por ejemplo, al usar el tema Astra, puede personalizar el diseño de la página desde el panel Configuración de Astra. Otros temas pueden proporcionar una sección en el panel de configuración del documento.

Removing the Sidebar From the Homepage

Una vez que esté satisfecho con su página de inicio, debe hacer clic en el botón 'Actualizar' o 'Publicar' en la parte superior derecha de la pantalla para publicar sus cambios.

Así es como se ve nuestra página de inicio terminada:

Homepage Created With the Block Editor Live on the Site

¿Qué pasa si quieres ir más allá con tu página de inicio? Una opción es probar algunos de estos mejores complementos de bloque para WordPress para agregar nuevas funciones, como un formulario de contacto, testimonios, reseñas y más.

Otra gran opción es usar un generador de temas o un generador de páginas para WordPress más poderoso para crear algo que se vea hermoso y profesional.

En las siguientes partes de este tutorial, cubriremos SeedProd, un creador de temas, y Divi de Elegant Themes, un creador de páginas.

Edición de su página de inicio con un complemento de generador de temas

La forma más fácil de editar su página de inicio es usando SeedProd. Es el mejor complemento de creación de temas de WordPress y puede crear hermosos diseños de sitios web y plantillas personalizadas sin escribir ningún código.

Puede usar SeedProd para crear un tema de WordPress totalmente personalizado, incluida una plantilla de página de inicio personalizada.

Nota: Hay una versión gratuita de SeedProd, pero necesitará la versión Pro para acceder al generador de temas y editar la plantilla de la página de inicio.

Primero, debe instalar y activar el complemento SeedProd. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe introducir su clave de licencia. Puede encontrar esta información en su cuenta en el sitio web de SeedProd.

SeedProd license key

Después de eso, puede usar SeedProd para crear fácilmente un tema de WordPress, incluida una página de inicio completamente personalizada desde cero.

Crear un tema de WordPress personalizado

Puede crear un nuevo tema en SeedProd navegando a la página SeedProd » Theme Builder . Aquí, utilizará uno de los temas ya preparados de SeedProd como punto de partida. Esto reemplazará su tema de WordPress existente con un nuevo diseño personalizado.

Puede hacerlo haciendo clic en el botón 'Temas'.

Create your custom theme

Se le mostrará una lista de temas diseñados profesionalmente que están diseñados para diferentes tipos de sitios web. Por ejemplo, hay plantillas llamadas 'Negocio moderno', 'Agencia de marketing' y 'Tema de agente hipotecario'.

Eche un vistazo a las opciones y seleccione la que mejor se adapte a sus necesidades haciendo clic en el icono de marca de verificación. Para este tutorial, elegiremos el tema 'Estrategia digital'.

Select a Theme That Matches Your Needs

Una vez que haya elegido un tema, SeedProd generará todas las plantillas de temas que necesita. Incluirá una plantilla para su página de inicio estática, así como una para la página de índice de su blog.

Edición de la plantilla de la página de inicio

SeedProd facilita la edición de cualquiera de estas plantillas utilizando un generador de páginas de arrastrar y soltar.

Simplemente haga clic en el enlace 'Editar diseño' que se encuentra debajo de la plantilla 'Página de inicio'. Esto abrirá la plantilla en el editor visual de SeedProd.

Haga clic en el enlace 'Editar diseño' debajo de la plantilla de la página de inicio

Este simple generador de arrastrar y soltar mostrará una vista previa en vivo de su página a la derecha y una barra de herramientas a la izquierda. Puede agregar nuevos bloques arrastrándolos a la página, reorganizarlos arrastrándolos hacia arriba y hacia abajo con el mouse y personalizar cualquier bloque haciendo clic en él.

Tenga en cuenta que la plantilla ya ha proporcionado un diseño atractivo y ha agregado mucho contenido relevante en la página. Ahora solo tiene que editarlo para que se adapte al propósito de su sitio web.

Cuando pase el mouse sobre un bloque, aparecerá una barra de herramientas.

El editor visual de SeedProd

Si hace clic en el bloque, puede ajustar su configuración en el panel izquierdo.

Por ejemplo, cuando hace clic en el título, puede editar el texto, cambiar la alineación, modificar el tamaño de fuente y más.

Configuración de SeedProd para el bloque 'Título'

Cuando cambia una configuración, puede verla inmediatamente en la vista previa a la derecha.

Por ejemplo, cambiaremos el texto a 'Todo sobre WordPress'.

Cuando edita el texto de un bloque, se actualiza inmediatamente en la vista previa

Una vez que haya hecho esto, puede hacer clic en el ícono 'Bloquear' cerca de la parte superior de la página de configuración. Esto lo regresará a la vista de Bloques.

A continuación, editaremos el texto del botón. Puede hacer clic en el botón "Qué hacemos" y editar el texto para decir "Ver los cursos".

Cambiar el texto del botón

Ahora nos desplazaremos hacia abajo en nuestra página de inicio hasta que lleguemos a la lista de viñetas sobre los productos y servicios que ofrece.

Puede editarlos de la misma manera, haciendo clic en un bloque y editando el texto.

Editar lista de beneficios

Su página de inicio ahora debería verse como la captura de pantalla a continuación.

Si necesita agregar más detalles, puede agregar otra fila de viñetas haciendo clic en el ícono azul '+' en la parte inferior.

Agregue una fila haciendo clic en el ícono + en la parte inferior

La plantilla de SeedProd puede haber incluido más secciones de las que puede usar. Puede eliminar fácilmente cualquier bloque o sección que no necesite simplemente haciendo clic en el icono de la papelera.

Por ejemplo, puede pasar el mouse sobre la sección "De confianza" de la página de inicio. Una vez que aparece la barra de herramientas, puede hacer clic en el icono Papelera para eliminar esa sección.

Elimine un bloque o una sección haciendo clic en el icono de la papelera

Cerca de la parte inferior de la página de inicio hay una sección de preguntas frecuentes. Esto se creó utilizando un bloque de acordeón, lo que simplifica la personalización de las preguntas y respuestas que desea incluir en su página de inicio.

Al hacer clic en el bloque, puede editar el texto de cada pregunta y respuesta.

Edición de la sección de preguntas frecuentes

Una vez que haya terminado de personalizar su página de inicio, asegúrese de hacer clic en el botón 'Guardar' en la parte superior de la pantalla. Luego puede volver a la lista de plantillas haciendo clic en el icono 'X'.

Como puede ver, las plantillas, la interfaz de arrastrar y soltar y los bloques útiles de SeedProd lo hacen ideal para editar la página de inicio de su sitio web. Para obtener aún más ideas, echa un vistazo a nuestra guía sobre cómo crear una página de destino con WordPress.

Edición de la plantilla de índice del blog

Puede editar la plantilla de índice de su blog de manera similar. Puede aprender cómo hacer esto visitando nuestra guía sobre cómo crear una página separada para publicaciones de blog en WordPress.

Usando el Método 2, debe desplazarse hacia abajo hasta la sección sobre cómo personalizar la página de su blog. Aquí aprenderá cómo agregar nuevos bloques usando arrastrar y soltar, y cómo cambiar la configuración de cada bloque en la página.

SeedProd's Post Block Settings

Le mostraremos cómo editar el bloque Publicaciones para enumerar sus publicaciones en varias columnas y mostrar u ocultar la imagen destacada de sus publicaciones.

Hay configuraciones para cuántas publicaciones mostrar y si mostrar un extracto de la publicación. También puede filtrar el índice por tipo de publicación, categoría, etiqueta o autor, y cambiar el orden de clasificación.

Habilitación del tema SeedProd

Una vez que haya terminado de personalizar las plantillas de temas, deberá publicar el nuevo tema personalizado. Simplemente cambie la configuración 'Habilitar tema de SeedProd' a la posición 'SÍ'.

Enable the SeedProd Theme

Si aún no ha cambiado la configuración de la página de inicio y blog de WordPress, verá un mensaje de notificación. Cuando haga clic en el botón 'Aceptar', esta configuración se cambiará por usted.

Ahora puede visitar su sitio web para ver su nueva página de inicio.

Vista previa de la página de inicio de SeedProd

Edición de su página de inicio con un complemento de Page Builder

Divi es un popular complemento de creación de páginas de WordPress. Viene con un tema de WordPress y un complemento de creación de páginas con docenas de hermosas plantillas.

Puede usar el generador de páginas Divi con cualquier tema. Para este tutorial, lo usaremos con el tema Divi.

Primero, deberá descargar, instalar y activar el tema Divi de Elegant Themes. Esto incluye el constructor Divi, por lo que no necesita instalarlo por separado. Deberá ingresar su nombre de usuario y clave API en Divi » Opciones de tema » Actualizaciones para acceder a los paquetes de diseño.

Si necesita ayuda para instalar el tema, consulte nuestra guía paso a paso sobre cómo instalar un tema de WordPress.

Una vez que tenga el tema Divi y el generador de páginas en funcionamiento, puede configurar su página de inicio. Primero, vaya al menú Páginas en su tablero de WordPress y luego edite la página de inicio que creamos anteriormente.

Antes de comenzar a editar su página de inicio, es una buena idea cambiar a la plantilla 'Página en blanco' debajo del panel 'Plantilla' a la derecha. De esa manera, su página de inicio no tendrá una barra lateral, un título, un menú o cualquier otro elemento predeterminado.

Selecting the Blank Page Template in the Divi Theme

A continuación, puede hacer clic en el botón 'Usar The Divi Builder' en la parte superior de la pantalla.

Ahora, deberá hacer clic en el botón 'Editar con The Divi Builder' en el centro de la pantalla.

Click the Use Divi Builder Button in the Center of the Screen

Ahora debería ver la pantalla de bienvenida de Divi. Incluye un video tutorial sobre cómo usar Divi, una breve descripción de cómo comenzar y botones para comenzar a construir su página o hacer un recorrido por las funciones de Divi.

Haremos clic en el botón 'Comenzar a construir' en la parte inferior de la página.

Divi Welcome Screen

A continuación, verá una variedad de opciones que puede usar para crear su página. Sugerimos utilizar un diseño prefabricado como base para su página de inicio. Esto hace que sea realmente rápido y fácil configurar su página de inicio.

Choose the Browse Layouts Option in Divi

Divi tiene una impresionante gama de diferentes diseños para elegir. Hay cientos de paquetes de diseño diferentes, y cada uno de ellos tiene varios diseños de página diferentes, incluidas las páginas de inicio.

Puede buscarlos escribiendo un término de búsqueda, o puede marcar las casillas para ver solo los diseños que se ajustan a ciertas categorías.

Just a Few of the Layout Packs Available in Divi

Vamos a utilizar el paquete de diseño 'Blog de viajes' para crear nuestra página de inicio.

Primero, haga clic en el paquete que desea utilizar:

The Travel Blog Layout Pack in Divi

A continuación, verá una descripción del paquete de diseño, además de los diferentes diseños de página que están disponibles. Probablemente querrá usar la página de 'Inicio' o la página de 'Aterrizaje' para su página de inicio. Vamos a elegir la opción 'Inicio'.

Una vez que haya elegido su diseño, haga clic en el botón 'Usar este diseño' en la parte inferior de la página.

Choose the Layout You Want to Use in Divi

Divi importará automáticamente el diseño por ti. Luego lo verá en vivo en su página, exactamente como aparecerá en su sitio. Para editar cualquier parte del mismo, simplemente haga clic en él.

Divi utiliza un sistema de filas (dividido en columnas) y módulos para crear tu página. Con los módulos de texto, puede hacer clic en el texto y escribir lo que quiera directamente en la pantalla.

Aquí, hemos cambiado el encabezado y el texto debajo de él:

Editing the Header Text Using Divi

Con otros módulos, puede pasar el cursor del mouse sobre ellos y hacer clic en el ícono 'Configuración del módulo' para editarlos.

Aquí, estamos editando uno de los contadores de números:

Changing the Settings for a Module in the Divi Builder

Puede eliminar módulos y filas de la misma manera, utilizando el icono de la papelera.

Es probable que desee utilizar sus propias imágenes en su página de inicio. Puede cambiarlos editando la configuración del módulo.

Tenga en cuenta que la imagen en la parte superior está configurada como fondo para un módulo de encabezado de ancho completo, por lo que deberá cambiarla en Contenido » Fondo para ese módulo:

Editing the Background Image of the Fullwidth Header Module

Una vez que esté satisfecho con los cambios que ha realizado en su página, puede hacer clic en "Guardar" en la parte inferior de la pantalla.

Click the Save Button in Divi

A veces, la fila inferior de botones estará oculta.

Si no puede verlos, deberá hacer clic en el botón morado "..." para abrirlos.

Click the Icon With Three Dots to Show the Save Button

Así es como se ve nuestra página en vivo en el sitio web:

The Finished Divi Homepage

Configuración de su página de inicio en WordPress

De forma predeterminada, WordPress muestra las publicaciones de su blog en la página de inicio.

Eso significa que después de crear y personalizar su página de inicio, deberá indicarle a su sitio de WordPress que muestre esa página cuando alguien visite su dominio.

Echemos un vistazo a cómo configurar una página de inicio y una página de blog separadas en WordPress.

Consejo profesional: ¿Ya tiene visitantes en su sitio? Entonces es posible que desee poner su sitio en modo de mantenimiento mientras configura su página de inicio. Alternativamente, puede configurar un sitio de prueba donde puede crear su página de inicio antes de publicarla en vivo.

Primero, simplemente vaya a Páginas » Agregar nuevo y nombre su nueva página Blog. Después de eso, puede continuar y publicar la página en blanco.

Creating a Blog Page

Una vez que su página de inicio y la página del blog estén listas, debe decirle a WordPress que comience a usar estas páginas.

Puede hacerlo yendo a Configuración » Página de lectura en su área de administración de WordPress. Debe seleccionar la opción 'Una página estática' en la sección 'Su página de inicio muestra'. Después de eso, continúe y seleccione sus páginas de inicio y blog.

Select Your Home Page and Blog Page

No olvide hacer clic en el botón 'Guardar cambios' para almacenar su configuración.

WordPress mostrará automáticamente sus últimas publicaciones en la página del blog. Para obtener más detalles, puede consultar nuestra guía sobre cómo crear una página de blog independiente en WordPress.

¡Eso es! Has creado una página de inicio de gran apariencia en WordPress y la has configurado correctamente.

Esperamos que este tutorial le haya ayudado a aprender a editar una página de inicio de WordPress. También puede echar un vistazo a nuestra guía sobre los complementos imprescindibles de WordPress y nuestros consejos sobre cómo mejorar el SEO de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress. También puede encontrarnos en Twitter y Facebook.

La publicación Cómo editar una página de inicio de WordPress (de manera fácil y efectiva) apareció por primera vez en AprenderWP.