Usando Button & Links , puedes agregar cualquier tipo de enlace (1) a la sección. Puedes agregar un botón/enlace de texto/enlace de imagen/icono/separador.
Puedes duplicar (2), editar (3) o eliminar (4) el botón/enlace existente.
En este artículo hablaremos de:
Agregar botones/enlaces
- Para añadir cualquier tipo de enlace a la sección, haga clic en el + Botón Agregar .
La opción "+ Agregar botón" ofrece cuatro maneras de añadir un enlace. Además, también puedes añadir separadores para crear espacios entre botones o enlaces. A continuación, se muestran las opciones:
Botón
Añade un botón al elemento de la lista.
Podrás actualizar:
- Etiqueta de botón – Especificar el texto visible En tu botón. Esto es lo que los usuarios verán y en lo que harán clic.
- Enlace del botón – Especificar el URL o acción El botón debería activarse al hacer clic.
- Ventana de destino – Elija si el enlace se abre en el misma pestaña nueva pestaña.
- Estilo del botón – Elija el estilo de botón para que sea el predeterminado (establecido en el Botones y enlaces de la sección Diseño), Sólido, Contorno o Enlace de texto.
-
- Predeterminado: Sigue la configuración del tema de su sitio.
- Sólido: Un botón relleno y en negrita.
- Esquema: Fondo transparente con borde.
- Enlace de texto: Estilo simple, limpio y de solo texto (sin cuadro de botones).
- Forma del botón - Establecer un forma personalizada para cada botón individual dentro de la sección. Esto le permite anular la forma global del botón definida en la Configuraciones de diseño, lo que te da más control sobre la apariencia de cada botón. Las formas disponibles son Cuadrado, Redondeado y Píldora.
- Color del botón – Personaliza el esquema de colores del botón:
-
- Predeterminado: Hereda la configuración del tema.
- Invertir: Invierte los colores del texto/fondo del botón.
- Personalizada: Le permite elegir texto específico y colores de fondo.
- Texto del botón - Si usa Color de botón personalizado, puedes configurar el color del texto (etiqueta) de aquí.
- Fondo del botón También disponible en Personalizado, esta opción define el color de fondo del botón. Combínalo con el color del texto para una legibilidad y un estilo óptimos.
- Icono de botón Añade un icono junto a la etiqueta del botón. Puedes elegir entre varias opciones de icono.
- Diseño Controla la ubicación del icono en relación con la etiqueta. Las opciones de diseño disponibles son:
-
- Etiqueta + Icono: Primero aparece el texto, seguido del icono.
- Icono + Etiqueta: Primero aparece el icono y luego el texto.
- Etiqueta + Icono (Ancho): Texto e ícono organizados con más relleno, adecuado para botones más anchos.
- Icono + Etiqueta (Ancho): Primero el ícono, diseño de relleno más amplio.
- Color del icono – Elija el color del icono del botón. Puede configurarlo en el Texto del botón color o el Marcas de color.
Configuración del estilo de los botones
Encontrarás estas opciones en la pestaña Estilo de las secciones. Estas opciones te permiten ajustar con precisión la apariencia, el espaciado y la disposición de los botones en tu sitio Pixpa para un mejor control del diseño y una mayor capacidad de respuesta.
- Tamaño del botón – Elija el tamaño del botón (p. ej., Pequeño, Mediano, Grande). Esto ajusta el relleno y el tamaño de la fuente para adaptarlos a su diseño.
- Espacio entre botones Controla el espaciado horizontal entre varios botones. Puedes usar unidades vw (ancho de la ventana gráfica) para un espaciado adaptable.
- Espacio encima de los botones Añade espacio vertical sobre los botones. Esto ayuda a separarlos del contenido superior, medido en %.
- Enlace de texto – Ajusta el tamaño de fuente de los enlaces de texto de los botones (especialmente útil cuando se utiliza un estilo de “Enlace de texto” en lugar de un botón tradicional).
- Imagen como botón (tamaño) – Si está utilizando una imagen en lugar de un botón tradicional, esta configuración define el tamaño de visualización de la imagen (en píxeles).
- Ancho del botón – Elija el ancho que debe tener el botón:
-
- Predeterminado: Ancho estándar basado en el contenido del botón
- Grande / Extra grande: Botones más anchos para mayor énfasis
- Ancho completo: El botón se extiende por todo el ancho del contenedor.
Enlace de texto
Agregue un enlace de texto al elemento de la lista.
Podrás actualizar:
- Configure etiqueta de texto.
- Especifica el enlace de texto.
- Ventana de destino – Elija abrir la página en la misma ventana o en una nueva.
Imagen
Agregue una imagen y vincúlela a cualquier página.
- Una vez que haya cargado la imagen, se muestra de esta manera. Haga clic en el enlace para editarlo.
- Desde aquí, puede:
- Cargar /Cambiar la imagen.
- Enlace del botón – Especifique el enlace.
- Ventana de destino – Elija abrir la página en la misma ventana o en una nueva.
El título del sitio se utilizará como texto alternativo para la imagen del botón para mejorar la capacidad de búsqueda.
Icono social
- Agregue un ícono social al elemento de la lista.
Puedes gestionar:
- El icono social que se va a vincular.
- Especifique la ruta de su perfil social relevante.
- Ventana de destino – Elija abrir la página en la misma ventana o en una nueva.
Separador
La opción Separador permite insertar espacios entre botones o enlaces.
Esto resulta útil para crear una separación visual entre botones colocados muy cerca uno del otro. Puedes añadir un separador desde el panel Botones y enlaces, igual que añades otros botones.
- El espacio entre los botones está controlado por el Relleno – Superior Ajuste del separador. Ajustar este valor aumenta o disminuye el espaciado vertical entre botones cercanos.
- Un separador no conecta con ningún lugar: simplemente crea espacio vertical.
- Puede moverlo hacia arriba o hacia abajo para ajustar el espacio entre los elementos según sea necesario.
Opciones de estilo para botones y enlaces
Las opciones de estilo estarán disponibles en la pestaña Estilo al gestionar la sección.
Tendrá múltiples opciones de estilo para el botón y los enlaces de la siguiente manera:
Botón y enlaces
- Especifica el Espacio entre botones/enlaces que se han agregado.
- Especifica el Espacio encima del botón/enlaces.
- Elija el Efecto al pasar el cursor para el Botón/enlaces.
- Elija el tamaño del botón normal que has añadido en el Botón/Enlaces.
- Especifica el altura del botón de imagen si ha agregado un enlace de imagen en el Botón/Enlaces.
- Especifica el tamaño del botón de icono si ha agregado un ícono social en el Botón/Enlaces.
Si has añadido un icono de redes sociales en el botón/enlaces de arriba, entonces:
- Elija el Tipo de icono social/Forma.
- Elija el Estilo de color de icono social. Si ha elegido el Color de la marca, entonces se heredará el color de la marca del icono.
Si ha elegido el Color seleccionado opción de arriba entonces:
-
- Especifica el Color de icono de redes sociales.
- Especifica el Color de fondo del icono social.
Ejemplo
Por ejemplo, si ha añadido un enlace social de Amazon en la sección Botones/Enlaces y ha especificado el color del icono como rojo y el color de fondo del icono como verde, el icono se mostrará como se indica a continuación:
