Índice de Contenidos

• Títulos y Encabezados
• Imágenes
• Galerías de Imágenes
• Contenido Embebido
• Grillas (Tablas)

Títulos y Encabezados

En general, escoja el tipo de Título para indicar a los buscadores la importancia de los textos. Pero modifique sus propiedades usando el Panel de Herramientas de la derecha, pestaña Bloque “Heading”.

NOTA: Algunas títulos traen incorporado un margen superior o inferior, que no se puede modificar desde el Editor de WordPress, sólo desde el Tema “Geminis”.

Ejemplos:

Título H1: Se ha modificado su tamaño a super-Extra-large y su color, a azul

Título H2: se ha modificado su tamaño a Extra-large

Título H3: se ha modificado su tamaño a large y su color, a salmón

IMÁGENES

Al insertar una imagen en su página, tenga en consideración las siguientes variables: Calidad y Alineación.

CALIDAD Y TAMAÑO DE IMAGEN

En el Panel de Herramientas de la derecha, escoja el Tamaño de la Imagen, que puede ser:

• Miniatura: La imagen redimensionada y recortada a 150 x 150 px.
• Mediano: La imagen redimensionada a un ancho de 300 px y alto proporcional.
• Largo: La imagen redimensionada a una ancho de 1024 px y alto proporcional.
• Completo: La imagen original, sin redimensionar.

Si la imagen tiene dimensiones inferiores a uno de los valores anteriores, sólo genera aquellos tamaños que sean igual o inferiores a ella misma.

Ejemplos:

ALINEACIÓN DE IMAGEN

Mediante la alineación de la imagen, usted podrá mostrar de modo más ordenado las imágenes insertadas, y en ocasiones puede que modifique visualmente su tamaño, a fin de encajar en la pantalla.

Para modificar la Alineación de la Imagen, vaya al Menú flotante de la misma, y haga click sobre la opción “Cambiar Alineación”. Escoja de la lista desplegada una de las siguientes opciones:

• Ninguna: La imagen no recibe alineación, por lo que queda alineada por defecto hacia la izquierda de la pantalla, sin márgenes.
• Ancho amplio: La imagen es estirada proporcionalmente para ocupar todo el ancho de la pantalla, sin márgenes.
• Ancho completo: La imagen es estirada proporcionalmente para ocupar todo el ancho del contenido de la página, respetando los márgenes laterales del contenido.
• Alinear a la izquierda: La imagen es alineada a la izquierda, con un margen izquierdo que respeta al margen del resto del contenido, y el contenido que le sigue sube a su lado derecho.
• Centrar: La imagen es alineada al centro de la pantalla, sin permitir texto o contenido a sus lados.
• Alinear a la derecha: La imagen es alineada a la derecha, con un margen derecho que respeta al margen del resto del contenido, y el contenido que le sigue sube a su lado izquierdo.

Ejemplos:

Este es un ejemplo de cómo se ajusta el texto cuando una imagen es alineada hacia la izquierda.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Este es un ejemplo de cómo se ajusta el texto cuando una imagen es alineada hacia la derecha.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Galerías de Imágenes

Esta es una galería creada usando SmartSlider3:

Galería1-1024x683

Galería2-1024x683

Galería3-1024x683

Galería4-1024x683

Galería5-1024x683

Galería6-1024x683

Galería7-1024x683

Galería8-1024x683

Galería9-1024x683

Galería10-1024x683

Galería11-1024x683

Galería12-1024x683

Galería13-1024x683

Galería14-1024x683

Galería15-1024x683

Y esta es una galería creada usando el Block tipo “Gallery” de WordPress:

Contenido Embebido

Para especificar la Calidad de la Imagen, se especificará escogiendo el “Tamaño” de la misma desde el Panel de Herramientas de la derecha, Bloque “Imagen”.

Para especificar el Tamaño de cada elemento, se usará el tipo de “Alineación”, al que se puede acceder en el menú flotante que tiene cada elemento al darle click sobre él:

• Ancho amplio: El elemento cubrirá todo el ancho de la pantalla, sin márgenes.
• Ancho completo: El elemento cubrirá todo el ancho de la pantalla, excepto por los márgenes de derecha e izquierda.

Los otros tipos de Alineación respetarán un Ancho por defecto del contenido Embebido.

Para pantallas pequeñas (ancho inferior a 939 píxeles), el ancho de los videos y contenidos embebidos se verá siempre como FULL.

Ejemplos:

Este es un texto para demostrar cómo lucirá este párrafo, al colocarlo a continuación de un Elemento alineado hacia la izquierda. Como puede verse, aparecerá a la derecha del Elemento. Ahora agregaremos más texto para rellenar este espacio. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Y este texto es cómo lucirá a continuación de un Elemento que ha sido alineado hacia la derecha. En ambos casos, el margen de estos elemento es de 60px por lado, excepto el lado que da hacia el margen, que es acorde al margen del resto del contenido, y el margen superior, que es cero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Otros Tipos de Contenido Embebido: Todos se encuentran con Alineación “Centrado”.

GRILLAS (TABLAS)

Cuando inserte una tabla o grilla (Block tipo “Table”), esta se mostrará por defecto en la página web sin bordes, sin encabezado ni pie, y sin espaciado al interior de las celdas. Al agregar contenido dentro de las celdas de una Grilla, éstas siempre respetarán la alineación de la página (justificado).

