Guía para principiantes sobre la edición completa de sitios web en WordPress

Embárcate en un viaje de creatividad sin límites con la edición completa de tu de WordPress . Atrás quedaron las limitaciones de plantillas rígidas y opciones de personalización limitadas. Ahora, imagina tener el poder de esculpir cada centímetro de tu sitio web con una edición completa, desde elegantes encabezados para un título que da la bienvenida a los visitantes hasta pies de página intrincados o una elegante barra lateral que deja una impresión duradera.

Con la edición completa de sitios web en WordPress, las barreras tradicionales del diseño web se desvanecen, abriendo paso a una nueva era de innovación en la edición de sitios. Este enfoque revolucionario introduce una gama de bloques de diseño que te permiten adaptar fácilmente el diseño del tema de bloques de tu sitio a tu visión única. Las estructuras predefinidas ya no te limitan; ahora puedes explorar, experimentar y expresarte plenamente.

Desglosando la edición completa del sitio en WordPress 

La edición completa de sitios web en WordPress te permite personalizar fácilmente cada aspecto de tu sitio web. A diferencia del enfoque tradicional, donde solo podías editar entradas y páginas, ahora puedes crear encabezados y pies de página y crear áreas de contenido complejas mediante bloques.

Plugins populares para sitios web completos, como Divi y Elementor , han adoptado este cambio de paradigma, brindándote un editor de bloques repleto de funciones avanzadas y controles intuitivos. Tanto si eres un desarrollador experimentado como si eres principiante en temas y plantillas de bloques, la edición completa de sitios te permite dar vida a tus ideas con una precisión y un detalle inigualables.

Lea también : Los mejores temas SaaS de Elementor para WordPress

Principales beneficios de la edición completa del sitio

En pocas palabras, la edición completa del sitio le permite dar rienda suelta a su creatividad, optimizar su flujo de trabajo y preparar su sitio web para el futuro, todo ello sin la molestia de herramientas complicadas o jerga técnica.

Los principales beneficios son:

• Control total del diseño : Con la edición completa del sitio, tú eres el jefe. Diseña cada detalle de tu sitio web, desde el ícono hasta los espacios para imágenes destacadas, del logotipo y el bloque de mosaicos de entradas: todo exactamente como lo imaginas, desde los encabezados hasta los pies de página, con facilidad.

• Experiencia de edición unificada : Olvídate de tener que cambiar entre diferentes plantillas de página, archivos de plantilla y editores. La edición completa del sitio de WordPress lo reúne todo en un solo lugar, simplificando el trabajo en el panel de control de WordPress y optimizando la apariencia de tu sitio.

• Mayores opciones de personalización : ¿Cansado de los diseños predefinidos que suelen encontrar en la mayoría de los marcos de temas ? La edición completa del sitio web en WordPress ofrece un sinfín de opciones de personalización, permitiéndote personalizar cada aspecto de tu página web para reflejar tu estilo único.

• Flujo de trabajo optimizado : Olvídate de tener que lidiar con múltiples herramientas y plugins. La edición completa del sitio optimiza el proceso de diseño, ahorrándote tiempo y esfuerzo para que puedas concentrarte en lo más importante: crear contenido de calidad.

• Menor dependencia de plugins : Olvídate de la sobrecarga de plugins. Usa la edición completa del sitio, ya que muchas de las funcionalidades que antes requerían plugins ahora están integradas en la entrada del blog de WordPress, como se muestra en el nuevo editor. Esto minimiza la necesidad de software adicional que satura el diseño de tus páginas.

• Prepare su sitio web para el futuro : Manténgase a la vanguardia con la edición completa de sitios web en WordPress. Adoptar esta innovadora edición garantiza que su sitio web esté preparado para el futuro , garantizando su adaptabilidad y relevancia con las nuevas funciones a medida que la tecnología evoluciona.

¿La edición completa del sitio solo está disponible en temas de bloques?

La edición completa del sitio en WordPress no se limita a los temas de bloques, sino que los bloques del sitio están diseñados para aprovechar al máximo la función.

Así es como funcionan los sitios web de WordPress en todos los bloques integrados en su tema:

• Los temas de bloque presentan bloques de columnas con plantilla de encabezado, pies de página, barras laterales y otras partes de plantilla, además del bloque de contenido de publicación.

• Utilizan un archivo theme.json como tema de edición completa del sitio para controlar estilos y configuraciones globales, reemplazando el personalizador de temas tradicional.

• Si bien no es obligatorio, las configuraciones de bloques están optimizadas para la edición completa del sitio, lo que permite a los usuarios agregar bloques en todas las plantillas del tema.

