GOM Sites

En esta página encontrarás toda la documentación necesaria para aprenda los conceptos básicos sobre la instalación de la platilla, los complementos y cómo funciona.

Esta documentación ha sido creada para ayudarte a sacar el máximo provecho de la plantilla de GOM Sites, facilitando su instalación, personalización y uso. Aquí encontrarás instrucciones detalladas para adaptar la plantilla a tus necesidades, sin importar tu nivel de experiencia técnica.

Para instalar GOM Sites es necesario cumplir con los siguientes requisitos:

  • WordPress 6.7 o superior.
  • MySQL 5.6 o superior.
  • PHP 8.2 o superior.
  • PHP Memory Limit : 512 M
  • PHP Post Max Size: 516 M
  • PHP Max Input Vars 256M
  • PHP Max Input Vars: 1000
  • Upload Max File Size: 256M
  • Max Execution Time: 300
  • Max Input Time: 300

Elija un proveedor de alojamiento

En primer lugar, necesitas un proveedor de alojamiento para almacenar los archivos de tu sitio web. Algunas opciones populares son Bluehost, SiteGround, HostGator y Hosting GOM Network. Selecciona un plan que se ajuste a tus necesidades y registra un nombre de dominio si aún no tienes uno.

Descargar WordPress

Visita el sitio web oficial de WordPress y descarga la última versión de WordPress. La descarga se realizará en formato de archivo .zip.

Sube WordPress a tu cuenta de hosting

Para mas información sobre como subir e instalar WordPress a tu hosting puedes ir a la documentación oficial de WordPress.

Inicie sesión en su cuenta de Envato

Abre tu navegador web y ve a ThemeForest. Haz clic en el botón Iniciar sesión en la esquina superior derecha de la página. Ingresa tu nombre de usuario y contraseña de ThemeForest y luego haz clic en “Iniciar sesión”.

Encuentra la plantilla que has comprado

Coloca el cursor sobre tu nombre de usuario en la esquina superior derecha para abrir un menú desplegable. Haz clic en “Descargas” en el menú desplegable. Busca el elemento que deseas descargar. Junto al elemento, haz clic en el botón “Descargar”. Aparecerá un menú desplegable.

Descargar archivo

Selecciona “Solo archivo instalable de WordPress” para obtener el archivo zip del tema, o “Todos los archivos y la documentación” si necesita el paquete completo, incluidos los archivos adicionales. El archivo seleccionado comenzará a descargarse en tu computadora. Elija una ubicación en tu computadora donde desee guardar el archivo descargado. Asegura de que la descarga esté completa y que el archivo se guarde correctamente.

Para mas información de como descargar la plantilla puedes ir a la documentación oficial de ThemeForest.

Acceda a su panel de control de WordPress

Inicia sesión en tu panel de administración de WordPress. Nota: Generalmente se encuentra en yourdomain.com/wp-admin.

Subir el tema

Ve a Apariencia » Temas y haz clic en el botón “Agregar nuevo” en la parte superior de la página. Te solicitará que elijas un archivo. Navega hasta el archivo zip del tema descargado de ThemeForest y selecciónelo. Una vez hecho esto, haz clic en el botón “Instalar ahora”.

Activar el tema

WordPress puede tardar unos minutos en cargar el archivo e instalarlo. Una vez que hayas terminado, recibirá un mensaje que indica que la instalación del tema se realizó correctamente. Haz clic en el botón “Activar” para activar el tema en tu sitio web. Para conocer mas sobre como activar el tema hijo de la plantilla puedes ir a la documentación oficial de WordPress.

Activar licencia del tema

Encuentra tu código de compra

Ve a esta guía de ayuda de Envato para encontrar su código de compra: ¿Dónde está mi código de compra?

Introduce tu código de compra

Desde el panel de WordPress, ve a “GOM Site Theme”  este te llevara al dashboard de GOM Site en este modulo te mostrara tres secciones, las cuales son “Licence code”, “System info” y “Help center”.

Iremos a la primera sección llamada “Licence code” esta tendra un campo de texto donde deveras introducir el código de licencia.

GOM Site

Nota: si no coloca la licencia al entrar en “GOM Site Theme”  no se mostraran todos los módulos disponibles.

GOM Site sin codigo

Activar licencia

Haz clic en el botón “Activar licencia” para guardar los cambios y poder ver los demás módulos que “GOM Site Theme”  tiene para ofrecerte.

Cunado el tema se haya instalado correctamente y hayas activado la licencia te mostrara un mensaje indiciando que tienes que instalar una serie de plugins necesarios para el correcto funcionamiento del tema, el mensaje seria:

This theme requires the following plugins: Elementor, Envato Market, GOM Tools Elementor Addons and One Click Demo Import.
This theme recommends the following plugins: Contact Form 7, WP Super Cache, WPS Hide Login and Yoast SEO.
Begin installing plugins | Dismiss this notice

Estos mismos plugins están incluidos en el paquete de instalación del tema y podrás encontrarlos luego de instalar el tema “GOM Sites” en la barra izquierda que se encuentra en la mesa de trabajo de WordPress, buscas “GOM Sites Theme”.

Modulo GOM Sites Theme

Presionar “Install Plugins y te llevara al modulo donde estará lalista con todos los plugins necesarios para el tema, en la cual tendrás en la parte superior acciones que podrás hacer a la lista: “Bulk actions”

  • Bulk actions: Podrás realizar múltiples acciones a la lista al mismo tiempo en lugar de hacerlas una por una.

Los plugin que se mostraran el la lista serán tanto los obligatorios para el funcionamiento del tema, además aparte de los títulos del plugin también mostrara “source”, “Type”, ” Version” y “Status” del plugin, los cuales que se mostraran en la lista son:

  • GOM Tools Elementor Addons:Complementos de red GOM para el complemento Elementor.
  • Elementor: El creador de sitios web Elementor lo tiene todo: creador de páginas con función de arrastrar y soltar, diseño con píxeles perfectos, edición adaptativa para móviles y mucho más. ¡Empieza ya!.
  • Contact Form 7: Otro plugin de formulario de contacto. Simple pero flexible.
  • Envato Market:Este complemento ayuda a los clientes a recibir actualizaciones de sus temas y complementos premium comprados a través de Envato Market (ThemeForest y CodeCanyon).

Instalación del plugin

En la parte inferior del titulo de los plugins estará el botón “Install” deveras presionarlo  y comenzara el proceso de instalación, al concluir la instalación estarás de nuevo en el modulo de la lista y luego donde antes se encontraba el botón “Install” estará el botón “activate” al presionarlo el plugin ya estará activado en tu sitio.

Nota: Si se genera un erro al intentar instalar todos los plugins usando el Bulk actions intenta instalarlos uno por uno.

Cuando ya se hayan instalados los plugins si vuleve a precionar sobre el modulo “Install Plugins de  le mostrara el siguiente mensaje “Sorry, you are not allowed to access this page.”

¿Qué complementos son necesarios?

  • GOM Tools Elementor Addons:Complementos de red GOM para el complemento Elementor.
  • Elementor: El creador de sitios web Elementor lo tiene todo: creador de páginas con función de arrastrar y soltar, diseño con píxeles perfectos, edición adaptativa para móviles y mucho más. ¡Empieza ya!.
  • One Click Demo Import: La mejor característica de este plugin es que los autores de temas pueden definir los archivos de importación en sus temas; todo lo que tienes que hacer tú (el usuario del tema) es hacer clic en el botón «Importar datos de ejemplo».
  • Envato Market:Este complemento ayuda a los clientes a recibir actualizaciones de sus temas y complementos premium comprados a través de Envato Market (ThemeForest y CodeCanyon).

Plugins recomendados

  • WPS Hide Login:Proteja su sitio web cambiando la URL de inicio de sesión y evitando el acceso a la página wp-login.php y al directorio wp-admin mientras no haya iniciado sesión.
  • WP Super Cache:Un motor de almacenamiento en caché muy rápido para WordPress que produce archivos HTML estáticos.
  • Yoast SEO:  Mejora el SEO de tu WordPress: escribe mejor contenido y ten un sitio WordPress totalmente optimizado utilizando el plugin Yoast SEO.
  • Contact Form 7: Otro plugin de formulario de contacto. Simple pero flexible.

Modos de complemento

Hay dos modos en OCDI: importación manual y demostraciones predefinidas . En el modo de importación manual, puede seleccionar los tipos de contenido que desea importar subiendo los archivos correspondientes. El modo de demostraciones predefinidas le permite seleccionar una de las demostraciones preparadas por los autores del tema. El segundo modo solo está disponible si los autores del tema lo han integrado con el plugin de OCDI.

Demos disponibles

GOM Site esta en contante crecimiento y ofrece una variedad de demos preconfigurados para facilitar la creación de sitios web atractivos y funcionales. Estos demos incluyen diseños modernos y optimizados para distintos sectores, como blogs, tiendas online, portafolios y landing pages. Cada demo está diseñado con opciones de personalización, compatibilidad con editores visuales y rendimiento optimizado para SEO y velocidad.

Importar demo

Una vez que seleccionas la demostración para importar, será llevado al siguiente paso: Instalación del complemento.

importar demo 1

