Nuestra Primera página con Divi

Ahora que ya tenemos el menú principal, vamos a crear un primer diseño a pantalla completa con un módulo de DIVI denominado “Título de anchura completa”.

Dentro del menú de Wordpress, en páginas, seleccionamos añadir nueva si queremos empezar desde cero, o editamos la página Inicio que tenemos de la entrada anterior “Primer contacto con Divi”.

Pulsamos en Usar el Constructor Divi y seleccionamos una sección de anchura completa.

img1 modulo Divi

Ahora tenemos que darle forma a este módulo.

Para ello vamos a pulsar en el icono de la “hamburguesa” o el de las tres rayas horizontales y se abre la pantalla de ajustes del módulo de “Titulo de anchura completa”.

Opciones para el módulo de “Título de anchura completa”

Título

Aquí escribiremos el título de nuestra web. El constructor nos representará este título como un H1. En el caso del ejemplo yo he puesto de título “La tienda de tus mascotas”.

 

Subtítulo:

Si queremos ampliar la información escribiremos aquí un subtitulo que aparecerá debajo del título.

 

Color del texto

Aquí tenemos dos opciones, oscuro y claro, lo definiremos según el color de fondo que tengamos asignado. Se puede cambiar a cualquier color dentro de ajustes avanzados.

 

Orientación de texto y logotipo

Alineación del texto y logotipo dentro de la página. En nuestro caso seleccionaremos centro.

 

Pantalla Completa

Seleccionaremos si queremos que la página ocupe toda la pantalla. Seleccionamos si.

 

Mostrar botón de desplazamiento hacia abajo

Esta opción nos permite poner en pantalla un botón para indicarnos que hay desplazamiento hacia abajo.

 

Texto Botón 1

Nos Introduce un botón con el texto indicado.

 

URL Botón 1

Indicaremos la url para ese botón.

 

Texto Botón 2 y url Botón 2

Lo mismo para un segundo Botón

 

Url de la imagen de fondo

Aquí es donde añadimos, en caso de necesitarla, la imagen de fondo, bien subiéndola o indicándole la url. En nuestro caso subiremos nuestra imagen de fondo, que es un perro.

 

Color de fondo

Introduciremos un color para el fondo si fuese necesario.

 

Color de superposición de fondo

Coloca un color superpuesto sobre la imagen de fondo.

 

Usar efecto parallax

Si lo activamos, el fondo se quedará fijo mientras se desplaza por la página, creando el llamado efecto parallax.

 

Url de la imagen del logo

Subiremos aquí el logotipo, o le indicaremos la url del mismo. Yo he subido un logo para la tienda de mascotas.

 

Texto alternativo de la imagen del logo

Se indica el texto alternativo de la imagen, en HTML es el atributo ALT.

 

Título del Logo

Define el título de la imagen del Logo, atributo TITLE en HTML.

 

Alineación vertical del texto

Definimos la alineación vertical.

 

Url de la imagen del título

Subimos o indicamos una url para la imagen del título por si queremos introducir una en nuestra portada. Yo no he subido nada, utilizo la imagen de fondo.

 

Alineación vertical de la imagen

Definimos la alineación vertical de la imagen.

 

Contenido

Aquí definiremos todo el texto que queramos añadir a lo anterior para la portada de nuestra web.

 

Desactivar en

Seleccionamos los dispositivos en los que queramos desactivar este módulo.

 

Etiqueta de administración

Aquí podemos cambiar el nombre del módulo para identificarlo mejor.

 

Ejemplo Portada web.

Para este primer módulo he seleccionado una imagen de fondo de un perro que he descargado de Pixabay, un logo que he descargado de la misma web y lo he modificado, un título y he activado el efecto parallax y el botón de desplazamiento hacia abajo, tal y como os muestro.

img2 modulo portada img3 modulo portada img4 modulo portada img5 modulo portada

En el apartado ajustes avanzados de diseño seleccionamos los colores, tamaños y tipos de las fuentes de texto que vamos a utilizar. Pulsamos en Guardar y Salir y Publicamos .

img portada

El resultado es una portada de una web, bastante profesional y que la puede realizar cualquiera sin muchos conocimientos.

Ahora puedes probar con diferentes imágenes, colores y textos para hacer tu propia portada. Continuaremos con la web de la tienda de mascotas en próximas entradas, añadiendo sliders, contadores, galerías, etc.

webficina sigue recomendando encarecidamente…

Divi WordPress Theme

Web Hosting

¡Si quieres puedes compartirlo!

Uso de cookies

Hola, usamos cookies y nos obligan a indicártelo. Si sigues navegando es porque estás de acuerdo con nuestra política de cookies plugin cookies

ACEPTAR
Aviso de cookies

Share This

Share this post with your friends!