Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Ejemplo video del curso - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
En el vídeo de hoy vamos a aprender cómo añadir bloques a una entrada o a una página.
00:00:00
Para ello vamos a entrar a el backend de la página de nuestro WordPress
00:00:06
y lo primero que vamos a hacer es crear una entrada de ejemplo
00:00:13
para ver cómo podemos añadir estos bloques y crear o diseñar la organización de ese lienzo.
00:00:19
La entrada que vamos a llamar es Entrada Prueba, la voy a guardar como borrador y una vez que está guardada pasamos a la parte del lienzo donde comenzamos a diseñar y añadir bloques a esta entrada.
00:00:29
Bien, tenemos este lienzo en blanco y para añadir un bloque tenemos que clicar sobre este más que nos aparece en nuestro lienzo.
00:00:55
Aquí nos aparecen unos bloques que son los que se han utilizado recientemente, pero si nosotros queremos tener otros bloques tenemos que ir a ver todo
00:01:05
y aquí podemos seleccionar el bloque que nos puede interesar o buscar, por si se nos ocurre,
00:01:16
alguno que a nosotros nos interese.
00:01:22
En el día, en el caso de este vídeo, vamos a añadir algunos bloques para que conozcáis cómo va la dinámica
00:01:25
y vamos a añadir bloques más o menos sencillos y ya dejamos para vosotros que vayáis progresando en complicidad,
00:01:32
Pero vamos a añadir bloques más o menos sencillos y así vais aprendiendo a rellenar o a organizar una entrada o una página. Se harían de la misma forma.
00:01:41
Como propuesta vamos a comenzar añadiendo una imagen
00:01:59
que sería lo más fácil, que la usaríamos como cabecera de esa entrada
00:02:06
Como tenemos varias imágenes en la biblioteca de medios
00:02:12
vamos a buscar una de ellas y por ejemplo seleccionamos esta imagen
00:02:16
La seleccionamos y ya tenemos el bloque imagen perfectamente diseñado
00:02:20
Como veis, una vez que tenemos marcado este bloque, aquí veis una serie de características que nos permiten recortar o reemplazar por otra imagen cuando ya lo tengamos diseñado o organizar la alineación de esta imagen, etc.
00:02:26
Y si nos ponemos en la parte de la derecha le damos a este simbolito de ajustes y nos posicionamos en el bloque que tenemos marcado, hay que fijarse que esté marcado ese bloque y aquí pues bueno, pues tenemos otra serie de características que nos permiten cambiar.
00:02:48
estilos por defecto o un estilo redondeado que podríamos elegir
00:03:10
para esta imagen, veamos por ejemplo esto, el texto alternativo,
00:03:17
que ya sabéis que esto es el alt, cuando después que esté publicado
00:03:21
se pasa por esta imagen, si queremos que aparezca un texto alt alternativo
00:03:25
que es referente a la imagen, el tamaño de la imagen,
00:03:30
también podemos seleccionarlo, anchura, altura, que podemos modificar
00:03:34
y avanzado, es decir, aquí tenemos otra serie de atributos
00:03:39
a la derecha, tenemos estos que nos aparecen en el bloque
00:03:43
cuando lo tenemos marcado, más otros atributos
00:03:46
que nos aparecen a la derecha.
00:03:51
De acuerdo, le vamos a guardar como borrador para tenerlo ya
00:03:54
y le damos a una vista previa para que veamos
00:03:57
cómo va quedando nuestra entrada.
00:04:00
¿Veis? Este es el caso de la entrada que acabamos de diseñar.
00:04:02
El borrador que acabamos de diseñar.
00:04:09
Continuamos y ahora vamos a añadir otro tipo de bloques, que también es frecuente para añadir otro bloque.
00:04:12
Estamos aquí, pues clicamos sobre el más y en este caso lo que vamos a hacer es añadir,
00:04:18
lo que vamos a tratar es, por ejemplo, de seleccionar, de añadir el bloque de columnas
00:04:24
para distribuir la información y organizar la información dentro de esta entrada.
00:04:32
Una columna es como lo tenemos ahora, dos columnas nos va a espaciar,
00:04:40
nos va a tener dos espacios en dos columnas distribuidos
00:04:45
y, por ejemplo, el espacio sería con una columna más estrecha y otra columna más ancha,
00:04:50
el de la izquierda más ancha, el de la derecha más estrecho, tres columnas.
00:04:57
Vamos a elegir tres columnas, ¿veis?
00:05:01
Y lo que ha hecho ha sido distribuirnos este espacio en tres columnas.
00:05:03
Por supuesto, solo es una distribución. Ahora lo que queremos es hacer añadidos en estas tres columnas. ¿Para qué? Pues para que nos quede la información, digamos, más visual o más atractiva o más organizada realmente como nosotros queremos presentar esa información.
00:05:07
Y ahora dentro de estas tres columnas veis que aparece un más que nos permite añadir otros bloques dentro de ellas. Por ejemplo, vamos a imaginar que en la primera columna yo lo que quiero poner es un botón.
00:05:26
Está aquí, me aparece, pero si no estuviera ahí, pues es tan fácil como buscar botón y tendríamos la sección de botones. ¿Veis? Ahora me ha añadido en esa columna, me ha añadido ya un botón y yo, pues este botón, vamos a imaginar que quiero ir a Google desde aquí, ¿vale?
00:05:39
Pues pongo botón para ir a Google y marco, perdón, marco el botón y como veis estas son las características que tengo de este botón.
00:06:00
Igualmente si me voy a la parte de aquí encontraré las características, otros atributos de ese botón que tengo justo a la derecha.
00:06:15
Pero hay que imaginar que yo lo que quiero es que este botón, cuando clique sobre él, quiero ir a la página de Google. Entonces pongo aquí la URL de la página de Google, google.es, y de tal forma que cuando se clique sobre Google nos iremos a la URL de la página de Google.
00:06:22
En la segunda columna, pues imaginar que yo lo que quiero aquí es poner un texto, no sabemos qué texto, pero cualquier texto, pues entonces lo que hago es añadir el bloque párrafo y en este texto, pues aquí escribiría todo lo que considerara oportuno que tengo que escribir, cualquier texto.
00:06:51
Fijaos que aquí si clicamos sobre él, que es el texto, aquí tenemos en la parte de la derecha en el bloque otros atributos
00:07:12
Como veis aquí, color del texto, que puedo poner en rojo, puedo poner en azul, el fondo, que tengo blanco pero puedo poner en gris
00:07:20
Por ejemplo, es una prueba de que no solamente tenéis estas características que os aparecen aquí en cada uno de los bloques, sino también las que nos aparecen en la parte de la derecha que nos permite modificar la tipografía, el tamaño, etc.
00:07:31
Y en el último que tenemos aquí, pues vamos a añadir otra imagen, por ejemplo, vengo aquí, le digo añadir imagen y me voy a la biblioteca de medios, si es de la biblioteca de medios, pues vamos a suponer que cojo el logo de FPMath, que lo quiero, lo selecciono y lo coloco en esta parte de la columna.
00:07:46
Vamos a guardar el borrador y vamos a ver qué está sucediendo con el diseño de nuestra entrada
00:08:16
Borrador, nos dice que guardando, ver en vista previa y vamos a ver qué está sucediendo
00:08:23
Bueno, pues aparentemente es la imagen que hemos diseñado, las tres columnas
00:08:32
Y vamos a ver si no funciona esto de Google, a ver si realmente va o no va a Google
00:08:39
Parece que no, que no está funcionando correctamente y las tres columnas, pues, se me ocurren varias cosas. Una de ellas, el botón este de Google no solamente debería funcionar la URL, sino que además yo lo pondría más centrado y estas, lo que haría es estas tres columnas despegarlas un poquito de la parte de la imagen porque así me queda francamente feo.
00:08:45
Entonces vamos a ver cómo lo remediamos
00:09:13
Nos vamos otra vez al diseño de nuestro lienzo
00:09:16
Que veis aquí se ve mucho mejor que luego se va a ver
00:09:21
O sea que hay que hacer estas visualizaciones de vistas previas
00:09:23
Para saber realmente cómo está quedando
00:09:28
Pues lo primero que se nos ocurre es que esto estaba demasiado pegado a la imagen
00:09:30
Entonces vamos a ver si existe algo que nos espacie
00:09:34
¿Algún espaciador? Voy a preguntar y entonces pongo espacio y fijaros, efectivamente me viene un bloque que se llama espaciador A y este bloque lo único que está haciendo es que yo puedo poner, ampliarlo y lo que me está haciendo es generando un espaciador.
00:09:42
Claro, pero yo no lo quiero aquí, yo lo querría situado entre la imagen y las tres columnas, pues si veis, cuando aparecen sus características o sus propiedades me permite subir, coloco ahí mi espaciador y ahora por ejemplo esto de Google que no nos ha funcionado nada y que lo queríamos en la parte central, vamos buscando, a ver, dice cambiar la alineación vertical
00:10:02
Y aquí dice cambiar el justificado de los elementos. Bueno, pues dice justificar elementos a la izquierda, elementos al centro. Bueno, pues al centro parece que nos venía mejor. Y este, alineación al medio, pues parece que también nos vendría mucho mejor si lo tenemos alineado al medio.
00:10:30
¿De acuerdo? Y ahora estaba claro que la URL aquí no estaba funcionando, entonces vamos a ver si la vemos, pues esta URL por alguna razón no la hemos insertado correctamente, entonces vamos a insertarla y a coger la URL de Google, perdón, la URL de Google y a cogerla directamente, esta misma, la de google.com
00:10:48
Control-C, me vengo a la edición y coloco aquí esta URL, ¿vale?
00:11:26
Ya la tengo puesta, la URL, y ahora voy a guardar el borrador y a ver cómo queda la publicación.
00:11:35
Bueno, ahora parece que el espaciador ya ha quedado aquí, esto ha quedado un poquito más centrado,
00:11:47
realmente sí que nos va a Google, así que buenas noticias
00:11:51
esta parte central, pues la columna central
00:11:55
la tenemos bien y luego la imagen, ¿podemos hacer este botón más grande
00:12:00
para que nos quede esto mejor? Pues sí, podemos hacer ese botón más grande, por ejemplo
00:12:04
estamos dando las posibilidades para que veáis todos los cambios que se pueden
00:12:07
hacer, entonces nos centramos aquí en el botón
00:12:12
y vemos a ver si este botón
00:12:16
Lo podemos ampliar de tamaño. Vamos a ver si se puede ampliar de tamaño, que probablemente sí. Aquí en la parte de la derecha, a ver si tenemos la estructura. Vamos a ver si podemos ampliar el tamaño en alguno de los elementos que tenemos aquí.
00:12:20
En este momento no encuentro realmente el tamaño. A ver, en estructura, no justificado, permite varias líneas. No encuentro exactamente cómo se ampliaría, pero seguramente tengamos una.
00:12:43
A ver aquí, esta es, aquí en esta opción, relleno, contorno, no, tampoco.
00:13:05
Y esta es otra de las opciones que no nos permite, pero tiene que haber algún sitio donde nos permita ampliar el tamaño de este botón.
00:13:12
De hecho, si ponemos espacios, conseguimos que el botón sea un poquito más grande.
00:13:23
Esto que nos sirva como ejemplo.
00:13:31
Bien, guardamos el borrador y ahora lo que vamos a hacer es, ya tenemos este diseño de la página y como veis, si yo quiero ampliar, perdón, si yo quiero ampliar dentro de cada una de las columnas,
00:13:32
Si yo quiero ampliar dentro de cada una de las columnas
00:13:53
Si quiero introducir nuevos bloques
00:13:59
Tengo que seleccionar la columna
00:14:01
Y añadir un nuevo bloque dentro de la columna
00:14:04
Si lo que quiero es añadir un elemento
00:14:06
Debajo de estas tres columnas
00:14:09
Tendría que añadirlo en esta parte de aquí
00:14:12
Vamos a insertar en la parte inferior otra imagen
00:14:14
Para que veáis el efecto
00:14:16
Buscamos la biblioteca de medios
00:14:18
Y insertamos otra de las imágenes
00:14:20
que tengamos por aquí, vamos a elegir otra imagen
00:14:23
pues por ejemplo esta
00:14:27
la seleccionamos y quedamos en esta parte
00:14:30
veis que podemos ampliarla
00:14:34
si nos parece demasiado grande incluso a lo mejor
00:14:38
podemos recortarla, aplicamos
00:14:43
y en la parte de la derecha
00:14:52
podemos redondear la pero en este caso la vamos a dejar tal y como la tenemos guardamos el borrador
00:14:56
vamos a ver cómo nos ha quedado publicado como nos quedaría publicado efectivamente
00:15:06
este pues el botón no se nos ha hecho más grande y la imagen nos ha quedado
00:15:14
la parte posterior y no nos ha ampliado su tamaño probablemente tengamos que modificar
00:15:20
esa imagen no aquí sino en la biblioteca y darle un tamaño diferente si mostramos la
00:15:32
imagen tamaño completo podemos ponerle tamaño medio las dimensiones las tenemos aquí veis
00:15:42
aquí podemos ampliar las dimensiones
00:15:53
500 y aquí le vamos a poner como es la altura no es la anchura le vamos a poner 1500 sería
00:15:57
un poco exagerado, le vamos a poner 1000 y la altura la vamos a disminuir un poquito
00:16:10
y la vamos a poner en 100. Demasiado pequeña, ponemos la altura a 300 y así nos queda más
00:16:20
o menos como pensábamos que estuviera. Le damos a guardar como borrador y vamos a comprobar
00:16:31
si realmente hemos conseguido que la imagen tuviera el tamaño completo, que sí, hemos conseguido que tuviera
00:16:41
el tamaño completo. Bien, con esto acabaríamos el aprendizaje de los bloques, sencillamente es usar el más,
00:16:48
Clicar sobre el más, buscar el bloque y luego ya depende del usuario el diseño de esta página que quede más o menos vistoso, que sea más limpio, que sea más atractivo. Aquí ya es un poco la inspiración de cada uno de nosotros.
00:17:05
- Materias:
- Economía y empresa
- Etiquetas:
- Emprendimiento
- Niveles educativos:
- ▼ Mostrar / ocultar niveles
- Formación Profesional
- Ciclo formativo de grado básico
- Primer Curso
- Segundo Curso
- Ciclo formativo de grado medio
- Primer Curso
- Segundo Curso
- Ciclo formativo de grado superior
- Primer Curso
- Segundo Curso
- Ciclo formativo de grado básico
- Subido por:
- Emprende ies calderondelabar madrid
- Licencia:
- Reconocimiento
- Visualizaciones:
- 2
- Fecha:
- 29 de enero de 2026 - 17:39
- Visibilidad:
- Público
- Centro:
- IES CALDERON DE LA BARCA
- Duración:
- 17′ 25″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1280x720 píxeles
- Tamaño:
- 49.18 MBytes