Cómo crear una página personalizada en WordPress

¿Quieres crear una página personalizada en WordPress?

Una página personalizada le permite usar un diseño diferente del resto de su sitio web. Muchos sitios de WordPress usan diseños de página personalizados para sus páginas de ventas, páginas de destino, páginas de seminarios web y más.

En este artículo, le mostraremos cómo crear fácilmente una página personalizada en WordPress.

¿Por qué crear una página personalizada en WordPress?

Cada vez que crea una nueva página, su tema de WordPress controla cómo se ve esa página usando un archivo de plantilla.

Esta plantilla page.php afecta a todas las páginas individuales que creas en WordPress. Sin embargo, es posible que no desee utilizar el mismo diseño cada vez.

Las páginas de destino a menudo tienen un contenido diferente en comparación con las páginas normales, como una gran imagen de héroe o una llamada a la acción (CTA). Esto significa que a menudo se ven completamente diferentes al resto de su sitio web.

Intentar crear diseños únicos utilizando la plantilla de página estándar puede llevar mucho tiempo.

También está limitado por la plantilla y es posible que no pueda lograr el diseño exacto que desea. Esto puede hacer que sea difícil obtener buenos resultados. Por ejemplo, si está creando una página de ventas, es posible que no obtenga muchas conversiones.

Dicho esto, veamos cómo puede crear una página personalizada en WordPress, con el diseño, el diseño y el contenido exactos que desea. Simplemente use los enlaces rápidos a continuación para saltar directamente al método que desea usar.

Método 1. Cómo crear una página personalizada en WordPress usando el editor de bloques (no se requiere complemento)

El editor de bloques facilita el diseño de sus propias plantillas utilizando las herramientas con las que ya está familiarizado.

Sin embargo, este método solo funciona con temas habilitados para bloques. Si este método no funciona con su tema, le recomendamos que utilice un generador de páginas en su lugar.

Para comenzar, simplemente abra cualquier página o publicación. Luego, haga clic en la pestaña 'Página' en el menú de la derecha y haga clic para expandir la sección 'Plantilla'.

Continúe y cree una plantilla personalizada haciendo clic en el enlace 'Nuevo'.

En la ventana emergente que aparece, escriba un nombre para su plantilla y luego haga clic en 'Crear'.

El nombre es solo para su referencia para que pueda usar lo que quiera.

Esto inicia el editor de plantillas, que funciona de manera similar al editor de bloques estándar.

Para agregar bloques a su diseño de página personalizado, simplemente haga clic en el botón azul '+'. Luego puede arrastrar y soltar para agregar bloques.

Puede agregar contenido a un bloque o cambiar su formato utilizando las conocidas herramientas de edición de publicaciones de WordPress. Por ejemplo, puede escribir texto en un bloque de "Encabezado" y aplicar formato de negrita o cambiarlo de H2 a H3.

También puede crear una página personalizada utilizando patrones. Los patrones son colecciones de bloques que a menudo se usan juntos, como una lista de eventos, una imagen con un título o una tabla de precios.

Los patrones que vea variarán según su tema de WordPress, pero puede ver qué patrones están disponibles haciendo clic en la pestaña 'Patrones'.

Puede arrastrar y soltar un patrón de bloques en su diseño o hacer clic en el patrón para agregarlo a la parte inferior de su plantilla. Cuando esté satisfecho con el aspecto de la plantilla, haga clic en el botón 'Publicar' y luego haga clic en 'Guardar'.

Ahora puede aplicar esta plantilla a cualquier página. Abra esa página en el editor y luego, en el menú de la derecha, abra el menú desplegable 'Plantilla' y elija la plantilla personalizada que acaba de crear.

Ahora puede agregar contenido a la página como cualquier otra página de WordPress, para crear una página completamente personalizada en WordPress. Cuando guarda la página, puede visitar su sitio para ver la nueva plantilla en acción.

Método 2. Cómo Crear una Página Personalizada en WordPress usando SeedProd (Recomendado)

En el pasado, creabas una página personalizada escribiendo código, lo cual no era muy fácil de usar para principiantes. Si cometió un error con su código HTML, CSS o PHP, es posible que incluso cause errores comunes de WordPress o rompa por completo su sitio.

