1
00:00:00,620 --> 00:00:06,219
En el vídeo de hoy vamos a aprender cómo añadir bloques a una entrada o a una página.

2
00:00:06,940 --> 00:00:13,119
Para ello vamos a entrar a el backend de la página de nuestro WordPress

3
00:00:13,119 --> 00:00:19,039
y lo primero que vamos a hacer es crear una entrada de ejemplo

4
00:00:19,039 --> 00:00:29,239
para ver cómo podemos añadir estos bloques y crear o diseñar la organización de ese lienzo.

5
00:00:29,239 --> 00:00:55,149
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.

6
00:00:55,149 --> 00:01:05,409
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.

7
00:01:05,909 --> 00:01:16,430
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

8
00:01:16,430 --> 00:01:22,569
y aquí podemos seleccionar el bloque que nos puede interesar o buscar, por si se nos ocurre,

9
00:01:22,890 --> 00:01:25,349
alguno que a nosotros nos interese.

10
00:01:25,549 --> 00:01:32,930
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

11
00:01:32,930 --> 00:01:41,769
y vamos a añadir bloques más o menos sencillos y ya dejamos para vosotros que vayáis progresando en complicidad,

12
00:01:41,769 --> 00:01:59,689
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.

13
00:01:59,689 --> 00:02:06,469
Como propuesta vamos a comenzar añadiendo una imagen

14
00:02:06,469 --> 00:02:12,229
que sería lo más fácil, que la usaríamos como cabecera de esa entrada

15
00:02:12,229 --> 00:02:16,009
Como tenemos varias imágenes en la biblioteca de medios

16
00:02:16,009 --> 00:02:20,129
vamos a buscar una de ellas y por ejemplo seleccionamos esta imagen

17
00:02:20,129 --> 00:02:26,229
La seleccionamos y ya tenemos el bloque imagen perfectamente diseñado

18
00:02:26,229 --> 00:02:48,469
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.

19
00:02:48,469 --> 00:03:10,969
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.

20
00:03:10,969 --> 00:03:17,550
estilos por defecto o un estilo redondeado que podríamos elegir

21
00:03:17,550 --> 00:03:20,870
para esta imagen, veamos por ejemplo esto, el texto alternativo,

22
00:03:21,009 --> 00:03:25,389
que ya sabéis que esto es el alt, cuando después que esté publicado

23
00:03:25,389 --> 00:03:30,610
se pasa por esta imagen, si queremos que aparezca un texto alt alternativo

24
00:03:30,610 --> 00:03:34,310
que es referente a la imagen, el tamaño de la imagen,

25
00:03:34,550 --> 00:03:39,069
también podemos seleccionarlo, anchura, altura, que podemos modificar

26
00:03:39,069 --> 00:03:43,210
y avanzado, es decir, aquí tenemos otra serie de atributos

27
00:03:43,210 --> 00:03:46,650
a la derecha, tenemos estos que nos aparecen en el bloque

28
00:03:46,650 --> 00:03:51,530
cuando lo tenemos marcado, más otros atributos

29
00:03:51,530 --> 00:03:53,490
que nos aparecen a la derecha.

30
00:03:54,689 --> 00:03:57,710
De acuerdo, le vamos a guardar como borrador para tenerlo ya

31
00:03:57,710 --> 00:04:00,469
y le damos a una vista previa para que veamos

32
00:04:00,469 --> 00:04:02,110
cómo va quedando nuestra entrada.

33
00:04:02,110 --> 00:04:08,810
¿Veis? Este es el caso de la entrada que acabamos de diseñar.

34
00:04:09,069 --> 00:04:10,990
El borrador que acabamos de diseñar.

35
00:04:12,629 --> 00:04:18,129
Continuamos y ahora vamos a añadir otro tipo de bloques, que también es frecuente para añadir otro bloque.

36
00:04:18,329 --> 00:04:24,889
Estamos aquí, pues clicamos sobre el más y en este caso lo que vamos a hacer es añadir,

37
00:04:24,889 --> 00:04:32,889
lo que vamos a tratar es, por ejemplo, de seleccionar, de añadir el bloque de columnas

38
00:04:32,889 --> 00:04:39,029
para distribuir la información y organizar la información dentro de esta entrada.

39
00:04:40,050 --> 00:04:44,569
Una columna es como lo tenemos ahora, dos columnas nos va a espaciar,