Verás la lista de plugins obligatorios y recomendados del demo. Los plugins obligatorios tendrán un icono de candado junto a ellos y no se pueden desmarcar. El tema requiere estos plugins para funcionar correctamente, por lo que deben instalarse antes de iniciar el proceso de importación.

Los plugins sin el icono de candado son recomendados, que puedes marcar o desmarcar a tu gusto. Los plugins con una marca de verificación verde ya están instalados y activados.

Seleccione los plugins que desea instalar y haga clic en el botón “Continuar e importar” . Antes de que comience la importación de contenido, se instalarán los plugins seleccionados.

Información

Si un complemento no se instala, aparecerá un mensaje de error debajo y el proceso de importación no se iniciará. Puede volver a seleccionarlo e intentarlo de nuevo haciendo clic en el botón “Continuar e importar” . Si el problema persiste, instale y active el complemento manualmente y vuelva a este paso para continuar con la importación.

Una vez instalados correctamente todos los complementos seleccionados, comenzará el proceso de importación.

Importación manual

Si el tema que estás utilizando no tiene una integración OCDI, verás la página de Importación manual.

one click demo one click demo 1

Aquí puede seleccionar archivos para importar diferentes tipos de contenido, el contenido que puede descargar son:

  • Plantilla
  • Licencia
  • Plugins

Una vez seleccionado los archivos deseados, haga clic en el botón “Continuar e importar” . Esto le llevará al proceso de importación.

Información sobre estilos de elementor

Primero que todo debes descargar el zip del tema el cual contiene tres archivos llamados “demos”, “gom-site”, “gom-site-child”

GOM Site file

Cuando el tema este instalado y hayas activado la licencia deveras importar los estilos de elementor , los estilos se encuentran en la carpeta “demos”

estilos de elementor 1

Al entrar se mostrara otra carpeta llamada “Theme 1 – Services”

Estilo de elementor 2

Al entrar en dicha caparte te mostrara varios archivos los cuales deveras instalar de forma manual al tema de GOM Site

Estilo elementor 3

Instalación del archivo demo-theme5-content.xml

Deveras ir a la opción de importación manual y ir al modulo llamado “Manual Demo File Import” y presionar en la opción “import Content” luego deveras buscar el archivo antes mencionado dentro de la carpeta “Theme 1 – Services”

importar content

Instalación del archivo demo-theme5-widgets.wie

Deveras ir a la opción de importación manual y ir al modulo llamado “Manual Demo File Import” y presionar en la opción “import Widgets”, luego deveras buscar el archivo antes mencionado dentro de la carpeta “Theme 1 – Services”

importar wifgets

Instalación del archivo demo-theme5-customizer.dat

Deveras ir a la opción de importación manual y ir al modulo llamado “Manual Demo File Import” y presionar en la opción “import Customizer”, luego deveras buscar el archivo antes mencionado dentro de la carpeta “Theme 1 – Services”

importar customizer

Instalación del zip demo-theme5-elementor-kit

Para la instalación de este zip deveras dirigirte al modulo de “Elemetor” y luego a la opción “Tool”, aparecerían varias opciones en la parte superior de la pagina, deveras presionar sobre “Import/Export kit” , este modulo te mostrara dos opciones para elegir la primera “Export a Template Kit” y “Import a Template Kit”, deveras presionar sobre  “Import a Template Kit”.

importar estilo elementor

Al presionar el botón “Star import” te aviara a otro modulo donde deveras cargar el archivo zip.

importar estilo elementor 1

Al cargar el archivo te mostrara un mensaje avisando, deveras presionar el botón “Continuar”.

importar estilo elementor 2

Se cargara el archivo y  mostrara otra pantalla con la información del archivo cargado, deveras presionar el botón “Next” para continuar.

importar estilo elementor 3

Por ultimo te mostrara todas las configuraciones que el archivo zip importara al sitio web, deveras presionar el botón “Import” para terminar con la carga del estilo.

importar estilo elementor 4

Proceso de importación

Una vez que comience el proceso de importación, verá la pantalla de importación de contenido.

one click demo 2

 

Si todo salió bien, verás el mensaje “Importación completada exitosamente”.

Importación exitosa

Si surge algún problema de importación, verá una pantalla de advertencia. Esto significa que la mayor parte de la importación se realizó correctamente, pero algunos elementos de contenido no se pudieron importar. La lista de estos elementos fallidos se mostrará en la página de resultados, junto con un enlace a un archivo de registro de errores más detallado. En ese archivo, encontrará más información sobre los errores (para cada tipo de importación: contenido, widgets, personalizador, etc.), los archivos de importación utilizados y más.

 

one click demo 3

Cómo obtener actualizaciones

Para obtener actualizaciones de temas, debes instalar el complemento Envato Market para WordPress. Este complemento ayuda a los clientes a recibir actualizaciones de temas de forma rápida y segura. La instalación de este complemento se solicitará directamente en el panel de WordPress, después de instalar el tema. Puedes instalarlo manualmente si lo deseas.

Configuración del plugin:

Inicie sesión en su cuenta de Envato

Abre tu navegador web y ve a ThemeForest. Haga clic en el botón Iniciar sesión en la esquina superior derecha de la página. Ingrese su nombre de usuario y contraseña de ThemeForest y luego haga clic en Iniciar sesión .

Crear un token

Ve a este enlace para generar su token personal de API de Envato.

Ajustar las opciones de token

Primero, nombra el token, por ejemplo: “Mi sitio de WordPress”. Asegúrate de que los siguientes permisos estén habilitados:

  • Ver y buscar sitios de Envato.
  • Descarga tus artículos adquiridos.
  • Enumere las compras que ha realizado.

Copiar el token

Acepte los términos y haz clic en el botón “Crear token” y copie el token generado.

Pegar el token

Desde el panel de WordPress, ve al “complemento Envato Market” y pega tu token en el campo donde dice “Ingrese su token personal de API de Envato” y haz clic en el botón “Guardar cambios”.

Cómo funciona

Una vez que se realiza la conexión a la API de Envato en la página de configuración del complemento, se mostrará una lista de los temas disponibles. En ella se enumerarán todos los temas de WordPress que se compraron a través de Envato Market/ThemeForest.

Cualquier actualización de tema disponible se puede aplicar aquí (o en la página de actualización estándar de WordPress o WP-CLI). Puedes leer su documentación oficial aquí.

Guía para personalizar y administrar tus páginas y Elementos

En esta sección, explicaremos en detalle cómo personalizar y configurar las diferentes páginas y elementos del tema GOM Site para que se adapten a tus necesidades. Aprenderás a modificar la estructura, el diseño y las funcionalidades clave de cada página, desde “Encabezados” hasta “Pie de paginas” o “plantillas” que desees incluir. Además, te mostraremos cómo editar y reorganizar los bloques de contenido mediante el uso del editores visual Elementor. Siguiendo estas instrucciones, podrás ajustar la plantilla de manera eficiente y profesional, garantizando que tu sitio web luzca atractivo, funcional y alineado con tu identidad de marca.

 

A continuación te explicamos todas las funciones que ofrece la  sección de header en GOM Tool Elemetor Addons

Primero debes  dirigirte a la barra izquierda que se encuentra en la mesa de trabajo de WordPress y busca “GOM Tool Elemetor Addons”, Esta te mostrara varios opciones las cuales son:

  • GOM Tool Elemetor Addons: Modulo principal del plugin.
  • Theme headers: Modulo donde se muestra la lista de las cabeceras creadas.
  • Theme footers: Modulo donde se muestra la lista de los pie de paginas creados.
  • Theme template: Modulo donde se muestra la lista de los template creados.

Modulo theme headers

Cuando estés sobre “GOM Tool Elemetor Addons” te mostrara  cuatro opciones para elegir: GOM Tool Elemetor Addons, Theme headers, Theme footers y Theme template, deveras presionar “Theme headers” y te llevara al modulo donde estará la lista de headers creados, en la cual tendrás en la parte superior varias acciones que podrás hacer a la lista: “Bulk actions”, “Filter” y “Search thema headers” además tendrás el botón “New theme header” que te llevara al modulo donde podrás crear nuevos header.

  • Bulk actions: Podrás realizar múltiples acciones a la lista al mismo tiempo en lugar de hacerlas una por una.
  • Filter: Podrás refinar, segmentar o limitar la visualización de la lista según ciertos criterios.
  • Search thema headers: Podrás buscar de forma mas precisa un headers creado.
  • New theme header: Te redirigirá al modulo para crear un nuevo header.

Creación de header

Ya en el modulo “Theme headers” dirígete a la parte superior donde se encontrara el botón “New theme headers” el cual al presionarlo te redirija al modulo “New theme headers”.

Lo primero que podrás observar en este modulo es el campo donde agregas el titulo del header, a su derecha estará el campo “post attributes” que cuenta con varios opciones las cuales son:

  • Elementor Canvas.
  • Elementor Full Width.
  • GOM Tools Elementor Foother.
  • GOM Tools Elementor Full Width.
  • GOM Tools Elementor Full Header.
  • Theme.

Desplegamos las opciones que nos ofrece el campo y seleccionamos  “GOM Tool Elemetor headers”, esto para que la pagina creada se muestre correctamente en tu sitio web.