• Actualmente, hay más de 160 configuraciones de bloques disponibles, pero es un número relativamente pequeño en comparación con los miles de temas tradicionales que ya son populares en la comunidad de WordPress.

Respecto a los bloques propiamente dichos, existen dos tipos:

• Los bloques estáticos contienen contenido conocido en el momento de la publicación, como párrafos, encabezados, imágenes y botones.

• Los bloques dinámicos (tema) están diseñados para la creación de plantillas y pueden extraer contenido dinámicamente desde el backend del sitio, como feeds de publicaciones, títulos, imágenes destacadas y más.

Sigue leyendo : Aprende a crear fácilmente un tipo de publicación personalizada en WordPress

Lo que debe saber antes de usar la edición completa del sitio

Antes de adentrarse en la interfaz del editor de sitios y personalizar su sitio de WordPress, es fundamental comprender los requisitos y las posibles limitaciones de la Edición Completa del Sitio. Si bien esta función es potente, no todos los usuarios de WordPress podrán acceder a todas sus funciones de inmediato.

Compatibilidad solo con temas de bloques

La Edición Completa del Sitio solo está disponible para temas de bloque. Si usas temas clásicos, el editor de plantillas será limitado o inaccesible, y no verás la nueva interfaz del editor de sitios en tu panel de control. Instala un tema de bloque compatible buscando la etiqueta "Edición Completa del Sitio" en el directorio de temas.

Los temas de bloque están diseñados específicamente para admitir plantillas de encabezado y pie de página, estilos de bloque y páginas personalizadas mediante el sistema de diseño basado en bloques. Estos temas utilizan un archivo theme.json para definir los estilos globales, el ancho del contenido y la estructura de la plantilla, reemplazando así las antiguas opciones de personalización.

Comprueba tu versión de WordPress

La función de Edición Completa del Sitio se introdujo en WordPress 5.8 y se desarrolló en versiones posteriores. Para disfrutar de la mejor experiencia con las partes de plantilla, los bloques de bucle de consulta y las variaciones de estilo, actualizar a la última versión de WordPress . Es posible que las versiones anteriores no admitan el marcado de bloques o bloques específicos utilizados en los temas más recientes.

Comprenda la curva de aprendizaje

Cambiar a la Edición Completa del Sitio puede resultar extraño si vienes de flujos de trabajo de editores clásicos o usas plugins de creación. El menú de tres puntos, la barra de herramientas de bloques y las nuevas herramientas de diseño ofrecen una gran funcionalidad, pero requiere un poco de aprendizaje. Ten paciencia mientras exploras toda la estructura del sitio web desde el nuevo editor.

Utilice un entorno de prueba

Antes de activar un tema de bloque o cambiar de un plugin de creación , es recomendable probar los cambios en un entorno de pruebas. Esto garantiza que la transición no altere la estructura actual de la página, la organización de los archivos HTML ni el CSS personalizado.

Comprender estos conceptos básicos le permitirá evitar errores y aprovechar al máximo su experiencia de edición de sitios completos en WordPress.

Pasos para la edición completa del sitio en WordPress

¿Listo para llevar tu sitio web de WordPress al siguiente nivel? Sigue estos sencillos pasos para descubrir todo el potencial de la edición completa del sitio, permitiéndote personalizar cada aspecto de tu sitio con facilidad y precisión.

Paso 1: Elegir un tema compatible

Hay más de 150 temas de edición de sitios web completos que puedes usar en WordPress. Puedes obtener uno gratis en WordPress o comprar uno premium. Elijamos uno gratuito de WordPress. Primero, inicia sesión en tu panel de WordPress y ve a Apariencia → Temas . Luego, haz clic en Añadir nuevo .

A continuación, haz clic en "Filtro de características" para configurar los filtros. Puedes ordenar por tema, características o diseño. Para aplicar filtros, marca la casilla "Editor del sitio" y haz clic en " Aplicar filtros" .

Verás tus opciones. Elige un tema que te guste o elige el tema Twenty Twenty Two para esta guía. Una vez seleccionado, activa tu tema y ¡listo!

Lea también : Explorando los mejores temas de bloques de WordPress

Paso 2: Personalizar una plantilla

Comencemos a personalizar su nuevo tema, centrándonos en el tema Twenty Twenty Two para simplificar:

• Activa tu tema : Después de seleccionarlo, actívalo para comenzar a personalizarlo.

• Acceder al editor : navegue a Apariencia → Editor para acceder a las herramientas de edición.

• Explorar plantillas : Al acceder al editor, comience con la plantilla de la página de inicio. Para explorar otras plantillas, haga clic en el logotipo de WordPress y luego en Plantillas.

