Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo crear una página personalizada en WordPress

¿Quieres crear una página personalizada en WordPress?

Una página personalizada le permite utilizar una estructura / disposición / diseño / plantilla diferente del resto de su sitio web. Muchos sitios de WordPress utilizan diseños de página personalizados para sus páginas de ventas, páginas de destino, páginas de seminarios web, etc.

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

How to create a custom page in WordPress

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

Cada vez que crea una nueva página, su tema de WordPress controla el aspecto de esa página mediante un archivo de plantilla.

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

Laspáginas de destino suelen tener un contenido diferente al de las páginas normales, como una imagen a pantalla completa o una llamada a la acción (CTA). Esto significa que suelen tener un aspecto completamente distinto al del resto del sitio web.

Sin embargo, intentar crear diseños únicos utilizando la plantilla de página estándar puede llevar mucho tiempo. También estás limitado por la plantilla page.php, y puede que no seas capaz de crear el diseño exacto que deseas. Esto puede dificultar la obtención de buenos resultados. Por ejemplo, si estás creando una página de ofertas, puede que no consigas muchas conversiones debido a un mal diseño de la página.

Dicho esto, veamos cómo puede crear una página personalizada en WordPress, con la estructura / disposición / diseño / plantilla y contenido exactos que desee. Simplemente utilice los enlaces rápidos a continuación para saltar directamente al método que desea utilizar.

Método 1. Cómo Crear una Página Personalizada en WordPress Usando el Editor de Bloques (No Requiere Plugins)

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

Esta es una buena opción si planeas reutilizar el mismo diseño en varias páginas, ya que puedes simplemente aplicar la misma plantilla. Si quieres crear un diseño completamente único, otra opción es crear la página de forma normal y luego editar su diseño utilizando el editor de sitio completo, que veremos en el Método 2.

Ten en cuenta que estos métodos sólo funcionan con temas basados en bloques como ThemeIsle Hestia Pro o Twenty Twenty-Three. Si no tienes un tema basado en bloques, te recomendamos que utilices un constructor de páginas.

Para empezar, abre cualquier página o entrada. A continuación, seleccione la pestaña “Página” en el menú de la derecha y haga clic en el texto situado junto a “Plantilla”.

How to create a custom theme using the built-in WordPress template

Las opciones que vea pueden variar dependiendo de su tema de WordPress, pero el texto normalmente mostrará ‘Página’, ‘Plantilla por defecto’ o similar.

En la ventana emergente que aparece, haga clic en el icono “Añadir plantilla”.

How to create a custom WordPress template

En la ventana emergente que aparece, escriba un nombre para la plantilla y haga clic en “Crear”.

El nombre es sólo para tu referencia, así que puedes usar el que quieras.

Creating a new template in the WordPress block editor

Esto inicia el editor de plantillas, que funciona de forma similar al editor de contenido de WordPress.

Para añadir bloques al diseño de la página personalizada, basta con hacer clic en el botón azul “+”. A continuación, puede arrastrar y soltar para añadir bloques.

Editing a WordPress template using the block-based editor

Puede añadir contenido a un bloque o cambiar su formato utilizando las conocidas herramientas de edición de entradas de WordPress. Por ejemplo, puedes escribir texto en un bloque “Encabezado”, aplicar formato de negrita o cambiar el texto de H2 a H3.

También puede crear una página personalizada utilizando patrones. Los patrones son colecciones de bloques que suelen utilizarse juntos, como un anuncio / catálogo / ficha.

Los patrones que verá variarán en función de su tema de WordPress, pero puede ver qué patrones están disponibles al hacer clic en la pestaña “Patrones”.

A selection of patterns in the WordPress editor

Puede arrastrar y soltar un patrón de bloques en su disposición o hacer clic en el patrón para añadirlo a la parte inferior de su plantilla. Cuando estés satisfecho con el aspecto de la plantilla, haz clic en el botón “Publicar” y, a continuación, en “Guardar”.

Ahora puede aplicar esta plantilla a cualquier página. Sólo tiene que abrir la página en el editor y, a continuación, hacer clic en el texto situado junto a “Plantilla”.

En la ventana emergente que aparece, seleccione la plantilla que acaba de crear.

Changing the WordPress template

Una vez hecho esto, puede añadir contenido a la página, como a cualquier otra página de WordPress.