Luego de seleccionar “GOM Tool Elemetor Header” coloca titulo y presionar el botón llamado “publicar” ya de esta forma estará creado tu header, por ultimo tienes que presiona sobre el botón “Edit with Elementor” y este te llevara al editor de Elementor donde podrás editar tu header al estilo que desees.

A continuación te explicamos todas las funciones que ofrece los widgets para tu header

Una vez que estés en el editor de Elementor, verás una barra lateral izquierda con una lista de elementos que puedes agregar a tu diseño. Puedes encontrar elementos propios del elementor y elementos de la herramienta GOM Tools, que están divididos en varias categorías dependiendo de la sección que deseas crear en tu sitio web.

En este caso te explicaremos los widgets para crear tu cabecera, primero debes ir a la categoría con el nombre “GOM Tools – Header & Footer” en esa categoría podrás ver dos widgets  “Navbar” y “Links list”.

GOM Tools header & footer

Widget Navbar

Este widgets te permite crear y configurar la cabecera de tu pagina web. Este te permite tanto agregar como editar los diseños del logo de tu sitio, un menú para pc y para móviles, barra de búsqueda y un botón.

Header & footer - navbar

Configuraciones de Widget Navbar

Una vez que hayas agregado el encabezado a tu diseño, puedes personalizarlo según tus necesidades y preferencias. Puedes agregar un logo , menús, sub-menú, barra de búsqueda botones y cambiar los colores, las fuentes, los estilos, los enlaces y más. Ofrecemos varias opciones de personalización avanzadas para el encabezado que desees para tu sitio, lo que te permite tener un control total sobre la apariencia y el comportamiento de tu encabezado.

Todos los contenidos de elementor se dividen en  “Content” y “Style”, te explicaremos cada uno de ellos y sus respectivas sección para editar encabezado:

Content:

  Display options:

  • Layout Style: Campo para seleccionar el estilo del navbar por defecto “Basic”.
  • Scroll Mode: Campo desplegable para definir el comportamiento del navbar las opciones son  “Static”“Fixed”.
  • Logo: Botón que puedes activar o desactivar para que se muestre el logo en tu encabezado.
  • Site Title : Botón que puedes activar o desactivar para que se muestre el titulo en tu encabezado.
  • Menu: Botón que puedes activar o desactivar para que se muestre el menú en tu encabezado.
  • Search Bar: Botón que puedes activar o desactivar para que se muestre la barra de búsqueda en tu encabezado.
  • Button: Botón que puedes activar o desactivar para que se muestre un botón en tu encabezado.

  Logo:

  • Default logo: Botón para activar o no la opción de tener el logo predeterminado del tema o agregar un logo propio.
  • Alignment: Este campo te permite editar la alineación que desees a tu logo, podrás elegir “Right”, “Center” y “Left”.
  • Width: Este campo te permite edita el ancho del espacio donde se encuentra el logo.
  • Main Logo/Mobile Logo: Botones para seleccionar el logo que deseas mostrar en tu pagina.
  • Select Main logo/Select Mobile logo: Podrás seleccionar el logo para la plantilla
  • Logo Sizes – Width: Este campo te permite edita el ancho del logo.

  Menu:

  • Menu Desktop: Este campo te permite editar la lista de los menús creados en tu sitio para seleccionar el que desees mostrar en la cabecera.
  • Alignment: Este campo te permite editar la alineación que desees para el menú, podrás elegir “Right”, “Center” y “Left”.
  • Menu Mobile: Este campo te permite editar la lista de los menús creados en tu sitio para seleccionar el que desees mostrar en la cabecera movil.
    • Alignment: Este campo te permite editar la alineación que desees para el menú móvil, podrás elegir “Right”, “Center” y “Left”.
  • Menu Sizes – Width: Este campo te permite editar el ancho del menú.

  Search Bar:

  • Alignment: Este campo te permite editar la alineación que desees para el buscador, podrás elegir “Right”, “Center” y “Left”.
  • Width: Este campo te permite editar el ancho del espacio donde se encuentra el buscador.
  • Search Field Placeholder: Este campo te permite editar el texto que se muestra en el campo antes de que el usuario ingrese un valor.
  • Form Redirect url: Este campo te permite editar la dirección web a la que se envía al usuario después de enviar un formulario.

  Button:

  • Link: Este campo te permite editar el enlace del botón que te dirigirá a otra sección del sitio o a un recurso externo.
  • Label: Este campo te permite editar la etiqueta del botón.
  • Icon: Este campo te permite editar el icono que quieras que aparezca en el botón junto al texto.
  • Width: Este campo te permite editar el ancho del espacio donde se encuentra el botón.

Style:

  Header:

  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Navbar:

  • Background Color: Este campo te permite editar el  color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Menu:

  • Background Color: Este campo te permite editar el  color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Menu Items:

  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Background Color: Este campo te permite editar el  color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Sub Menu:

  • Width: Este campo te permite editar  el ancho del espacio donde se encuentra el sub menú.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Sub Menu Items:

  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Mobile Menu:

  • Background Color: Este campo te permite editar el color de fondo del menú móvil, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno del menú móvil, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Menu Mobile Trigger: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal”, “Active” y “Open” del menú móvil.
  • Icon Size: Este campo te permite editar el tamaño del icono que se mostrara en el menú móvil.
  • Background Color: Este campo te permite editar el color de fondo del disparador  del menú móvil, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Toggle Icon Color: Este campo te permite editar el color de fondo del icono del disparador del menú móvil, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Mobile Menu Items:

  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Mobile Sub Menu:

  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Sub Menu Items:

  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Search Bar:

  • Search Form Trigger:
    • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
    • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Icon Size: Este campo te permite editar el tamaño del icono.
    • Toggle Icon Color: Este campo te permite editar el color de fondo del icono, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Search form:
    • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Search Input:
    • Icon Size: Este campo te permite editar el tamaño del icono.
    • Altura: Este campo te permite editar la altura del elemento.
    • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • From Submit Button:
    • Width: Este campo te permite editar el ancho del botón de envió del formulario.
    • Height: Este campo te permite editar la altura del botón de envió del formulario.
    • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
    • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Icon Size: Este campo te permite editar el tamaño del icono.
    • Toggle Icon Color: Este campo te permite editar el color de fondo del icono, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Button:

  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Icon Size: Este campo te permite editar el tamaño del icono.
  • Toggle Icon Color: Este campo te permite editar el color de fondo del icono, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools – Header & Footer”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

A continuación te explicamos todas las funciones que ofrece la  sección de footer en GOM Tool Elemetor Addons

Primero debes  dirigirte a la barra izquierda que se encuentra en la mesa de trabajo de WordPress y busca “GOM Tool Elemetor Addons”, esta te mostrara varios opciones las cuales son:

  • GOM Tool Elemetor Addons: Modulo principal del plugin.
  • Theme headers: Modulo donde se muestra la lista de las cabeceras creadas.
  • Theme footers:Modulo donde se muestra la lista de los pie de paginas creados.
  • Theme template: Modulo donde se muestra la lista de los template creados.

Modulo theme footers

Cuando estés sobre “GOM Tool Elemetor Addons” te mostrara  cuatro opciones para elegir: GOM Tool Elemetor Addons, Theme headers, Theme footers y Theme template, deveras presionar “Theme footers” y te llevara al modulo donde estará la lista de footers creados, en la cual tendrás en la parte superior varias acciones que podrás hacer a la lista: “Bulk actions”, “Filter” y “Search thema footers”, además tendrás el botón “New theme footer” que te llevara al modulo donde podrás crear nuevos footer

  • Bulk actions: Podrás realizar múltiples acciones a la lista al mismo tiempo en lugar de hacerlas una por una.
  • Filter: Podrás refinar, segmentar o limitar la visualización de la lista según ciertos criterios.
  • Search thema footer: Podrás buscar de forma mas precisa un footer creado.
  • New theme footer: Te redirigirá al modulo para crear un nuevo footer.

Creación de footer

Ya en el modulo “Theme footer” dirígete a la parte superior donde se encontrara el botón “New theme footer” el cual al presionarlo te redirija al modulo “New theme footer”.

Lo primero que podrás observar en este modulo es el campo donde agregar el titulo del footer, a su derecha estará la campo llamada “post attributes” que cuenta con varios opciones las cuales son:

  • Elementor Canvas.
  • Elementor Full Width.
  • GOM Tools Elementor Foother.
  • GOM Tools Elementor Full Width.
  • GOM Tools Elementor Full Header.
  • Theme.

Desplegamos las opciones que nos ofrece la campo y seleccionamos  “GOM Tool Elemetor footer”, esto para que la pagina creada se muestre correctamente en tu sitio web.

Luego de seleccionar “GOM Tool Elemetor footers” coloca titulo y presionar el botón llamado “publicar” ya de esta forma estará creado tu header, por ultimo tienes que presiona sobre el botón “Edit with Elementor” y este te llevara al editor de Elementor donde podrás editar tu footersal estilo que desees.

A continuación te explicamos todas las funciones que ofrece los widgets para tu footer

