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