Todo sitio web contiene un conjunto de páginas con contenido estático. Estas páginas suelen ser páginas independientes que contienen información específica sobre un tema determinado, como una página de Quiénes somos, una página de Política de privacidad, una página de Preguntas frecuentes, una página de Contacto, y otras páginas que puedas necesitar según la naturaleza de tu sitio y la información que muestres a los usuarios.

Asimismo, algunos propietarios de sitios WordPress prefieren que la página de inicio del sitio sea una página estática con contenido específico, por ejemplo, mostrando información destacada sobre la actividad empresarial (visión, misión y objetivo), los servicios que ofrecen, el equipo de trabajo, botones de llamada a la acción (CTA), opiniones positivas de clientes, un enlace a la página de inicio y cualquier otra información importante. En lugar de mostrar la página de inicio predeterminada de WordPress que generalmente muestra los artículos más recientes del sitio. En el artículo de hoy te mostraremos cómo crear una página web estática en WordPress, así como los consejos generales más importantes para crear la página

y formatearla de manera profesional. También te mostraremos de manera práctica varios métodos para crear una página web estática para tu sitio WordPress, ya sea a través del editor predeterminado de WordPress o a través de complementos especializados para construir páginas. ¿Qué son las páginas estáticas en WordPress? Por defecto, hay dos formas básicas mediante las cuales puedes agregar contenido a un sitio WordPress: los artículos (Posts) y las páginas (Pages). La forma de crear páginas en WordPress es muy similar a la forma de crear artículos, pero se utilizan para diferentes propósitos.

Los artículos se agregan periódicamente y se actualizan constantemente en el sitio, generalmente tienen etiquetas o categorías que los organizan, se muestran según su orden cronológico dentro del blog del sitio, y están diseñados para recibir comentarios de los visitantes. Por el contrario, las páginas son independientes, no se caracterizan por una categoría o etiqueta que las distinga, y generalmente se utilizan para mostrar contenido estático y definido que no cambia en el sitio y no está diseñado para recibir comentarios. Debes mostrar cualquier información estática en tu sitio dentro de páginas, por ejemplo, la página de Quiénes somos

que muestra información sobre ti o tu actividad empresarial, la página de Política de privacidad donde explicas a tus visitantes qué tipos de información recopilas de ellos y cómo la utilizas, la página de Preguntas frecuentes, la página de Contacto, páginas de destino, entre otras.

El acceso a cada página del sitio se pone generalmente a disposición de los visitantes mediante la inclusión de un enlace en los menús principales del sitio. Cuando crees una nueva página en el sitio, puedes configurarla para que se muestre en la barra de menú automáticamente o puedes agregar un enlace manualmente.

Lee más: La diferencia entre Páginas (Pages) y Artículos (Posts) en WordPress. Vale la pena señalar que, desde el punto de vista técnico, cuando decimos que una página web es una página estática (Static),

nos referimos a que esta página no carga ningún contenido dinámico y solo se compone de códigos HTML y CSS, y también puede incluir algunos códigos de JavaScript.

Sin embargo, cuando creamos páginas en WordPress, estas páginas son dinámicas por naturaleza (Dynamic), y pueden mostrar contenido estático o variable indistintamente. Por ejemplo, la página de inicio que muestra los artículos más recientes por defecto mediante el uso de lo que se llama el bucle de WordPress (WordPress loop), que es un código PHP cuya función es buscar los artículos más recientes publicados en el sitio y mostrarlos.

Nota:

Si no deseas publicar el contenido como artículo o página y deseas crear un tipo de contenido personalizado con un formato específico, entonces WordPress te permite crear publicaciones personalizadas y configurarlas para publicar otros tipos de contenido.

Cómo crear una página en un sitio WordPress Puedes crear

una página web nueva en un sitio WordPress simplemente iniciando sesión en el panel de control de administración de tu sitio, seleccionando la pestaña Páginas y haciendo clic en Agregar nueva. Después, debes agregar el título de la página, luego comenzar a agregar el contenido apropiado requerido, configurarla según tus requisitos y luego publicarla en el sitio.