Una vez que estés en el editor de Elementor, verás una barra lateral izquierda con una lista de elementos que puedes agregar a tu diseño. Puedes encontrar elementos propios del elementor y elementos de la herramienta GOM Tools, que están divididos en varias categorías dependiendo de la sección que deseas crear en tu sitio web.

En este caso te explicaremos los widgets para crear tu cabecera, primero debes ir a la categoría con el nombre “GOM Tools – Header & Footer” en esa categoría podrás ver dos widgets con los nombres de “Navbar” y “Links list”.

GOM Tools header & footer

Widget Links list

Este widgets como su nombre lo indica te permite crear listas de link (como por ejemplos las listas que se encuentran  en los footer) para poder navegar por tu pagina web.

Header & footer - links list

Configuraciones de Widget Links list

Una vez que hayas agregado la lista de los links a tu diseño, puedes personalizarlo según tus necesidades y preferencias. Puedes cambiar los colores, las fuentes, los estilos, los enlaces y más. Ofrecemos varias opciones de personalización avanzadas para la lista de los link que desees para tu sitio, lo que te permite tener un control total sobre la apariencia y el comportamiento de la lista.

Todos los contenidos de elementor se dividen en  “Content” y “Style”, te explicaremos cada uno de ellos y sus respectivas sección para editar encabezado:

Content:

  Links

  • Item: Mostrara el botón “Add item”  al presionarlo te mostrara un nuevo modulo donde podrás editar la información del link para la lista, entre ellas están:
    • Label: Este campo te permite editar donde agregaras la etiqueta que llevara el link.
    • Link: Este campo te permite editar donde agregaras la  url a donde te dirigirá el link.
    • Icon: Este campo te permite editar donde agregaras el icono al link.

Puedes seguir agregando mas link presionando el botón de “Add item” o copiar el link ya creado presionando el botón que aparece en el lado derecho de la sección con el “Titulo del elemento”.

Style:

  Links

  • List Style: Este campo te permite editar el estilo que deseas que tome la lista.
  • List Direction: Este campo te permite editar la dirección que deseas que tome la lista, ya sea “Default” o “Inline”.
  • Vertical Alignment: Este campo te permite editar el posicionamiento vertical de la lista.
  • horizontal Alignment: Este campo te permite editar el posicionamiento horizontal de la lista.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Items

  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Vertical Alignment: Este campo te permite editar el posicionamiento vertical de los Items.
  • horizontal Alignment: Este campo te permite editar el posicionamiento horizontal de los Items.
  • Container Width: Este campo te permite editar el ancho del contenedor donde se encuentra el item.
  • Width: Este campo te permite editar el ancho del espacio donde se encuentra el elemento.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Icons

  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Width: Este campo te permite editar el ancho del espacio donde se encuentra el icono.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Icon Color:  Este campo te permite editar el color del icono, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools – Header & Footer”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

A continuación te explicamos todas las funciones que ofrece la  sección de template en GOM Tool Elemetor Addons

Primero debes  dirigirte a la barra izquierda que se encuentra en la mesa de trabajo de WordPress y busca “GOM Tool Elemetor Addons”, esta te mostrara varios opciones las cuales son:

  • GOM Tool Elemetor Addons: Modulo principal del plugin.
  • Theme headers: Modulo donde se muestra la lista de las cabeceras creadas.
  • Theme footers:Modulo donde se muestra la lista de los pie de paginas creados.
  • Theme template: Modulo donde se muestra la lista de los template creados.

Modulo theme template

Cuando estés sobre “GOM Tool Elemetor Addons” te mostrara  cuatro opciones para elegir: GOM Tool Elemetor Addons, Theme headers, Theme footers y Theme template, deveras presionar “Theme template” y te llevara al modulo donde estará la lista de template creados, en la cual tendrás en la parte superior varias acciones que podrás hacer a la lista: “Bulk actions”, “Filter” y “Search thema template” además tendrás el botón “New theme template” que te llevara al modulo donde podrás crear nuevos template.

  • Bulk actions: Podrás realizar múltiples acciones a la lista al mismo tiempo en lugar de hacerlas una por una.
  • Filter: Podrás refinar, segmentar o limitar la visualización de la lista según ciertos criterios.
  • Search thema template: Podrás buscar de forma mas precisa un template creado.
  • New theme template: Te redirigirá al modulo para crear un nuevo template .

Creación de template

Ya en el modulo “Theme template” dirígete a la parte superior donde se encontrara el botón “New theme templates” el cual al presionarlo te redirija al modulo “New theme template”.

En esta ocasión primero debes seleccionar el tipo de template que deseas crear, tienes que dirigirte al campo  “Setting” que se encuentra en el lado derecho del modulo y desplegar las opciones que te ofrece para elegir el template que quieras crear, entre ellos se encuentran:

  • Search: Se refiere a la plantilla de página de búsqueda dentro de tu sitio web.
  • blog: Es la plantilla de diseño que define la apariencia y estructura de tu blog en la tu sitio web
  • categories: Es la plantilla específica para páginas de categorías en tu sitio web.
  • tags: Es la página que muestra todos los posts o artículos que están asociados a una etiqueta específica
  • archives: es la página que muestra un listado de publicaciones organizadas por una categoría específica, como: Fecha (mensual, anual), categoría, etiquetas, autor, tipo de contenido.
  • single post: Es la página individual del artículo o publicación en tu sitio web o blog.
  • 404: Es la página que aparece cuando un usuario intenta acceder a una URL que no existe o ha sido eliminada de tu sitio web.

Ya seleccionado el template que quieres crear, nos dirigimos al campo “post attributes” ubicada en la misma columna del campo “Setting”, este que cuenta con varios opciones las cuales son:

  • Elementor Canvas.
  • Elementor Full Width.
  • GOM Tools Elementor Foother.
  • GOM Tools Elementor Full Width.
  • GOM Tools Elementor Full Header.
  • Theme.

Desplegamos las opciones que nos ofrece el campo y seleccionamos  “GOM Tool Elemetor full width”, esto para que la pagina creada se muestre correctamente en tu sitio web.

Luego de seleccionar “GOM Tool Elemetor full width” coloca titulo y presionar el botón llamado “publicar” ya de esta forma estará creado tu template , por ultimo tienes que presiona sobre el botón “Edit with Elementor” y este te llevara al editor de Elementor donde podrás editar tu template al estilo que desees.

A continuación te explicamos todas las funciones que ofrece los widgets de GOM Tools

Una vez que estés en el editor de Elementor, verás una barra lateral izquierda con una lista de elementos que puedes agregar a tu diseño. Puedes encontrar elementos propios del elementor y elementos de la herramienta GOM Tools, que están divididos en varias categorías dependiendo de la sección que deseas crear en tu sitio web.

En esta sección de la documentación hablaremos de los widgets que incluye GOM Tool Elemetor Addons que son:

  • GOM Tools – Single post
  • GOM Tools – Post
  • GOM Tools – forms
  • GOM Tools – Banners
  • GOM Tools – Carousels

GOM Tools - All

GOM Tools – Single post: “Single post imagen”, “Single post title”, “Single post content”, “Single post categories”, “Single post: Related posts”,”Single post: Author” y “Single post: Published date”.

GOM Tools single post

GOM Tools – Post: “Posts” y “Posts categories”.

GOM Tools posts

GOM Tools – forms :”Contact form 7″

GOM Tools forms

GOM Tools – Banners: “Banners carousel”

GOM Tools - Banners

GOM Tools – Carousels: “Banners carousel” y “Cards carousel”

GOM Tools - Carousels

A continuación los podrás encontrar en sus respectivos módulos.

Definición de los Widget

Single post imagen: Este widgets te permite agregar la imagen destacada del post al template del Single post.

Single post image

Configuraciones de Single post: Single post imagen

Una vez que hayas agregado el widgets  a tu diseño, puedes personalizarlo según tus necesidades y preferencias. Puedes cambiar los colores, las fuentes, los estilos, los enlaces y más. Ofrecemos varias opciones de personalización avanzadas que desees para tu sitio, lo que te permite tener un control total sobre la apariencia y el comportamiento del elemento.

Todos los contenidos de elementor se dividen en  “Content” y “Style”, te explicaremos cada uno de ellos y sus respectivas sección para editarlo.

Content:

  Image

  • Show Placeholder: Este campo te permite editar el marcador de posición de la publicación, el cual te ofrece dos opciones para seleccionar “Yes” y “No”.
  • Imang: Este campo te permite selecciona una imagen que desees mostrar de forma genérica.
  • Image Size: Este campo te permite editar el tamaño que deseas darle a la imagen.
  • Layout Style: Este campo te permite editar el estilo que tendrás la imagen,  el cual te ofrece cinco opciones para seleccionar “1/1”, “16/9”, “2/3”, “4/3” y “21/9”.
  • Skip Lazy Load: Este campo te permite editar el tiempo de cargado de la imagen inmediatamente en lugar de esperar hasta que el usuario las vea en la pantalla.
  • Post Imagen Width: Este campo te permite editar el ancho de la imagen de la publicación.

Style:

  Image

  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools – Single post”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Definición de los Widget

Single post title: Este widgets te permite agregar el titulo del post en el template.

Single post title

Configuraciones de Single post: Single post title

