¿Qué es una página de inicio?
Una página de inicio es una página de introducción predeterminada o la página principal de un sitio web. Es la página que aparece cuando alguien ingresa el nombre de dominio de tu sitio web en la barra de direcciones de tu navegador.
El objetivo principal de la página de inicio es presentar a los usuarios tu sitio web o negocio. Idealmente, debería proporcionar a los usuarios información esencial sobre tu negocio, para que puedan seguir explorando otras páginas de tu sitio.
De forma predeterminada, WordPress muestra tus publicaciones de blog recientes en la página de inicio. Esto no es bueno ya que solo muestra algunos de tus artículos actuales.
Si tienes un sitio web comercial, la página de inicio predeterminada no informa a los usuarios sobre tu negocio, productos o servicios. Tampoco proporciona a los usuarios una forma de comunicarse contigo.
La buena noticia es que WordPress ya viene con una funcionalidad incorporada para crear una página de inicio personalizada.
Para crear esta página de Home utilicé el editor de plantillas Elementor, puedes bajar la versión gratuita dando clic en la imagen.
Este ejemplo va a constar de 5 secciones:
Primeros pasos para empezar:
- inicia sesión en tu panel de WordPress y crea una nueva página (Páginas -> Agregar nueva) y edítala con Elementor haciendo clic en el botón Editar con Elementor. Serás llevado al editor de Elementor después de hacer clic en el botón.
- Antes de comenzar a trabajar con el editor de Elementor, configura el diseño de la página haciendo clic en el ícono de ajustes en la parte inferior del panel izquierdo para de esta manera cubra todo el ancho para poder mostrar mejor el contenido ya sea de fotos, colores, fondos…
Para comenzar, crea una nueva sección y elije un diseño de una columna. Entonces:
- Establecer el ancho del contenido en ancho completo
- Establece el espacio entre columnas en ningún espacio
- En editar sección, en el ancho del contenido de la caja, poner 1400 pixeles
- Elige la altura mínima para la altura y luego ajústala a 90 VH= vertical height.
Agregar un widget de encabezado
Agrega un widget de título y haces clic para editar tu texto. Luego, puedes usar las opciones de Estilo para cambiar el aspecto de tu Título.
Editando la primera columna de la primera sección:
Darle clic en estilo, tipo de fondo, selecciona la brocha donde dice clásico, seleccionas el color y es recomendable utilizar los colores que ya estableciste anteriormente en el sitio web Coolors.co, copias el color favorito y lo pegas en la paleta de colores y ya tiene color el fondo del título.
Añadiendo más estilos a la columna:
- Puedes editar la letra del título en estilo donde escoges el color, la tipografía, cualquier fuente, ejemplo: Roboto Slab, el tamaño, ejemplo:80 px(pixeles), el peso, ejemplo:400, transformar por ejemplo a mayúsculas, en el espacio de la letra por ejemplo en -2.
- Añades un separador desde Widgets, lo arrastras a donde está el título, donde dice Estilo en la sección del Separador le cambias a Zigzag, también le puedes cambiar el ancho a por ejemplo de 150 px, lo centras y cambias de color, tamaño y peso, como lo quieras de ancho el separador.
- Añades un widget que dice Editor de texto, del lado izquierdo cambias el texto, en el botón que dice estilo, del editor de texto, en alineación lo centras, le cambias el color , tipo de letra, peso o grosor de la letra.
Debajo del texto le agregas un botón desde los widgets, le cambias el texto, le agregas un enlace hacia donde iría al darle clic al botón, lo centras, se le añade un ícono desde la biblioteca de íconos y buscas el que quieras, en este caso una doble flecha, posición,después, cambiar la familia, peso en 700, transformar en mayusculas y color de fondo a transparente.
Clic en editar columna, avanzado, relleno, porcentaje 20% a todo alrededor.
Editando la segunda columna de la primera sección:
Aquí vamos a insertar una imagen, pero no lo vamos a hacer con un widget, sinó que vamos a seleccionar la columna–>estilo–>tipo de fondo, seleccionar la brocha que dice clásico, luego clic en imagen y seleccionar imagen desde la biblioteca.
Añadimos en la segunda columna, en la de la imágen un botón, que servirá de enlace hacia la siguiente sección en la parte de abajo. Para ello arrastramos un widget, le borramos el texto y dejamos por ahora el enlace en blanco, vamos a buscar un icon y escogemos una flecha hacia abajo, alinear, espacio en cero, en editar–> tipografía cambiar el tamaño a unos 30 pixeles y de color ejemplo, negro, una animación para que cambie al darle clic a la flecha, hover, y un relleno.
Añadiendo segunda sección con una columna:
Para empezar se le dá formato a la sección, en este ejemplo, al ancho del contenido se le pondrá 1400 pixeles, en espacio entre columnas, escoger, sin espacio. Aquí se insertará una galería y para ello hay que ir a donde los widgets y escoger una galería(imágen de la izquierda), escogemos la Galería básica y la arrastramos a la columna. En la galería de imágenes, se le dá al signo de + para subir las imágenes que deseas, una vez subidas, las puedes seleccionar e incluso añadir un texto debajo de cada una, una vez listas las fotos, se le dá clic en Insertar Galería. Recomendable ponerle el tamaño en, Completo, así se verán nítidas. Depende del número de fotos así cambias las columnas, en este caso son 6 fotos entonces en donde dice columnas se le cambia a 3. En estilo, en espacio personalizado en cero para que no haya espacio entre las fotografías. Ahora hay que agregarle un link a la flecha de la primera sección para que al darle vaya a la galería.
Cómo insertar un link utilizando un “ancla” para crear link internos:
Crear una tercera sección con una columna:
En la tercera sección, vamos a colocar una anécdota, estos son los pasos.
En esta sección le cambias el ancho del contenido a 600, en Alto se escoje del menú: Altura mínima.
Clic en VH(Vertical Height), en 70.
Vamos a utilizar de nuevo algo que ya incluimos anteriormente y es el
Copiamos el mismo divider y pegamos en la sección 3,se le cambia el color que estaba en un beige claro a un gris del grupo de colores de la paleta que uses.
Arrastramos un texto y lo colocamos debajo del separador, se cambia el texto, se alinea, se cambia el color,tipografía, peso, tamaño, etc. Ahora duplicas el texto y lo colocas debajo del anterior, le cambias la tipografía, el tamaño,peso,etc. para que se diferencie del texto de arriba y quede como una cita, quote, refrán, frase. Para crear más espacio entre los dos textos, clic en el texto de abajo, vas a Avanzado, donde dice relleno, le das a la cadenita para desvincularlo y en la primera casilla pones 50.
Así quedaría la tercera sección:
Crear una cuarta sección:
En esta sección pondremos los Testimonios, crear una nueva sección con dos columnas. El ejemplo tendrá una altura mínima de 50%, haciendo clic en VH(Vertical Height).
Siguiente paso, vamos donde los widgets y buscamos el de testimonios, en este caso dice Recomendaciones y lo arrastramos a la primera columna y cambiamos el texto, seleccionamos una imágen de la persona que nos está recomendando. Cambiamos la posición de la imágen, se le cambia el color del texto, se escoge una tipografía, tamaño y editamos asimismo el nombre que va debajo del texto y editar a su vez el título que va debajo del nombre. En la pestaña Avanzado, en relleno le ponemos 20 para darle más margen alrededor. Para darle más colorido a esta columna , la editamos y en color de fondo, añadimos cualquier color siguiendo el mismo diseño.
Para añadir más testimonios, en este ejemplo son 3, editamos la columna y duplicamos. (Ver imágen)
Ahora cambiamos la imagen,texto,título de las columnas 2 y 3.
Vamos a Avanzado y en relleno, clic a la cadenita para desvincular los cuadritos y le ponemos 100 pixeles al cuadradito que dice Abajo. Así nos dará más espacio con la siguiente sección.
Crear una quinta y última sección:
En esta última sección, vamos a crear un formulario. Le ponemos una altura mínima VH de 100. En Ancho de contenido le ponemos 600. Para seguir con el mismo diseño lo que hacemos es copiar el título que ya tenemos y lo pegamos en esta 5 sección, cambiamos el texto a CONTÁCTENOS, cambiando el color y tamaño. Utilizamos también el Separador que tenemos, lo copiamos, pegamos y lo colocamos encima del rótulo. Copiamos el texto que tenemos arriba y lo pegamos debajo del rótulo, se cambia el color y el texto en este caso dirá: LLenar formulario con su pregunta.
Para insertar un formulario necesitamos un plugin así que para ello nos vamos Plugins—> añadir uno nuevo y buscamos un plugin gratuito que se llama wpforms, instalarlo y activarlo. Una vez activado hay que crear un formulario para que se pueda añadir a la página de enfrente. Se crea un formulario de contacto simple con comentario, nombre y email. Lo guardamos, le damos un nombre, lo guardamos.
Regresamos a la página de enfrente, le damos clic en Actualizar y le damos clic en Refrescar o Actualizar la página. Buscamos el widget Formulario, escoges wpforms que es gratuito y lo arrastramos a la sección, buscamos el formulario que queremos, el que le pusimos nombre. Le damos a Aplicar y listo.
Para terminar al Contáctanos de la primera sección le ponemos un ancla para que al darle clic, nos lleve al formulario. Nos vamos a los widgets, buscamos el ancla, la arrastramos y colocamos encima del formulario, le ponemos un nombre, copiamos ese nombre y vamos a la parte de arriba, al botón y le agregamos o pegamos en Enlace, el nombre después del signo numeral #. Actualizamos para guardar los cambios, abrimos la página en una pestaña diferente, comprobamos que todo funcione y ya tenemos nuestra primera página.