RESPONSIVE:

En pantallas pequeñas, las Tablas ocuparán el 100% del ancho del espacio destinado al contenido, y serán ajustadas al ancho disponible. Pero si su contenido se desborda, se agregará una barra de desplazamiento lateral.

Ejemplo (Revisar en pantallas pequeñas):

Columna 1	Columna 2	Columna 3	Columna 4	Columna 5	Columna 6	Columna 7
Lorem ipsum dolor sit amet	Consectetur adipiscing elit		Duis aute irure dolor in reprehenderit in voluptate	Excepteur sint occaecat cupidatat non proident	Quis nostrud exercitation ullamco laboris	Ut enim ad minim veniam

Alineación de las Celdas

Por defecto, la alineación de las Celdas es centrada verticalmente y justificada horizontalmente.

Para modificar su Alineación Vertical, no existe una opción en el Editor de WordPress. Pero usted puede aplicarla manualmente, yendo al Panel de Herramientas ubicado a la derecha, pestaña Bloque, y dentro ir a la opción “Avanzado”, donde encontrará la casilla para “Clases CSS adicionales”. Ingrese en ella el siguiente texto, según sus requerimientos:

• “valign-top”: Para que el contenido de todas las celdas del cuerpo de la tabla quede alienado verticalmente arriba.
• “valign-middle”: Para que el contenido de todas las celdas del cuerpo de la tabla quede alienado verticalmente en el centro.
• “valign-bottom”: Para que el contenido de todas las celdas del cuerpo de la tabla quede alienado verticalmente abajo.

Ejemplos:

Para modificar su Alineación Horizontal, acceda al Menú flotante de la Tabla (ubicado en la parte superior izquierda de elemento, tras clickarlo), y en el ícono de Alineaciones, seleccione la opción deseada:

• Alinear columna a la Izquierda: El contenido de todas las celdas de la columna activa se alineará hacia la izquierda.
• Alinear columna al Centro: El contenido de todas las celdas de la columna activa se alineará al centro.
• Alinear columna a la Derecha: El contenido de todas las celdas de la columna activa se alineará hacia la derecha.

Ejemplo:

Encabezado y pie

Para agregar Encabezado y/o Pie de Tabla, vaya al Panel de Herramientas de la derecha, y en la opción “Configuración de la Tabla”, margue las opciones que desea aplicar:

• Sección de encabezado: Agrega una fila en la parte superior, donde podrá especificar el nombre de cada columna.
• Sección de pie: Agrega una fila al final, en la parte inferior, donde poder colocar datos al pie de columna.

Ejemplos:

Estilos de tabla

Para modificar la Apariencia de la Grilla, vaya al Panel de Herramientas de la derecha, pestaña Bloque, y en las opciones de “Estilos”, haga click sobre la alternativa que requiera:

• Estilo Default: Agrega Líneas de Borde a la grilla y a sus celdas, manteniendo el fondo transparente.
• Estilo Stripes: Aplica Color de fondo alternado a las filas de la grilla, sin usar Bordes.
• Sin Estilo: Aunque en el Panel aparece seleccionada la opción “Default”, realmente sólo lo estará si usted hace click sobre ella. Una vez que la escoge, la única forma de deshacer su selección, es yendo a la opción “Avanzado” del mismo Panel, y en la casilla de “Clases CSS adicionales”, remover el estilo que aparece: si había escogido “Default”, aparecerá “is-style-regular”; si había escogido “Stripes”, aparecerá “is-style-stripes”; usted sólo tiene que borrar ese texto de la casilla y guardar los cambios.

IMPORTANTE: Los cambios de estilo no se verán reflejados en la pantalla del Editor de WordPress. Recuerde revisar los cambios en la ventana de la página publicada, actualizando la página con CTRL+F5.

Ejemplos:

Grillas con Imágenes

Para insertar imágenes dentro de una celda de la tabla, acceda al Menú flotante de la Tabla (ubicado en la parte superior izquierda de la grilla, tras hacer click sobre ella), luego al ícono del ángulo hacia abajo, descrito como “Display more blocks tools”, y dentro de la lista desplegada, escoja “Imagen en línea”.

Por defecto, la Tabla sin Estilo no presenta espaciado interior en las celdas.

Si desea que las imágenes dentro de la Grilla sin estilo tenga espaciado, vaya al Panel de Herramientas de la derecha, pestaña Bloque, opción “Avanzado”, y dentro de la casilla “Clases CSS adicionales”, agregue el texto “is-style-grid”.

Si desea crear una composición con sus imágenes usando la Tabla, sigas las mismas instrucciones anteriores, pero en la casilla de “Clases CSS adicionales” agregue el texto “is-style-layout”.

–> Recuerde que puede agregar un link a cada imagen.

RESPONSIVE:

• Tablas Regulares: Se comportarán como lo descrito al inicio de este capítulo.
• Tablas con la Clase CSS adicional “is-style-grid” o “is-style-layout”: Desarmará la tabla, y cada celda ocupará el ancho completo de la pantalla, de modo de permitir la legibilidad de cada celda como un bloque, apilados hacia abajo.

Ejemplos:

Lorem ipsum dolor sit amet	Ut enim ad minim veniam	Duis aute irure dolor
Duis aute irure dolor	Lorem ipsum dolor sit amet	Ut enim ad minim veniam