homefinance blog
Las tablas de precios horizontales son una excelente manera de promover productos con muchas características. Y, con el nuevo aspecto de las cinco columnas de la Divica, esto es sorprendentemente fácil de hacer. Sin embargo, como en el caso de cualquier aspecto que tenga cinco o más columnas, el desafío llega a hacer que la apariencia sea receptiva, de modo que se vea bien en el móvil. En este tutorial, le mostraré cómo crear tablas de tarifas horizontales que se ven geniales en todos los dispositivos. E incluso le mostraré lo fácil que es copiar sus tablas de precios horizontales y usar nuevas funciones de diseño, como “buscar y reemplazar” para cambiar rápidamente el esquema de color de cada tabla en unos pocos clics.
Vamos a empezar. Tirar del ojo
Nociones básicas para este tutorial, todo lo que necesitas es div. Y usaremos Visual Builder. Como construiremos las tablas desde cero, deberá crear una nueva página, implementar el Visual Builder y luego seleccionar la opción “Cree el aspecto desde cero”.
Después de eso, estás listo para comenzar. ¡Vamos a hacerlo! Configuración de la fila con cinco columnas para tablas de tarifas horizontales para el principio, para ofrecer cinco columnas a la sección que ya nos está esperando en el fabricante visual.
Antes de comenzar a agregar módulos, actualice la configuración de la sección para tener un ancho personalizado sin ningún relleno superior o inferior.
Ancho: 1200 PX Sección Alineación: Centro de revestimiento personalizado: 0 PX hacia arriba, 0 PX Down
Luego acceda a la configuración de la fila para dar rápidamente un color de fondo a su turno y también a las tres columnas intermedias, de la siguiente manera: Color de fondo: # 00CBC9 Columna 2 Color de fondo: # 00CBC9 Columna 3 Color de fondo: #EEEEEE Color 4 de fondo : #EEEEEEEA luego actualice el tamaño de la siguiente manera: haga que esta fila se complete el ancho: Sí, el ancho de la canaleta: 1 iguala las alturas de la columna: Sí
Tendremos que volver a la configuración promedio en un poco para actualizar el espacio, pero por ahora comenzamos a agregar borrones a cada una de nuestras columnas de contenido.
Llenando las columnas con módulos de contenido El título del producto en la primera columna, agregue un módulo de texto con el siguiente encabezado en el cuadro de contenido (en la pestaña de texto):
Starter
Servirá como un lugar para el título del plan o producto que presente. En este ejemplo, este sería un plan de “inicio” de una especie. Luego, actualice la siguiente configuración de diseño: Sección 2 Estilo de fuente: TT Sección 2 Color de texto: #FFFFFT 2 Tamaño de texto: 38 PX Lineo personalizado (escritorio): 90% de arriba, 90% de baja, 10% de revestimiento personalizado (tableta): 30% ARRIBA, 30% ABAJO
Agregue borrones para los títulos de la categoría de funciones en la segunda columna, agregue un módulo de propaganda. Luego elimine el texto de finalización del cuadro de contenido y deje el texto del título usted mismo. Luego elija usar un icono en lugar de una imagen y actualice el icono con uno de sus elecciones.
Cambie a la pestaña Diseño y actualice el resto de la configuración de la siguiente manera: Color del icono: # 00CBC9 Coloque la imagen / icono: Texto izquierdo Título del Título: 16 PX Lineo personalizado: 2 VW abajo del borde de la fila inferior: 4 PX Color del marco inferior: #CCCCCDE La propaganda se utilizará como título de características en las columnas 2, 3 y 4, puede copiar el módulo de la propaganda y pegarlo en la segunda y tercera columna.
Me doy cuenta de que el espacio no parece mucho en este momento. Y puede estar tentado a agregar un cierto espacio al nivel del módulo, pero para este diseño, me parece más fácil hacer ajustes de espacio a la columna (la configuración de las filas debajo). Llegaremos a esto más tarde. Agregue módulos de texto para una lista de descripciones de características y luego agregue un módulo de texto debajo del texto en la segunda columna. Luego agregue el siguiente código HTML de la tabla al cuadro de contenido:
La descripción de la función va aquí.
La descripción de la función va aquí.
La descripción de la función va aquí.
La descripción de la función va aquí.
Tipo de lista desordenada: Lista cuadrada de huellas de la lista desordenada: 4 PX Lineo personalizado: 20 px superior, 20 px abajo, 5% izquierda, 5% derecho
Ahora, como lo hice para las borrachas, continúe y copie el módulo de texto y pegue debajo de cada uno de los módulos de propaganda en las columnas 3 y 4.
Agregando el precio y el botón a la última columna en la última columna (columna cinco), usaré un módulo de tabla de precios para obtener el texto de diseño con el signo de dólar. Esto es todo lo que realmente necesitamos del módulo de Tablas de precios, por lo que eliminaré el resto de los elementos de contenido y diseño, dejando el texto del precio y el signo del dólar. Podría usar el botón incluido en el módulo de mesa de precios, pero esto fue un poco más difícil hacer una magia receptiva en la tableta (verá lo que quiero decir más adelante). Entonces usaré un módulo de botón. Continúe y agregue el módulo de Tablas de precios a la quinta columna. Elimine una de las dos tablas de forma predeterminada haciendo clic en el icono de basura a la derecha de una de ellas. Luego elimine el color de fondo agregando un código de color completamente transparente. Color de fondo: RGBA (255,255,255,0) Luego actualice lo siguiente: Encabezado de tabla Fondo: RGBA (255,255,255,0) Color de texto de moneda: #FFFFFFFFFFFFF Currency and Frecuencia Texto: 30 PX Color de texto: #FFFFFFF: 0 PX Margen personalizado (Tablet ): -100% margen personalizado correcto (teléfono inteligente): 0% ENLIZACIÓN PERSONALIZADO CORRECTO: 0 PX arriba, 10 px abajo, 0 px izquierda, 0 px derecha
Ahora, acceda a la configuración individual de la tabla haciendo clic en el icono de la rueda a la izquierda de la pantalla de la tabla individual.
Ahora elimine el contenido predeterminado para el título, el subtítulo y el contenido. Esto dejará solo el texto de divisas y el precio.
Ahora sé lo que piensas en este momento. ¿Qué tienes que hacer con esa línea de borde por debajo del texto del precio? Bueno, hay un pequeño fragmento de CSS personalizado para esto. Vaya a la pestaña avanzada y agregue los siguientes CSS al cuadro de entrada de pinchazo superior: Los mejores precios: Border: Ninguno;
¡Ahora así es como elimina con éxito la tabla de precios solo para el símbolo de precios y el texto de divisas!
Para el botón, agregue un módulo de botón debajo del módulo de Tablas de precios y actualice lo siguiente: Botón Alineación: Centro de color de texto: Margen abierto (tableta): -100% margen personalizado correcto (teléfono inteligente): 0% correcto
El margen personalizado coincidirá con el margen que agregué al módulo de mesa de precios para obtener un módulo de ancho completo en la tableta. Debido a que las cinco columnas en la tableta colocarán la quinta columna en el lado izquierdo de dos columnas, tirar del módulo con -100% a la derecha forzará el módulo en el ancho completo de la fila.
Agregar el diseño de las flechas y el espacio sensible de las columnas Agregar la flecha estratificando los gradientes para crear el efecto de diseño de la flecha en la primera columna, estableceremos dos fondos de gradiente. El primer fondo de gradiente se agregará al nivel de columna. Agregaremos el siguiente más tarde al nivel del módulo. Para agregar el fondo del gradiente, vaya a la configuración de la fila y agregue lo siguiente: Columna 1 Gradiente de tierra izquierda: RGBA (255,255,255.0) Columna 1 Right -Color Fondo: #EEEEE (esto debería coincidir con el color de fondo de una columna 2) Dirección de gradiente: -245 grados Posición inicial: 75% Posición final: 0%
Guarde la configuración y pase a la configuración del módulo de texto en la columna uno. Aquí agregaremos la segunda capa de gradiente de fondo para completar la flecha. Actualización de lo siguiente: Columna 1 Gradiente de fondo Color izquierdo: #EEEEEEEEE COLUNTA 1 Fondo de gradiente de gradiente Color derecho: RGBA (255,255,255,0) Dirección de gradiente: 245 grados Posición inicial: 25% Posición final: 0% Observe que los valores son opuestos uno Frente al otro. Por ejemplo, el orden de los colores ha cambiado, 245 grados han cambiado de negativo a positivo y el 75% ahora es del 25% (diferencia). Esta es la forma en que obtiene los lados del punto de flecha es perfectamente simétrica. La distantación de la fila y las columnas regresan a la configuración ordinaria y ajustar el espacio y de nuestras columnas actualizando lo siguiente: Interferencia personalizada: 0 PX hacia arriba, 0 PX abajo ., 0 px Right Personalized Fining 2: 5% más, 5% inferior, 2% izquierda, 2% Right Personalized Fining 3: 5% más, 5% de baja, 2% izquierda, 2% derecho 4 Capítulos personalizados: 5% UP , 5% inferior, 2% izquierda, 2% de revestimiento personalizado derecho de 5: 10%, 10% inactividad
Tal vez se pregunte por qué no usé solo un ancho de 2 transmisiones y terminé con él. Bueno, eso es porque quería maximizar el espacio en las columnas que contienen tanto como sea posible para mejorar la legibilidad en todos los dispositivos. Cada espacio pequeño que podemos ahorrar. Por lo tanto, los bordes entre las columnas se crean con porcentajes de llenado izquierdo y derecho. Duplicando la tabla para nuevas tablas y esquemas de color obvios, querrá tener más tablas de precios horizontales que los usuarios puedan comparar. Para crear la segunda tabla de precios, copie la sección completa que contiene la primera tabla que creó. Luego abra la configuración de la fila y pase con el mouse sobre el color de fondo y haga clic en Buscar y reemplazar.
Debajo de “dentro de” usted elige “esta sección”. Debajo del “Reemplazar el ancho”, agregue el color: # F84F51 y luego marque la casilla para reemplazar todos los valores que se encuentran en la sección (no solo el color de fondo).
Luego haga clic en el reemplazo y siga cómo sucede la magia. Esta es una forma rápida y fácil de cambiar todas las canchas de color anteriores con un nuevo color. No olvide guardar la configuración de la fila antes de salir para guardar sus cambios. Ahora tienes una nueva mesa con un nuevo esquema de color.
Repita este proceso nuevamente para agregar otra tabla de colores: # bdc958
Hacer una mesa recomendada para que una de sus tablas parezca presentarse y destacar un poco, puede agregar una sombra de la caja a la sección que sostiene la mesa, así como puede cambiar el color gris utilizado para los fondos y Grados Hermoso color blanco.Para esto, vaya a la configuración de la sección para la segunda sección (la media) y actualice lo siguiente: Box Sombra: Consulte el cuadro Sombra Posición vertical: 0px Potencia de la noche de la caja: 80 PX
Para reemplazar el color de fondo gris, vaya a la configuración de la fila y busque el color de fondo de la columna 2 (#EEEEEE). Haga clic en el derecho y haga clic en “Buscar y reemplazar”. Actualice lo siguiente: en “dentro de” Elija “esta sección”. Debajo del “Reemplazar el ancho”, agregue el color: #ffffff y luego marque la casilla para reemplazar todos los valores que se encuentran en la sección (no solo el color de fondo). Luego haga clic en “Reemplazar”. Usando encontrar y reemplazar para probar fuentes si desea usar una fuente diferente en toda la tabla, puede probar fácilmente a otros usando la función “Buscar y reemplazar”. Dejé intencionalmente la fuente predeterminada para todos los módulos para facilitar este proceso. Para cambiar la fuente para toda la página de la tabla, todo lo que tiene que hacer es abrir la configuración del módulo de texto en la primera columna de cualquier sección de la tabla (en realidad puede ser cualquier módulo que use la fuente predeterminada en su página). Luego, haga clic en la derecha en la fuente 2 de encabezado utilizada y seleccione “Buscar y reemplazar”. Luego actualice lo siguiente: En “Inside” Keep “esta página”. En “Reemplace el ancho”, seleccione una fuente (uso Roboto condensado). Luego marque la casilla para reemplazar todos los valores que se encuentran en la sección (o no puede verificarla para reemplazar todas las fuentes H2). Luego haga clic en “Reemplazar”. Ahora todas las fuentes se han modificado en toda la página. ¡Eso es todo! Ahora, las tablas de precios horizontales están completas. Verifiquemos el resultado.
Ajustar en cinco columnas en la tableta y el teléfono inteligente también funciona maravillosamente.