Una vez que hayas agregado el widgets  a tu diseño, puedes personalizarlo según tus necesidades y preferencias. Puedes cambiar los colores, las fuentes, los estilos, los enlaces y más. Ofrecemos varias opciones de personalización avanzadas que desees para tu sitio, lo que te permite tener un control total sobre la apariencia y el comportamiento del elemento.

Todos los contenidos de elementor se dividen en  “Content” y “Style”, te explicaremos cada uno de ellos y sus respectivas sección para editarlo.

Content:

  Title

  • HTML Tag: Este campo te permite editar la etiqueta HTML del titulo, puedes seleccionar desde H1 hasta H6.

Style:

  Title

  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools – Single post”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Definición de los Widget

Single post content: Este widgets te permite agregar el contenido del post en el template.

Single post content

Configuraciones de Single post: Single post content

Una vez que hayas agregado el widgets  a tu diseño, puedes personalizarlo según tus necesidades y preferencias. Puedes cambiar los colores, las fuentes, los estilos, los enlaces y más. Ofrecemos varias opciones de personalización avanzadas que desees para tu sitio, lo que te permite tener un control total sobre la apariencia y el comportamiento del elemento.

Todos los contenidos de elementor se dividen en  “Content” y “Style”, te explicaremos cada uno de ellos y sus respectivas sección para editarlo.

Content:

Style:

  Content
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  H1
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  H2
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  H3
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  H4
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  H5
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  H6
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Paragraphs
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Bold
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Links
  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Lists
  • Unordered List Style: Este campo te permite editar el estilo que deseas que tome la lista.
  • Ordered List style: Este campo te permite editar el estilo que deseas que tome la lista.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • List Item:
    • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
    • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Blockquote
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Iframe
  • Width: Este campo te permite editar el ancho del espacio donde se encuentra el Iframe.
  • Height: Este campo te permite editar la altura del espacio donde se encuentra el Iframe.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools – Single post”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Definición de los Widget

Single post categories: Este widgets te permite agregar la categorías de los single post en el template.

Single post categories

Configuraciones de Single post: Single post categories

Una vez que hayas agregado el widgets  a tu diseño, puedes personalizarlo según tus necesidades y preferencias. Puedes cambiar los colores, las fuentes, los estilos, los enlaces y más. Ofrecemos varias opciones de personalización avanzadas que desees para tu sitio, lo que te permite tener un control total sobre la apariencia y el comportamiento del elemento.

Todos los contenidos de elementor se dividen en  “Content” y “Style”, te explicaremos cada uno de ellos y sus respectivas sección para editarlo.

Content:

  Categories

  • Order by: Este campo te permite editar el orden de las categorías según el “Name”. “ID” o ” Slug(ordenar por la estructura legible de una URL)”
  • Order: Este campo te permite editar el orden de como se muestra la categorías, las opciones son “Ascending” o “Descending”.

Style:

  Categories List

  • Categories List Style: Este campo te permite editar el estilo de la categoría, las opciones disponibles son  “Default” o ” None”.
  • Categories List Direction: Este campo te permite editar la dirección de la categoría, las opciones disponibles son  “Default” o ” Inline”.
  • List Width: Este campo te permite editar el ancho de la lista de categorías.
  • Vertical Alignment: Este campo te permite editar el posicionamiento vertical de la lista de categorías.
  • horizontal Alignment: Este campo te permite editar el posicionamiento horizontal de la lista de categorías.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Items

  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Vertical Alignment: Este campo te permite editar el posicionamiento vertical de los items.
  • horizontal Alignment: Este campo te permite editar el posicionamiento horizontal de los items.
  • Text Alignment: Este campo te permite editar la alineación del texto, podrás elegir “Right”, “Center” y “Left”.
  • Container Width: Este campo te permite editar el ancho del contenedor donde se encuentra el item.
  • Width: Este campo te permite editar el ancho del espacio donde se encuentra el elemento.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools – Single post”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Definición de los Widget

Single post: Related posts: Este widgets te permite agregar los post relacionados en el template.

Single post related posts

Configuraciones de Single post: Single post related posts

Una vez que hayas agregado el widgets  a tu diseño, puedes personalizarlo según tus necesidades y preferencias. Puedes cambiar los colores, las fuentes, los estilos, los enlaces y más. Ofrecemos varias opciones de personalización avanzadas que desees para tu sitio, lo que te permite tener un control total sobre la apariencia y el comportamiento del elemento.

Todos los contenidos de elementor se dividen en  “Content” y “Style”, te explicaremos cada uno de ellos y sus respectivas sección para editarlo.

Content:

  Display Options
  • Posts: Botón que puedes activar o desactivar para que se muestre las publicaciones relacionadas.
  • Pagination:  Botón que puedes activar o desactivar para que se muestre la paginación.
  Posts
  • Layout Style: Campo para seleccionar el estilo de las publicaciones, tendrás dos opciones para seleccionar “List” o ” Grid”
  • Post to Show: Campo para Selecciona la cantidad de publicaciones que quieras mostrar.
  • Order: Este campo te permite editar el orden de como se muestra las publicaciones, las opciones son “Ascending” o “Descending”.
  • Order by: Este campo te permite editar el orden de las publicaciones según el “Name”. “ID” o ” Slug(ordenar por la estructura legible de una URL)”
  • Post Body Width: Este campo te permite editar el ancho del cuerpo de la publicación.
  • Show Post Imagen: Botón que puedes activar o desactivar para que se muestre la imagen de la publicación.
  • Imagen Size: Este campo te permite editar el tamaño que deseas darle a la imagen.
  • Layout Style: Este campo te permite editar el estilo que tendrás la imagen,  el cual te ofrece cinco opciones para seleccionar “1/1”, “16/9”, “2/3”, “4/3” y “21/9”.
  • Post Imagen Width: Este campo te permite editar el ancho de la imagen de la publicación.
  • Show Post Categories: Botón que puedes activar o desactivar para que se muestre la categorías de la publicación.
  • Show Post Share Button: Botón que puedes activar o desactivar para que se muestre el botón de compartir de la publicación.
  • Message for Share Button: Este campo te permite editar un mensaje personalizado que se muestre al compartir.
  • Show Post Title: Botón que puedes activar o desactivar para que se muestre el titulo de la publicación.
  • Title Tag: Este campo te permite editar la etiqueta HTML del titulo, puedes seleccionar desde H1 hasta H6.
  • Truncate Title: Este campo te permite editar la cantidad de letras para truncar el titulo que se muestra en la publicación.
  • Show Post Excerpt: Botón que puedes activar o desactivar para que se muestre un extracto de la publicación.
  • Truncate Excerpt: Este campo te permite editar la cantidad de letras para truncar el extracto que se muestra en la publicación.
  • Show Post Description: Botón que puedes activar o desactivar para que se muestre la descripción de la publicación.
  • Truncate Description: Este campo te permite editar la cantidad de letras para truncar la descripción que se muestra en la publicación.
  • Show Post Call to Action: Botón que puedes activar o desactivar para que se muestre un botón CTA en la publicación.
  • CTA label: Edita la etiqueta del botón CTA.
  • CTA target: Este campo te permite editar el tipo de  redirección al momento de presionar sobre el CTA, tendrás dos opciones para seleccionar “Same Window” o “Other Window”.
  • Show Post Published Date: Botón que puedes activar o desactivar para que se muestre la fecha de publicación.

Style:

  Post
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Image
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Categories
  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Title
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Excerpt
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Description
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  CTA
  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Width: Este campo te permite editar el ancho del espacio donde se encuentra el elemento.
  • Alignment: Este campo te permite editar la alineación del CTA, podrás elegir “Right”, “Center” y “Left”.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Published Date
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Share
  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Width: Este campo te permite editar el ancho del espacio donde se encuentra el elemento.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Icon Color:  Este campo te permite editar el color del icono, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Icon Width: Este campo te permite editar el ancho del icono.
  • Alignment: Este campo te permite editar la alineación del texto del icono, podrás elegir “Right”, “Center” y “Left”.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Pagination
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Alignment: Este campo te permite editar la alineación del paginador, podrás elegir “Right”, “Center” y “Left”.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Pagination Numbers:
    • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
    • Width: Este campo te permite editar el ancho del espacio donde se encuentra los números del paginador.
    • Height: Este campo te permite editar la altura del espacio donde se encuentra los números del paginador.
    • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
    • Alignment: Este campo te permite editar la alineación de los números del paginador, podrás elegir “Right”, “Center” y “Left”.
    • Border: Este campo te permite ededitar ta el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools – Single post”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Definición de los Widget

Single post: Author: Este widgets te permite agregar el autor del post en el template.

Single post author

Configuraciones de Single post: Single post author

Una vez que hayas agregado el widgets  a tu diseño, puedes personalizarlo según tus necesidades y preferencias. Puedes cambiar los colores, las fuentes, los estilos, los enlaces y más. Ofrecemos varias opciones de personalización avanzadas que desees para tu sitio, lo que te permite tener un control total sobre la apariencia y el comportamiento del elemento.

Todos los contenidos de elementor se dividen en  “Content” y “Style”, te explicaremos cada uno de ellos y sus respectivas sección para editarlo.