40
00:04:45,009 --> 00:04:50,810
nos va a tener dos espacios en dos columnas distribuidos

41
00:04:50,810 --> 00:04:57,009
y, por ejemplo, el espacio sería con una columna más estrecha y otra columna más ancha,

42
00:04:57,709 --> 00:05:01,470
el de la izquierda más ancha, el de la derecha más estrecho, tres columnas.

43
00:05:01,529 --> 00:05:02,889
Vamos a elegir tres columnas, ¿veis?

44
00:05:03,329 --> 00:05:07,089
Y lo que ha hecho ha sido distribuirnos este espacio en tres columnas.

45
00:05:07,089 --> 00:05:26,310
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.

46
00:05:26,310 --> 00:05:39,029
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.

47
00:05:39,029 --> 00:06:00,670
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?

48
00:06:00,670 --> 00:06:14,149
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.

49
00:06:15,009 --> 00:06:22,970
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.

50
00:06:22,970 --> 00:06:51,610
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.

51
00:06:51,610 --> 00:07:12,050
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.

52
00:07:12,050 --> 00:07:20,449
Fijaos que aquí si clicamos sobre él, que es el texto, aquí tenemos en la parte de la derecha en el bloque otros atributos

53
00:07:20,449 --> 00:07:31,730
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

54
00:07:31,730 --> 00:07:46,889
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.

55
00:07:46,889 --> 00:08:16,870
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.

56
00:08:16,889 --> 00:08:23,389
Vamos a guardar el borrador y vamos a ver qué está sucediendo con el diseño de nuestra entrada

57
00:08:23,389 --> 00:08:32,629
Borrador, nos dice que guardando, ver en vista previa y vamos a ver qué está sucediendo

58
00:08:32,629 --> 00:08:39,490
Bueno, pues aparentemente es la imagen que hemos diseñado, las tres columnas

59
00:08:39,490 --> 00:08:45,690
Y vamos a ver si no funciona esto de Google, a ver si realmente va o no va a Google

60
00:08:45,690 --> 00:09:13,690
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.

61
00:09:13,690 --> 00:09:16,710
Entonces vamos a ver cómo lo remediamos

62
00:09:16,710 --> 00:09:21,370
Nos vamos otra vez al diseño de nuestro lienzo

63
00:09:21,370 --> 00:09:23,809
Que veis aquí se ve mucho mejor que luego se va a ver

64
00:09:23,809 --> 00:09:28,389
O sea que hay que hacer estas visualizaciones de vistas previas

65
00:09:28,389 --> 00:09:30,049
Para saber realmente cómo está quedando

66
00:09:30,049 --> 00:09:34,909
Pues lo primero que se nos ocurre es que esto estaba demasiado pegado a la imagen

67
00:09:34,909 --> 00:09:42,490
Entonces vamos a ver si existe algo que nos espacie

68
00:09:42,490 --> 00:10:02,250
¿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.

69
00:10:02,250 --> 00:10:30,269
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

70
00:10:30,269 --> 00:10:48,990
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.

71
00:10:48,990 --> 00:11:25,730
¿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

72
00:11:26,570 --> 00:11:34,070
Control-C, me vengo a la edición y coloco aquí esta URL, ¿vale?

73
00:11:35,690 --> 00:11:46,070
Ya la tengo puesta, la URL, y ahora voy a guardar el borrador y a ver cómo queda la publicación.

74
00:11:47,009 --> 00:11:51,490
Bueno, ahora parece que el espaciador ya ha quedado aquí, esto ha quedado un poquito más centrado,

75
00:11:51,490 --> 00:11:55,909
realmente sí que nos va a Google, así que buenas noticias

76
00:11:55,909 --> 00:12:00,029
esta parte central, pues la columna central

77
00:12:00,029 --> 00:12:04,009
la tenemos bien y luego la imagen, ¿podemos hacer este botón más grande

78
00:12:04,009 --> 00:12:07,889
para que nos quede esto mejor? Pues sí, podemos hacer ese botón más grande, por ejemplo

79
00:12:07,889 --> 00:12:12,070
estamos dando las posibilidades para que veáis todos los cambios que se pueden

80
00:12:12,070 --> 00:12:16,639
hacer, entonces nos centramos aquí en el botón

