Lección 04

Kit por defecto de Elementor

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.

Índice del contenido
    Add a header to begin generating the table of contents

    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.

    Accediendo al Kit por defecto de Elementor
    Accediendo al Kit por defecto de Elementor

    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.

    Accediendo al Kit por defecto de Elementor
    Accediendo al Kit por defecto de Elementor

    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:

    Kit por defecto de Elementor
    Kit por defecto de Elementor

    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.

    Desactivando colores y fuentes por defecto de Elementor
    Desactivando colores y fuentes por defecto de Elementor

    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.

    Kit por defecto de Elementor: Fondo
    Kit por defecto de Elementor: Fondo

    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.

    Kit por defecto de Elementor: Tipografía
    Kit por defecto de Elementor: Tipografía

    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

    Kit por defecto de Elementor: Botones
    Kit por defecto de Elementor: Botones

    IV. Campos del formulario

    Podemos definir colores y tipografías de las etiquetas y campos de todos los formularios en nuestro sitio web.

    Kit por defecto de Elementor: Campos del formulario
    Kit por defecto de Elementor: Campos del formulario

    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.

    Kit por defecto de Elementor: Imágenes
    Kit por defecto de Elementor: Imágenes

    VI. CSS personalizado

    Este apartado solo está disponible con Elementor PRO.

    Curso de WordPress

    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.

    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.

    (3 votos, promedio: 5 de 5)

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on linkedin
    LinkedIn
    Share on telegram
    Telegram
    Share on whatsapp
    WhatsApp
    Share on email
    Email

    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.

    guest
    0 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    0
    ¿Dejas un comentario? Gracias!x
    ()
    x
    Ir arriba

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Suscribirte a la lista de correos electrónicos.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@gianoliveira.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.