Content:

  Author

  • Show Author Avatar:  Este campo te permite editar la opción si deseas que se muestre el avatar del autor, tendrás dos opciones para seleccionar “Yes” o “No”.
  • Avatar Size: Este campo te permite editar el tamaño del avatar del autor.

Style:

  Avatar

  • Width: Este campo te permite editar el ancho del espacio donde se encuentra el avatar.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”.

  Display Name

  • Width: Este campo te permite editar el ancho del espacio donde se encuentra el nombre del avatar.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools – Single post”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Definición de los Widget

Single post: Published date: Este widgets te permite agregar la fecha de publicación del post en el template.

Single post published date

Configuraciones de Single post: Single post published date

Una vez que hayas agregado el widgets  a tu diseño, puedes personalizarlo según tus necesidades y preferencias. Puedes cambiar los colores, las fuentes, los estilos, los enlaces y más. Ofrecemos varias opciones de personalización avanzadas que desees para tu sitio, lo que te permite tener un control total sobre la apariencia y el comportamiento del elemento.

Todos los contenidos de elementor se dividen en  “Content” y “Style”, te explicaremos cada uno de ellos y sus respectivas sección para editarlo.

Content:

  Published Data

  • Date Format: Este campo te permite editar el formato de la fecha.
  • Date Text: Este campo te permite editar el texto que deseas que aparezca junto a la fecha de publicaciones.

Style:

  Published Data

  • Width: Este campo te permite editar el ancho del espacio donde se encuentra la fecha de publicacion.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools – Single post”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Definición de los Widget

Posts: Este widgets te permite agregar los post en el template.

Posts- posts

Configuraciones de Posts

Una vez que hayas agregado el widgets  a tu diseño, puedes personalizarlo según tus necesidades y preferencias. Puedes cambiar los colores, las fuentes, los estilos, los enlaces y más. Ofrecemos varias opciones de personalización avanzadas que desees para tu sitio, lo que te permite tener un control total sobre la apariencia y el comportamiento del elemento.

Todos los contenidos de elementor se dividen en  “Content” y “Style”, te explicaremos cada uno de ellos y sus respectivas sección para editarlo.

Content:

  Display Options
  • Posts: Botón que puedes activar o desactivar para que se muestre las publicaciones relacionadas.
  • Pagination:  Botón que puedes activar o desactivar para que se muestre la paginación.
  Posts
  • Layout Style: Campo para seleccionar el estilo de las publicaciones, tendrás dos opciones para seleccionar “List” o ” Grid”
  • Post to Show: Campo para Selecciona la cantidad de publicaciones que quieras mostrar.
    • Nota: (Luego de seleccionar y guardar la cantidad de post a mostrar debes  dirigirte a la barra izquierda que se encuentra en la mesa de trabajo de WordPress y busca “settings”, esta te mostrara varios opciones y deveras presionar la opción “reading” y te llevara al modulo de Configuración de lectura, este modulo te mostrara varias opciones para editar y deveras buscar el campo llamado “Blog pages show at most” en este campo deveras colocar la misma cantidad de post a mostrar que colocaste anteriormente en el Widgets “Posts” al colocar la cantidad deveras guardar los cambios presionando el botón “save changes” que se encuentra al final del modulo).
  • Order: Este campo te permite editar el orden de como se muestra las publicaciones, las opciones son “Ascending” o “Descending”.
  • Order by: Este campo te permite editar el orden de las publicaciones según el “Name”. “ID” o ” Slug(ordenar por la estructura legible de una URL)”
  • Post Body Width: Este campo te permite editar el ancho del cuerpo de la publicación.
  • Show Post Imagen: Botón que puedes activar o desactivar para que se muestre la imagen de la publicación.
  • Imagen Size: Este campo te permite editar el tamaño que deseas darle a la imagen.
  • Layout Style: Este campo te permite editar el estilo que tendrás la imagen,  el cual te ofrece cinco opciones para seleccionar “1/1”, “16/9”, “2/3”, “4/3” y “21/9”.
  • Post Imagen Width: Este campo te permite editar el ancho de la imagen de la publicación.
  • Show Post Categories: Botón que puedes activar o desactivar para que se muestre la categorías de la publicación.
  • Show Post Share Button: Botón que puedes activar o desactivar para que se muestre el botón de compartir de la publicación.
  • Message for Share Button: Este campo te permite editar un mensaje personalizado que se muestre al compartir.
  • Show Post Title: Botón que puedes activar o desactivar para que se muestre el titulo de la publicación.
  • Title Tag: Este campo te permite editar la etiqueta HTML del titulo, puedes seleccionar desde H1 hasta H6.
  • Truncate Title: Este campo te permite editar la cantidad de letras para truncar el titulo que se muestra en la publicación.
  • Show Post Excerpt: Botón que puedes activar o desactivar para que se muestre un extracto de la publicación.
  • Truncate Excerpt: Este campo te permite editar la cantidad de letras para truncar el extracto que se muestra en la publicación.
  • Show Post Description: Botón que puedes activar o desactivar para que se muestre la descripción de la publicación.
  • Truncate Description: Este campo te permite editar la cantidad de letras para truncar la descripción que se muestra en la publicación.
  • Show Post Call to Action: Botón que puedes activar o desactivar para que se muestre un botón CTA en la publicación.
  • CTA label: Editar la etiqueta del botón CTA.
  • CTA target: Este campo te permite editar el tipo de  redirección al momento de presionar sobre el CTA, tendrás dos opciones para seleccionar “Same Window” o “Other Window”.
  • Show Post Published Date: Botón que puedes activar o desactivar para que se muestre la fecha de publicación.

Style:

  Post
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Image
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Categories
  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Title
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Excerpt
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Description
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  CTA
  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Width: Este campo te permite editar el ancho del espacio donde se encuentra el elemento.
  • Alignment: Este campo te permite editar la alineación del CTA, podrás elegir “Right”, “Center” y “Left”.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Published Date
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Share
  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Width: Este campo te permite editar el ancho del espacio donde se encuentra el elemento.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Icon Color:  Este campo te permite editar el color del icono, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Icon Width: Este campo te permite editar el ancho del icono.
  • Alignment: Este campo te permite editar la alineación del texto del icono, podrás elegir “Right”, “Center” y “Left”.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  Pagination
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Alignment: Este campo te permite editar la alineación del paginador, podrás elegir “Right”, “Center” y “Left”.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Pagination Numbers:
    • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
    • Width: Este campo te permite editar el ancho del espacio donde se encuentra los números del paginador.
    • Height: Este campo te permite editar la altura del espacio donde se encuentra los números del paginador.
    • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
    • Alignment: Este campo te permite editar la alineación de los números del paginador, podrás elegir “Right”, “Center” y “Left”.
    • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
    • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools – Posts”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Definición de los Widget

Posts categories: Este widgets te permite agregar la categorías de los post en el template.

Posts- posts categories

Configuraciones de Posts categories

Una vez que hayas agregado el widgets  a tu diseño, puedes personalizarlo según tus necesidades y preferencias. Puedes cambiar los colores, las fuentes, los estilos, los enlaces y más. Ofrecemos varias opciones de personalización avanzadas que desees para tu sitio, lo que te permite tener un control total sobre la apariencia y el comportamiento del elemento.

Todos los contenidos de elementor se dividen en  “Content” y “Style”, te explicaremos cada uno de ellos y sus respectivas sección para editarlo.

Content:

  Categories

  • Hide Empty Categories: Este campo te permite editar la opción si deseas que se muestre las categorías vacías, tendrás dos opciones para seleccionar “Yes” o “No”
  • Hide Sub Categories: Este campo te permite editar la opción si deseas que se muestre las sub categorías, tendrás dos opciones para seleccionar “Yes” o “No”
  • Include Categories: Presiona el botón “+ Add Item” al presionarlo se desplegara una sección donde podrás seleccionar la categoría que desees incluir, puedes agregar tantas categorías como desees o copiar la misma apretando el botón que se muestra al lado derecho del numero el cual cambiara según la cantidad de elementos que tenga la categoría seleccionada.
  • Exclude Categories: Presiona el botón “+ Add Item” al presionarlo se desplegara una sección donde podrás seleccionar la categoría que desees excluir , puedes excluir tantas categorías como desees o copiar la misma apretando el botón que se muestra al lado derecho del numero el cual cambiara según la cantidad de elementos que tenga la categoría seleccionada
  • Order by: Este campo te permite editar el orden de las publicaciones según el “Name”. “ID” o ” Slug(ordenar por la estructura legible de una URL)”
  • Order: Este campo te permite editar el orden de como se muestra las publicaciones, las opciones son “Ascending” o “Descending”.