Hay más de una forma mediante la cual puedes crear y configurar tu página en WordPress y diseñarla de la manera apropiada. Método 1. Mediante el editor de bloques avanzado Puedes crear la página mediante el editor de bloques

Block Editor o el editor Gutenberg, que se considera un editor moderno en WordPress y se ha convertido en

el editor estándar para sitios WordPress desde la versión WordPress 5.0, que se lanzó a finales de diciembre de 2018. Este editor avanzado te permite crear contenido utilizando bloques o kits, de modo que cada componente de la página esté en su propio bloque.

Los bloques se pueden agregar, editar, copiar, eliminar, mover, compartir y personalizar. Los bloques incluyen elementos comunes, elementos de diseño, formato e incrustaciones. Cada bloque revela sus propias herramientas de edición cuando pasas el cursor sobre él.

Cuando seleccionas bloques de contenido, sus opciones de edición aparecen en el lado derecho de la pantalla. Método 2. Mediante complementos de construcción de páginas Si no deseas diseñar tu página desde cero utilizando el editor de bloques predeterminado, puedes diseñar la página de inicio utilizando uno de los complementos de construcción de páginas visuales disponibles en WordPress, como Divi builder

Beaver builder Oxygen builder Themify Builder

Visual Composer Elementor

Site Origin Page Builder

SeedProd

Estos complementos se especializan en la construcción visual de páginas (Page Builder Plugins) y facilitan mucho el proceso de construcción de páginas, ayudándote a crear páginas de tu sitio WordPress fácilmente mediante la tecnología de arrastrar y soltar y hacer los ajustes necesarios.

Además, estos complementos se destacan por proporcionar muchos elementos disponibles reutilizables, como textos, títulos, imágenes, iconos, videos y otros componentes necesarios en el diseño de las páginas de tu sitio. Lee más: Los 6 mejores complementos de construcción de sitios (Visual builders) mediante arrastrar y soltar

Descubre cómo crear una página web con ejemplos prácticos

Antes de explicar los pasos para crear una página web de manera práctica, aclararemos los consejos más importantes que debes seguir para obtener un diseño profesional y distintivo para cualquier página web que crees en tu sitio. Características del buen diseño de una página web Por supuesto, las plantillas en WordPress facilitan la tarea de crear y diseñar las páginas web necesarias para tu sitio. La mayoría de las plantillas, especialmente las profesionales, contienen muchos diseños y plantillas para páginas estáticas listas para usar que te ahorran tiempo y en las que puedes confiar para tu sitio y personalizarlas según tus preferencias. Sin embargo, si deseas construir las páginas de tu sitio tú mismo de una manera única y personal, debes prestar atención a lo siguiente:

Un buen diseño de página debe tener las siguientes características: El diseño debe ser elegante, profesional, visualmente atractivo, utilizar imágenes de alta calidad y carga rápida, así como gráficos e iconos apropiados para la identidad visual de tu negocio en general.

Utiliza colores específicos y se recomienda usar

un máximo de tres colores en el diseño: un color principal, un color secundario y un color de acento. Utiliza uno o como máximo dos tipos de fuentes en el diseño.

Las fuentes deben ser simples y legibles. El contenido debe estar bien formateado dentro de la página mediante el uso de títulos, subtítulos, viñetas y destacar párrafos para ayudar al visitante a navegar por el contenido de la página de manera efectiva. El diseño debe ser compatible con dispositivos móviles (Mobile-Friendly), por lo que debes verificar cómo aparece la página que estás creando en dispositivos móviles antes de publicarla.

Pasos para crear una página de inicio estática en un sitio WordPress Como se sabe, la configuración predeterminada en WordPress es mostrar los artículos más recientes publicados en tu página de inicio según el orden de su publicación de más reciente a más antiguo. Esto significa que tu página de inicio siempre cambiará a medida que publiques nuevos artículos.

