Tutorial Divi. Crear una web en menos de 1 hora

por | 3 Ene, 2017 | Divi, Tutoriales

Tutorial Divi. Crear web en menos de una hora.

En este tutorial divi vamos a tratar de crear una página web con 4 secciones distintas en menos de una hora. No será desde luego el único tutorial que versará sobre la creación de una web. Añadiremos por tanto nuevos tutoriales de manera periódica que traten distintas formas de creación que nos ofrece el tema Divi para WordPress.

Bajo estas líneas puedes ver el resultado que vamos a obtener una vez finalizada esta práctica. Por supuesto, puedes realizar las variaciones que desees y utilizar tus propias imágenes. En cualquier caso, para ir al grano, puedes descargarte las imágenes que he utilizado para este proyecto desde aquí.

Tutorial Divi. Crear web

Consideraciones previas

Antes de embarcarnos en este tutorial, me gustaría comentar una serie de factores que debemos tener en cuenta siempre que nos pongamos a diseñar una web.

  • Nunca comiences a diseñar una página web sin haber creado antes un esquema. Evitarás cambiar de idea constantemente para finalmente llegar al punto de partida y no avanzar. Visualiza en tu cabeza lo que quieres hacer y ponlo en un papel. Cuanto más «masticado» esté tu proyecto, mejor trabajarás y ahorrarás mucho tiempo.
  • Antes de comenzar ya deberías tener todos los recursos que vas a utilizar creados o al menos programados: Imágenes, vídeo, audio, etc. De esta forma evitarás ir improvisando sobre la marcha y tu proyecto será mucho más sólido y coherente.
  • Por supuesto hay muchos más factores que forman parte de las buenas prácticas a la hora de diseñar una web. Por ejemplo el uso del color, de las tipografías, optimización, etc. Iremos viendo todos estos estos aspectos en futuros artículos.

Y ahora sí, comenzamos a crear nuestra web y empezamos con la zona superior que contendrá la presentación y la imagen del ipad superpuesta sobre la primera sección.

cabecera-web

Secciones 1 y 2

Para empezar, necesitaremos pues para crear este área dos secciones. En la primera sección creamos una fila e insertamos dos columnas (1/2 y 1/2). El motivo de insertar dos columnas es porque necesitaremos dejar espacio para la foto del ipad, ya que se superpondrá desde la sección inferior (sección 2). De lo contrario, si elegimos una sola columna, la imagen taparía parte del texto de esta sección. En esta primera sección tenemos los dos textos y el botón como puedes ver en la imagen.

A continuación añadimos una segunda sección, esta vez invertimos la estructura, 2 columnas pero la zona de la izquierda queda vacía y la de la derecha contendrá la imagen.

configurar-seccion1y2

Ajustes de la primera sección

En ajustes generales de la sección sólo tenemos que añadir un poco de espacio en relleno personalizado > Base > 50 px.

Para crear la línea gris que cierra la sección inicial (la primera, la de los textos y el botón) insertamos un poco de CSS en la sección. Pulsamos en Ajustes de la sección y a continuación CSS personalizado y donde pone elemento principal escribimos el código.

CSS Personalizado >> Elemento principal
border-bottom: solid 8px #c4c4c4;

Podemos cambiar el grosor (8px) y color como nos guste más.

Ajustes de la fila en la primera sección

Usar anchura personalizada: SI, 80%.

Ajustes de los módulos en la primera sección

Primer texto: Crear una página…

Ajustes generales:

  • Orientación del texto : Izquierda.
  • Avanzado:
  • Fuente: Open Sans Condensed
  • Tamaño de fuente: 52 px
  • Texto altura línea: 1em

Segundo texto: Lorem ipsum…

  • Orientación del texto : Izquierda.
  • Avanzado:
  • Fuente: Open Sans Light
  • Tamaño de fuente: 22px
  • Texto altura línea: 1.7em

Botón: 

  • Configuralo a tu gusto. Si necesitas saber los parámetros que he usado pon un comentario y te lo digo encantado.

Ajustes de la segunda sección

La segunda sección contiene la imagen del ipad. En ajustes generales de la sección sólo tenemos que añadir un poco de espacio en relleno personalizado > Superior> 40 px.

En los ajustes de fila no necesitamos configurar nada.

Ajustes del módulo imagen en la segunda sección

En Ajustes generales: Insertamos la imagen del ipad. Sin animación.

Ahora vamos a Ajustes avanzados de diseño: Margen personalizado > superior: -490px.

Guardamos y salimos. Aplicar un margen negativo a la parte superior de la imagen va a poner el ipad donde queremos.

Tercera sección: Quiénes somos

seccion2-quienes

En esta sección, que contendrá la parte «Quienes somos», vamos a configurar el relleno personalizado superior en 20px. Así que pulsamos en ajustes de la sección > Ajustes generales > Relleno personalizado > Superior > 20px. También vamos a identificar esta sección para navegar hasta aquí desde un menú que crearemos. Esto lo vamos a hacer en CSS personalizado. Sección > CSS personalizado > Identificador CSS > quienes.

identificador-css

Las filas