Style:

  Categories List

  • Categories List Style: Este campo te permite editar el estilo de la categoría, las opciones disponibles son  “Default” o ” None”.
  • Categories List Direction: Este campo te permite editar la dirección de la categoría, las opciones disponibles son  “Default” o ” Inline”.
  • Vertical Alignment: Este campo te permite editar el posicionamiento vertical de la lista de categorías.
  • horizontal Alignment: Este campo te permite editar el posicionamiento horizontal de la lista de categorías.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”.

  Items

  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Vertical Alignment: Este campo te permite editar el posicionamiento vertical de los items.
  • horizontal Alignment: Este campo te permite editar el posicionamiento horizontal de los items.
  • Text Alignment: Este campo te permite editar la alineación del texto, podrás elegir “Right”, “Center” y “Left”.
  • Container Width: Este campo te permite editar el ancho del contenedor donde se encuentra el item.
  • Width: Este campo te permite editar el ancho del espacio donde se encuentra el elemento.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”.

  Categories Sub List

  • Categories List Style: Este campo te permite editar el estilo de la categoría, las opciones disponibles son  “Default” o ” None”.
  • Categories List Direction: Este campo te permite editar la dirección de la categoría, las opciones disponibles son  “Default” o ” Inline”.
  • Vertical Alignment: Este campo te permite editar el posicionamiento vertical de la lista de categorías.
  • horizontal Alignment: Este campo te permite editar el posicionamiento horizontal de la lista de categorías.
  • Background Color: Este campo te permite editar  el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar  el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”.

  Sub Lists Item

  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Vertical Alignment: Este campo te permite editar el posicionamiento vertical de los items.
  • horizontal Alignment: Este campo te permite editar el posicionamiento horizontal de los items.
  • Text Alignment: Este campo te permite editar la alineación del texto, podrás elegir “Right”, “Center” y “Left”.
  • Container Width: Este campo te permite editar el ancho del contenedor donde se encuentra el item.
  • Width: Este campo te permite editar el ancho del espacio donde se encuentra el elemento.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools – Posts”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Definición de los Widget

Contact form 7: Este widgets te permite agregar formularios en el template.

GOM Tools forms

Configuraciones de Contact form 7

Una vez que hayas agregado el widgets  a tu diseño, puedes personalizarlo según tus necesidades y preferencias. Puedes cambiar los colores, las fuentes, los estilos, los enlaces y más. Ofrecemos varias opciones de personalización avanzadas que desees para tu sitio, lo que te permite tener un control total sobre la apariencia y el comportamiento del elemento.

Todos los contenidos de elementor se dividen en  “Content” y “Style”, te explicaremos cada uno de ellos y sus respectivas sección para editarlo.

Content:

  Form
  • Form Shortcode: En este modulo solo tendrás un campo de texto donde podrás el código que te da el plugin Contact form 7.

Style:

  Form
  • Width: Este campo te permite editar el ancho del espacio donde se encuentra el formulario.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”.
  Labels
  • Show Label: Este campo te permite editar la opción si deseas que se muestre las etiquetas en el formulario, tendrás dos opciones para seleccionar “Yes” o “No”
  • Width: Este campo te permite editar el ancho del espacio donde se encuentra la etiqueta.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”.
  Fields
  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Placeholder Color: Este campo te permite editar el color del texto que se muestra en el campo antes de que el usuario ingrese un valor.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”.
  Checkbox/Radio
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Placeholder Color: Este campo te permite editar el color del texto que se muestra en el campo antes de que el usuario ingrese un valor.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”.
  Checkbox/Radio Label
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”.
  Submit
  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”.
  Message
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools – Contact form 7”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Definición de los Widget

Banners carousel: Este widgets te permite agregar un carrusel de imágenes en el template.

GOM Tools - Banners

Configuraciones de Banners carousel

Una vez que hayas agregado el widgets  a tu diseño, puedes personalizarlo según tus necesidades y preferencias. Puedes cambiar los colores, las fuentes, los estilos, los enlaces y más. Ofrecemos varias opciones de personalización avanzadas que desees para tu sitio, lo que te permite tener un control total sobre la apariencia y el comportamiento del elemento.

Todos los contenidos de elementor se dividen en  “Content” y “Style”, te explicaremos cada uno de ellos y sus respectivas sección para editarlo.

Content:

  Banners

  • Items: Mostrara el botón “Add item”  al presionarlo te mostrara un nuevo modulo donde podrás agregar la imagen  y editar la información para el banner, entre ellas están:
    • Skip imagen lazyload: Este campo te permite editar el tiempo de cargado de la imagen inmediatamente en lugar de esperar hasta que el usuario las vea en la pantalla.
    • Default image: Este campo te permite colocar la imagen por defecto a mostrar.
    • Desktop image: Este campo te permite colocar la imagen que se mostrara en pc.
    • Tablet image: Este campo te permite colocar la imagen que se mostrara en tablet.
    • Mobile image: Este campo te permite colocar la imagen que se mostrara en móvil.
    • Imagen alt text: Este campo te permite agregarle un texto a la imagen en caso de que la imagen no se muestre en su lugar se vera el texto.
    • Title: Este campo te permite agregarle un titulo a la imagen.
    • Title tag: Este campo te permite editar la etiqueta HTML del titulo, puedes seleccionar desde H1 hasta H6.
    • Content: Este campo te permite agregar la información que deseas mostrar en el banner.
    • CTA: Este campo te permite agregar la dirección url  para la redirección al momento de presionar el botón que se mostrara en el banner.
    • Label: Editar la etiqueta del botón CTA.
    • CTA icon: Este campo te permite agregar un icono en el CTA junto al texto.

Puedes seguir agregando mas campos presionando el botón de “Add item” o copiar el banner ya creado presionando el botón que aparece en el lado derecho de la sección con el “Titulo del campo”.

  Carousel

  • Loop: Mostrara un botón para activar (Yes) o desactivar (No) la opción de que el carrusel este en bucle.
  • Direction: Mostrara dos opciones para elegir la dirección del carrusel las cuales son de izquierda a derecha “Left to right” o de derecha a izquierda “Right to left”.
  • Drag free: Permite activar (Yes) o desactivar (No) la opción de mover el carrusel con el mouse.
  • Align: Selecciona la alineación del contenido, estas opciones son: “Star” para alinearlo al principio, “Center” para alinearlo en el centro  o End” para alinearse al final.
  • Axis: Selecciona el tipo de movimiento del carrusel, las opciones son: “Horizontal” para que el carrusel se desplace de forma horizontal o “Vertical” para que el carrusel se desplace de forma vertical.
  • Star slide: Selecciona el banner con que deseas que comiese el carrusel.
  • Auto height: Mostrara un botón para activar (Yes) o desactivar (No) la opción de calcular automáticamente el tamaño de todas las imágenes para colocar el tamaño de la imagen mas grande.
  • Behavior: Selecciona el comportamiento del carrusel, las opciones son:“Autoplay”  o “Auto scroll”.
    • Autoplay:
      • Autoplay: Mostrara un botón para activar (Yes) o desactivar (No) el movimiento automático del carrusel.
      • Add fade effect: Mostrara un botón para activar (Yes) o desactivar (No) el efecto de desvanecerse del carrusel.
      • Star delay: Selecciona el tiempo de demora en comenzar el efecto del carrusel.
      • Delay: Selecciona el tiempo de demora en cambiar de un banner a otro.
    • Auto scroll:
      • Auto scroll: Mostrara un botón para activar (Yes) o desactivar (No) el movimiento automático del carrusel.
      • Star delay: Selecciona el tiempo de demora en comenzar el efecto del carrusel.
      • Delay: Selecciona el tiempo de demora en cambiar de un banner a otro.
      • Speed: Selecciona la velocidad de cambiar de un banner a otro.
  • Stop on mouse enter: Mostrara un botón para activar (Yes) o desactivar (No) que el carrusel se detenga cuando pase un mouse sobre el.
  • Show controls: Mostrara un botón para activar (Yes) o desactivar (No) la opción de pasar los banner del carrusel mediante botones laterales.
    • Left control icon: Selecciona el icono para mostrar en el botón lateral izquierdo del carrusel.
    • Right control icon: Selecciona el icono para mostrar en el botón lateral derecho del carrusel.
  • Show dots: Mostrara un botón para activar (Yes) o desactivar (No) la opción de mostrar los indicadores del carrusel.

Style:

  Carousel

  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Items

  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Gap: Este campo te permite editar la separación entre los elementos del carrusel, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Full screen image: Mostrara un botón para activar (Yes) o desactivar (No) la opción que permite a la imagen tomar el ancho completo de la pantalla.

  Items caption

  • Position: Selecciona el tipo de posición  del caption , las opciones son: “Absolute” para que el caption se sobre monte en el carrusel o “Relative” para que el caption este debajo del carrusel.
  • Position values: Este campo te permite editar la posición del caption, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Items title

  • Background Color: Este campo te permite editar el  color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Items content

  • Background Color: Este campo te permite editar el  color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Items CTA

  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Width: Este campo te permite editar el ancho del CTA.
  • Background Color: Este campo te permite editar el  color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Carousel controls

  • Position: Selecciona el tipo de posición  de los controles del carrusel, las opciones son: “Absolute” para que los controles del carrusel se sobre monte en el mismo o “Relative” para que los controles del carrusel estén debajo del mismo.
    • Left control position: Este campo te permite editar la posición izquierda del control del carrusel, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Right control position: Este campo te permite editar la posición derecha del control del carrusel, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Control width: Este campo te permite editar el ancho del control del carrusel.
  • Control height: Este campo te permite editar el alto del control del carrusel.
  • Vertical Alignment: Este campo te permite editar el posicionamiento vertical del control del carrusel.
  • horizontal Alignment: Este campo te permite editar el posicionamiento horizontal del control del carrusel.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Icon Color:  Este campo te permite editar el color del icono, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Control icon width: Este campo te permite editar el ancho del icono que controla el carrusel.
  • Control icon height: Este campo te permite editar el alto del icono que controla el carrusel.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Carousel dots

  • Position: Selecciona el tipo de posición  del indicador del carrusel, las opciones son: “Absolute” para que los controles del carrusel se sobre monte en el mismo o “Relative” para que los controles del carrusel estén debajo del mismo.
    • Dots position: Este campo te permite editar la posición del indicador del carrusel, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Vertical Alignment: Este campo te permite editar el posicionamiento vertical del indicador del carrusel.
  • horizontal Alignment: Este campo te permite editar el posicionamiento horizontal del indicador del carrusel.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Nomrla/Hover/Active: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento, su estado cuando el usuario pasa el cursor sobre él “Hover” y por ultimo cuando el elemento ese encuentra activo “Active”.
  • Dots width: Este campo te permite editar el ancho del indicador del carrusel.
  • Dots height: Este campo te permite editar el alto del indicador del carrusel.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools – Banners carousel”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Definición de los Widget

