Creación de patrones únicos de botones Divon utilizando un módulo de texto

Es posible que ya haya pasado por la creación de diseños únicos de botones Divon utilizando un módulo de texto. Si es así, ¡eres más creativo de lo que sabes! Con el lanzamiento de las opciones de desplazamiento en la división, se pueden hacer clic en todos los módulos. Esto abre la puerta para usar cualquier módulo (con todas sus configuraciones de diseño construidas) como CTA o botón que se puede hacer clic. Un módulo de texto, por ejemplo, le permite agregar cuánto texto desea en diferentes formatos. Además, el módulo de texto también tiene algunas opciones de diseño robustas para personalizar las esquinas redondeadas para crear formas únicas.
En este tutorial, exploraré algunos modelos únicos de botones Div que son posibles utilizando un módulo de texto. ¡Vamos a empezar! Dibuja con el ojo aquí hay algunos ejemplos de modelos de botones que crearemos fácilmente con el módulo de texto. Este es un botón de texto de dos líneas …

Este es un botón que usa un elemento en la lista …

Este es un botón que usa esquinas creativas …

Creación de los modelos únicos de botones Divon utilizando un módulo de texto que se suscribe a nuestro canal de YouTube # 1 Creación de un botón con múltiples líneas de texto Como mencionamos anteriormente, el módulo de texto permite una cantidad ilimitada de texto, por lo que sería fácil crear un botón con solo Dos filas de texto utilizando el módulo de texto en múltiples formatos. Usando Wysiwyg o editor de texto, puede agregar texto, encabezado, enlaces, listas y bloques. Y la mejor parte del módulo de texto es que puede apuntar y estilizar cada uno de estos formatos de texto individuales utilizando la pestaña UI en la configuración de diseño del Visual Builder.

Esto hace que sea muy fácil agregar más líneas de texto y luego estilizar cada línea de texto separada para una apariencia única del botón. Aquí hay un ejemplo rápido de cómo configurar el módulo de texto como un botón de línea múltiple. Si aún no lo ha hecho, cree una nueva página e implemente el Visual Builder. Elija la opción “Construir desde cero”. Luego cree una nueva sección, una fila con una columna. Luego agregue un módulo de texto en una fila. Para obtener el contenido del texto, use la pestaña HTML e ingrese lo siguiente:

Contáctenos

Podemos ayudar

Hay muchos estilos de fondo diferentes que podemos agregar a nuestro módulo, pero para este ejemplo, TET agrega un fondo de gradiente simple: color izquierdo del gradiente de fondo: # Fee140 Color derecho del gradiente de fondo: # FA709A

Luego pase a la pestaña Diseño y use el uso de la pestaña Título para Estrés H3 y H4 de la siguiente manera: Título 3 Fuente de peso: Ultra Bold 3 Fuente Estilo: TT Rúbrica 3 Color de texto: #FFFFFF Título 4 Estilo de fuente: TT Título 4 Color de texto: #FFFFFF Título 4 Dimensión de texto: 16 PX

Ahora todo lo que tenemos que hacer es dimensionar el módulo de texto para sembrar más con un botón. Para hacer esto, actualice lo siguiente: Ancho: 230 PX Lineo personalizado: 1EM arriba, 0.5em abajo, 2em a la izquierda, 2em derecha
Desde el lanzamiento de la nueva opción de desplazamiento de las opciones de división, todos los módulos pueden hacer clic en un botón. Para hacer esto, vuelva a la pestaña de contenido e ingrese una URL de módulo URL.

Aquí esta el resultado final.

Como efecto flotante, puede agregar una sombra de la caja que pasa a través del botón, eventualmente aplicando un nuevo fondo para reemplazar el gradiente. Para esto, abra la configuración del módulo de texto y actualice lo siguiente: Box Sombra: Consulte Posición de captura de pantalla horizontal de la Shadow of the Box: 0 PX (predeterminado), 230 PX (Flotante) Box Sombra Publicación vertical: 0px Color de sombra: RGBA (0.0,0,0) (predeterminado), # Fee140 (flotante)

Así es como se ve Hover.
# 2 Creación de un botón de lista porque los módulos de texto le permiten agregar listas (desordenadas u ordenadas) al contenido, puede aprovechar esta función para crear un botón de lista. Básicamente, todo lo que tiene que hacer es crear una lista de una sola lista en el cuadro de contenido. Luego envuelva el elemento de lista en una etiqueta de encabezado, para que pueda estilizar el elemento bala de la lista y el texto del encabezado separado.

Si aún no lo ha hecho, cree una nueva página e implemente el Visual Builder. Elija la opción “Construir desde cero”. Luego cree una nueva sección, una fila con una columna. Luego agregue un módulo de texto en una fila. Luego agregue el siguiente HTML a la pestaña de texto de la configuración de contenido:

