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.
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
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:
Podemos definir el fondo que tendrán todas las páginas y entradas de nuestro sitio web: color (plano o degradado) o imagen.
Podemos definir todos los estilos de la tipografía de nuestro sitio web:
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.
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
Podemos definir colores y tipografías de las etiquetas y campos de todos los formularios en nuestro sitio web.
Este apartado es muy interesante porque podemos personalizar el diseño que tendrán todas las imágenes en nuestro sitio web.
Este apartado solo está disponible con Elementor PRO.
Si aún no tienes Elementor PRO este es el momento perfecto para que te hagas con este fantástico editor de contenidos.
Va a ser parte importante de este curso. Desarrollaremos muchas lecciones con este plugin para que aprendas a utilizarlo en su totalidad y sacar el máximo provecho para el desarrollo de sitios web 100% profesionales.
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.
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.
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
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.
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.
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!