Card carousels: Este widgets te mostrara varias tarjetas o elementos de forma horizontal, permitiéndote deslizar o navegar a través de ellas.

GOM Tools -Carousels 1

Configuraciones de Banners carousel

Una vez que hayas agregado el widgets  a tu diseño, puedes personalizarlo según tus necesidades y preferencias. Puedes cambiar los colores, las fuentes, los estilos, los enlaces y más. Ofrecemos varias opciones de personalización avanzadas que desees para tu sitio, lo que te permite tener un control total sobre la apariencia y el comportamiento del elemento.

Todos los contenidos de elementor se dividen en  “Content” y “Style”, te explicaremos cada uno de ellos y sus respectivas sección para editarlo.

Content:

  Cards

  • Items: Mostrara el botón “Add item”  al presionarlo te mostrara un nuevo modulo donde podrás agregar la imagen  y editar la información para las cards, entre ellas están:
    • Show image: Este campo te permite editar si deseas mostrar o no una imagen en la card.
    • Skip imagen lazyload: Este campo te permite editar el tiempo de cargado de la imagen inmediatamente en lugar de esperar hasta que el usuario las vea en la pantalla.
    • Image: Este campo te permite colocar la imagen que se mostrara en la card.
    • Title: Este campo te permite agregarle un titulo a la imagen.
    • Title tag: Este campo te permite editar la etiqueta HTML del titulo, puedes seleccionar desde H1 hasta H6.
    • Content: Este campo te permite agregar la información que deseas mostrar en la card.
    • CTA: Este campo te permite agregar la dirección url  para la redirección al momento de presionar el botón que se mostrara en la card.
    • Label: Editar la etiqueta del botón CTA.
    • CTA icon: Este campo te permite agregar un icono en el CTA junto al texto.

Puedes seguir agregando mas campos presionando el botón de “Add item” o copiar el banner ya creado presionando el botón que aparece en el lado derecho de la sección con el “Titulo del campo”.

  Carousel

  • Loop: Mostrara un botón para activar (Yes) o desactivar (No) la opción de que el carrusel este en bucle.
  • Direction: Mostrara dos opciones para elegir la dirección del carrusel las cuales son de izquierda a derecha “Left to right” o de derecha a izquierda “Right to left”.
  • Drag free: Permite activar (Yes) o desactivar (No) la opción de mover el carrusel con el mouse.
  • Align: Selecciona la alineación del contenido, estas opciones son: “Star” para alinearlo al principio, “Center” para alinearlo en el centro  o End” para alinearse al final.
  • Axis: Selecciona el tipo de movimiento del carrusel, las opciones son: “Horizontal” para que el carrusel se desplace de forma horizontal o “Vertical” para que el carrusel se desplace de forma vertical.
  • Star slide: Selecciona el banner con que deseas que comiese el carrusel.
  • Auto height: Mostrara un botón para activar (Yes) o desactivar (No) la opción de calcular automáticamente el tamaño de todas las imágenes para colocar el tamaño de la imagen mas grande.
  • Behavior: Selecciona el comportamiento del carrusel, las opciones son:“Autoplay”  o “Auto scroll”.
    • Autoplay:
      • Autoplay: Mostrara un botón para activar (Yes) o desactivar (No) el movimiento automático del carrusel.
      • Add fade effect: Mostrara un botón para activar (Yes) o desactivar (No) el efecto de desvanecerse del carrusel.
      • Star delay: Selecciona el tiempo de demora en comenzar el efecto del carrusel.
      • Delay: Selecciona el tiempo de demora en cambiar de un banner a otro.
    • Auto scroll:
      • Auto scroll: Mostrara un botón para activar (Yes) o desactivar (No) el movimiento automático del carrusel.
      • Star delay: Selecciona el tiempo de demora en comenzar el efecto del carrusel.
      • Delay: Selecciona el tiempo de demora en cambiar de un banner a otro.
      • Speed: Selecciona la velocidad de cambiar de un banner a otro.
  • Stop on mouse enter: Mostrara un botón para activar (Yes) o desactivar (No) que el carrusel se detenga cuando pase un mouse sobre el.
  • Show controls: Mostrara un botón para activar (Yes) o desactivar (No) la opción de pasar los banner del carrusel mediante botones laterales.
    • Left control icon: Selecciona el icono para mostrar en el botón lateral izquierdo del carrusel.
    • Right control icon: Selecciona el icono para mostrar en el botón lateral derecho del carrusel.
  • Show dots: Mostrara un botón para activar (Yes) o desactivar (No) la opción de mostrar los indicadores del carrusel.

Style:

  Carousel

  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Items

  • Items width: Este campo te permite editar el ancho del espacio donde se encuentra el Items.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Gap: Este campo te permite editar la separación entre los elementos del carrusel, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Items image

  • Imgen width: Este campo te permite editar el ancho de la imagen que se mostrara en la card.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

Items caption

  • Position: Selecciona el tipo de posición  del caption , las opciones son: “Absolute” para que el caption se sobre monte en la card o “Relative” para que el caption este debajo de la card.
  • Position values: Este campo te permite editar la posición del caption, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Items title

  • Background Color: Este campo te permite editar el  color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Items content

  • Background Color: Este campo te permite editar el  color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Items CTA

  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Width: Este campo te permite editar el ancho del CTA.
  • Background Color: Este campo te permite editar el  color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Text Color: Este campo te permite editar el color del texto, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Typography: Este campo te permite editar la tipografía del elemento, al lado derecho tendrás un botón para seleccionar las tipografía global de la pagina o  editar de forma manual la familia, tamaño, peso, estilo entre otros.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

Carousel controls

  • Position: Selecciona el tipo de posición  de los controles de la card, las opciones son: “Absolute” para que los controles de la card se sobre monte en el mismo o “Relative” para que los controles de la card estén debajo del mismo.
    • Left control position: Este campo te permite editar la posición izquierda del control del carrusel, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
    • Right control position: Este campo te permite editar la posición derecha del control del carrusel, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Nomrla/Hover: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento y su estado cuando el usuario pasa el cursor sobre él “Hover”.
  • Control width: Este campo te permite editar el ancho del control de la card.
  • Control height: Este campo te permite editar el alto del control de la card.
  • Vertical Alignment: Este campo te permite editar el posicionamiento vertical del control de la card.
  • horizontal Alignment: Este campo te permite editar el posicionamiento horizontal del control de la card.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Icon Color:  Este campo te permite editar el color del icono, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Control icon width: Este campo te permite editar el ancho del icono que controla la card.
  • Control icon height: Este campo te permite editar el alto del icono que controla la card.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

  Carousel dots

  • Position: Selecciona el tipo de posición  del indicador de la card, las opciones son: “Absolute” para que los controles de la card se sobre monte en el mismo o “Relative” para que los controles de la card estén debajo del mismo.
    • Dots position: Este campo te permite editar la posición del indicador de la card, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Vertical Alignment: Este campo te permite editar el posicionamiento vertical del indicador de la card.
  • horizontal Alignment: Este campo te permite editar el posicionamiento horizontal del indicador de la card.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Nomrla/Hover/Active: Este campo te permite editar el diseño y los estilos diferenciando entre el estado “Normal” de un elemento, su estado cuando el usuario pasa el cursor sobre él “Hover” y por ultimo cuando el elemento ese encuentra activo “Active”.
  • Dots width: Este campo te permite editar el ancho del indicador de la card.
  • Dots height: Este campo te permite editar el alto del indicador de la card.
  • Background Color: Este campo te permite editar el color de fondo del elemento, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Border: Este campo te permite editar el borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Radius: Este campo te permite editar el radio que deseas agregar al borde, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Border Color: Este campo te permite editar el color del borde, al lado derecho tendrás un botón para seleccionar los colores globales de la pagina o seleccionar un color particular.
  • Padding: Este campo te permite editar el relleno, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.
  • Margin: Este campo te permite editar el margen, cuenta con cuatro opciones para editar las cuales son, “Top”, “Right”. “Bottom” y “left”.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools – Card carousels”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.