Si deseas usar tu primera página para mostrar algo específico, como la imagen de tu empresa, dar la bienvenida a los visitantes o mostrar información específica para ellos, puedes crear en este caso una página de inicio estática y diseñarla de una manera que llame la atención de los visitantes de tu sitio y los anime a continuar navegando. Esto no significa, por supuesto, prescindir de mostrar tus artículos de blog a tus usuarios, sino que puedes limitarte a mostrar los artículos en una página de blog dedicada, o mostrar los artículos más recientes en tu página de inicio como es habitual pero agregando otros elementos para hacerla más distintiva y representativa de tu marca.

En los párrafos siguientes, explicaremos dos formas de crear la página estática en WordPress para usarla como página de inicio. El primer método es usando el editor de componentes Gutenberg y el segundo usando el constructor de páginas DIVI Builder 1.

Crear una página de inicio estática usando el editor Gutenberg

Inicialmente, crearemos nuestra página sin usar ningún complemento especializado para construir páginas, confiando en el editor de componentes Gutenberg. Diseñaremos esta página estática por nosotros mismos y luego la convertiremos en la página de inicio de nuestro sitio WordPress. Para hacer esto, sigue estos pasos: Ve al panel de control de WordPress, Páginas, y elige Agregar nueva

para agregar una nueva página. La página aparecerá en el editor Gutenberg por defecto. Comienza escribiendo el título de tu página

Por ejemplo, aquí la llamaremos "Página de inicio Gutenberg" para distinguirla y mostrarla como página de inicio del sitio. Luego haz clic en el botón Guardar borrador. Después, puedes agregar los bloques o componentes que desees a la página según el diseño propuesto. Sin embargo, antes de agregar bloques a la página, personalizaremos varios ajustes para esta página.

Vale la pena mencionar que la plantilla utilizada en nuestro sitio actual es la plantilla Astra, que es una plantilla gratuita elegante y simple que ofrece muchas opciones de personalización que puedes cambiar para personalizar tu sitio en general. La forma de configurar la página puede diferir cuando uses una plantilla diferente. Personalización 1:

Ve al panel de control, Apariencia, Personalizar. Aparecerán las opciones de personalización de la plantilla Astra en pestañas etiquetadas y organizadas de una manera que facilita hacer los cambios que deseas a la plantilla. Elige de las propiedades de la plantilla la pestaña Barra lateral

y selecciona la opción Sin barra lateral para la sección Páginas. Esto eliminará la barra lateral de todas las páginas del sitio (las propiedades de la plantilla se aplican a nivel del sitio completo).

Personalización 2: Luego ve nuevamente a la página de propiedades de la plantilla, elige la pestaña General,

Contenedor, Diseño, Contenido, luego elige que el ancho de página sea Ancho completo/Contenido (Full Width/Contained) para hacer que el ancho del contenido sea de ancho completo.

En esta forma de visualización, el contenedor principal donde aparece el contenido principal y el contenedor secundario donde aparece la barra lateral se combinan en un único contenedor de ancho completo con espaciado alrededor del contenedor. Personalización 3: La última configuración que haremos para la página es volviendo al panel de control del administrador del sitio, eligiendo la pestaña Páginas,

seleccionando la página que creamos y guardamos como borrador y haciendo clic en Editar página. La página se abrirá por defecto en el editor Gutenberg. Hacemos clic en el icono de configuración de Astra

en la parte superior izquierda de la página de edición y seleccionamos Deshabilitar título porque no necesitamos mostrar el título de la página de inicio ya que se sabe que es la primera página que se muestra al navegar al enlace del sitio y no hay necesidad de mostrar su nombre al visitante. Guarda el borrador y continúa con los siguientes pasos para construir la página.

Ahora que hemos terminado de personalizar la página, procederemos a construir la página de inicio mediante el editor de bloques, agregando los textos, imágenes, videos u otros componentes necesarios que deseemos para el diseño. Si deseas contenido de texto primero, puedes hacer clic donde desees en la página y comenzar a escribir el texto directamente.

En este caso, el tipo correcto de bloque (bloque de párrafo) se agregará automáticamente. Sin embargo, si deseas agregar otro tipo de contenido, debes elegir el tipo de bloque que deseas agregar haciendo clic en el botón más (+) que verás en la parte superior derecha de la pantalla.

