Astra tema gratis de WordPress. Solución definitiva para fijar arriba cabecera (logo + menú) / sticky header. Con uso plugins o solo CSS.
En el videotutorial muestro desde el principio la practica que vamos a hacer. Desde un nivel más fácil a un nivel más complicado. Veremos 2 plugins, solo uno debe permanecer activo. Del mismo modo, nos ayudaremos de otro plugin para construir el código CSS necesario y prescindir del uso de plugins, incluso de éste que nos ayuda.
El videotutorial tendrá su índice para ir directo al apartado que más os interese ver.
He decidido hacerlo así para que la información se encuentre toda organizada en un mismo lugar y dependa de vosotros si queréis ir a lo fácil y sencillo con el uso de plugins o aprender más gracias al código CSS.
Además, ofrezco una recomendación final debido a cierta incidencia que he notado en los dispositivos móviles.
¿Aún estás en una versión de WordPress anterior a 5.0?
Pierde el miedo a actualizar y considera seguir estos pasos para hacerlo bien:
- WordPress: Gutenberg vs Classic (editores entradas y páginas)
Así sabes qué diferencia hay entre ambos editores - Plugin – Editor Clásico. Si aún no has actualizado a la versión 5.0 de WordPress (con el editor Gutenberg de forma nativa), te recomiendo instales antes este plugin. En el siguiente vídeo explico su comportamiento:
– Instala plugin ‘Classic Editor’ antes de actualizar a WordPress 5.0.3 - SECCIÓN 3 (S3) – Qué es una Copia de Seguridad y para qué sirve
Antes de actualizar WordPress, a una nueva versión, procura hacer una copia de seguridad
Videotutorial
En este vídeo te muestro principalmente lo siguiente:
0:00 – Presentación
0:24 – Resultado encuesta hecha en pestaña COMUNIDAD
0:40 – De qué va la practica que podéis realizar
1:04 – ¿Con qué herramientas lo vamos a hacer?
2:03 – Escritorio WordPress → Plugins (Buscar/Añadir/Instalar/Activar)
2:59 – Activa el plugin más sencillo (más automático)
8:21 – Desactiva el plugin más sencillo
8:35 – Activa el otro plugin menos sencillo
11:23 – Cómo saber la regla CSS de la cabecera de Astra – Versión 1
13:00 – Dónde copiamos esta regla CSS (cabecera Astra)
14:03 – Desactiva el plugin menos sencillo
14:14 – Activa el plugin que construye fácil el código CSS
15:09 – 2 iconos nos permiten acceder al modo edición CSS
15:21 – Cómo saber la regla CSS de la cabecera de Astra – Versión 2
15:49 – Estructura: posición, anchura, altura de la cabecera Astra
16:00 – Estructura: fijar posición
16:24 – Detalle: arreglar también margen superior del contenido
16:35 – Estructura: posición top
16:49 – Estructura: ancho
17:47 – Dónde localizamos Z-Index
18:27 – Otros detalles a nivel de Decoración
20:25 – Cómo ver estos parámetros convertidos en código CSS
20:42 – Contrae ventana estrecha para Guardar CSS
20:53 – Refresca navegador y observa detalles cabecera scroll
21:02 – Observa un detalle a corregir: margen superior contenido
23:03 – Repaso: 3 partes importantes en un sitio web
23:27 – Regla CSS para el contenido de la plantilla prediseñada
24:38 – Vemos el código CSS si es el correcto y si no es se borra
27:07 – Esta regla CSS no es valida para todas las páginas, se borra
27:35 – Regla CSS correcta del contenido está en página sin maquetar
30:22 – Cargamos enlace web en nueva pestaña para verificar cambios
31:16 – Recomendación dónde poner código CSS (carga web rápida)
32:11 – Añade info al código CSS para saber a qué hace referencia
33:48 – Desactiva plugin constructor del código CSS (borra si quieres)
34:08 – Incidencia en los dispositivos móviles (vista horizontal)
34:45 – Cómo solventar esta incidencia en dispositivos móviles
35:27 – Despedida canal YouTube. Suscríbete. Mira COMUNIDAD
Opinión
Gracias al último plugin que vemos en el videotutorial no tengo necesidad de poneros el código CSS por aquí porque copiando y pegando no se aprende nada.
Deseo que aprendáis para no depender de nadie, salvo de vosotros mismos actualizando vuestro conocimiento. Pero si creéis necesario que ponga el código, no tenéis más que pedirlo en los comentarios.
Déjame en los comentarios qué te ha parecido este videotutorial, incluso si se te ha hecho largo o te ha gustado la curva de aprendizaje de más fácil a más complicado.
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.
Saludos.
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.