Con eso en mente, recomendamos usar un creador de páginas en su lugar.

SeedProd es el mejor creador de páginas de arrastrar y soltar para WordPress. Viene con más de 180 plantillas que le permiten crear páginas personalizadas sin escribir ningún código.

Si está utilizando una página personalizada para obtener más conversiones, entonces SeedProd funciona con muchas herramientas populares de terceros que quizás ya esté utilizando para administrar las conversiones. Esto incluye los principales servicios de marketing por correo electrónico, WooCommerce, Google Analytics y más.

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

Nota: También hay una versión gratuita de SeedProd que le permite crear páginas personalizadas si tiene un presupuesto ajustado y acaba de empezar. Sin embargo, para esta guía, usaremos SeedProd Pro ya que tiene muchas más plantillas y se integra con todos los mejores servicios de marketing por correo electrónico.

Después de activar el complemento, SeedProd le pedirá su clave de licencia.

Puede encontrar esta información en su cuenta en el sitio web de SeedProd. Después de ingresar la clave, haga clic en el botón 'Verificar clave'.

Una vez que haya hecho eso, vaya a SeedProd » Landing Pages y haga clic en el botón 'Agregar nueva página de destino'.

Ahora puede elegir una plantilla para su página personalizada.

Las plantillas de SeedProd están organizadas en diferentes tipos de campaña, como 'cliente potencial', 'apretón' y 'próximamente'. Puede hacer clic en las pestañas en la parte superior de la pantalla para filtrar las plantillas según el tipo de campaña.

Si desea comenzar desde cero, SeedProd también tiene una plantilla en blanco que puede usar.

Para observar más de cerca cualquier diseño, simplemente pase el mouse sobre esa plantilla y luego haga clic en el ícono de la lupa.

Cuando encuentre un diseño que le guste, haga clic en 'Elegir esta plantilla'. Estamos usando la plantilla 'Página de ventas del curso' en todas nuestras imágenes, pero puede usar cualquier plantilla que desee.

A continuación, continúe y escriba un nombre para la página personalizada. SeedProd creará automáticamente una URL basada en el título de la página, pero puede cambiar esta URL a cualquier cosa que desee.

Una URL descriptiva ayudará a los motores de búsqueda a comprender de qué se trata la página, para que puedan mostrársela a los usuarios adecuados.

Cuando esté satisfecho con la información que ingresó, haga clic en el botón 'Guardar y comenzar a editar la página'.

Para darle a su página personalizada la mejor oportunidad de aparecer en los resultados de búsqueda relevantes, puede agregar cualquier palabra clave que falte en la URL. Para obtener más detalles, consulte nuestra guía sobre cómo hacer una investigación de palabras clave.

Esto cargará la interfaz del creador de páginas de SeedProd. Es un generador simple de arrastrar y soltar y muestra una vista previa en vivo de su página a la derecha. También verá la configuración de bloqueo a la izquierda.

Para personalizar un bloque, simplemente haga clic para seleccionarlo en el editor de páginas. La barra de herramientas de la izquierda mostrará todas las configuraciones para ese bloque.

Por ejemplo, aquí estamos cambiando el texto dentro de un bloque 'Título'.

Puede formatear el texto, cambiar su alineación, agregar enlaces y más usando la configuración en el menú de la izquierda.

También es fácil editar imágenes usando el generador de páginas SeedProd. Simplemente haga clic en cualquier bloque de 'Imagen' y use la configuración para agregar texto alternativo, cargar una nueva imagen o realizar cualquier otro cambio.

Si desea eliminar un bloque de su página personalizada, simplemente haga clic para seleccionar ese bloque.

Luego, puede hacer clic en el ícono de la papelera en la mini barra de herramientas.

Para agregar nuevos bloques a su diseño, simplemente busque un bloque en el menú de la izquierda y luego arrástrelo al editor.

A continuación, puede hacer clic para seleccionar el bloque y realizar cualquier cambio en el menú de la izquierda.