También puedes ver el mismo icono si colocas el cursor del ratón en cualquier lugar de la página donde desees colocar un bloque. Luego debes seleccionar el tipo de bloque que deseas agregar o buscar su nombre en el cuadro de búsqueda como se muestra en la siguiente imagen. Cada bloque tendrá su propia lista de configuración que aparecerá en la barra lateral de la ventana del editor en la pestaña (Componente), que puedes usar para personalizar aún más el bloque que agregaste.

Hay varios tipos de bloques que puedes usar en la página de inicio. En nuestro ejemplo actual, construiremos la página de inicio estática de nuestro sitio de acuerdo con el diseño que se muestra en la siguiente imagen: Esta página consta de los siguientes bloques o componentes: Un componente de portada al que le agregamos un archivo multimedia que es una imagen de fondo de color púrpura, y también le agregamos

un título H2 en el que escribimos "Bienvenidos a WordPress en Árabe" y un botón de llamada a la acción con el texto "Comienza aquí" que lleva al visitante a nuestra página Guía de WordPress

WordPress guide. Cambiamos el tamaño y la alineación de los textos para que sean legibles, también modificamos un poco la apariencia del botón, cambiamos su tamaño y el color de fondo al blanco y el color del texto al púrpura.

Un componente de grupo utilizado para agrupar varios componentes en un grupo. Dentro del cual hay 3 componentes de tipo Info Box, que es un

componente que nos permite colocar un icono o imagen con un título y descripción dentro de un bloque único. Un componente de grupo dentro del cual hay un título H2 con el texto "Mantente al día en WordPress", seguido de un párrafo de texto en color púrpura.

Un componente de grupo que contiene un título H2 para la sección de testimonios de clientes y un componente de columnas con dos columnas. Agregamos a cada columna un grupo que contiene una imagen, un párrafo y un título. Un componente de grupo que contiene un título H2

con el texto "Síguenos en YouTube" y un componente de video para mostrar un enlace a un video de

nuestro canal de YouTube "WordPress en Árabe" en la página.

Estos componentes son solo para propósitos de prueba y, por supuesto, puedes agregar cualquier otro bloque a tu página según tus requisitos. Y de la misma manera, puedes construir cualquier otra página estática en el sitio, como una página de contacto o una página acerca de nosotros, etc. Notas adicionales para construir la página usando el editor de bloques:

Puedes mover cualquiera de estos bloques para reorganizar el contenido haciendo clic en las pequeñas flechas que apuntan hacia arriba y hacia abajo ubicadas encima de cada bloque. También puedes eliminar un bloque y borrarlo permanentemente de la página haciendo clic en los tres puntos verticales encima de él y seleccionando Eliminar, o presionando la tecla Suprimir en tu teclado.

Es posible que necesites agregar espacios separadores entre componentes, y la forma más fácil de hacerlo es agregar el componente espaciador. Lo único que hace este componente es añadir un bloque de contenido vacío cuya altura puedes ajustar en píxeles como desees. Lee más: Cómo cambiar el espaciado de líneas en WordPress para mejorar el formato de párrafos.

Una vez que termines de diseñar tu página, visualízala en todos los tamaños de pantalla, y cuando estés satisfecho con su aspecto final, haz clic en Publicar para poner la página lista para mostrar. De la misma forma puedes crear cualquier otra página estática en el sitio, como una página de contacto o una página acerca de nosotros, etc. También es posible que desees mostrar ciertos bloques solo en dispositivos específicos, por ejemplo, mostrarlos en escritorio y ocultarlos en móviles o tablets.

En este caso puedes confiar en complementos auxiliares que amplían el funcionamiento del editor, como Gutenberg Block Editor Toolkit o

Ghost Kit, ya que el editor de Gutenberg no proporciona esta característica de forma predeterminada. Ahora pasamos al último paso, que es mostrar la página que diseñamos como página de inicio