• Crear nuevas plantillas : utilice el Agregar nuevo para crear plantillas únicas adaptadas a las necesidades de su sitio.

• Personalizar partes de la plantilla : modifique partes de la plantilla, como encabezados y pies de página, para refinar la apariencia de su sitio.

• Añadir bloques : Mejora la funcionalidad de tu sitio incorporando bloques. Haz clic en el botón azul + para añadir y personalizar bloques .

• Editar bloques existentes : puedes realizar los ajustes necesarios en los bloques existentes haciendo clic en ellos y modificando su contenido o configuración.

Leer más : Consejos para solucionar errores de actualización y publicación de WordPress: lista definitiva

Paso 3: Obtener estilos globales

Una característica destacada de los temas de edición de sitios completos es su capacidad para establecer estilos globales, lo que permite personalizar fácilmente las fuentes, los colores y el espaciado en todo el sitio. Ya sea que busque una apariencia cohesiva o estilos específicos para ciertos bloques, esta función le ahorra mucho tiempo en comparación con los temas anteriores. A continuación, le explicamos cómo acceder y personalizar los estilos globales en el tema Twenty Twenty Two:

• Acceder a los estilos globales : haga clic en el ícono de estilos en la parte superior derecha del editor del sitio para acceder a los estilos globales de su sitio.

• Explorar estilos disponibles : Una vez activado, explora los estilos disponibles en el tema Twenty Twenty Two haciendo clic en el "Explorar estilos" . Aquí puedes elegir una paleta de colores que se adapte a tu sitio.

• Configuración de tipografía: En la sección de tipografía, personaliza las opciones de fuente para tu texto y enlaces. Ajusta la familia de fuentes, el tamaño, la altura y el grosor de línea para lograr la apariencia deseada.

• Personalización de color: En la sección de colores, edita los colores de tu paleta de colores global. Elige colores para fondos, texto y enlaces entre varias opciones. El tema Twenty Twenty Two ofrece 17 colores sólidos y 20 degradados, con la opción de añadir colores y degradados personalizados para tu marca.

• Ajustar el relleno : Por último, ajusta el relleno de tu diseño. Establece el relleno para la parte superior, izquierda, derecha e inferior, ya sea de forma individual o conjunta, para garantizar que el contenido de tu sitio esté bien espaciado y sea visualmente atractivo.

Leer más : ¿No se ven los cambios en WordPress? ¡Solución fácil!

Paso 4: Uso de bloques de temas

En el editor de bloques, puedes acceder a más de 90 bloques para crear plantillas de página en el editor del sitio. Algunos de estos son bloques temáticos dinámicos que muestran contenido dinámico en la interfaz de tu sitio. Por ejemplo, al usar la plantilla de entrada única, verás bloques como el título, la imagen destacada y el contenido de la entrada. Estos son útiles para crear plantillas dinámicas y mostrar las entradas de tu blog.

• Uso de bloques de tema para encabezados, pies de página y más : Hay 27 bloques de tema. Veamos cómo usar algunos para crear una nueva plantilla de encabezado para su sitio web. Primero, vaya al menú Plantillas y seleccione Plantilla en blanco para comenzar.

• Navegar por la vista de capas : para ver qué bloques se utilizan en su página, haga clic en el ícono de capas en la parte superior izquierda de la pantalla del editor de su sitio.

• Añadir bloques para el encabezado : Haz clic en el icono + azul y desplázate hasta las opciones del bloque de tema. Selecciona el bloque de plantilla y arrástralo a la página en blanco. Asígnale un nombre y haz clic en "Crear". Luego, añade un bloque espaciador de 20 px en la parte superior y un bloque de columnas con una variación de 33/33/33.

• Personalización del encabezado : Añade el logotipo del sitio, la navegación y los bloques de enlaces a redes sociales a las columnas. Puedes subir imágenes, añadir elementos de menú o de redes sociales según corresponda.

• Ajuste del diseño : En la vista de capas, ajuste el ancho de cada columna al 20 %, 60 % y 20 %, respectivamente, en Configuración de columna → Ancho . Esto garantiza un espaciado adecuado para el encabezado.

• Guardar su plantilla : una vez que esté satisfecho con el diseño de su encabezado, haga clic en Publicar para guardar su plantilla.

Sigue buscando : Los mejores temas SaaS de Elementor para WordPress

Paso 5: Patrones de bloques para iniciar diseños

Al diseñar plantillas, los patrones de bloques son una forma rápida de añadir bloques para facilitar el diseño. WordPress ofrece patrones de bloques estándar, o puedes crear los tuyos propios. Aquí te explicamos cómo acceder a ellos y usarlos:

• Accede a Patrones de Bloques : Haz clic en el icono + azul en el editor del sitio y luego ve a la pestaña de Patrones. Allí encontrarás varias categorías, como pies de página, encabezados, botones, galerías y más.

• Editar patrones : Cada patrón se puede personalizar para que se adapte a tu diseño. Puedes ajustar colores, fuentes y estilos de relleno dentro de cada bloque.

• Guardar patrones : Para guardar un patrón personalizado, haga clic en el menú de puntos suspensivos en la vista de lista y seleccione Agregar a bloques reutilizables. También puede guardarlo como parte de plantilla para usarlo más adelante.

El uso de patrones de bloques agiliza el proceso de diseño y le ayuda a crear plantillas de aspecto profesional con facilidad.

Más información : Las mejores herramientas de gestión de reputación web para monitorizar las menciones sociales

Consejos profesionales y errores comunes al usar la edición completa del sitio

Ahora que tienes una comprensión sólida de cómo comenzar, es hora de concentrarte en las mejores prácticas y tener cuidado con algunos desafíos comunes que pueden surgir a medida que construyes con el editor de sitios de WordPress.

Realice siempre una copia de seguridad antes de realizar cambios importantes

Crea una copia de seguridad antes de actualizar los archivos de tu tema, añadir una nueva plantilla o editar la estructura de la página. Esto protege tu contenido si algo falla debido a conflictos de bloques o a la eliminación de bloques que afecten a la página actual.

Utilice el editor de código para un control avanzado

Aunque la interfaz de bloques es potente, los usuarios avanzados pueden optimizarla aún más utilizando el editor de código del Editor del Sitio. Esto resulta especialmente útil para personalizar el diseño de un bloque individual o insertar comentarios HTML. También pueden ajustar la alineación, el espaciado y el ancho del contenido más allá de lo que permite el editor visual.

Domina el bloque de bucle de consulta

El de bucle de consulta es fundamental para la creación de contenido dinámico en la Edición Completa del Sitio. Permite mostrar cuadrículas de entradas, listados de productos o feeds específicos de categorías en cualquier lugar del sitio, no solo en las plantillas de página. Aprende a ajustar la configuración del bucle, añadir filtros y personalizar el contenido de la página mediante estructuras de bloques reutilizables.

Evite mezclar temas clásicos y de bloques

Usar temas clásicos junto con herramientas FSE puede generar inconsistencias. Es posible que las plantillas de pie de página o encabezado no se muestren correctamente y que pierdas el acceso a la interfaz del editor del sitio. Para evitar problemas, los desarrolladores de temas recomiendan usar temas totalmente compatibles con bloques.

Explorar y personalizar variaciones de estilo

Muchos temas de bloques modernos incorporan variaciones de estilo que modifican las fuentes, los colores y el espaciado del sitio web. Puedes cambiar estas variaciones fácilmente sin afectar el contenido de la página, lo que te ofrece flexibilidad de diseño sin necesidad de usar creadores de páginas externos.

Utilice bloques reutilizables y piezas de plantilla

Crear bloques reutilizables te ayuda a mantener un diseño consistente para elementos como formularios de comentarios, secciones de CTA y páginas personalizadas. Guarda bloques o patrones directamente a través del menú de tres puntos del editor y organiza tus diseños de forma más eficiente en múltiples plantillas.

Tenga cuidado con los conflictos de complementos

Algunos plugins de compilación antiguos o extensiones del editor clásico pueden entrar en conflicto con las funciones de FSE. Siempre que sea posible, utilice alternativas de plugins de compilación compatibles con bloques y desactive las herramientas conflictivas que duplican funciones ya integradas en el nuevo editor de plantillas.

Si sigue estos consejos y conoce los errores más comunes, obtendrá un mejor control sobre sus plantillas de WordPress y creará sitios web más rápidos, más ágiles y con mayor garantía de futuro mediante la edición completa del sitio.

Conclusión

La edición completa de sitios web en WordPress te permite dar rienda suelta a tu creatividad y controlar por completo el diseño de tu sitio web. Explora temas de bloques compatibles, domina el editor de bloques, aprovecha los recursos de la comunidad, implementa las mejores prácticas y fomenta el aprendizaje continuo.

Si sigue estos pasos prácticos, podrá descubrir un mundo de posibilidades, optimizar su flujo de trabajo y asegurar su presencia en línea para el futuro con esta innovadora función de WordPress.

Preguntas frecuentes sobre la edición completa del sitio en WordPress