SeedProd también viene con 'Secciones', que son plantillas de filas y bloques que pueden ayudarlo a crear una página personalizada rápidamente. Por ejemplo, si estuviera diseñando una página de destino de anuncios de Google, entonces podría usar las secciones Hero, Llamada a la acción o Funciones listas para usar de SeedProd.

Para ver todas las secciones disponibles, simplemente haga clic en la pestaña 'Secciones'.

Para ver más de cerca una sección, pase el mouse sobre ella y luego haga clic en el ícono de la lupa.

Cuando encuentre una sección que desee agregar a su diseño, simplemente mueva el mouse sobre ella y luego haga clic en el pequeño ícono '+'.

Esto agrega la sección al final de su página. Puede mover secciones y bloques alrededor de su diseño usando arrastrar y soltar.

Si cometes un error o cambias de opinión, no te preocupes. Puede revertir su último cambio haciendo clic en el botón 'Deshacer' en la parte inferior de la barra de herramientas de la izquierda.

Aquí también encontrará un botón de rehacer, historial de revisión, navegación de diseño y configuraciones globales.

Estos botones adicionales facilitan la creación de una página personalizada en WordPress.

En la parte inferior de la barra de herramientas, también encontrará un botón de vista previa móvil que le permite ver la versión móvil de la página personalizada.

Esto puede ayudarlo a diseñar una página personalizada que se vea tan bien en dispositivos móviles como en su computadora.

Cuando esté satisfecho con la página personalizada, es hora de publicarla haciendo clic en la flecha desplegable junto a 'Guardar' y luego seleccione la opción 'Publicar'.

Su página personalizada ahora se publicará en su blog de WordPress.

Si desea editar la página personalizada en cualquier momento, simplemente vaya a SeedProd » Landing Pages en su panel de WordPress. A continuación, puede encontrar la página que desea cambiar y hacer clic en su enlace 'Editar'.

Esto abrirá el diseño en el editor de SeedProd, listo para que hagas tus cambios.

Método 3. Usar Beaver Builder para crear una página personalizada en WordPress

También puede crear una página personalizada con Beaver Builder. Recomendamos usar la versión profesional, pero también hay una versión gratuita de Beaver Builder que tiene funciones limitadas.

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

Tras la activación, vaya a Configuración » Beaver Builder . Luego, haga clic en la pestaña 'Licencia'.

Aquí, simplemente ingrese la clave de licencia, que encontrará en su cuenta en el sitio web de Beaver Builder. A continuación, puede continuar y hacer clic en 'Guardar clave de licencia'.

Para crear una página personalizada, simplemente diríjase a Páginas » Agregar nuevo en su panel de administración de WordPress. Luego, haga clic en el botón 'Iniciar Beaver Builder'.

Esto abrirá el editor de Beaver Builder.

Si el menú de la derecha no se abre automáticamente, haga clic en el '+' en la esquina superior derecha para abrirlo.

Este menú tiene todos los diferentes módulos y filas que puede agregar a su página personalizada. Al igual que los bloques de SeedProd, estas son las partes centrales de cualquier página de Beaver Builder.

Cuando encuentre un bloque o módulo que desee utilizar, arrástrelo y suéltelo en el editor de páginas.

Otra opción es comenzar con una plantilla. Para ver todos los diferentes diseños de Beaver Builder, simplemente haga clic en la pestaña 'Plantillas'.

Luego puede hacer clic en cualquier plantilla para agregarla a la página.

Para editar cualquier parte de una plantilla, simplemente haga clic en ella. Por ejemplo, puede cambiar el texto, las imágenes, los colores y más.

En la siguiente imagen, estamos editando el encabezado de la página. El proceso de edición de Beaver Builder no es tan sencillo como el de SeedProd, por lo que deberá realizar los cambios en el cuadro emergente independiente que aparece.

Cuando esté satisfecho con el aspecto de la página personalizada, haga clic en el botón "Listo".

Luego puede guardar la publicación como borrador o publicarla para que aparezca en su sitio web de WordPress.

Método 4. Creación manual de una plantilla de página personalizada

También puede crear una plantilla de página personalizada manualmente en WordPress. Similar al archivo page.php, esta plantilla le permite controlar cómo se ve la página.

