Home »
Crear tu 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.
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.
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 .
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.
