Index

Introducción Oxygen builder

El plugin Oxygen builder nos servirá para realizar la maquetación de nuestro proyecto digital.

1. Estructura

La estructura de Oxygen builder, es similar al HTML que vimos en el primer trimestre. Utilizando las etiquetas:
- Header
- Section
- Footer
- Div
Por ejemplo montaríamos un section + Columns y dentro de cada columna colocaremos H1, text, image,... según nuestro diseño. 
Ejemplo de la estructura básica de una sección con columnas.
Todos los elementos de las estructura los vamos a encontrar en el sidebar de la izquierda y se pueden añadir con el símbolo +.

2. Construir header y footer

Veamos como construir el header y footer que se va a repetir en toda nuestra web. Para ello crearemos una plantilla=Templates de Oxygen.

Para ello iremos al menú principal de Wordpress Oxygen>>Templates.
Botón Añadir nuevo template de nombre header-footer por ejemplo, lo públicamos=guardar y lo maquetaremos apretando el botón Edit with Oxygen builder.
Vamos a montar un menú clásico, del tipo logo izquierda, menú centrado e iconos de redes a la derecha. Para ello vamos al buscador de elementos de estructura, botón + y escríbimos Header builder, al clicar sobre este elemento nos montará una fila header con tres elementos: left, center y right.

Ejemplo de la estructura, que podemos visualizar apretando icono Structure del sidebar de la derecha

Una vez maquetado el header con el logo + menú + redes sociales de este ejemplo, justo debajo de esta cabecera, colocaremos el Inner content, que será el espacio reservado para añadir el contenido de cada una de las páginas que vaya maquetando.

En esta captura podemos observar ya montada nuestra plantilla con el Header + Inner content + footer.

La estructura quedaría de la siguiente manera una vez montado el:

  • Header
  • Inner content
  • Footer (section con columns)

2.2. Selección páginas de nuestro menú

IMPORTANTE: para seleccionar las páginas que irán en nuestro menú de navegación, las podemos seleccionar si vamos al menú propio de Wordpress, Apariencia>>>Menús.

Seguiremos estos pasos:

Ejemplo de un menú montado

Aquí es donde podemos seleccionar el menú que acabamos de montar.

3. Maquetación páginas

Cuando ya hemos construído nuestro template para el header + contenido + footer, iremos a por las páginas. Volvemos al menú principal de Wordpress>>Páginas>> Crear nueva página y esta vez, marcaremos a está página que queremos utilizar el template header-footer que acabamos de crear. En la opción Render page using template, que podemos observar en esta captura.

Al editar la pagina con Oxygen builder, nos aparecerá con este aspecto donde veremos el header y footer montados, más la parte de inner content donde maquetaré la página en cuestión.

3.1. Maquetación páginas - dirección (Flexbox)

En el trimestre pasado vimos como maquetar con el sistema de CSS Flexbox. En Oxygen builder podemos controlar la distribución de los elementos, en vertical, horizontal y distribuirlos dentro de sus contenedores.

Por ejemplo, podemos colocar un section y dentro de este los divs con imagen, texto o cualquier elemento que necesitemos. Tanto el section como en el div podemos controlar el orden de los elementos, en horizontal o vertical. Ver vídeo de ejemplo:

Vista de como podemos controlar la distribución en horizontal o vertical y los elementos que se encuentran dentro de esta sección.

Configuraciones a tener cuenta:

  • Child element layout: horizontal, column
  • Vertical item alignment
  • Horizontal item alignment
  • Gap = espacio entre los elementos

4. Pestaña Avanzado

En la pestaña Advanced, podemos gestionar:

- Background (color, imagen de fondo)
- Size & Spacing (padding-margin)
- Layout
- Tipography
-Borders
- Effects
- CSS...

A continuación veremos algunos ejemplos.

4.1.  Padding-Margin

Como vimos en el primer trimestre, para gestionar el espacio interior llamado padding y el espacio exterior llamado margin. En Oxygen lo haremos de la siguiente manera. 

1- Seleccionamos por ejemplo el elemento a modificar, una caja de texto.

2- Vamos a la pestaña de la izquierda Advanced >>Size&Spacing

3- Aquí es donde podemos modificar el padding o margin según nuestro diseño.

4.2.  Section ancho completo (full-width)

Podemos modificar una section para que esta ocupe todo el ancho de nuestra pantalla, de la siguiente manera. En este ejemplo, vemos como añadimos a una section una imagen y hacemos que ocupe el 100% de nuestra pantalla.

4.3.  Tipografía

Para modificar tipografía: color, interlineado, justificación, peso (bold, regular,...), encontraremos todas estas opciones en la pestaña Advanced>>Tipography

5.  Añadir vídeo

Par añadir un vídeo a nuestro proyecto, tenemos 3 opciones:
  1. Vídeo de Youtube (con su código)
  2. Vídeo de Vimeo (con su código)
  3. O Vídeo propio, subido a nuestra web
En los dos primeros ejemplos se trataría de ir al canal respectivo de Youtube o Vimeo y copiar el código que nos ofrecen estas plataformas para pegarlo en nuestra web.
En la tercera opción, podemos subir un vídeo. Siguiendo estos pasos:
1- Subir nuestro vídeo al propio wordpress, iremos a Media>>>Subir fichero y copiaremos la url una vez subido
2- Insertar el vídeo con código iframe como el siguiente ejemplo:
Ir al elemento vídeo:
<iframe src="AQUÍ COLOCAMOS LA URL"></iframe>
Quedaría de la siguinete manera:
<iframe src="https://oxygen.plasticface.es/wp-content/uploads/2024/02/Grabacion-de-pantalla-2024-02-21-a-las-10.56.38.mp4"></iframe>