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.
A lo largo de los años, hemos creado muchas páginas personalizadas en WPBeginner para diferentes propósitos. Las hemos utilizado para mostrar diferentes ofertas en plugins y servicios de hosting, ofrecer servicios Pro para ayudar a los usuarios con WordPress, mostrar diferentes productos y mucho más.
Según nuestra experiencia, existen múltiples formas de crear páginas personalizadas. Hemos utilizado constructores de páginas como SeedProd para algunos de nuestros proyectos. Además, también puedes utilizar el editor de bloques o los editores de sitios completos para añadir páginas personalizadas a tu sitio.
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 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.
Las páginas de destino suelen tener un contenido diferente al de las páginas normales, como una gran imagen principal o una llamada a la acción (CTA). Esto significa que a menudo tienen un aspecto completamente diferente del resto de su 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.
- Method 1. How to Create a Custom Page in WordPress Using the Block Editor (No Plugin Required)
- Method 2. How to Create a Custom Page Using the Full-Site Editor (Block-Based Themes Only)
- Method 3. Create a Custom Page in WordPress using SeedProd (Recommended)
- Method 4. Using Thrive Architect to Create a Custom Page in WordPress
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”.
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”.
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.
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.
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”.
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.
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.
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”.
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.
WordPress mostrará ahora una vista previa del diseño.
Para editar esta plantilla, haga clic en el icono del lápiz pequeño.
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”.
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 funciona 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.
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”.
Ahora puede elegir una plantilla para su página personalizada.
Las plantillas de SeedProd están organizadas en diferentes tipos de campaña como “lead”,“squeeze” y“coming soon“. Puede hacer clic en las pestañas de la parte superior de la pantalla para filtrar las plantillas en función del tipo de campaña.
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.
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.
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.
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’.
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.
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.
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.
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”.
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 “+”.
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.
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.
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”.
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”.
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.
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”.
A continuación, puede elegir si desea crear una página normal o una página de destino preconstruida.
Recomendamos hacer clic en ‘Pre-built Landing Page’ ya que te da acceso a todas las plantillas de páginas de aterrizaje de Thrive. Estas plantillas son totalmente personalizables, por lo que puedes ajustarlas para que se adapten a tu sitio web WordPress.
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’.
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”.
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.
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.
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.
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.
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”.
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.
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 crear una página de aterrizaje con WordPress y cómo dividir el título de una entrada o página en 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.
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
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.
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
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