1 00:00:00,000 --> 00:00:05,800 En el vídeo de hoy vamos a aprender cómo añadir bloques a una entrada, a una 2 00:00:05,800 --> 00:00:13,200 página. Para ello vamos a entrar a el backend de la página en nuestro WordPress 3 00:00:13,200 --> 00:00:17,960 y lo primero que vamos a hacer es crear una entrada 4 00:00:17,960 --> 00:00:21,120 de ejemplo 5 00:00:21,880 --> 00:00:26,960 para ver cómo podemos añadir estos bloques y crear o diseñar la 6 00:00:26,960 --> 00:00:31,000 organización de ese lienzo. La entrada que vamos a llamar es 7 00:00:31,000 --> 00:00:34,360 entrada prueba 8 00:00:35,120 --> 00:00:41,360 Uy! Entrada prueba 9 00:00:41,560 --> 00:00:48,320 la voy a guardar como borrador y pasamos una vez que está guardada 10 00:00:48,320 --> 00:00:54,240 pasamos a la parte del lienzo donde comenzamos a diseñar y añadir bloques a 11 00:00:54,240 --> 00:00:59,760 esta entrada. Bien, tenemos el lienzo en blanco y para añadir un bloque tenemos 12 00:00:59,760 --> 00:01:06,360 que clicar sobre este más que nos aparece en nuestro lienzo. Aquí nos 13 00:01:06,360 --> 00:01:13,240 aparece unos bloques que son los que se han utilizado recientemente pero si 14 00:01:13,240 --> 00:01:17,080 nosotros queremos tener otros bloques tenemos que ir a ver todo y aquí podemos 15 00:01:17,080 --> 00:01:22,520 seleccionar el bloque que nos puede interesar o buscar por si se nos ocurre 16 00:01:22,520 --> 00:01:28,600 alguno que a nosotros nos interese. En el día, en el caso de este vídeo, vamos a 17 00:01:28,600 --> 00:01:34,000 añadir algunos bloques para que conozcáis cómo va la dinámica y vamos a 18 00:01:34,000 --> 00:01:39,880 añadir bloques más o menos sencillos y ya dejamos para vosotros que vayáis 19 00:01:39,880 --> 00:01:45,120 progresando en complicidad, pero en complicación, perdón, pero vamos a añadir 20 00:01:45,120 --> 00:01:51,720 bloques más o menos sencillos y así vais aprendiendo a rellenar o a 21 00:01:51,720 --> 00:01:58,960 realizar, a organizar, digamos, una entrada o una página. Se harían de la 22 00:01:58,960 --> 00:02:03,560 misma forma. Como propuesta vamos a comenzar pues 23 00:02:03,560 --> 00:02:08,440 añadiendo una imagen que sería lo más fácil que 24 00:02:08,440 --> 00:02:14,840 usaríamos como cabecera de esa entrada. Como tenemos varias imágenes en la 25 00:02:14,840 --> 00:02:19,440 biblioteca de medios vamos a buscar una de ellas y por ejemplo seleccionamos 26 00:02:19,560 --> 00:02:25,800 esta imagen. La seleccionamos y ya tenemos el bloque imagen perfectamente 27 00:02:25,800 --> 00:02:32,560 diseñado. Como veis, una vez que tenemos marcado este bloque, aquí veis una serie 28 00:02:32,560 --> 00:02:39,680 de características que nos permiten recortar o reemplazar por otra imagen 29 00:02:39,680 --> 00:02:45,920 cuando ya lo tengamos diseñado o organizar la alineación 30 00:02:45,920 --> 00:02:53,480 de esta imagen, etcétera. Si nos ponemos en la parte 31 00:02:53,480 --> 00:03:01,360 de la derecha, le damos a este simbolito de ajustes y nos posicionamos en el 32 00:03:01,360 --> 00:03:05,240 bloque que tenemos marcado. Hay que fijarse que esté marcado ese bloque y 33 00:03:05,240 --> 00:03:10,480 aquí tenemos otra serie de características que nos permiten 34 00:03:10,480 --> 00:03:17,720 cambiar estilos por defecto o un estilo redondeado que podríamos elegir para 35 00:03:17,720 --> 00:03:21,800 esta imagen. Veamos por ejemplo esto, el texto alternativo que ya sabéis que esto 36 00:03:21,800 --> 00:03:27,120 es el alt cuando después que esté publicado se pasa por esta imagen. Si 37 00:03:27,120 --> 00:03:32,560 queremos que aparezca un texto alt alternativo que es referente a la imagen, 38 00:03:32,560 --> 00:03:38,560 el tamaño de la imagen también podemos seleccionarlo, anchura, altura que podemos 39 00:03:38,560 --> 00:03:43,760 modificar y avanzado. Es decir, aquí tenemos otra serie de atributos a la 40 00:03:43,760 --> 00:03:48,160 derecha. Tenemos estos que nos aparecen en el bloque cuando lo tenemos marcado 41 00:03:48,160 --> 00:03:54,280 más otros atributos que nos aparecen a la derecha. 42 00:03:54,280 --> 00:03:58,920 Le vamos a guardar como borrador para tenerlo ya y le damos a una vista 43 00:03:58,920 --> 00:04:03,640 previa para que veamos cómo va quedando nuestra entrada. Este es el 44 00:04:03,640 --> 00:04:10,520 caso de la entrada que acabamos de diseñar, el borrador que acabamos de 45 00:04:10,520 --> 00:04:15,360 diseñar. Continuamos y ahora vamos a añadir otro 46 00:04:15,360 --> 00:04:19,360 tipo de bloques que también es frecuente para añadir otro bloque. Estamos aquí 47 00:04:19,360 --> 00:04:25,120 pues clicamos sobre el más y en este caso lo que vamos a hacer es añadir, lo 48 00:04:25,120 --> 00:04:30,200 que vamos a tratar es, por ejemplo, de seleccionar, 49 00:04:30,520 --> 00:04:37,320 de añadir el bloque de columnas para distribuir la información y organizar 50 00:04:37,320 --> 00:04:42,480 la información dentro de esta entrada. Una columna es como lo tenemos ahora, dos 51 00:04:42,480 --> 00:04:50,080 columnas pues nos va a espaciar, nos va a tener dos espacios en dos columnas 52 00:04:50,080 --> 00:04:55,760 distribuidos y por ejemplo, el espacio sería con una columna más estrecha y 53 00:04:55,760 --> 00:05:00,080 otra columna más ancha, el de la izquierda más ancha, el de la derecha más 54 00:05:00,160 --> 00:05:03,880 estrecho, tres columnas. Vamos a elegir tres columnas, veis, y lo que ha hecho ha 55 00:05:03,880 --> 00:05:08,440 sido distribuirnos este espacio en tres columnas. Por supuesto, sólo es una 56 00:05:08,440 --> 00:05:13,480 distribución, ahora lo que queremos es hacer añadidos en estas tres columnas. 57 00:05:13,480 --> 00:05:17,320 ¿Para qué? Pues para que nos quede la información, digamos, 58 00:05:17,320 --> 00:05:24,240 más visual o más atractiva o más organizada realmente como nosotros 59 00:05:24,240 --> 00:05:29,680 queremos presentar esa información. Y ahora dentro de estas tres columnas veis 60 00:05:29,680 --> 00:05:33,400 que aparece un más que nos permite añadir otros bloques dentro de ellas, 61 00:05:33,400 --> 00:05:37,840 pues por ejemplo, vamos a imaginar que en la primera columna yo lo que quiero 62 00:05:37,840 --> 00:05:43,640 poner es un botón. Está aquí, me aparece, pero si no estuviera ahí pues es tan 63 00:05:43,640 --> 00:05:51,200 fácil como buscar botón y tendríamos la sección de botones, ¿veis? Ahora me ha 64 00:05:51,200 --> 00:05:55,800 añadido en esa columna, me ha añadido ya un botón y yo este botón vamos a 65 00:05:55,800 --> 00:06:02,520 imaginar que quiero ir a Google desde aquí, ¿vale? Pues pongo botón para ir a 66 00:06:02,520 --> 00:06:11,080 Google y marco, perdón, marco el botón y como 67 00:06:11,080 --> 00:06:15,920 veis estas son las características que tengo de este botón. Igualmente si me voy 68 00:06:15,920 --> 00:06:21,240 a la parte de aquí encontraré las características, otros atributos de ese 69 00:06:21,240 --> 00:06:24,560 botón que tengo justo a la derecha. Pero hay que imaginar que yo lo que quiero es 70 00:06:24,560 --> 00:06:29,360 que este botón cuando clique sobre él quiero ir a 71 00:06:29,360 --> 00:06:36,360 pues a la página de Google. Entonces pongo aquí la url de la página de Google 72 00:06:38,960 --> 00:06:43,160 google.es 73 00:06:43,440 --> 00:06:50,360 y de tal forma que cuando se clique sobre Google nos iremos a la 74 00:06:50,360 --> 00:06:53,960 url de la página de Google. En la segunda columna vamos a imaginar que yo lo que 75 00:06:53,960 --> 00:06:59,160 quiero aquí es poner un texto. No sabemos qué texto, pero cualquier texto. Pues 76 00:06:59,160 --> 00:07:04,820 entonces lo que hago es añadir el bloque párrafo y en este texto pues aquí 77 00:07:04,820 --> 00:07:11,240 escribiría todo lo que considerara oportuno que tengo que escribir, ¿vale? 78 00:07:11,240 --> 00:07:16,760 Cualquier texto. Fijaos que aquí si clicamos sobre él que es el texto aquí 79 00:07:16,760 --> 00:07:21,240 tenemos en la parte de la derecha en el bloque otros atributos como veis aquí 80 00:07:21,400 --> 00:07:29,680 color del texto que puedo poner en rojo, puedo poner en azul, el fondo que tengo 81 00:07:29,680 --> 00:07:35,760 blanco pero puedo poner en gris. Por ejemplo es una prueba de que no solamente 82 00:07:35,760 --> 00:07:39,960 tenéis estas características que os aparecen aquí en cada uno de los bloques sino 83 00:07:39,960 --> 00:07:44,120 también las que nos aparece en la parte de la derecha que nos permite, veis, 84 00:07:44,120 --> 00:07:48,280 modificar la tipografía, el tamaño, etcétera. 85 00:07:48,280 --> 00:07:55,060 Y en el último que tenemos aquí pues vamos a añadir otra imagen por 86 00:07:55,060 --> 00:08:01,920 ejemplo. Vengo aquí, le digo añadir imagen y me voy a la biblioteca de medios. Si es de la 87 00:08:01,920 --> 00:08:11,080 biblioteca de medios vamos a suponer que cojo el, no sé, el logo de FPMath 88 00:08:11,080 --> 00:08:17,880 que lo quiero, lo selecciono y lo coloco en esta parte de la columna. Vamos a 89 00:08:17,880 --> 00:08:23,000 guardar el borrador y vamos a ver qué está sucediendo con el diseño de nuestra 90 00:08:23,000 --> 00:08:29,120 entrada. Borrador, nos dice que guardando, 91 00:08:29,120 --> 00:08:34,280 ver en vista previa y vamos a ver qué está sucediendo. Bueno pues 92 00:08:34,280 --> 00:08:40,920 aparentemente es la imagen que hemos diseñado, las tres columnas y vamos a 93 00:08:40,920 --> 00:08:46,120 ver si no funciona esto de Google, a ver si realmente va o no va a Google. 94 00:08:46,120 --> 00:08:52,800 Parece que no, que no está funcionando correctamente y las tres columnas pues se 95 00:08:52,800 --> 00:08:56,440 me ocurren varias cosas. Una de ellas, el botón este de Google, no solamente 96 00:08:56,440 --> 00:09:02,720 debería funcionar la URL sino que además yo lo pondría más centrado y 97 00:09:02,720 --> 00:09:08,320 lo que haría es estas tres columnas despegarlas un poquito de la 98 00:09:08,360 --> 00:09:15,840 parte de la imagen porque así me queda francamente feo. Vamos a ver cómo lo 99 00:09:15,840 --> 00:09:22,200 remediamos, nos vamos otra vez al diseño de nuestro lienzo que veis aquí se ve 100 00:09:22,200 --> 00:09:27,360 mucho mejor que luego se va a ver, o sea que hay que hacer estas visualizaciones 101 00:09:27,360 --> 00:09:31,680 de vistas previas para saber realmente cómo está quedando. Pues lo primero que 102 00:09:31,680 --> 00:09:36,120 se nos ocurre es que esto estaba demasiado pegado a la imagen, entonces 103 00:09:36,120 --> 00:09:43,680 vamos a ver si existe pues algo que nos espacie, algún espaciador. 104 00:09:43,680 --> 00:09:50,480 Voy a preguntar y entonces pongo espacio y fijaros efectivamente me viene un 105 00:09:50,480 --> 00:09:54,560 bloque que se llama espaciador A y este bloque lo único que está haciendo es 106 00:09:54,560 --> 00:10:01,480 que yo puedo poner ampliarlo y lo que me está haciendo es generando un 107 00:10:01,520 --> 00:10:07,040 espaciador. Claro, pero yo no lo quiero aquí, yo lo querría situado entre la 108 00:10:07,040 --> 00:10:13,800 imagen y las tres columnas, pues si veis cuando aparecen sus características 109 00:10:13,800 --> 00:10:19,360 o sus propiedades me permite subir. Coloco ahí mi espaciador y ahora por 110 00:10:19,360 --> 00:10:23,760 ejemplo esto de Google que no nos ha funcionado nada y que lo queríamos en la 111 00:10:23,760 --> 00:10:30,940 parte central, vamos buscando a ver, dice cambiar la alineación vertical y aquí 112 00:10:30,940 --> 00:10:35,260 dice cambiar el justificado de los elementos, bueno pues dice justificar 113 00:10:35,260 --> 00:10:41,100 elementos a la izquierda, elementos al centro, bueno pues al centro parece que 114 00:10:41,100 --> 00:10:46,220 nos venía mejor y este alineación al medio, pues parece que también nos 115 00:10:46,220 --> 00:10:50,500 vendría mucho mejor si lo tenemos alineado al medio. 116 00:10:50,500 --> 00:10:57,540 De acuerdo y ahora estaba claro que la url aquí no estaba funcionando, entonces 117 00:10:57,540 --> 00:11:03,900 vamos a ver si la vemos, pues esta url por alguna razón no la hemos insertado 118 00:11:03,900 --> 00:11:11,060 correctamente, entonces vamos a insertarla, voy a coger la url de Google 119 00:11:17,140 --> 00:11:26,900 perdón, la url de Google, voy a cogerla directamente, esta misma, la de google.com 120 00:11:26,900 --> 00:11:31,700 control-c, me vengo a la edición y coloco aquí 121 00:11:31,700 --> 00:11:42,660 esta url, ya la tengo puesta, la url y ahora voy a guardar el borrador 122 00:11:42,660 --> 00:11:47,580 y a ver cómo queda la publicación, bueno ahora 123 00:11:47,580 --> 00:11:50,860 parece que el espaciador ya ha quedado aquí, esto ha quedado un poquito más 124 00:11:50,860 --> 00:11:56,620 centrado, realmente sí que nos va a Google, así que buenas noticias, esta parte 125 00:11:56,620 --> 00:12:01,540 central, la columna central la tenemos bien y 126 00:12:01,540 --> 00:12:04,980 luego la imagen, ¿podemos hacer este botón más grande para que nos quede esto 127 00:12:04,980 --> 00:12:08,780 mejor? pues sí, podemos hacer ese botón más grande, por ejemplo, estamos dando las 128 00:12:08,780 --> 00:12:14,180 posibilidades para que veáis todos los cambios que se pueden hacer, 129 00:12:14,180 --> 00:12:21,540 entonces nos centramos aquí en el botón y vemos a ver si este botón lo podemos 130 00:12:21,540 --> 00:12:26,180 ampliar de tamaño, vamos a ver si se puede ampliar de tamaño que probablemente 131 00:12:26,180 --> 00:12:31,220 sí, aquí en la parte de la derecha a ver si 132 00:12:31,220 --> 00:12:39,340 tenemos la estructura, vamos a ver si podemos ampliar el tamaño en alguno de 133 00:12:39,340 --> 00:12:45,500 los elementos que tenemos aquí, 134 00:12:46,420 --> 00:12:53,460 en este momento no encuentro realmente el tamaño, a ver, en 135 00:12:53,460 --> 00:13:00,660 estructura, no justificado, permite varias líneas, no encuentro exactamente cómo se 136 00:13:00,660 --> 00:13:05,820 ampliaría, pero seguramente tengamos una, a ver 137 00:13:05,820 --> 00:13:12,300 aquí, esta opción, relleno, contorno, no, tampoco 138 00:13:12,300 --> 00:13:18,860 y esta es otra de las opciones que no nos permite, pero tiene que haber algún 139 00:13:18,860 --> 00:13:25,100 sitio donde nos permita ampliar el tamaño de este botón, de hecho, si 140 00:13:25,100 --> 00:13:31,660 ponemos espacios conseguimos que el botón sea un poquito más grande, esto que 141 00:13:31,660 --> 00:13:38,660 nos sirva como ejemplo, bien, guardamos el borrador 142 00:13:39,060 --> 00:13:45,140 y ahora lo que vamos a hacer es, ya tenemos este diseño de la página y como 143 00:13:45,140 --> 00:13:52,340 veis, si yo quiero ampliar, perdón, si yo quiero ampliar dentro de cada una de las 144 00:13:52,340 --> 00:13:57,620 columnas, si yo quiero ampliar 145 00:13:58,020 --> 00:14:02,340 dentro de cada una de las columnas, si quiero introducir nuevos bloques, tengo 146 00:14:02,340 --> 00:14:07,660 que seleccionar la columna y añadir un nuevo bloque dentro de la columna, si lo 147 00:14:07,660 --> 00:14:12,900 que quiero es añadir un elemento debajo de estas tres columnas, tendría que 148 00:14:12,900 --> 00:14:16,620 añadirlo en esta parte de aquí, vamos a insertar en la parte inferior otra 149 00:14:16,620 --> 00:14:22,300 imagen para que veáis el efecto, buscamos la biblioteca de medios y insertamos 150 00:14:22,300 --> 00:14:28,540 otra de las imágenes que tengamos por aquí, vamos a elegir otra imagen 151 00:14:28,540 --> 00:14:35,540 pues por ejemplo esta, la seleccionamos y quedamos en esta parte 152 00:14:35,540 --> 00:14:43,300 veis que podemos ampliarla, si nos parece demasiado grande incluso a lo mejor 153 00:14:43,300 --> 00:14:47,060 podemos recortarla 154 00:14:50,820 --> 00:14:57,380 aplicamos y en la parte de la derecha podemos 155 00:14:57,380 --> 00:15:03,060 redondearla, pero en este caso la vamos a dejar tal y como la tenemos, guardamos el 156 00:15:03,060 --> 00:15:05,620 borrador 157 00:15:05,700 --> 00:15:11,180 y vamos a ver cómo nos ha quedado publicado 158 00:15:11,180 --> 00:15:16,740 cómo nos quedaría publicado, efectivamente, ah pues el botón no se 159 00:15:16,740 --> 00:15:22,380 nos ha hecho más grande y la imagen nos ha quedado 160 00:15:22,780 --> 00:15:28,780 en la parte posterior y no nos ha ampliado su tamaño 161 00:15:28,820 --> 00:15:38,180 probablemente tengamos que modificar esa imagen no aquí sino en la biblioteca y 162 00:15:38,180 --> 00:15:46,380 darle un tamaño diferente, si mostramos la imagen, tamaño completo, podemos ponerle 163 00:15:46,380 --> 00:15:53,140 tamaño medio, las dimensiones las tenemos aquí, veis 164 00:15:53,140 --> 00:15:57,500 aquí podemos ampliar las dimensiones 165 00:15:57,780 --> 00:16:03,060 500 y aquí le vamos a poner 166 00:16:03,060 --> 00:16:09,460 cómo es la altura, no, es la anchura, le vamos a poner 1500 167 00:16:09,460 --> 00:16:14,660 sería un poco exagerado, le vamos a poner 1000 168 00:16:14,820 --> 00:16:24,300 1000 y la altura la vamos a disminuir un poquito y la vamos a poner en 100 169 00:16:24,300 --> 00:16:32,700 demasiado pequeña, ponemos la altura a 300 y así nos queda más o menos 170 00:16:32,700 --> 00:16:37,540 como pensábamos que estuviera 171 00:16:37,540 --> 00:16:42,820 le damos a guardar como borrador y vamos a comprobar si realmente hemos 172 00:16:42,820 --> 00:16:47,900 conseguido que la imagen tuviera el tamaño alto completo, que sí, hemos 173 00:16:47,900 --> 00:16:51,660 conseguido que tuviera el tamaño completo 174 00:16:51,660 --> 00:17:01,100 bien, con esto acabaríamos el aprendizaje de los bloques, sencillamente 175 00:17:01,100 --> 00:17:10,500 es usar el más, clicar sobre el más, buscar el bloque y luego ya depende del 176 00:17:10,500 --> 00:17:16,140 usuario el diseño de esta página que quede pues más o menos vistoso, que sea 177 00:17:16,140 --> 00:17:21,460 más limpio, que sea más atractivo, aquí ya es un 178 00:17:21,460 --> 00:17:27,220 poco la inspiración de cada uno de nosotros.