Elementos Básicos

Los elementos básicos de Oxygen se encuentran en +Add -> Basics.

Todos los diseños posibles de páginas web pueden crearse combinando estos elementos.

CONTENEDORES
Los elementos contenedores permiten crear la estructura y la disposición del diseño. En general, todo el contenido de la página residirá dentro de los elementos contenedores.

Al eliminar un elemento contenedor también se eliminarán los elementos anidados dentro de él.

Sección
El elemento Section restringe el contenido dentro del ancho de la página.

En Oxygen 3.4 y posteriores, se puede insertar Shape Dividers (separadores de forma) en las secciones.

Columnas
El elemento Columns facilita la creación de diseños responsive basados en columnas.

Div
El elemento Div es un contenedor genérico. En general, no tiene ningún efecto sobre el diseño de su página hasta que se establecen opciones de estilo específicas para él.

TEXTO
Oxygen proporciona cuatro tipos de elementos de texto.

Para editar el texto dentro de cualquier elemento de texto, haz doble clic en el texto.

Título
El elemento Heading es un elemento de texto que utiliza las etiquetas de encabezado HTML (h1, h2, h3, h4, h5 y h6). Se utilizan habitualmente para títulos, encabezados y subtítulos que ayudan a organizar el contenido de una página web. No sólo facilitan a los usuarios la exploración de la página web, sino que también pueden ayudar a los robots de los motores de búsqueda a entender la estructura del contenido de la página.

Texto
El elemento Text es un elemento Div que sólo contiene texto.

Se puede aplicar un formato básico a este texto con la barra de herramientas de formato que aparece en la parte superior de la pantalla cuando se está editando el texto.

RICH TEXT (Texto enriquecido)
El elemento Rich Text permite aplicar un formato extendido al texto, utilizando el editor TinyMCE de WordPress.

SPAN
El elemento Span permite crear estilos especiales que sólo se aplican a la parte de su texto envuelta con el Span.

Para crear un elemento Span, haz doble clic en un elemento Heading o Text para editar el texto. A continuación, resalta la parte del texto que desea envolver con  Span y haz clic en <span> en la barra de herramientas de formato.

LINKS (Enlaces)
Oxygen proporciona tres tipos de elementos de enlace. Estos elementos crean hipervínculos a otras páginas web, archivos, ubicaciones dentro de la misma página, direcciones de correo electrónico o cualquier otra URL.

La URL del enlace puede establecerse en el campo URL de la parte superior de la pestaña Estilos Básicos para todos los elementos de enlace.

Puedes escribir cualquier URL, o hacer clic en el botón de establecer para buscar y establecer la URL del enlace al contenido existente en tu sitio.

TEXT LINK (Enlaces de Texto)
Un elemento Text Link es igual que un elemento Texto con un hipervínculo a otra URL.

Los colores predeterminados de los enlaces pueden cambiarse en Manage -> Settings -> Global Styles -> Links. (Gestión -> Configuración -> Estilos globales -> Enlaces).

LINK WRAPPER (Envoltura de enlace)
Un elemento Link Wrapper permite crear un único enlace para un grupo de elementos.

Todos los elementos colocados en un Link Wrapper serán clicables como parte del enlace.

BUTTON (Botón)
Un elemento Button es similar a un elemento Text Link, excepto que se muestra como un botón en lugar de texto plano.

En la pestaña Basic Styles (Estilos Básicos) están disponibles opciones de estilo sencillas para el botón.

VISUAL
Los elementos visuales se utilizan para añadir elementos gráficos a la página.

IMAGE
Especifica la URL de la imagen en el campo URL de la imagen en la pestaña Basic Styles (Estilos Básicos).

Haz clic en Browse junto al campo URL de la imagen para cargar o elegir imágenes de la biblioteca multimedia de WordPress. Esto hará que se cargue la imagen a tamaño completo en su diseño, independientemente del tamaño de visualización de la imagen.

Alternativamente, puedes utilizar la opción de la Biblioteca de Medios para asegurarse de que sólo la versión más grande necesaria de la imagen se carga en el diseño:

1. Selecciona el elemento Image.
2. En el panel de propiedades, selecciona Media Library (Biblioteca de medios).
3. En el campo ID, haz clic en el botón Browse.
4. Sube o elige la imagen que deseas utilizar y haz clic en Select Image (Seleccionar imagen).
5. A continuación, utiliza el selector Size (Tamaño) para elegir el tamaño de la imagen que quieras utilizar.
6. Al cargar la imagen de este modo, siempre que no hayas elegido el tamaño más pequeño en el desplegable Tamaño, la imagen utilizará el atributo srcset para determinar qué versión debe cargarse en función del tamaño de la ventana gráfica, mejorando así los tiempos de carga de la página.

Más información aquí

VIDEO
El elemento de vídeo es una forma de incrustar vídeos en páginas y garantizar que sean receptivos y mantengan su relación de aspecto, es decir, que a medida que la ventana del navegador se reduzca, el vídeo se reduzca también, manteniendo sus proporciones.

Para incrustar un vídeo de YouTube o Vimeo, pega la URL del vídeo en el campo de la URL de YouTube / Vimeo en la pestaña Basic Styles .

También puedes controlar la relación de aspecto del vídeo o pegar manualmente el código iframe para incrustar un vídeo de otro proveedor.

ICONO
El elemento Icono muestra un icono SVG y ofrece varias opciones de estilo.

Para elegir un icono, escribe texto en el campo Icono de la pestaña Basic Styles  para buscar los iconos disponibles.

Relacionado: Carga de conjuntos de iconos SVG personalizados

CODE BLOCK (Bloque de código)
El elemento CODE BLOCK permite incrustar código HTML, PHP, CSS y JavaScript personalizado dentro de la página.

Última modificación: 2 de julio de 2020