Gutenberg es el editor visual que viene por defecto en WordPress 5.0. Es una herramienta para gestionar contenidos WordPress mediante bloques de forma sencilla e intuitiva.
Desde IPSOIDEAS no sólo diseñamos y programamos tu web en WordPress, sino que además te enseñamos a manejarlo para que tú mismo puedas subir los contenidos a tu blog o los proyectos a tus trabajos, gracias al manejo del editor Gutenberg.
Para ello hemos preparado este tutorial con los bloques más utilizados de este editor.
El editor consta de tres secciones:
Cada una de estas áreas contiene secciones adicionales con diferentes configuraciones.
Ubicada en la parte superior de la pantalla, la barra de herramientas de edición permite lo siguiente:
Es donde añadimos el contenido a nuestra página o post.
Se mostrarán los estilos de los bloques dentro del área de contenido (back-end) de igual forma que se verán en la parte frontal de la web (front-end). Si el tema utilizado no soporta esta funcionalidad, simplemente mostrará los estilos por defecto.
Cada bloque, cuenta con una pequeña barra de herramientas que aparece justo encima. Esta barra de herramientas aparece al hacer clic dentro del bloque que queremos editar y nos muestra las posibilidades de edición para el bloque seleccionado.
Cada tipo de bloque cuenta con sus propias herramientas ya que las necesidades de edición son diferentes.
El área de ajustes avanzados del nuevo editor de WordPress se encuentra en la barra lateral derecha y consta de dos subsecciones distintas: Documento y Bloque
Son los ajustes que se aplican a la página o post que estás editando.
El apartado de configuración del documento contiene:
Aquí aparece la configuración avanzada de cada bloque.
La mayoría de ajustes que necesitarás, los tienes disponibles en la barra de herramientas del propio bloque, pero si algún bloque tuviese ajustes adicionales, estos aparecerían y se configurarían en este apartado.
No todos los bloques tienen ajustes avanzados. La mayoría de veces no aparecerá nada en este área.
Los bloques son fragmentos de contenido que se insertan en los posts o páginas de WordPress y su función es hacer que editar y añadir diferentes tipos de contenido sea mucho más fácil y rápido.
Se pueden copiar, pegar, duplicar y más importante, desplazar a diferentes puntos de la página, de forma que puedas personalizar la estructura y diseño de tu contenido fácilmente.
Haciendo clic en los tres puntos pequeños que verás junto a cada bloque, también podrás ver más opciones para editar tu contenido, incluyendo opciones como los siguientes:
Los bloques no sólo están formados por texto, sino que hay una gran selección de aspectos y tipos de contenido dónde elegir.
A continuación veremos un listado de los bloques comunes que vienen por defecto.
Son los bloques que normalmente se utilizan más a menudo, sirven para añadir texto, imágenes y añadir contenido multimedia.
FUNCIÓN: Agrega texto simple a un post o página de WordPress.
FORMATOS DISPONIBLES: Negrita, cursiva, alineación, tamaño de fuente, color, color de fondo y otros ajustes.
DESCRIPCIÓN: El bloque párrafo sirve para añadir un solo párrafo de contenido.
La mayor parte del contenido general que añadimos a nuestro sitio utilizará este bloque.
Estos ajustes aparecen directamente encima del bloque seleccionado, una vez que haga clic dentro de él.
Alinear texto: Puedes alinear los párrafos a la izquierda, derecha o centro de la página. En la mayoría de los casos, la alineación por defecto, a la izquierda, será la única que necesites; pero es bueno conocer todas las posibilidades.
Negrita, cursiva y tachado.
Enlaces: Seleccionas el texto que deseas enlazar, pinchas en el icono del enlace (en forma de cadena) y escribes o pegas la URL y aceptas.
Estos ajustes permiten modificar el bloque de párrafo como un todo.
Los ajustes avanzados de párrafos se dividen en secciones y se encuentran en el panel Configuración del bloque (también llamado «Ajustes avanzados») en el lado derecho de la pantalla de edición. Éstos son:
Cada bloque que creamos, tiene ciertas posibilidades a las que se pueda transformar, cualquier bloque de texto (Párrafo, versículo, cita, listas etc) se puede convertir a cualquier otro bloque de texto.
Los bloques del tipo imagen que veremos más adelante, se pueden convertir en cualquier otro bloque de imagen y así respectivamente.
Además puedes cambiar un bloque de párrafo a los siguientes tipos que verás a continuación. Para hacer el cambio, sólo hay que pulsar en el primer icono del desplegable de herramientas.
Es un bloque simple, que permite añadir listas. Pueden ser ordenadas (con números) o desordenadas (normalmente con puntos o guiones). Su único propósito es mostrar el contenido en formato de listado ya sea o no enumerado.
El editor visual permite personalizar los siguientes ajustes para los bloques de creación de listados:
Como has visto, y al igual que con los bloques de párrafo del editor Gutenberg, disponemos de un conjunto de herramientas que aparecen directamente encima del bloque al seleccionarlo con el ratón.
Seguramente, este bloque del editor Gutenberg es uno de los que más usarás junto con el de párrafo. Nos permite añadir titulares o encabezado o lo que es lo mismo, las etiquetas HTML H2, H3, H4, etc. La etiqueta H1 se reserva para el título de tu entrada, se recomienda una sola etiqueta H1 por página web, por lo que no es recomendable volver a utilizarse en el contenido de tu entrada.
Permite añadir contenido gráfico a nuestros artículos. Tan sólo tienes que añadir este bloque y se desplegará el recuadro que ves, para permitirnos cargar la imagen que queramos de 3 formas diferentes:
Inserta un bloque de Galería, dentro de la pestaña de bloques comunes para que se despliegue el recuadro que nos permite añadir las diferentes imágenes que queramos usar.
Podrás elegir el número de columnas de imágenes que desees modificando los ajustes avanzados y organizar las fotos en un formato más fácil de usar y visualmente más atractivo.
Sirve para añadir de forma destacada una pequeña frase o apunte añadiendo además la fuente de esa oración.
Como puedes ver en la imagen, podrás editar el contenido usando negritas, alineación ,etc.
Estos bloques permiten añadir nuestros propios archivos de audio y video de forma nativa a través de WordPress. Además con el bloque Incrustar se pueden añadir medios de terceros como YouTube o o SoundCloud.
Es el que debemos utilizar si lo que queremos es poner a disposición de nuestros lectores un archivo, como por ejemplo un pdf. La forma de cargar este tipo de archivos, una vez añadido el bloque del editor de Gutenberg, es similar al de una imagen o audio a través de la biblioteca de medios.
Si quieres tener una página web que puedas gestionar tú mismo, no dudes en contactar con nosotras, pues no solo diseñamos y desarrollamos tu web en WordPress, sino que además te enseñamos a utilizar el editor de Gutenberg para que puedas subir tus propios artículos.
Cookie | Duration | Description |
---|---|---|
__cfduid | 1 month | La cookie es utilizada por servicios cdn como CloudFlare para identificar clientes individuales detrás de una dirección IP compartida y aplicar configuraciones de seguridad por cliente. No corresponde a ningún ID de usuario en la aplicación web y no almacena ninguna información de identificación personal. |
_GRECAPTCHA | 5 months 27 days | Google establece esta cookie. Además de ciertas cookies estándar de Google, reCAPTCHA establece una cookie necesaria (_GRECAPTCHA) cuando se ejecuta con el propósito de proporcionar su análisis de riesgo. |
cookielawinfo-checbox-analytics | 11 months | Esta cookie está configurada por el complemento de consentimiento de cookies de GDPR. La cookie se utiliza para almacenar el consentimiento del usuario para las cookies en la categoría "Análisis". |
cookielawinfo-checbox-functional | 11 months | La cookie está configurada por el consentimiento de cookies de GDPR para registrar el consentimiento del usuario para las cookies en la categoría "Funcional". |
cookielawinfo-checbox-others | 11 months | Esta cookie está configurada por el complemento de consentimiento de cookies de GDPR. La cookie se utiliza para almacenar el consentimiento del usuario para las cookies en la categoría "Otro". |
cookielawinfo-checkbox-advertisement | 1 year | La cookie se establece mediante el consentimiento de cookies de GDPR para registrar el consentimiento del usuario para las cookies en la categoría "Publicidad". |
cookielawinfo-checkbox-necessary | 11 months | Esta cookie está configurada por el complemento de consentimiento de cookies de GDPR. Las cookies se utilizan para almacenar el consentimiento del usuario para las cookies en la categoría "Necesarias". |
cookielawinfo-checkbox-performance | 11 months | Esta cookie está configurada por el complemento de consentimiento de cookies de GDPR. La cookie se utiliza para almacenar el consentimiento del usuario para las cookies en la categoría "Rendimiento". |
JSESSIONID | Utilizado por sitios escritos en JSP. Cookies de sesión de plataforma de propósito general que se utilizan para mantener el estado de los usuarios en las solicitudes de página. | |
SERVERID | 10 minutes | Esta cookie se utiliza para asignar al usuario a un servidor específico, para así proporcionar un tiempo de servidor mejorado y más rápido. Recuerda qué servidor entregó la última página al navegador. También ayuda a equilibrar la carga. |
viewed_cookie_policy | 11 months | La cookie está configurada por el complemento de consentimiento de cookies de GDPR y se utiliza para almacenar si el usuario ha dado su consentimiento o no para el uso de cookies. No almacena ningún dato personal. |
Cookie | Duration | Description |
---|---|---|
__stidv | 1 year | ShareThis utiliza esta cookie. Esta cookie se utiliza para compartir el contenido del sitio web en las redes sociales. |
Cookie | Duration | Description |
---|---|---|
YSC | session | Estas cookies son establecidas por Youtube y se utilizan para rastrear las vistas de videos incrustados. |
Cookie | Duration | Description |
---|---|---|
__stid | 1 year | ShareThis establece la cookie. La cookie se utiliza para el análisis del sitio para determinar las páginas visitadas, la cantidad de tiempo dedicado, etc. |
_dc_gtm_UA-101372058-1 | 1 minute | Esta cookie es instalada por Google Tag Manager. La cookie se utiliza para almacenar información sobre cómo los visitantes usan un sitio web y ayuda a crear un informe analítico de cómo está funcionando el sitio web. Los datos recopilados, incluido el número de visitantes, la fuente de donde provienen y las páginas visitadas de forma anónima. |
_ga | 2 years | Esta cookie es instalada por Google Analytics. La cookie se utiliza para calcular los datos de visitantes, sesiones y campañas y realizar un seguimiento del uso del sitio para el informe de análisis del sitio. Las cookies almacenan información de forma anónima y asignan un número generado aleatoriamente para identificar visitantes únicos. |
_ga_E5G6LDP2RC | 2 years | Esta cookie es instalada por Google Analytics. La cookie se utiliza para almacenar información sobre cómo los visitantes usan un sitio web y ayuda a crear un informe analítico de cómo está funcionando el sitio web. Los datos recopilados, incluido el número de visitantes, la fuente de donde provienen y las páginas visitadas de forma anónima. |
_gcl_au | 3 months | Google Analytics utiliza esta cookie para comprender la interacción del usuario con el sitio web. |
_gid | 1 day | Esta cookie es instalada por Google Analytics. La cookie se utiliza para almacenar información sobre cómo los visitantes usan un sitio web y ayuda a crear un informe analítico de cómo está funcionando el sitio web. Los datos recopilados, incluido el número de visitantes, la fuente de donde provienen y las páginas visitadas de forma anónima. |
gclid | 1 month | Esta cookie es instalada por Google Analytics. La cookie se utiliza para almacenar información sobre cómo los visitantes usan un sitio web y ayuda a crear un informe analítico de cómo está funcionando el sitio web. Los datos recopilados, incluido el número de visitantes, la fuente de donde provienen y las páginas visitadas de forma anónima. |
pxcelPage_c010 | 7 days | El dominio de esta cookie es propiedad de Sharethis. Esta es una cookie analítica que se utiliza para proporcionar un identificador único a la computadora para el análisis de tráfico a ShareThis. Ayuda a habilitar la función de compartir en el sitio web. |
Cookie | Duration | Description |
---|---|---|
_cc_aud | 8 months 26 days | La cookie la establece crwdcntrl.net. El propósito de la cookie es recopilar información estadística de forma anónima sobre los visitantes del sitio web. Los datos recopilados incluyen el número de visitas, el tiempo promedio que se pasa en el sitio web y las páginas que se han cargado. Luego, estos datos se utilizan para segmentar las audiencias en función de la ubicación geográfica, la demografía y el interés del usuario para proporcionar contenido relevante y para los anunciantes para publicidad dirigida. |
_cc_cc | session | La cookie la establece crwdcntrl.net. El propósito de la cookie es recopilar información estadística de forma anónima sobre los visitantes del sitio web. Los datos recopilados incluyen el número de visitas, el tiempo promedio que se pasa en el sitio web y las páginas que se han cargado. Luego, estos datos se utilizan para segmentar las audiencias en función de la ubicación geográfica, la demografía y el interés del usuario para proporcionar contenido relevante y para los anunciantes para publicidad dirigida. |
_cc_dc | 8 months 26 days | La cookie la establece crwdcntrl.net. El propósito de la cookie es recopilar información estadística de forma anónima sobre los visitantes del sitio web. Los datos recopilados incluyen el número de visitas, el tiempo promedio que se pasa en el sitio web y las páginas que se han cargado. Luego, estos datos se utilizan para segmentar las audiencias en función de la ubicación geográfica, la demografía y el interés del usuario para proporcionar contenido relevante y para los anunciantes para publicidad dirigida. |
_cc_id | 8 months 26 days | La cookie la establece crwdcntrl.net. El propósito de la cookie es recopilar información estadística de forma anónima sobre los visitantes del sitio web. Los datos recopilados incluyen el número de visitas, el tiempo promedio que se pasa en el sitio web y las páginas que se han cargado. Luego, estos datos se utilizan para segmentar las audiencias en función de la ubicación geográfica, la demografía y el interés del usuario para proporcionar contenido relevante y para los anunciantes para publicidad dirigida. |
_fbp | 3 months | Facebook configura esta cookie para entregar publicidad cuando están en Facebook o en una plataforma digital impulsada por publicidad de Facebook después de visitar este sitio web. |
EE | 4 months | Exelator.com establece esta cookie. Las cookies se utilizan para almacenar información sobre la visita de los usuarios al sitio web. Los datos incluyen el número de visitas, el tiempo medio pasado en el sitio web y las páginas que se han cargado. Esta información se utiliza para proporcionar a los usuarios anuncios personalizados y dirigidos. |
fr | 3 months | Facebook establece la cookie para mostrar anuncios relevantes a los usuarios y medir y mejorar los anuncios. La cookie también rastrea el comportamiento del usuario en la web en sitios que tienen píxeles de Facebook o complementos sociales de Facebook. |
IDE | 1 year 24 days | Utilizado por Google DoubleClick y almacena información sobre cómo el usuario utiliza el sitio web y cualquier otro anuncio antes de visitar el sitio web. Se utiliza para presentar a los usuarios anuncios que son relevantes para ellos de acuerdo con el perfil del usuario. |
pxrc | 2 months | El propósito de la cookie es identificar a un visitante para ofrecer publicidad relevante. |
rlas3 | 1 year | La cookie la establece rlcdn.com. La cookie se utiliza para mostrar anuncios relevantes al visitante, así como para limitar el tiempo que el visitante ve una y también para medir la efectividad de la campaña. |
test_cookie | 15 minutes | Esta cookie la establece doubleclick.net. El propósito de la cookie es determinar si el navegador del usuario admite cookies. |
ud | 4 months | Exelator.com establece esta cookie. Las cookies se utilizan para almacenar información sobre la visita de los usuarios al sitio web. Los datos incluyen el número de visitas, el tiempo medio pasado en el sitio web y las páginas que se han cargado. Esta información se utiliza para proporcionar a los usuarios anuncios personalizados y dirigidos. |
uuid2 | 3 months | Estas cookies son establecidas por AppNexus. Las cookies almacenan información que ayuda a distinguir entre dispositivos y navegadores. Esta información la usamos para seleccionar anuncios servidos por la plataforma y evaluar el rendimiento del anuncio y el pago de atributos para esos anuncios. |
VISITOR_INFO1_LIVE | 5 months 27 days | Youtube establece esta cookie. Se utiliza para rastrear la información de los videos de YouTube incrustados en un sitio web. |
Cookie | Duration | Description |
---|---|---|
_zcsr_tmp | Esta cookie es instalada por Zoho. La cookie se utiliza para almacenar información sobre cómo los visitantes usan un sitio web de forma anónima. | |
fpestid | 1 year | Cookie necesaria para la utilización de las opciones y servicios del sitio web |
st_samesite | session | Utilizada por ShareThis para rastrear la navegación en la web del visitante y sus preferencias. Se usa para estadísticas internas y marketing. |
zabHMBucket | 1 year | Esta cookie es instalada por Zoho. La cookie se utiliza para almacenar información sobre cómo los visitantes usan un sitio web de forma anónima. |
zabUserId | 1 year | Esta cookie es instalada por Zoho. La cookie se utiliza para almacenar información sobre cómo los visitantes usan un sitio web de forma anónima. |
zabVisitId | session | Esta cookie es instalada por Zoho. La cookie se utiliza para almacenar información sobre cómo los visitantes usan un sitio web de forma anónima. |
zc | 1 year | Esta cookie es instalada por Zoho. La cookie se utiliza para almacenar información sobre cómo los visitantes usan un sitio web de forma anónima. |
ZCAMPAIGN_CSRF_TOKEN | session | Esta cookie es instalada por Zoho. La cookie se utiliza para almacenar información sobre cómo los visitantes usan un sitio web de forma anónima. |
zfccn | session | Esta cookie es instalada por Zoho. La cookie se utiliza para almacenar información sobre cómo los visitantes usan un sitio web de forma anónima. |