81
00:12:16,639 --> 00:12:20,179
y vemos a ver si este botón

82
00:12:20,179 --> 00:12:43,519
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í.

83
00:12:43,519 --> 00:13:05,450
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.

84
00:13:05,450 --> 00:13:11,309
A ver aquí, esta es, aquí en esta opción, relleno, contorno, no, tampoco.

85
00:13:12,750 --> 00:13:23,809
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.

86
00:13:23,970 --> 00:13:31,090
De hecho, si ponemos espacios, conseguimos que el botón sea un poquito más grande.

87
00:13:31,370 --> 00:13:32,629
Esto que nos sirva como ejemplo.

88
00:13:32,629 --> 00:13:53,419
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,

89
00:13:53,419 --> 00:13:59,980
Si yo quiero ampliar dentro de cada una de las columnas

90
00:13:59,980 --> 00:14:01,899
Si quiero introducir nuevos bloques

91
00:14:01,899 --> 00:14:04,000
Tengo que seleccionar la columna

92
00:14:04,000 --> 00:14:06,860
Y añadir un nuevo bloque dentro de la columna

93
00:14:06,860 --> 00:14:09,659
Si lo que quiero es añadir un elemento

94
00:14:09,659 --> 00:14:12,059
Debajo de estas tres columnas

95
00:14:12,059 --> 00:14:14,220
Tendría que añadirlo en esta parte de aquí

96
00:14:14,220 --> 00:14:16,940
Vamos a insertar en la parte inferior otra imagen

97
00:14:16,940 --> 00:14:18,279
Para que veáis el efecto

98
00:14:18,279 --> 00:14:20,940
Buscamos la biblioteca de medios

99
00:14:20,940 --> 00:14:23,639
Y insertamos otra de las imágenes

100
00:14:23,639 --> 00:14:27,059
que tengamos por aquí, vamos a elegir otra imagen

101
00:14:27,059 --> 00:14:30,159
pues por ejemplo esta

102
00:14:30,159 --> 00:14:34,200
la seleccionamos y quedamos en esta parte

103
00:14:34,200 --> 00:14:38,399
veis que podemos ampliarla

104
00:14:38,399 --> 00:14:43,259
si nos parece demasiado grande incluso a lo mejor

105
00:14:43,259 --> 00:14:52,090
podemos recortarla, aplicamos

106
00:14:52,090 --> 00:14:56,570
y en la parte de la derecha

107
00:14:56,570 --> 00:15:03,529
podemos redondear la pero en este caso la vamos a dejar tal y como la tenemos guardamos el borrador

108
00:15:06,769 --> 00:15:14,970
vamos a ver cómo nos ha quedado publicado como nos quedaría publicado efectivamente

109
00:15:14,970 --> 00:15:20,389
este pues el botón no se nos ha hecho más grande y la imagen nos ha quedado

110
00:15:20,389 --> 00:15:32,269
la parte posterior y no nos ha ampliado su tamaño probablemente tengamos que modificar

111
00:15:32,269 --> 00:15:42,750
esa imagen no aquí sino en la biblioteca y darle un tamaño diferente si mostramos la

112
00:15:42,750 --> 00:15:51,190
imagen tamaño completo podemos ponerle tamaño medio las dimensiones las tenemos aquí veis

113
00:15:53,090 --> 00:15:55,450
aquí podemos ampliar las dimensiones

114
00:15:57,750 --> 00:16:10,129
500 y aquí le vamos a poner como es la altura no es la anchura le vamos a poner 1500 sería

115
00:16:10,129 --> 00:16:20,419
un poco exagerado, le vamos a poner 1000 y la altura la vamos a disminuir un poquito

116
00:16:20,419 --> 00:16:31,129
y la vamos a poner en 100. Demasiado pequeña, ponemos la altura a 300 y así nos queda más

117
00:16:31,129 --> 00:16:41,590
o menos como pensábamos que estuviera. Le damos a guardar como borrador y vamos a comprobar

118
00:16:41,590 --> 00:16:48,889
si realmente hemos conseguido que la imagen tuviera el tamaño completo, que sí, hemos conseguido que tuviera

119
00:16:48,889 --> 00:17:05,700
el tamaño completo. Bien, con esto acabaríamos el aprendizaje de los bloques, sencillamente es usar el más,

120
00:17:05,700 --> 00:17:25,200
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.