Lección 04
Kit por defecto de Elementor
- Actualizado: agosto/2020
- Versión: 2.9.x
- Nivel: Básico
- 4 comentarios
En una lección anterior conocimos e instalamos el tema Hello: el tema oficial de Elementor. Como te he mencionado, este tema no ofrece opciones de personalización y prácticamente es un tema inútil si no trabajamos con Elementor.
En esta lección vamos a conocer una herramienta que posee Elementor que le permite funcionar como un tema WordPress.
1. ¿Qué es el kit por defecto de Elementor?
El Kit por defecto es una herramienta que introdujo Elementor a partir de la versión 2.9 con la que podemos definir los estilos generales de nuestro sitio web cosa que no ofrece el tema Hello.
Más que una herramienta, el kit por defecto es una plantilla. Para acceder tenemos que dirigirnos al apartado Plantilla y hacer clic en el enlace Todo.
Si pasamos el ratón por encima del título veremos un nuevo menú. Hacemos clic en Editar con Elementor para acceder a las opciones de configuración de los estilos.
Otra forma de acceder a los estilos es desde cualquier página (o entrada). Desde el panel de edición de Elementor, hacemos clic en el icono superior izquierdo (menú principal) y seguidamente en Estilo del tema.
De cualquiera de las 2 formas, podemos acceder a las opciones de edición de estilos de Elementor.
Anuncio publicitario
2. Ajustes de los estilos en Elementor
Accedemos al kit por defecto de Elementor desde las plantillas y nos encontramos con lo siguiente:
Elementor muestra el siguiente aviso:
Para que el estilo del tema afecte a todos los elementos relevantes de Elementor, por favor, desactiva los colores y fuentes por defecto desde la página de ajustes.
¿Esto que significa?
Vamos a la página de ajustes que se encuentra en el apartado Elementor >> Ajustes, pestaña General.
Cuando instalamos Elementor por primera vez, este incluye colores y fuentes por defecto. Para que los estilos del kit por defecto se puedan aplicar correctamente, es necesario marcar las casillas Desactivar colores y fuentes por defecto.
De esta forma, el kit por defecto se convertirá en nuestro tema y aplicará los estilos en todo el sitio web. Marcamos las casillas y hacemos clic en Guardar los cambios.
Si regresamos a la plantilla Kit por defecto y actualizamos, desaparece el mensaje. Quiere decir que, a partir de ahora, todos los estilos que configuremos en esta plantilla serán los que se apliquen a nuestro diseño.
Los estilos que podemos configurar son los siguientes:
I. Fondo
Podemos definir el fondo que tendrán todas las páginas y entradas de nuestro sitio web: color (plano o degradado) o imagen.
II. Tipografía
Podemos definir todos los estilos de la tipografía de nuestro sitio web:
- Texto general (párrafos).
- Enlaces.
- Encabezados.
El kit por defecto es tan versátil que nos permite definir el color y la tipografía de cada uno de los encabezados (H1-H6). Esto es algo que, por lo general, no lo suelen incluir otros temas o lo incluyen con una versión PRO.
III. Botones
Podemos definir todos los estilos de los botones que utilicemos en nuestro sitio web incluyendo los formularios: tipografía, colores de texto y fondo, sombras y tipos de borde
IV. Campos del formulario
Podemos definir colores y tipografías de las etiquetas y campos de todos los formularios en nuestro sitio web.
V. Imágenes
Este apartado es muy interesante porque podemos personalizar el diseño que tendrán todas las imágenes en nuestro sitio web.
VI. CSS personalizado
Este apartado solo está disponible con Elementor PRO.
Cuando tenemos activo el CSS personalizado, podemos añadir reglas CSS personalizadas, para mejorar aún más el diseño, que se aplicarán en todo nuestro sitio web o donde queramos.
En la lección, CSS personalizado en Elementor, veremos como se mejora el diseño con unas simples reglas CSS.
3. Elegir correctamente los colores para mi sitio web
Al diseñar un sitio web, personalmente suelo recomendar elegir un color principal (conocido como accent color) y un color secundario que sea complementario con el principal.
Por lo general, se suele elegir el color principal coincidiendo con el color dominante del logo para que haya una sensación de uniformidad en el sitio web.
Los colores se pueden expresar de diferentes maneras pero, por lo general, en un sitio web se definen en valores hexadecimales.
En este enlace, podemos acceder a una potente herramienta que nos permitirá visualizar los colores primarios y secundarios en una plantilla con sus correspondientes valores hexadecimales.
4. Elegir correctamente las tipografías de mi sitio web
Desde hace un tiempo, Google se ha entrometido en nuestras vidas con su buscador y Android y, las herramientas de diseño web, no se han salvado.
Hoy en día, la mayoría de temas y plugins, integran una biblioteca de fuentes proveniente de Google. Como era de esperar, el kit por defecto de Elementor funciona con esta biblioteca.
Para elegir una buena fuente para nuestro sitio web, podemos acceder a la página de Google Fonts y ver todas las fuentes disponibles. Cuando nos agrade alguna, la podemos probar en nuestro diseño.
En la lección, fuentes personalizadas en Elementor, veremos cómo se integran fuentes externas en nuestro sitio web.
Anuncio publicitario
5. Conclusión
A partir de este momento, Elementor se encargará de TODO. Definiendo los colores y tipografías en el kit por defecto de Elementor, solo nos queda instalar Elementor PRO y completar el combo perfecto para el desarrollo de nuestro sitio web.
Con esto has podido comprobar que es posible diseñar un sitio web sin depender de un tema WordPress. En las siguientes lecciones, comenzaremos a darle vida a cada uno de los widgets y apartados de nuestras páginas.
¿Te ha gustado?
Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este curso de Elementor y ayudas a otras personas que desean aprender.
(11 votos, promedio: 5 de 5)
Este curso es gratis y siempre lo será pero, mantenerlo, requiere de mucho tiempo y esfuerzo. Si te gusta el curso y te ha ayudado, considera invitarme un café haciendo un pequeño donativo a este proyecto que he creado con el para ti y muchas personas que desean aprender. Las donaciones me ayudan a seguir trabajando en este fantástico curso gratuito. ¿Me invitas un café?.
Suscríbete y aprende Elementor desde cero.
No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre Elementor.
Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.
Comparte tu experiencia
Deja un comentario si tienes alguna duda o cuéntanos cómo ha sido tu experiencia.
Excelente articulo, gracias por compartir tu conocimiento.
Hola Jonathan, gracias a ti por comentar. Un saludo!
Hola, cuando quiero exportar mi Kit por defecto me dice que está vacio, que hago?
Hola Alan, al parecer no es posible exportar el Kit por defecto de Elementor. Como indican en los comentarios de esta entrada https://elementor.com/blog/introducing-theme-style/ es posible que estén trabajando en ello para futuras actualizaciones. Saludos!