para nuestro sitio. Puedes establecer una página de inicio estática en WordPress navegando al panel de administración y seleccionando la pestaña Ajustes > Lectura, y en la sección Tu página de inicio se muestra > elige una página estática > y selecciona de la lista desplegable el nombre de la página (Página de inicio de Gutenberg).

También puedes configurar la página de inicio como página estática a través de la pestaña Temas > Personalizar > pestaña Configuración de página de inicio > y hacer que tu página de inicio muestre una página estática > y seleccionar la página que deseas establecer como tu página de inicio. 2. Crear una página estática usando Divi Visual Builder

En este apartado explicaremos cómo usar el complemento profesional Divi Builder, que ofrece muchas características que te ayudan a crear una página web profesional, siendo la más importante la función de arrastrar y soltar. También proporciona varios

elementos para diseñar páginas o artículos, como imágenes, videos, texto y botones. Además, contiene muchas disposiciones de página y formularios de contacto listos para usar que puedes utilizar directamente. Solo necesitas elegir el diseño que te guste y personalizarlo usando el editor de páginas.

Después de descargar el complemento y activarlo en el sitio, crearemos una segunda página de inicio para el sitio, pero esta vez usando el constructor de páginas Divi. Crea una página nueva como de costumbre desde el panel de control Páginas > Añadir nueva. Ahora el sitio te mostrará la opción de construir tu página usando el constructor predeterminado o a través de Divi Builder como se muestra a continuación. Después tendrás 3 opciones para construir la página:

1. Construir desde cero 2.

Elige un diseño 3. Duplicar existente

Después tendrás 3 opciones para construir la página web: Construir desde cero Elige un diseño Duplicar existente 1. Construir desde cero: Con este método puedes construir tu página desde cero de manera similar a la forma anterior que usamos en el editor predeterminado, pero con más opciones.

Todo lo que tienes que hacer es hacer clic en el signo más + para agregar las secciones que deseas, y añadir los elementos que quieres como textos, imágenes, mapas de Google

formularios de contacto y más para cada sección, y modificar sus propiedades según tus preferencias. Puedes hacer esto fácilmente usando la función de arrastrar y soltar, que te permite arrastrar cada elemento en tu página y soltarlo en cualquier lugar donde lo desees. También puedes ver cómo se ve tu contenido en dispositivos de escritorio o teléfonos móviles.

2. Elige un diseño También puedes elegir un diseño predefinido (Premade) para diseñar las páginas de tu sitio basándote en diseños listos, ya que el complemento ofrece una biblioteca completa con muchos diseños predefinidos. Todo lo que tienes que hacer es elegir uno y modificarlo según los requisitos de tu sitio.

Como se muestra en la imagen anterior, si haces clic en Elige un diseño, verás un conjunto grande de diseños (Layouts) apropiados para todos los tipos de sitios web, equipados con imágenes profesionales. Todo lo que tienes que hacer es hacer clic en cualquier diseño y comenzar a personalizarlo. Por ejemplo, el diseño Software Marketing Landing Page

es apropiado para crear todas las páginas estáticas de sitios técnicos especializados en software y plataformas de marketing digital. Este diseño ofrece 9 disposiciones diferentes que nos permiten crear un sitio web profesional y proporciona diseños para las diferentes páginas estáticas que podrías necesitar en tu sitio, en los que puedes confiar para construir las páginas de tu sitio rápida y profesionalmente. 3. Duplicar existente

Esta opción te permite crear una copia duplicada de otra página que fue diseñada a través del constructor Divi y personalizarla como desees. Ventajas de Divi Page Builder: Acceso ilimitado, ya que puedes comprar el servicio una sola vez y luego usar las plantillas y complementos en múltiples sitios web.