Este método requiere que escriba algo de código, por lo que no es la opción más amigable para principiantes. Sin embargo, le permite crear una página personalizada sin tener que instalar un nuevo complemento.

Si solo desea crear una pequeña cantidad de páginas personalizadas, es posible que prefiera escribir código en lugar de configurar un complemento de creación de páginas.

Para comenzar, abra un editor de texto sin formato como el Bloc de notas en su computadora. En el archivo en blanco, agregue esta línea de código en la parte superior:

<?php /* Template Name: CustomPageT1 */ ?>

Este código simplemente le dice a WordPress que se trata de un archivo de plantilla llamado 'CustomPageT1'. Puedes nombrar la plantilla como quieras.

Ahora, agregue todo el código para el diseño de página personalizado. Esta plantilla es exactamente igual que cualquier otro archivo de tema en WordPress, por lo que puede agregar HTML, etiquetas de plantilla y código PHP.

Para ayudarlo a codificar el archivo de plantilla, es posible que desee copiar la plantilla page.php existente proporcionada por su tema. Esto puede ahorrarle tiempo y ayuda a que la página personalizada se mezcle con el resto de su sitio web de WordPress.

La forma más fácil de copiar el código de page.php es conectándose a su servidor usando un cliente FTP como FileZilla, o puede usar el administrador de archivos de su plataforma de alojamiento de WordPress como cPanel o Site Tools de SiteGround.

Si es la primera vez que usa FTP, puede ver nuestra guía completa sobre cómo conectarse a su sitio usando FTP.

Una vez que esté conectado, vaya a /wp-content/themes/ y abra la carpeta de su tema actual. Dentro de esta carpeta, busque el archivo page.php y ábralo en cualquier editor de texto.

Puede usar este código como base de su plantilla personalizada e incluso puede pegar el código en su nuevo archivo de plantilla.

Si pega el código, no copie el texto del encabezado de page.php, que es la parte que está comentada en la parte superior del archivo.

Puede crear cualquier diseño que desee, pero aquí hay un ejemplo de un diseño de página personalizado simple que usaremos en nuestro sitio:

<?php /* Template Name: CustomPageT1 */ ?>
 
<?php get_header(); ?>
 
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <?php
        // Start the loop.
        while ( have_posts() ) : the_post();
 
            // Include the page content template.
            get_template_part( 'template-parts/content', 'page' );
 
            // If comments are open or we have at least one comment, load up the comment template.
            if ( comments_open() || get_comments_number() ) 
                comments_template();
            
 
            // End of the loop.
        endwhile;
        ?>
 
    </main><!-- .site-main -->
 
    <?php get_sidebar( 'content-bottom' ); ?>
 
</div><!-- .content-area -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Ahora puede guardar el archivo. Puede usar cualquier nombre que desee, pero asegúrese de terminar el archivo con la extensión .php.

Aunque puede agregar este archivo a cualquier tema de WordPress, es una buena idea crear un tema secundario basado en su tema actual. De esta forma, puedes actualizar tu tema de WordPress sin perder la personalización.

En su cliente FTP o administrador de archivos, simplemente cargue la plantilla personalizada en el directorio de su tema actual. Una vez que haya hecho eso, es hora de crear una nueva página en el tablero de WordPress o abrir cualquier página donde desee usar la plantilla.

En el menú de la derecha, haga clic en la pestaña 'Página' y luego haga clic para expandir la sección 'Plantillas', si aún no está expandida.

A continuación, puede abrir el menú desplegable y seleccionar la plantilla que creó.

Para agregar contenido real a su página personalizada, simplemente edite la página como de costumbre. Cuando esté satisfecho con el aspecto de todo, puede hacer clic en 'Actualizar' o 'Publicar' para publicarlo en su sitio.

Esperamos que este artículo le haya ayudado a aprender cómo crear una página personalizada en WordPress. También puede consultar nuestra guía sobre los complementos de WordPress que debe tener para su sitio web y cómo aumentar el tráfico de su blog.

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 crear una página personalizada en WordPress apareció por primera vez en AprenderWP.