Método 2. Cómo crear una página personalizadautilizando el editor de sitio completo (solo temas basados en bloques)

Si utilizas un tema basado en bloques, también puedes crear una página personalizada utilizando el editor de sitio completo. Esto le permite cambiar el diseño de una página individual, sin necesidad de crear una plantilla personalizada.

Teniendo esto en cuenta, es una buena opción si quieres crear un diseño completamente único que no reutilizarás en ninguna otra página.

Para añadir una nueva página, ve a Páginas Añadir nueva página. A continuación, puede escribir un título, añadir categorías y etiquetas, subido una imagen destacada, y hacer cualquier otro cambio que desee.

Cuando estés satisfecho con la página básica, guarda los cambios y dirígete a Apariencia Editor.

Opening the WordPress full-site editor (FSE)

Por defecto, el editor de sitio completo muestra la plantilla de inicio de su tema.

En el menú de la izquierda, haga clic en “Páginas”.

Editing a page layout using the full-site editor (FSE)

Ahora verá todas las páginas que ha creado en su sitio web WordPress.

Sólo tiene que encontrar la página que desea rediseñar y darle un clic.

Create a custom page design using the full-site editor (FSE)

WordPress mostrará ahora una vista previa del diseño.

Para editar esta plantilla, haga clic en el icono del lápiz pequeño.

Create a custom page design using the block-based editor

Ahora puede editar la disposición de la página utilizando las herramientas del editor del sitio completo. Por ejemplo, puede hacer clic en el botón azul “+” para añadir nuevos bloques, o hacer clic para seleccionar cualquier bloque que desee personalizar.

Cuando estés satisfecho con los cambios realizados, haz clic en el botón “Guardar”.

Create a custom page design using the block-based editor

Ahora, si visita esta página en su sitio web, verá el nuevo diseño de la página en acción.

Método 3. Crear una página personalizada en WordPress usando SeedProd (Recomendado)

En el pasado, usted creaba una página personalizada escribiendo código, lo que no era muy fácil para los principiantes. Si cometiste un error con tu código HTML, CSS o PHP, entonces podría causar errores comunes de WordPress o incluso romper tu sitio por completo.

Por ello, le recomendamos que utilice un maquetador de páginas.

SeedProd es el mejor constructor de páginas de arrastrar y soltar para WordPress. Viene con más de 350 plantillas, lo que le permite crear páginas personalizadas sin escribir ningún código.

Si está utilizando una página personalizada para obtener más conversiones, entonces SeedProd trabaja con muchas herramientas populares de terceros que ya puede estar utilizando para obtener conversiones. Esto incluye los mejores servicios de marketing por correo electrónico, WooCommerce, Google Analytics, y más.

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

Nota: También hay una versión gratuita de SeedProd que le permite crear páginas personalizadas sin importar su presupuesto. Sin embargo, para esta guía, vamos a utilizar SeedProd Pro ya que tiene muchas más plantillas y se integra con todos los mejores servicios de email marketing.

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

SeedProd license key

Encontrará esta información en su cuenta del sitio web de SeedProd. Después de introducir la clave, haga clic en el botón “Verificar clave”.

Elija una plantilla de página personalizada

Una vez hecho esto, vaya a SeedProd ” Páginas de destino y haga clic en el botón “Añadir nueva página de destino”.

SeedProd's page design templates

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’,‘squeeze’ y‘próximamente‘. Puede hacer clic en las pestañas de la parte superior de la pantalla para filtrar las plantillas según el tipo de campaña.

The SeedProd template library

Si quiere empezar desde cero, SeedProd también dispone de una plantilla en blanco que puede utilizar.

Para ver más de cerca cualquier diseño, sólo tiene que pasar el ratón por encima de esa plantilla y luego hacer clic en el icono de la lupa.

Previewing a ready-made template

Cuando encuentres un diseño que te guste, haz clic en ‘Elegir esta plantilla’. Estamos utilizando la plantilla ‘Página de Ventas del Curso’ en todas nuestras imágenes, pero puedes utilizar cualquier plantilla que desees.

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

Una URL descriptiva también ayudará a los motores de búsqueda a entender de qué trata la página para que puedan mostrarla a los usuarios adecuados, lo que mejorará su SEO en WordPress.