Hay una opción Lifetime Access que cuesta solo $249 (esto significa que si pagas $249 podrás acceder a un tema profesional usando Divi Builder y a otros componentes adicionales. Excelente soporte técnico con una gran cantidad de documentación y tutoriales. Ofrecen la opción de chat las 24 horas del día, 7 días a la semana para responder tus preguntas en cualquier momento del día. Desventajas de Divi Page Builder:

Divi Builder no ofrece una versión gratuita. El complemento Divi Builder no se vende por separado.

Por lo tanto, deberás suscribirte al tema profesional para poder usar Divi Builder. El tema de pago viene en dos planes: Acceso anual cuesta $89 por año y te da acceso a Divi Builder, Xtra, Bloom y Monarch. Acceso de por vida (Lifetime Access) cuesta $249 y es un pago único que te da acceso a Divi Builder, Xtra, Bloom y Monarch para crear cualquier cantidad de sitios para tus clientes de por vida.

Uso de una gran cantidad de códigos abreviados, lo que significa que podrías perder la personalización general de las páginas que diseñaste con él si lo desactivas o lo eliminas del sitio, y se verán así. Sección de preguntas y respuestas ¿Puedo usar una herramienta de construcción de páginas con cualquier tema? Sí

Los complementos de construcción de páginas suelen ser herramientas de creación de páginas independientes para WordPress que funcionan con cualquier tema de WordPress, incluyendo temas gratuitos y premium. Si ya estoy usando el editor de Gutenberg predeterminado, ¿necesito un complemento para construir páginas? El editor de bloques que WordPress proporciona de forma predeterminada es una buena opción para diseñar las páginas del sitio. Si puedes personalizar el diseño de tus páginas a través de él, entonces no necesitas un complemento especializado para construir páginas.

Pero si no puedes crear las páginas de tu sitio fácilmente a través de él, entonces puedes recurrir a las herramientas de construcción de páginas que ofrecen posibilidades de personalización ilimitada para tu sitio fácilmente y son compatibles con la tecnología de arrastrar y soltar. ¿Perderé el contenido y el diseño de la página construida con un complemento Page Builder si lo elimino? De hecho, si eliminas el complemento de construcción de páginas o lo reemplazas con otro, podrías terminar perdiendo el contenido y/o el diseño que creaste con él en algunos complementos, dependiendo de cómo se haya configurado el complemento de construcción de páginas. Por lo tanto, puedes hacer una copia de seguridad del código de tu diseño usando la edición de código y copiar el diseño como texto e insertarlo nuevamente en la página para restaurarla en caso de que se pierda por la eliminación del complemento. ¿Cuál es mejor para construir páginas: el editor Gutenberg o los complementos de construcción de páginas?

Si deseas un diseño simple, entonces el editor de Gutenberg es suficiente y apropiado. Es simple y fácil de usar para crear y organizar contenido. Pero si estás buscando una forma más flexible

para diseñar tu sitio web de manera profesional, entonces sería mejor para ti usar complementos listos para construir páginas en tu sitio. Recuerda también que no necesariamente tienes que preferir uno sobre el otro. Puedes usar el editor de componentes Gutenberg para diseños simples, y usar uno de los complementos de construcción de páginas Page Builder cuando necesites diseños más profesionales.

¿Cuál es la diferencia entre Divi y Divi Builder? Divi es un tema de WordPress desarrollado por Elegant Themes, disponible en versión gratuita y de pago. Mientras que Divi Builder es una herramienta de pago diseñada por la empresa para crear páginas de sitios web.

Puedes usar cualquiera de los dos según tus necesidades. Conclusión En este artículo hemos explicado la importancia de diseñar páginas web estáticas en tu sitio y cómo personalizar la página de inicio de tu sitio como una página estática con un diseño atractivo que atraiga a más visitantes y dé una mejor impresión sobre tu sitio web.

Diseñar una página estática puede parecer una tarea difícil que requiere un diseñador profesional, pero en el artículo de hoy te hemos mostrado cómo realizar esta tarea de más de una forma y con pasos detallados. Al llegar al final del artículo, ahora debes saber cómo diseñar páginas de sitios de WordPress por tu cuenta, ya sea usando el editor predeterminado de WordPress o a través de complementos de construcción de páginas. Usa el método que mejor se adapte a ti y comienza a construir las páginas de tu sitio. Si tienes alguna pregunta sobre cómo crear páginas estáticas en WordPress o enfrentas algún problema al crear una nueva página web, compártelo con nosotros en los comentarios para ayudarte a resolverlo.