Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Cómo crear bloques en una entrada de Wordpress - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 9 de febrero de 2024 por Emprendimientofp madrid

27 visualizaciones

Más información Transcripción

Descargar la transcripción

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. 00:00:29
Entrada Prueba. 00:00:36
La voy a guardar como borrador. 00:00:41
Y una vez que está guardada pasamos a la parte del lienzo donde comenzamos a diseñar 00:00:45
y añadir bloques a esta entrada. 00:00:51
Bien, tenemos este lienzo en blanco y para añadir un bloque 00:00:55
tenemos que clicar sobre este Más que nos aparece en nuestro lienzo. 00:00:59
Aquí nos aparecen unos bloques que son los que se han utilizado recientemente 00:01:05
pero si nosotros queremos tener otros bloques tenemos que ir a Ver Todo 00:01:12
y aquí podemos seleccionar el bloque que nos puede interesar o buscar 00:01:16
por si se nos ocurre alguno que a nosotros nos interese. 00:01:21
En el día, en el caso de este vídeo vamos a añadir bloques. 00:01:25
Algunos bloques para que conozcáis cómo va la dinámica 00:01:29
y vamos a añadir bloques más o menos sencillos 00:01:33
y ya dejamos para vosotros que vayáis progresando en complicidad, 00:01:36
pero en complicación, perdón. 00:01:41
Pero vamos a añadir bloques más o menos sencillos 00:01:43
y así vais aprendiendo a rellenar o a realizar, 00:01:47
a organizar, digamos, una entrada o una página. 00:01:52
Se harían de la misma manera. 00:01:57
Como propuesta vamos a comenzar añadiendo una imagen 00:01:58
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 00:02:26
este bloque, aquí veis una serie de características 00:02:28
que nos permiten recortar o reemplazar 00:02:33
por otra imagen cuando ya lo tengamos diseñado 00:02:38
o organizar la alineación de esta imagen, etc. 00:02:41
Y si nos ponemos en la parte de la derecha 00:02:49
le damos a este simbolito de ajustes 00:02:54
y nos posicionamos en el bloque que tenemos marcado. 00:02:58
Hay que fijarse que esté marcado ese bloque 00:03:02
y aquí tenemos otra serie de características 00:03:04
que nos permiten cambiar. 00:03:09
Estilos por defecto o un estilo redondeado 00:03:11
que podríamos elegir para esta imagen. 00:03:15
Veamos por ejemplo esto, el texto alternativo, 00:03:18
que ya sabéis que esto es el ad cuando después que esté publicado 00:03:20
se pasa por esta imagen. 00:03:25
Si queremos que aparezca un texto alternativo, 00:03:26
que es referente a la imagen, 00:03:27
el tamaño de la imagen, también podemos seleccionarlo, 00:03:32
anchura, altura, que podemos modificar y avanzado. 00:03:35
Es decir, aquí tenemos otra serie de atributos a la derecha. 00:03:39
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:50
Le vamos a guardar como borrador para tenerlo ya, 00:03:53
y le damos a una vista previa para que veamos 00:03:56
cómo va quedando nuestra entrada. 00:03:59
Veis, este es el caso de la entrada que acabamos de diseñar, 00:04:01
el borrador que acabamos de diseñar. 00:04:08
Continuamos y ahora vamos a añadir otro tipo de bloques 00:04:11
que también es frecuente para añadir otro bloque. 00:04:15
Estamos aquí, pues clicamos sobre el más 00:04:17
y en este caso lo que vamos a hacer es añadir, 00:04:21
lo que vamos a tratar es, 00:04:24
por ejemplo, de seleccionar, 00:04:26
de añadir el bloque de columnas 00:04:29
para distribuir la información 00:04:32
y organizar la información dentro de esta entrada. 00:04:35
Una columna es como lo tenemos ahora, 00:04:38
dos columnas nos va a espaciar, 00:04:41
nos va a tener dos espacios en dos columnas distribuidos 00:04:44
y, por ejemplo, el espacio sería con una columna más estrecha 00:04:50
y otra columna más ancha, 00:04:54
el de la izquierda más ancha, 00:04:56
el de la derecha más estrecho, tres columnas. 00:04:58
Vamos a elegir tres columnas, ¿veis? 00:05:00
Y lo que ha hecho ha sido distribuirnos este espacio en tres columnas. 00:05:02
Por supuesto, solo es una distribución. 00:05:06
Ahora lo que queremos es hacer añadidos en estas tres columnas. 00:05:08
¿Para qué? 00:05:12
Pues para que nos quede la información, digamos, 00:05:13
más visual o más atractiva 00:05:16
o más organizada realmente, 00:05:20
como nosotros queremos presentar esa información. 00:05:22
Y ahora dentro de estas tres columnas 00:05:26
veis que aparece un más 00:05:28
que nos permite añadir otros bloques dentro de ellas. 00:05:30
Por ejemplo, vamos a imaginar que en la primera columna 00:05:33
yo lo que quiero poner es un botón. 00:05:36
Está aquí, me aparece, pero si no estuviera ahí 00:05:39
pues es tan fácil como buscar botón 00:05:42
y tendríamos la sección de botones. 00:05:46
¿Veis? 00:05:49
Ahora me ha añadido en esa columna, 00:05:50
me ha añadido ya un botón 00:05:52
y en este botón vamos a imaginar 00:05:54
que quiero ir a Google desde aquí. 00:05:56
¿Vale? 00:05:59
Pues pongo botón para ir a Google 00:06:00
y marco, perdón, marco el botón 00:06:04
y como veis estas son las características 00:06:10
que tengo de este botón. 00:06:12
Igualmente si me voy a la parte de aquí 00:06:14
encontraré las características, otros atributos 00:06:16
de ese botón que tengo justo a la derecha. 00:06:20
Pero hay que imaginar que yo lo que quiero es que 00:06:22
este botón cuando clique sobre él 00:06:24
quiero ir a la página de Google. 00:06:26
Entonces pongo aquí la URL de la página de Google. 00:06:30
Google.es 00:06:38
y de tal forma que cuando se clique sobre Google 00:06:43
nos iremos a la URL de la página de Google. 00:06:46
En la segunda columna, pues imaginar que yo lo que quiero aquí es, 00:06:51
voy a poner un texto. 00:06:54
No sabemos qué texto, pero cualquier texto. 00:06:56
Pues entonces lo que hago es añadir el bloque párrafo 00:06:58
y en este texto pues aquí escribiría 00:07:03
todo lo que considerara oportuno que tengo que escribir. 00:07:06
¿Vale? Cualquier texto. 00:07:10
Fijaos que aquí si clicamos sobre él, que es el texto, 00:07:12
aquí tenemos en la parte de la derecha en el bloque 00:07:16
otros atributos, como veis aquí, 00:07:19
color del texto, 00:07:21
que puedo poner en rojo, puedo poner en azul, 00:07:23
el fondo, que tengo blanco, pero puedo poner en gris. 00:07:26
Por ejemplo, es una prueba de que no solamente tenéis 00:07:31
estas características que os aparecen aquí 00:07:35
en cada uno de los bloques, sino también las que nos aparecen 00:07:38
en la parte de la derecha que nos permite, 00:07:40
veis, modificar la tipografía, el tamaño, etc. 00:07:43
Y en el último, en el último que tenemos aquí, 00:07:47
pues vamos a añadir otra imagen, por ejemplo. 00:07:52
Entonces vengo aquí, le digo añadir imagen 00:07:55
y me voy a la biblioteca de medios, 00:07:58
si es de la biblioteca de medios, 00:08:00
pues vamos a suponer que cojo el, no sé, 00:08:02
el logo de FPMath, 00:08:06
que lo quiero, lo selecciono y lo coloco 00:08:10
en esta parte de la columna. 00:08:13
Vamos a guardar el borrador y vamos a ver qué está sucediendo 00:08:16
con el diseño de nuestro texto. 00:08:20
Vamos a ver nuestra entrada. 00:08:22
Borrador, nos dice que guardando, 00:08:24
ver en vista previa y vamos a ver qué está sucediendo. 00:08:28
Uf, bueno, pues aparentemente, bueno, 00:08:32
es la imagen que hemos diseñado, las tres columnas 00:08:35
y vamos a ver si no funciona esto de Google, 00:08:39
a ver si realmente va o no va a Google. 00:08:43
Parece que no, que no está funcionando correctamente 00:08:46
y las tres columnas, pues se me ocurren varias cosas. 00:08:50
Una de ellas, el botón este de Google, 00:08:53
no solamente debería funcionar la URL, 00:08:55
sino que además yo lo pondría más centrado 00:08:57
y estas, lo que haría es estas tres columnas 00:09:01
despegarlas un poquito de la parte de la imagen 00:09:05
porque así me queda francamente feo. 00:09:08
Entonces vamos a ver cómo lo remediamos. 00:09:13
Nos vamos otra vez al diseño. 00:09:16
Nuestro lienzo, que veis, aquí se ve mucho mejor 00:09:19
que luego se va a ver. 00:09:22
O sea que hay que hacer estas visualizaciones 00:09:23
de vistas previas para saber realmente cómo está quedando. 00:09:26
Pues lo primero que se nos ocurre es que esto estaba 00:09:29
demasiado pegado a la imagen. 00:09:32
Entonces vamos a ver si existe pues algo que sea, 00:09:34
que nos espacie, ¿no? 00:09:40
Algún espaciador. 00:09:42
Voy a preguntar y entonces pongo espacio 00:09:43
y fijaros, efectivamente, 00:09:47
me viene un bloque que se llama espaciador A 00:09:48
y este bloque lo único que está haciendo es 00:09:52
que yo puedo poner, ampliarlo 00:09:54
y lo que me está haciendo es generando un espaciador. 00:09:58
Claro, pero yo no lo quiero aquí. 00:10:02
Yo lo querría situado entre la imagen y las tres columnas. 00:10:04
Pues si veis, en este, 00:10:08
cuando aparecen sus características o sus propiedades 00:10:11
me permite subir, ¿vale? 00:10:14
Coloco ahí mi espaciador. 00:10:16
Y ahora, por ejemplo, 00:10:17
esto de Google que no nos ha funcionado nada 00:10:19
y que lo queríamos en la parte central. 00:10:22
Vamos buscando, a ver, dice cambiar la alineación vertical. 00:10:24
Y aquí dice cambiar el justificado de los elementos. 00:10:30
Bueno, pues dice justificar elementos a la izquierda, 00:10:33
elementos al centro. 00:10:37
Bueno, pues al centro parece que nos venía mejor. 00:10:39
Y este, alineación al medio, 00:10:41
pues parece que también nos vendría mucho mejor 00:10:44
si lo tenemos alineado al medio. 00:10:46
¿De acuerdo? 00:10:48
Y ahora estaba claro que la URL aquí no estaba funcionando. 00:10:51
Entonces vamos a ver si la vemos. 00:10:56
Pues esta URL por alguna razón 00:10:58
no la hemos insertado correctamente. 00:11:01
Entonces vamos a insertarla. 00:11:04
Voy a coger la URL de Google. 00:11:06
Perdón, la URL de Google. 00:11:16
Voy a cogerla directamente. 00:11:19
Esta misma, la de google.com. 00:11:21
Control-C. 00:11:26
Me vengo a la edición 00:11:28
y coloco aquí esta URL. 00:11:30
¿Vale? 00:11:33
Ya la tengo puesta. 00:11:35
La URL. 00:11:37
Y ahora voy a guardar el borrador 00:11:38
y a ver 00:11:42
cómo queda la publicación. 00:11:44
Bueno, ahora parece que el espaciador 00:11:46
ya ha quedado aquí. 00:11:48
Esto ha quedado un poquito más centrado. 00:11:49
Realmente sí que nos va a Google. 00:11:51
Así que buenas noticias. 00:11:54
Esta parte central, 00:11:55
pues la columna central la tenemos bien. 00:11:57
Y luego la imagen. 00:12:00
¿Podemos hacer este botón más grande 00:12:02
para que nos quede esto mejor? 00:12:03
Pues sí, podemos hacer ese botón más grande. 00:12:04
Por ejemplo, estamos dando las posibilidades 00:12:06
para que veáis todos los cambios que se pueden hacer. 00:12:09
Entonces, ya está. 00:12:12
Entonces nos centramos aquí en el botón 00:12:13
y vemos a ver si este botón 00:12:16
lo podemos ampliar de tamaño. 00:12:19
Vamos a ver si se puede ampliar de tamaño, 00:12:22
que probablemente sí. 00:12:24
Aquí en la parte de la derecha, 00:12:26
a ver si tenemos la estructura. 00:12:29
Vamos a ver si podemos ampliar el tamaño 00:12:32
en alguno de los elementos que tenemos aquí. 00:12:37
En este momento no encuentro realmente el tamaño. 00:12:42
A ver, en estructura no he justificado. 00:12:52
Permite varias líneas. 00:12:55
No encuentro exactamente cómo se ampliaría. 00:12:57
Pero seguramente tengamos una. 00:13:01
A ver, aquí. 00:13:04
Esta es. 00:13:05
Aquí en esta opción. 00:13:06
¿Relleno, contorno? 00:13:08
No, tampoco. 00:13:09
Y esta es otra de las opciones 00:13:11
que no nos permite, 00:13:14
pero tiene que haber algún sitio 00:13:17
donde nos permita ampliar 00:13:18
el tamaño de este botón. 00:13:20
De hecho, si ponemos espacios, 00:13:23
conseguimos que el botón sea un poquito más grande. 00:13:26
Esto que nos sirva como ejemplo. 00:13:30
Bien. 00:13:32
Guardamos el borrador. 00:13:33
Y ahora lo que vamos a hacer es 00:13:38
que ya tenemos este diseño de la página. 00:13:41
Y como veis, 00:13:44
si yo quiero ampliar dentro de cada una de las columnas, 00:13:45
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:03
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:11
Vamos a insertar en la parte inferior otra imagen 00:14:13
para que veáis el efecto. 00:14:16
Buscamos la biblioteca de medios 00:14:18
y insertamos otra de las imágenes que tengamos por aquí. 00:14:20
Vamos a elegir otra imagen. 00:14:24
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, 00:14:38
incluso a lo mejor podemos recortarla. 00:14:41
Aplicamos. 00:14:50
Y en la parte de la derecha podemos redondearla, 00:14:52
pero en este caso la vamos a dejar tal y como la tenemos. 00:14:57
Guardamos el borrador. 00:15:00
Y vamos a ver cómo nos ha quedado. 00:15:05
Publicado. 00:15:08
Cómo nos quedaría publicado. 00:15:10
Efectivamente... 00:15:12
Ah, pues el botón no se nos ha hecho más grande. 00:15:14
Y la imagen nos ha quedado 00:15:17
en la parte posterior 00:15:20
y no nos ha ampliado su tamaño. 00:15:24
Probablemente tengamos que modificar esa imagen 00:15:27
no aquí, sino en la biblioteca 00:15:32
y darle un tamaño diferente. 00:15:36
Sí, mostramos la imagen. 00:15:40
Tamaño completo. 00:15:43
Podemos ponerle tamaño medio. 00:15:45
Las dimensiones las tenemos aquí. 00:15:48
¿Veis? 00:15:50
Aquí podemos ampliar las dimensiones. 00:15:52
500. 00:15:57
Y aquí le vamos a poner... 00:16:00
¿Cómo es la altura? 00:16:02
Bueno, es la anchura. 00:16:04
Le vamos a poner 1500. 00:16:06
Sería un poco exagerado. 00:16:09
Le vamos a poner 1000. 00:16:11
1000. 00:16:14
Y la altura la vamos a disminuir un poquito 00:16:16
y la vamos a poner en 100. 00:16:20
Demasiado pequeña. 00:16:24
Ponemos la altura a 300. 00:16:26
Y así nos queda más o menos 00:16:29
como pensábamos que estuviera. 00:16:32
Le damos a guardar como borrador 00:16:35
y vamos a comprobar si realmente 00:16:39
hemos conseguido que la imagen 00:16:41
tuviera el tamaño completo. 00:16:43
Que sí. 00:16:46
Hemos conseguido que tuviera el tamaño completo. 00:16:47
Bien. 00:16:50
Con esto acabaríamos 00:16:52
el aprendizaje de los bloques. 00:16:55
Sencillamente es 00:16:59
usar el más. 00:17:01
Clicar sobre el más. 00:17:05
Buscar el bloque. 00:17:06
Y luego ya depende del usuario 00:17:07
el diseño de esta página 00:17:10
que quede más o menos vistoso. 00:17:12
Que sea más limpio. 00:17:15
Que sea más atractivo. 00:17:17
Aquí ya es un poco la inspiración 00:17:19
de cada uno de nosotros. 00:17:22
Idioma/s:
es
Autor/es:
Lola Parra
Subido por:
Emprendimientofp madrid
Licencia:
Reconocimiento - Compartir igual
Visualizaciones:
27
Fecha:
9 de febrero de 2024 - 8:19
Visibilidad:
Público
Centro:
C RECURSOS EmprendimientoFP Madrid
Duración:
17′ 25″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
49.18 MBytes

Del mismo autor…

Ver más del mismo centro

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid