Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress

Cómo personalizar tu sitio web de WordPress con Elementor

by
Difficulty:BeginnerLength:ShortLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Carlos (you can also view the original English article)

En la parte previa de este tutorial Cómo crear un sitio web de WordPress con Elementor, te mostré cómo configurar un sitio web de WordPress usando el constructor de páginas Elementor. Instalamos los plugins necesarios, incluyendo el Plugin de Envato Elements para WordPress, luego utilizamos un kit de plantillas para preparar un sitio web simple de cuatro páginas.

En esta, la segunda y última parte, estaremos personalizando esas páginas. ¡Entonces comencemos!

Repaso: ¿Qué es Elementor?

Elementor es un plugin para crear páginas en WordPress. Te permite definir diseños; añadir, editar y eliminar elementos; y usar varias plantillas para crear sitios web de todo tipo. Viene en versión gratuita y en versión Profesional, según tus necesidades.

En este tutorial, te mostraré cómo modificar lo que ya hemos creado con Elementor, cambiando los colores, la tipografía y el diseño de varias páginas, además de subir un logotipo y crear la navegación para el sitio.

Personalizando la páginas con Elementor

1. Personalizando nuestro sitio web

Vamos a empezar viendo la personalización de los colores de nuestro sitio web. Seleccionaremos una página para editar yendo a Páginas, luego elegiremos la página de inicio. Creamos una nueva sección (para fines de demostración) en la parte superior de la página presionando el icono + en la pestaña del elemento hero:

new section

Utilizando la opción que se presenta en nuestra nueva sección, seleccionamos un diseño a dos columnas. Luego podemos arrastrar algunos widgets a las columnas que hemos creado.

Para editar los colores, ve hacia  Menú > Colores predeterminados del editor de Elementor y verás la paleta de colores aplicada:

Default color palette

A continuación podemos elegir cualquiera de las paletas alternativas enumeradas en Más paletas (More Palettes). Los cambios se reflejarán en la página en tiempo real.

Esos son estilos globales, pero digamos que queremos editar los colores a un nivel de widget, ¿cómo lo haríamos? Empieza haciendo clic en el widget que quieras editar. Esto revelará otro menú a la izquierda. Selecciona Estilo para ver los ajustes de color.

color settings at widget level

Cualquier cambio realizado aquí no se verá afectado por los cambios futuros que efectúes en los estilos globales; acabas de sobreescribirlos para este widget.

Personalizando las fuentes

Luego, para editar las fuentes globalmente en la plantilla, ve a Menú> Fuentes predeterminadas (Default Fonts). Podrás establecer los estilos de la tipografía para los encabezados, copy del cuerpo y el texto. Y funciona igual que los colores que vimos anteriormente: haz los cambios globales aquí para afectar a toda la plantilla, o ingresa un widget para anular esos ajustes a nivel de widget.

2. Toques finales

Hay uno o dos detalles adicionales que desearemos cambiar mientras editamos nuestro sitio web en Elementor. Por ejemplo, la sección de portada del tema “Twenty Seventeen” que está presente en todas nuestras páginas debe tener:

Twenty Seventeen theme hero section

Podemos hacer esto regresando a la página de administración y cambiando la plantilla de página de Elementor Full Width a Elementor Canvas.

Duplicando elementos

Vamos a añadir un cuarto "Flip Box" a nuestra página de inicio. Las "cajas que dan vuelta" son una característica premium de Elementor y nos permiten crear bloques que revelan información adicional. Podemos duplicar una de las casillas existentes y el diseño de la sección automáticamente se convertirá en un diseño de cuatro columnas en vez de tres:

three become four
Tres se convierten en cuatro

Haciendo clic en el nuevo cuarto Flip Box aparecerán una gran cantidad de opciones, por lo que podemos cambiar los colores, el contenido, el icono, la animación, la imagen de fondo, y todo esto ocurre con solo señalar y hacer clic (¡no es un trozo de código!)

Alterando los márgenes

Otra cosa que me gustaría cambiar es el margen en nuestros títulos animados (observa la página del menú, por ejemplo). La serie de texto superior se encuentra justo en la parte superior del encabezado principal.

animated heading

Al seleccionar el título, luego haciendo clic en el botón de edición (icono de lápiz), luego en la pestaña Avanzado, podemos modificar el ajuste específico para este elemento. Aquí cambiaré el margen superior de -60px a 0. Corregido.

Cambiando el fondo en una sección

En la parte inferior de la página del menú, vemos una imagen de fondo que me gustaría cambiar. Esto se puede hacer haciendo clic en la sección y luego yendo a la pestaña Estilo (Style).

background

Podemos cambiar la imagen, y luego, yendo  a la configuración de Superposición de fondo (Background Overlay) que está debajo, también podemos cambiar la opacidad, la ubicación e incluso las opciones más avanzadas como los filtros CSS (nuevamente, sin tocar una línea de código).

Utilizando bloques

Cuando creamos una nueva sección en una página, en vez de llenarla manualmente con columnas, widgets, etc., también podemos utilizar algo a lo que Elementor se refiere como "Bloques". Los bloques son fragmentos de contenido reutilizables que puedes seleccionar de una biblioteca o crearlos tú mismo.

Por ejemplo, en la página de inicio, crea una nueva sección en la parte superior (una vez más, únicamente con fines de demostración). Presiona el ícono de Carpeta y ve a Bloques en el modal que aparece. Esto te otorgará una colección completa de bloques que luego podrás filtrar. Intenta filtrar por "cabecera":

Elementor library

Habiendo elegido un bloque de cabecera, seremos trasladados a nuestra página de inicio, que ahora tendrá la sección recién creada y lista para que la llenemos

En cuanto hayamos completado y realizado cambios en nuestro bloque, de manera opcional podemos hacer clic en él con el botón derecho del mouse y, luego, ir a Guardar como plantilla. Este bloque ahora se guardará en la biblioteca bajo Mis plantillas, listo para ser reutilizado en otras páginas.

¡Mira por ti mismo!

Elementor nos permite cambiar todos los aspectos concebibles de nuestro nuevo sitio web; El contenido textual, las listas de íconos, el paddind en ciertas secciones del hero, los widgets para formularios de contacto, por mencionar algunos. Espero que hayas encontrado útil esta mini serie de tutoriales, no olvides dejar cualquier pregunta o comentario que tengas en la sección de comentarios.

Enlaces útiles

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.