Para que su página personalizada tenga las máximas posibilidades de aparecer en los resultados de búsqueda relevantes, puede añadir las palabras clave que falten en la URL. Para más información, consulta nuestra guía sobre cómo realizar búsquedas de palabras clave.

Creating a custom page for your WordPress website

Cuando esté satisfecho con la información introducida, haga clic en el botón “Guardar y empezar a editar la página”.

Diseñe su página personalizada

SeedProd abrirá la plantilla elegida en su sencillo editor de arrastrar y soltar. Verá una vista previa en vivo de su página a la derecha, y algunos ajustes de bloque a la izquierda.

The SeedProd courses template

Para personalizar un bloque, basta con hacer clic para seleccionarlo en el editor de páginas. La barra de herramientas de la izquierda mostrará todos los ajustes de ese bloque.

En la siguiente imagen, estamos cambiando el texto dentro de un bloque ‘Titular’.

Editing the headline for your custom page

Puede dar formato al texto, cambiar su alineación, añadir enlaces, etc., utilizando los ajustes del menú de la izquierda.

También es fácil editar imágenes utilizando el maquetador de páginas de SeedProd. Simplemente haga clic en cualquier bloque de ‘Imagen’ y utilice los ajustes para añadir texto alternativo, subir una nueva imagen, o hacer cualquier otro cambio.

Editing images in a custom page design

Si desea eliminar un bloque de la página personalizada, sólo tiene que hacer clic para seleccionarlo.

A continuación, haga clic en el icono de la papelera de la minibarra de herramientas.

Removing a block from a SeedProd custom page

Para añadir nuevos bloques a tu diseño, sólo tienes que buscar un bloque en el menú de la izquierda y arrastrarlo al editor.

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

Adding a social sharing block to WordPress

SeedProd también viene con “Secciones”, que son filas y plantillas de bloques que pueden ayudarle a crear una página personalizada, rápido. Por ejemplo, si usted está diseñando una página de destino de Google Ad, entonces usted podría utilizar SeedProd’s ready-made Hero, Call To Action, o características de las secciones.

Para ver todas las secciones disponibles, basta con hacer clic en la pestaña “Secciones”.

SeedProd's ready-made sections

Para ver más de cerca una sección, pase el ratón por encima y haga clic en el icono de la lupa.

Cuando encuentre una sección que desee añadir a su diseño, sólo tiene que pasar el ratón por encima y hacer clic en el pequeño icono “+”.

Adding a section to a custom page

Esto añade la sección a la parte inferior de su página. Puede mover tanto las secciones como los bloques por el diseño arrastrando y soltando.

Si te equivocas o cambias de opinión, no te preocupes. Puedes deshacer el último cambio haciendo clic en el botón “Deshacer” situado en la parte inferior de la barra de herramientas de la izquierda.

Aquí también encontrarás un botón para rehacer, historial de revisiones, navegación por la disposición y ajustes globales.

The SeedProd global settings bar

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 permitirá ver la versión móvil de la página personalizada.

Previewing a custom page on mobile

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

Cuando esté satisfecho con la página personalizada, es hora de publicarla; para ello, haga clic en la flecha desplegable situada junto a “Guardar” y, a continuación, seleccione la opción “Publicar”.

Publishing a custom page

Su página personalizada aparecerá en su blog de WordPress.

Si desea editar la página personalizada en cualquier momento, sólo tiene que ir a SeedProd ” Páginas de destino en su escritorio de WordPress. A continuación, puede encontrar la página que desea cambiar y hacer clic en su enlace “Editar”.

Fine-tuning a custom page in WordPress

Esto abrirá el diseño en el editor de SeedProd, listo para que usted haga sus cambios.

Método 4. Usar Thrive Architect para crear una página personalizada en WordPress

También puedes crear una página personalizada utilizando Thrive Architect. Thrive Architect es otro popular constructor de páginas de arrastrar y soltar para WordPress.

Incluye más de 300 plantillas de diseño profesional pensadas para ayudarle a conseguir más conversiones.

Custom page example built with Thrive Architect

Primero, necesitas instalar y activar el plugin Thrive Architect. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, ve a Páginas ” Añadir nuevo en tu escritorio de administrador de WordPress para crear una página personalizada. A continuación, haz clic en el botón “Iniciar Thrive Architect”.