Contáctenos

Es importante envolver el texto del elemento de texto en una etiqueta de título, para que podamos estilizar la bala / número de la lista por separado del texto.
Ahora vaya a la pestaña de diseño y termine el módulo de texto como un botón:
En la categoría de configuración de texto, seleccione la pestaña Lista de pedidos y actualice lo siguiente: Lista de fuentes Ordenada: Exo la lista ordenada: decimal-caructor-cero del estilo de la lista ordenada: fuera de la línea comandada en línea Artículo: 2em in El encabezado de texto de categoría, haga clic en la pestaña H3 y actualice lo siguiente: Título 3 Fuente: EXO Fuente Estilo: TT Sección 3 Color de texto: # 0C71C3 Sección 3 Tamaño de texto: 26 PX Título 3 Altura de línea: 0.3 EMO, Cambie el ancho del módulo y dale un borde y un espacio para que parezca un botón: Ancho (módulo): 262px Módulo de alineación: Centro de forro personalizado: 2EM arriba, 0 px abajo, 2em izquierdo, 2EM esquinas redondeadas a la derecha: 10px2em Width: 1 px chony chony : # 000000 estilo de borde : sólido

Y no olvide agregar un enlace a su módulo a la URL designada en su elección.
Aquí está el diseño final.
Siéntase libre de explorar nuevos tipos de estilos de listas (como Upper Roman) para diseños de listado únicos. # 3 Creación de un botón con esquinas creativas (como una hoja) para el próximo proyecto, aprovecharemos el conjunto de configuración de diseño en un módulo de texto. La idea básica es establecer diferentes valores del radio de la esquina para crear botones de forma única. En este ejemplo, modelaré nuestro módulo para que se vea como un botón de hoja.

Si aún no lo ha hecho, cree una nueva página e implemente el Visual Builder. Elija la opción “Construir desde cero”. Luego cree una nueva sección, una fila con una columna. Luego agregue un módulo de texto en una fila. Abra la configuración del módulo de texto e ingrese el siguiente HTML en la pestaña de texto del cuadro de contenido:

Grow

con nosotros

Esto nos permite poner el texto del botón en dos líneas (reduciendo el ancho vertical) y estilizarlos de forma independiente.

Luego agregue un fondo degradado con un color más “similar a la hoja”. Color izquierdo del fondo de fondo: # 7CDA24 Color derecho del fondo Gradiente: # 26E051 Dirección de gradiente: 90 grados
Ahora pasemos a la configuración de diseño para centrar nuestro texto y estilizar las etiquetas de los títulos. Deberá seleccionar la pestaña H3 para diseñar el título H3 y seleccionar la pestaña H4 para diseñar H4: Orientación de texto: 3 Fuentes Centro de encabezado: Oswald Sección 3 Peso de fuente: Fácil Sección 3 Estilo de fuente: TT Freibic 3 Color de texto: 3 Texto Tamaño: 27 PX Rúbrica 4 Fuente: Oswald Título 4 Estilo de fuente: TT Título 4 Color de texto: #FFFFFF
Continúe actualizando el diseño para darle a su texto el texto y el espacio apropiados para un botón. Ancho: 178 PX Módulo de alineación: Centro de revestimiento personalizado: 2EM arriba, 2em abajo, 1em izquierdo, 1em a la derecha
Finalmente, podemos agregar nuestras esquinas redondeadas personalizadas para darle al módulo una forma de la hoja y luego agregar un tono de caja para que la hoja tenga una vida más grande. Para hacer esta actualización, siga lo siguiente: primero desbloquee la opción de esquina redondeada, para que pueda asignar valores individuales a cada esquina. La esquina superior izquierda: 100 px La esquina inferior derecha: 100 px, luego agregue una sombra de caja … Sombra de caja: vea la posición horizontal de captura de pantalla de la caja: 25 px Box Sombra vertical: -4px potencia de la sombra de la caja: -12px Color de sombra: RGBA (0.0,0,0.25) No olvide agregar la URL del enlace del módulo, de modo que su módulo se conecte a la ubicación deseada.

Aquí está el diseño final.

Para un efecto de desplazamiento, puede alternar los valores de esquina redondeados para colocar el diseño del botón en la dirección opuesta en el ronda:

Así es como se ve el efecto de desplazamiento.

Los pensamientos finales siempre son buenos para pensar de vez en cuando, lo que llega a diseñar sitios web con Div. Esperamos que este tutorial lo ayude a pensar en la división de diseños nuevos y creativos utilizando el módulo de texto. De hecho, sugeriría explorar otros módulos (como el módulo de la propaganda) para múltiples opciones de diseño. Espero tener noticias suyas en los comentarios. ¡Suerte!