MANUAL DE USO DEL SITIO WEB

1. ESTRUCTURA DE UNA PÁGINA WEB CON DIVI Y WORDPRESS

1&0 Digital utiliza para diseñar el Constructor Visual y el Tema DIVI de Elegant Themes, el cual permite elaborar páginas web de manera sencilla a partir de dos formas de trabajar:

Backend: Vemos los componentes de manera gráfica. En este caso seleccionamos el elemento a modificar haciendo clic sobre el menú tipo hamburguesa de cada elemento.
Frontend: Vemos la página como se verá realmente en un navegador, permitiendo editar directamente sobre cada elemento o entrando en las opciones de configuración de cada sección. Para habilitar esta forma de trabajar, se hace clic sobre el botón USAR CONSTRUCTOR VISUAL

Vista en Modo Backend

Vista en Modo Frontend

Cuando se diseña utilizando el backend, los resultados no se visualizan en la pantalla, para ello debemos cargar la página en otra pestaña del navegador para verificar los cambios. La ventaja de trabajar en este modo es que consume menos memoria y el resultado de edición es más rápido, además cuando se ingresan a las propiedades de cada elemento se tiene mayor control sobre las opciones de cada uno.

Si se usa el modo Frontend para diseñar, los cambios se ven en tiempo real del resultado final de la página.

La secciones de la página pueden ser de tres clases:

Sección de ancho de pantalla: Los elementos toman toda la pantalla a lo ancho.

Sección Estandar: Los elementos se ubican en la pantalla dejando espacios a los lados, en una caja de aproximadamente 1.000 pixeles de ancho.

Sección especial: Fue creada para permitir estructuras de columnas más avanzadas. A diferencia de las secciones normales, cuando se utiliza una Sección Especial, se pueden agregar variaciones de columnas junto a márgenes verticales de altura completa. Estos tipos de diseños no son posibles utilizando las secciones normales.

Una página web está conformada por los siguientes elementos que definen su diseño:

Sección: Se reconocen por ser de color azul o moradas. Las de color azul permiten manejar una o varias columnas, mientras que la morada solo maneja ancho completo de la página sin posibilidad de columnas.
Fila: Permite agregar diferentes elementos en la sección de la página
Módulo: Son cada uno de los elementos utilizados en el diseño y presentación de la página. Estos pueden ser textos, imágenes, videos o secciones de la plantilla, como que muestre el blog, los productos de la tienda, galería de fotos, formularios de correo, etc.

2. EDITAR UNA PAGINA EXISTENTE

Si se desea hacer cambios en una determinada página, ya sea en su contenido textual o en componentes gráficos o de video, debemos ir a la sección Páginas de WordPress y seleccionar la opción EDITAR sobre la página deseada

Se abrirá la página seleccionada. Como estamos utilizando el Plugin DIVI BUILDER podemos editar la página de dos maneras en Backend o en Frontend.

En el modo Backend, debemos hacer clic sobre el menú Tipo Hamburguesa para acceder a las propiedades del módulo.

Si utilizamos el modo Frontend vemos la página como se verá realmente en un navegador, permitiendo editar directamente sobre cada elemento o entrando en las opciones de configuración de cada sección.

Para habilitar esta forma de trabajar, se hace clic sobre el botón

Se puede acceder a cada sección o elemento de la página haciendo clic en la rueda dentada de la zona que se quiere editar.

Se puede pasar de la Vista FrontEnd a la BackEnd haciendo clic en Editar página, ubicado en la parte superior de la pantalla de WordPress, si no ha guardado saldrá una ventana advirtiéndolo.

3. AGREGAR NUEVOS ELEMENTOS A UNA PÁGINA

Si deseamos agregar nuevos elementos a alguna de las páginas elaboradas solo basta con ubicarnos en la zona que deseamos agregar, por ejemplo, una galería de fotos.

1. En el modo editar página (Backend) Seleccionamos nueva Sección Estándar

2. Seleccionamos el número de columnas a utilizar y el diseño de las mismas

3. Hacemos clic en Insertar módulos

4. Seleccionamos el módulo a insertar: puede ser texto, imagen, galería de fotos, formulario de correo, botones, etc.

Se selecciona el módulo que se desea insertar. Una vez finalice la edición se da Clic en Guardar y salir.

Cada vez que desee insertar un módulo, necesitará hacer click en ‘Insertar Módulo’ y elegir un nuevo elemento de la lista de módulos de Divi. Una vez que ha elegido un módulo, será llevado a la ventana modal con las opciones específicas de el módulo elegido. Cada módulo tiene un propósito diferente y un grupo de opciones distintas.

Ir a otro tema...