Launch Thrive Architect

A continuación, puede elegir si desea crear una página normal o una página de destino preconstruida.

Te recomendamos hacer clic en “Página de destino prediseñada”, ya que te da acceso a todas las plantillas de página de destino de Thrive. Estas plantillas son totalmente personalizables, por lo que puedes ajustarlas para que se adapten a tu sitio web WordPress.

Choose the Pre-built Landing Page option in Thrive Architect

Cuando encuentres un conjunto que te guste, sólo tienes que hacer clic para seleccionarlo.

En la siguiente imagen, estamos seleccionando ‘Smart Landing Page Sets’.

Pick a template for your custom page in Thrive Architect

En la pantalla siguiente, tiene que elegir una plantilla específica del conjunto.

Seleccione una plantilla al hacer clic sobre ella y luego pulse el botón “Aplicar plantilla”.

Apply Thrive Architect template

Esto abrirá la plantilla en el Editor de Thrive Architect. Desde aquí, puedes personalizar fácilmente la plantilla de página para que coincida con tu blog, sitio web o tienda online.

Por ejemplo, puede cambiar el “encabezado” al hacer clic en él y luego escribir su propio mensaje personalizado.

Customize page elements in Thrive Architect

Ahora verás todas las opciones de personalización en el menú de la izquierda. Aquí puedes cambiar la tipografía, el tamaño de letra, el color, el formato y mucho más.

Desde el panel izquierdo, también puede establecer otros ajustes para su página personalizada, como la disposición, el estilo de fondo, los bordes, las animaciones y el comportamiento de desplazamiento, por nombrar sólo algunos.

Customize page settings in Thrive Architect

Similar a los bloques de SeedProd, Thrive Architect viene con muchos elementos pre-construidos que puedes añadir a tu página personalizada.

Para añadir un nuevo elemento a la página, haga clic en el botón “Añadir elemento (+)” situado a la derecha de la pantalla.

Click the Add Element button

Ahora puede elegir entre elementos como imágenes, botones, formularios de generación de clientes potenciales, tablas de precios, temporizadores de cuenta atrás y mucho más.

Para añadir un elemento, sólo tienes que arrastrarlo desde el menú de la derecha y soltarlo en tu página.

Drag and drop elements onto your page

De nuevo, puedes editar cualquiera de los nuevos elementos que añadas a tu página al hacer clic sobre ellos.

Cuando esté satisfecho con el aspecto de la página, haga clic en la flecha (^) situada junto al botón “Guardar trabajo”. A continuación, haz clic en la opción “Guardar y volver al editor de entradas”.

Save custom page in Thrive Architect

A continuación, puede guardar la página como borrador o publicarla para que aparezca en su sitio web de WordPress.

Una vez publicada su página personalizada, puede visitar su sitio para verla en acción.

Publish custom page

Esperamos que este artículo te haya ayudado a aprender cómo crear una página personalizada en WordPress. También puedes consultar nuestra guía sobre cómo aumentar el tráfico de tu blog y nuestra selección de los mejores plugins de formularios de contacto para WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

233 comentariosDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Rajee Pandi

    awesome. I think it is not free. Thank you so much.

    • WPBeginner Support

      There is a paid option but 1 and 2 are free options :)

      Administrador

  3. Moinuddin Waheed

    Using seedprod for making a custom page is promising as it takes less efforts and makes awesome looking design in no time.
    Thanks for this guide, I have been already using seedprod to many of my websites and utilising this feature.

  4. Brend

    Thanks for the great article. I often use your site for assistance with WordPress.
    I followed your tutorial to manually create a new template file. When selecting the template there is no CSS attached to the page. Did I miss something?

    • WPBeginner Support

      It would depend on the specific theme you’re using, if you check with your theme’s support they should be able to let you know why their CSS is not being applied to your page properly.

      Administrador

  5. Muhammed

    Perfect article.
    I have a q
    can i make a custom page and then make it the main website page or Home page?
    I don’t like to have too much content in my firs page and i want to make every thing in the main home page by my own ( i mean with HTML, CSS, JS ).
    is there any way to do that?

    • WPBeginner Support

      For customizing everything in that manner you would want to look at the method for manually creating a page template :)

      Administrador

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.