Personaliza gratis cabecera y sobrecabecera en WordPress. Con tema Astra + plugin Elementor + plugin especial. Nivel principiante.
Este vídeotutorial trata de crear, en cualquier sitio web de WordPress, nuestra propia cabecera de nuevo y le vamos a añadir una sobrecabecera, ambas totalmente personalizadas. Duda planteada meses atrás por un usuario de mi YouTube.
Por cierto, recomiendo veas el apartado opinión porque explico un error que sucede a veces con Elementor, y cómo puedes resolverlo gracias a las soluciones que dan desde su FAQ (Preguntas frecuentes) de su documentación.
Dudas usuarios de YouTube
Realizo este vídeotutorial a petición del usuario de mi YouTube, Richard Rodriguez, quien me pedía lo siguiente:
“Buenas tardes Joan. Como puedo crear una sobrecabecera utilizando el tema de Astra gratuito y Elementor gratuito en WordPress??? gracias”
– Richard Rodriguez
No hablo de versiones Pro (de pago). Todo es con versiones gratis del tema Astra + plugin Elementor + plugin especial: Elementor – Header, Footer & Blocks Template.
Además, este vídeotutorial incluye material extra al final relacionado con una duda planteada, en los comentarios de mi anterior vídeo. La duda resuelve otra a su vez, lo cual tiene que ver con incluir iconos sociales que no vienen por defecto en la biblioteca de iconos de Elementor.
Esta segunda duda fue planteada por la usuaria de mi YouTube, Solmary Madrid, mientras editaba este gran vídeo. Ella me pedía lo siguiente:
“Genial, gracias
– Solmary Madrid
Consulta como podría hacer para que mis clientes tengan acceso desde mi página web a la aplicación de teamviewer? Somos una empresa que brinda servicios y nos conectamos por esa aplicación”
El vídeotutorial tiene una duración aproximada de 1h porque es la primera vez que manejo estos plugins: Elementor + plugin especial.
La explicación va al detalle, ya que empiezo a tener un publico que agradece este tipo de vídeos relacionados con diseño web y tienen ganas de aprender.
Videotutorial
En este vídeo te muestro principalmente lo siguiente:
0:00 – Presentación
0:24 – Duda usuario Richard: sobrecabecera en Astra con Elementor
1:33 – Sitio web demo es Plantilla Prediseñada (Starter Templates)
– WordPress: tema Astra + Starter Templates 2.0 (Plantillas Prediseñadas)
2:08 – Explicación de dos demos que realicé. Me quedaré con la 2ª
3:39 – Crea páginas fuera del menú para esta demo
– WordPress: entradas y páginas con contraseña, privada, no SEO
5:36 – Tema y Plugins elegidos para lograr demo
6:29 – Pagina creada fuera del menú sirve para demo
6:40 – Comprensión tema prediseñado vs personalizado (framework)
– S1 – Temas: Prediseñados Vs Personalizados 100%
(He añadido a descripción y comentario fijado: artículo relacionado con porqué no siempre es buena idea tener un tema personalizado 100%)
7:41 – Escritorio WP → Apariencia → Temas
8:05 – Recomendable tener tema hijo
– WordPress: tema hijo Astra. Qué es. Crea. Instala
8:16 – Plugins necesarios (2)
9:18 – Apartado menú WP donde aparece plugin especial
9:30 – Apartado menú WP donde aparece plugin Elementor
9:44 – Selecciona opciones del plugin especial (tipo plantilla: Cabecera)
13:49 – Publicadas las opciones puedes editar con Elementor
14:00 – Adiós escritorio de WordPress. Hola escritorio de Elementor
14:16 – Cuadrícula izquierda. Elementos / widgets gratuitos (o de pago)
15:50 – Cuadrícula derecha. Arrastra aquí el widget + 3 iconos
18:30 – Curiosea página demo. Crea tu propia plantilla de cabecera
18:51 – Icono + para añadir estructura (nº columnas) a sección
19:37 – Solución duda usuario Richard
19:59 – Cambia color fondo de cada sección (cabecera y sobrecabecera)
21:36 – Guarda borrador (sirve igual para Guardar plantilla o Actualizar)
22:12 – Consigue un degradado de color en la sobrecabecera
22:51 – Guarda borrador. Explico dónde se ve Guardar plantilla
23:11 – Repaso lo fácil que es crear sobrecabeceras con Elementor
23:30 – Cómo eliminar secciones de Elementor
23:47 – Añade elementos a cada columna de cada sección
23:57 – Logotipo del sitio
24:20 – Menú de navegación (en cuadrícula izquierda lo seleccionas)
24:43 – Botón
24:55 – Qué elementos añadir en la sobrecabecera
25:06 – Iconos sociales (Buscar widget…)
25:34 – Listado de iconos: para móvil / email
27:55 – Editar Columna → Disposición → Alineación vertical: Medio
28:17 – Duplicar elemento (para no trabajar dos veces con lo mismo)
28:36 – Editar Columna → Disposición → Alineación vertical: Medio
29:35 – Editar Contenido de Elementos → Alineación (Izq / Me / Der)
30:45 – Editar Sección para verla bien en cualquier dispositivo
31:32 – Guarda borrador (sirve igual para Guardar plantilla o Actualizar)
31:41 – Menú de navegación hay que arreglarlo para verlo bien
33:00 – Elemento email hay que arreglar (aún se ve como móvil)
33:41 – Algunos ajuste a los elementos móvil y email
34:14 – Iconos sociales. Modificar Contenido y Estilo
36:03 – Botón. Modificar Contenido (Tipos) y Estilo (Color personalizado)
37:45 – Consigue un degradado de color en la cabecera
38:12 – Iconos sociales y Listado iconos. Modificar Estilo (Tamaño)
39:20 – Actualizar. Cómo se muestra en la página demo
39:39 – Enlace a email y red social Twitter
41:16 – Espacio extra entre cabecera y contenido. Cómo solucionarlo
43:00 – Pantalla de Móvil. Qué debes modificar
46:54 – Pantalla de Tableta. Qué debes modificar
49:56 – Pantalla de Escritorio. Menú principal. Modificar Estilo (Color)
50:22 – Actualizar. Cómo se muestra en la página demo
50:29 – Adiós escritorio de Elementor. Hola escritorio de WordPress
50:41 – Parámetros a cambiar para Cabecera (Mostrar en: Toda la web)
52:02 – Fijar cabecera con plugin (visto en videotutorial anterior)
– WordPress: tema Astra. Fijar Menú Cabecera (Sticky Header)
54:39 – Duda usuaria Solmary: acceso desde web a app TeamViewer
56:09 – Sitio web demo anterior ahora añadí icono TeamViewer
56:20 – Práctica con icono TikTok y TeamViewer
1:06:05 – Adiós escritorio de Elementor. Hola escritorio de WordPress
1:06:30 – Despedida canal YouTube. Suscríbete. Mira COMUNIDAD
Opinión
Como digo en el vídeo no había probado aún el plugin Elementor hasta esta ocasión, se podría decir que entré por la puerta grande. Gracias a la duda de Richard que también era la mía.
El problema que le veo a Elementor en su falta de soporte en el foro de WordPress, ellos te instan a resolver las dudas técnicas desde GitHub, lo cual veo más engorroso. Es algo que no me sucede con SiteOrigin. Esta claro que el equipo de Elementor espera que pagues por ofrecerte su soporte.
En el caso del plugin especial, el cual es soberbio, está creado en parte por el equipo Brainstorm Force, creadores del tema Astra. Y por si no lo sabéis cuentan con un formulario web para resolver dudas de su material gratis.
¿Por qué es soberbio este plugin especial? Como menciono en el vídeo, y podéis ver en el índice del mismo, un tema prediseñado normalmente no permite personalizar su cabecera (header) ni su pie de página (footer). Solo te permite personalizar cómo mostrar el contenido. Pero el plugin especial te permite hacerlo, en cualquier tema prediseñado.
Ahora bien, al momento de hacer esta publicación del artículo han pasado 11 días desde que realicé la practica del vídeo y me he topado con un problema al volver a editar.
Error con el plugin Elementor [solucionado]
No os asustéis. Es un problema localizado en el plugin Elementor. En el FAQ (Preguntas frecuentes) de su documentación hablan del mismo. Concretamente en este artículo: How to Fix the ‘Preview Could Not Be Loaded’ Error.
Tras este artículo encontré después otro más preciso para mi error, que era el 404 y no me permitía volver a ver la previsualización de la plantilla donde cree la cabecera. El artículo es: How to Fix 404 Page or Page Not Found Error Message.
Te da varias opciones para encontrar la solución del problema pero la que me sirvió fue la primera, que afortunadamente es la más sencilla:
- Simplemente fui a los ‘Ajustes’ → ‘Enlaces permamentes’ y cambié a otro tipo y actualicé. Y ya me dejó ver vista previa (para editar), incluso en los enlaces simples. Pero después volví a poner ‘Nombre de la entrada’ y todo igual de bien.
Déjame en los comentarios qué te ha parecido este videotutorial, incluso si se te ha hecho largo o te has encontrado un error similar al mio (donde perdí 1h para encontrar la solución).
Recuerda que en Disqus puedes comentar como invitado (dejando solo tu email). Haz clic en Nombre y automáticamente se desglosan varias opciones, al final aparece la de comentar como invitado, evitando registrarte en redes sociales que no uses.
Soy diseñador web con WordPress. También hago uso del diseño gráfico (edición imágenes) e implementación de vídeos (puedo editar pero no grabar). Te ayudo a descubrir/potenciar la identidad de tu marca, otorgando distinción a tu sitio web. Hago buen uso del diseño visual y emocional. Estoy disponible para darte: servicio, formación, consultoría.