Ya podemos crear las dos filas que ves en la imagen arriba. La primera fila contiene los tres módulos de texto. Ajustamos esta primera fila como anchura completa en ajustes generales de fila. Ahiora vamos a por lo módulos de texto. El primero, que da título a la sección, es de color azul y tiene un tamaño de  20 px. El segundo, Nuestros mandamientos, es gris y el cuerpo del texto, 60 px. y el tercero, texto simulado, 20 px. Para este texto he querido limitar su anchura a 600 px, por lo que he añadido este valor en Ajustes avanzados del módulo > Anchura máxima > 600px.

La segunda fila contiene los tres anuncios y los tres botones. Creamos uno con los valores deseados y cuando esté a nuestro gusto clonamos y cambiamos el texto y los iconos. Estos son los parámetros principales para los anuncios. Los valores que he cambiado en el módulo anuncio son, en Ajustes generales:

  • Usar icono: SÍ. Elegimos un icono
  • Color de icono: #74bae6
  • Ubicación de la imagen o icono: Superior.

En Ajustes avanzados de diseño:

  • Usar tamaño de fuente de icono: SÍ
  • Tamaño de fuente de icono: 64px

Una vez tengamos el módulo a nuestro gusto, lo clonamos y lo ubicamos a la derecha del que acabamos de clonar. Hacemos a continuación lo mismo con un tercer módulo anuncio y lo mismo con los botones.

 

Cuarta sección: Servicios

configurar-seccion4

Para esta cuarta sección podemos clonar la anterior y cambiar la estructura, pulsando en el icono reservado para ello (en rojo, en la imagen arriba). Cambiamos entonces la estructura a dos columnas y dejamos la de la derecha vacía. Esto lo hacemos así porque vamos a incorporar una imagen con fundido a blanco hacia la izquierda. De esta manera dejamos espacio para ubicar los textos y anuncios de esta sección.

Ajustes en la sección

Ajustes generales > Imagen de fondo > elegimos la imagen. Para esta sección he usado la imagen tablet-pc_opt.jpg, con unas dimensiones de 1600×835 px. Como queremos que ocupe toda la sección, hemos usado una imagen grande.

Ajustes generales > Relleno personalizado > Superior > 100px.

CSS Personalizado > Identificador CSS: servicios. Como antes, para cuando creemos el menú, tener la sección identificada.

CSS Personalizado > Elemento principal: border-top: solid 8px #74bae6; (crea la línea azul en la parte superior de la sección).

En las filas que contienen los textos y los anuncios marcamos Hacer que esta fila tenga anchura completa en ajustes generales (de las filas) y en la primera fila, en ajustes avanzados de diseño, en superior, ponemos -100px.

margen-personalizado

En cuanto a los tres módulos de texto, sólo cambia el texto en sí con respecto a los texto de la sección anterior. Están alineados a la izquierda y el tercer texto está como cita, pero puedes ponerlo así o no.

En los módulos de los anuncios cambia la alineación de los iconos, que ahora está a la izquierda.

 

Quinta sección: Proyectos

configurar-seccion-proyectos

En esta sección hemos añadido tres filas. La primera contiene 3 módulos de texto, la segunda fila tiene 3 módulos de imagen y 3 conmutadores bajo estos. El módulo conmutador es un panel que muestra la información al pulsar sobre él. Para hacer la tercera fila se ha clonado la segunda y luego se ha modificado el contenido.

A continuación vamos a ver que ajustes hemos utilizado en la sección (azul), las filas (verde) y los módulos (en color gris).

Ajustes en la sección

Ajustes generales > Relleno personalizado > Superior: 100px

CSS Personalizado > Identificador CSS > proyectos

CSS Personalizado > Elemento principal > border-top: solid 8px #74bae6;

Guardar y salir.

Ajustes de fila

En todas las filas (las tres) activamos Hacer que esta fila tenga anchura completa en Ajustes generales.

Sólo en la primera fila: Ajustes avanzados de diseño> Margen personalizado > Superior: -100px

Los módulos

Ya sólo nos queda crear los módulos de esta sección. En la primera fila, hemos creado 3 módulos de texto con las mismas características que los de la anterior sección. Simplemente hemos cambiado los textos. La estructura de esta fila es de una sola columna.

En la segunda fila, con una estructura de 3 columnas, tenemos primero 3 imágenes que simulan trabajos realizados y bajo cada imagen, un módulo conmutador con la información de ese trabajo, que se mostrará cuando pulsemos sobre él. Tanto para las imágenes como para el conmutador, creamos uno y luego clonamos para no repetir todos los ajustes.

Ajustes Módulo imagen > Ajustes generales: Abrir en capa emergente: SÍ

En Ajustes Módulo Conmutador

  • Título: WebSite número x
  • Añadimos el texto en contenido

Para los ajustes avanzados de diseño, hacemos los cambios que nos interesen, como colores de fondo cuando está abierto o cerrado, ajustes del texto, etc.

Una vez tengamos todos los módulos de esta fila podemos clonarla y cambiar las imágenes y el contenido de los conmutadores.

Sección Contactar

Para esta última sección hemos utilizado los valores por defecto del módulo. Tan solo hemos añadido un par de módulos de texto antes del módulo formulario de contacto.

Y esto es todo. Espero que te haya resultado útil.