Cómo mostrar datos en tiempo real sobre la criptomoneda en su sitio web

Si crea un sitio web en el espacio de criptomonedas, necesita una forma de presentar citas de tiempo real en muchas criptomonedas diferentes (o monedas). Si alguna vez ha invertido personalmente en moneda digital (o negociada), como Bitcoin, puede estar familiarizado con la obsesión de verificar esas cotizaciones de tiempo real (sé que tengo). Por lo tanto, ya sea que esté ejecutando un blog de criptomonedas o un intercambio completo en línea, siempre es una buena idea mantener estos datos visibles para los usuarios. En este tutorial de casos, le mostraré una manera fácil de agregar datos en tiempo real a la criptomoneda en su DIV. Para hacer esto, utilizaré el complemento de widgets de criptomonedas premium para incorporar datos de divisas de tiempo real utilizando códigos de widgets personalizables. También le mostraré una excelente manera de usar estos códigos cortos con Divi para que coincida con el paquete de criptomonedas de diseño.
Vamos a empezar. Sneak Peak aquí hay algunas instantáneas con lo que cubriré en este tutorial:

¿Qué necesita para este tutorial para este tutorial de uso? Necesitará lo siguiente:
El tema de la división (instalado y activo)
PREMIUM DE REGLEMIN para widgets de criptomonedas (instalados y activos)
Paquete de disposición de criptomonedas
Las nociones básicas sobre cómo el complemento funciona el complemento de los widgets de criptomonedas premium es sorprendentemente fácil de usar, sin demasiadas configuraciones. Básicamente, todo lo que tiene que hacer es elegir el widget deseado, elegir un tema y un color para el widget y usar el código corto que genera para mostrarlo en cualquier lugar de su sitio. Puede ver demostraciones de los 10 widgets en su sitio web a Tenga una idea de cómo funcionan. Pero si tiene instalado el complemento, podrá ver una vista previa en vivo de su widget en tiempo real, mientras lo personaliza en el tablero de WordPress. Cierta criptomoneda. Estos incluyen lo siguiente:
En línea: para mostrar citas en una fila de texto en su página / publicación.
Botón: para mostrar comillas en el texto del botón para crear un impulso a la acción que pueda redirigirse a cualquier URL.
Tarjeta: para mostrar cotizaciones de tiempo real de una criptomoneda específica en un formato de tarjeta
Spark: para mostrar ofertas en vivo con líneas o barras de chispa que lo acompañan para ayudar a los usuarios a ver los cambios de precios.
Clasificación: para mostrar citas en vivo de una criptomoneda específica (con algunos valores adicionales) en la sede de la página
Cada widget es personalizable en la configuración del complemento. Las opciones le permiten elegir lo siguiente:

Una criptomoneda específica
Una moneda o moneda fiduciaria que desea citar
Una plantilla y un esquema de color para widget
Un efecto de flash cuando cambia el precio.
Una vez que haya terminado de seleccionar las opciones, se generará un widget corto automáticamente para que pueda copiarlo e insertarlo en su sitio (o módulo de texto) .5 Widgets para mostrar datos para múltiples criptomonedas existe 5 widgets dedicados a una pantalla de datos para una especie particular criptomoneda. Estos incluyen lo siguiente:
Tabla (citas): para mostrar citas para múltiples criptomonedas al mismo tiempo.

Tabla (operaciones) – para mostrar actualizaciones del mercado de transacciones en tiempo real para múltiples criptomonedas.
Portafolio: útil para mostrar cómo los valores de monedas cambian las horas extras para su cartera actual.
Comparación: para comparar las citas de varias criptomonedas una al lado de la otra.
Ticker: para mostrar un ticker de la línea de múltiples criptomonedas.
Las opciones de personalización cambiarán fácilmente para permitir la selección de varias monedas y campos personalizados.
La mayoría de estos widgets compartirán las siguientes opciones:

Seleccione más criptomonede

Elija la cotización (pantalla) la moneda fiduciaria u otra moneda
Elija una plantilla y un esquema de color
Elija los campos
Parpadea cuando cambia la moneda
El widget de la cartera tendrá opciones adicionales para establecer un precio de compra y una cantidad para cada moneda. El widget de tic tendrá opciones adicionales para establecer la velocidad y la dirección. Y el widget del botón tendrá opciones adicionales para ingresar una redirección de URL personalizada y personalizar el texto del botón con variables personalizadas.
La adición de widgets de criptomonedas a la división de criptomonedas puede usar estos códigos cortos en cualquier tema de WordPress, pero una de las ventajas de usar el tema de la Divicidad es que puede agregar fácilmente un código corto a un módulo dentro del Visual Builder. Además, a veces puede usar la configuración del módulo para reemplazar el CSS del complemento utilizado para estilizar el contenido de código corto. Este no siempre es el caso (especialmente cuando el código corto muestra tablas), pero vale la pena explorarlo para evitar CSS adicionales más adelante. Me acertaré a algunos de estos “cambios en el estilo de orden rápido” en los ejemplos a continuación. Ajuste de tres tarjetas de oferta de tiempo real en su página de destino
Para este primer ejemplo, crearé tres libros con una oferta para una determinada criptomoneda y un botón de compra debajo de cada uno (algo similar a Coinbase). Esta configuración funcionaría bien en la página de destino de criptomonedas para incluir algunas monedas de compra populares. El truco es obtener un diseño que coincida con su apariencia para comenzar. Cree una nueva página navegando páginas> nueva adición. Dé el título de su página e implementa el Visual Builder. Abra la barra de configuración en la parte inferior de la página y haga clic en el botón Agregar en la biblioteca. Luego busque el paquete de aspecto de criptomoneda y seleccione. Luego haga clic para usar la plantilla de su página de destino.
Una vez que la apariencia se carga en la página, busque y copie la sección que contiene tres columnas con el servicio. Esto servirá como un excelente fondo (ya diseñado) para nuestros tres libros. Ahora tenemos que generar nuestro código corto para nuestro primer libro. En una ventana separada, navegue por la tarjeta Widgets> Card. Actualice las opciones de la siguiente manera: Cryptocurrency: Bitcoin (para seleccionar otra moneda, haga clic en el menú de caída y comience a escribir el nombre) Fiat Moneda u otra moneda: USD Plantilla: Color Fondo: Bleumarin Flash: Sí, esto debería generar el siguiente código corto : [cryptoCurrency_widget type = “Box” Symbol = “BTC-Wed” Template = “Background” Color = “Navy” Flash = “1”] Ahora copie el código corto en el portapapeles y vuelva a la página de destino. Abra la configuración del módulo de propaganda para la propaganda en la primera columna. Elimine el título y la imagen utilizados actualmente. Elimine el contenido allí en el presente y pegue en el código corto.

Luego, acceda a la configuración de diseño y restaura el relleno al valor predeterminado, hecha a la derecha en el relleno y haciendo clic en un reinicio personalizado.
Guarde la configuración.
Consejo: también puede cambiar la fuente del cuerpo y la altura de la línea para continuar personalizando el texto que se muestra en el widget.Ahora borre los dos módulos en las columnas restantes y copie y pegue el módulo que acaba de crear en las columnas restantes.Ahora todo lo que tiene que hacer es repetir el proceso de crear nuevos códigos cortos y su pegado en la zona de contenido de los módulos que acaba de copiar.Las opciones de código corto deben seguir siendo las mismas, excepto por el nombre de la criptomoneda que desea mostrar.
Para crear los botones de compra en cada uno de nuestros libros, primero debemos crear nuestro primer brevedad. Navegue al botón de criptomonedas>. Luego, elija las opciones para su botón, observe, la URL predeterminada redirige a Changelly para completar el proceso de compra. Pero la URL se puede configurar en lo que quieras. Si desea proporcionar la capacidad de comprar / vender criptomonedas en su propio sitio, simplemente las redirigiría a un proceso de registro o verificaría la página para esa moneda. También puede redirigirlos a otro sitio de terceros para completar la compra. Además, las variables de texto disponibles le permiten incorporar cualquier valor de tiempo real que se muestre en su botón para este ejemplo, actualizaré lo siguiente: criptomoneda: plantilla de bitcoin: esquema de color básico: azul lo dejaré como predeterminado. Esto debería generar el siguiente código corto. [cryptoCurrency_widget type = “Button” Symbol = “Btc ~ USD” Template = “color” color = “Navy” url = “https://changelly.com/?ref_id=7c53196afedb” target = “_ buy” buy “buy” buy “buy” buy ” {Nombre} @ {tosymbolst} {precio} “]
Ahora copie esto en el portapapeles y vuelva a la edición de la página. Tendremos que agregar un módulo de texto debajo del módulo de propaganda en la primera columna. Luego ingrese el código corto en el cuadro de contenido. Actualice la siguiente configuración de diseño en la pestaña de diseño: Fuente Texto: fuente sans Pro (para que coincida con la fuente) Estilo de texto: TT Text Orientación: Centro (esto centrará el botón) Enlace de texto: # 4328B7 (para que coincida con el púrpura en apariencia ) Para una verificación rápida para ver si tiene todo, haga clic en el botón Filtro en la parte superior derecha del cuadro de configuración y haga clic para mostrar solo los estilos modificados. Eso debería ver. Ahora copie el módulo de texto con su nuevo código corto en cada uno de los otros módulos de propaganda en su turno. Luego repita el proceso de crear un nuevo código corto para cada uno de sus botones de criptomoneda. Elimine la línea directamente debajo de la fila actual para limpiar las cosas. Aquí esta el resultado final.
Si no le gustan los botones blancos, siempre puede elegir la plantilla de color con el esquema de color azul. Luego reinicie el color del enlace para cada modo de regreso al color blanco predeterminado. Obtendrá los resultados finales:

Cambiando los colores con CSS personalizado Si está frustrado por los esquemas de color construidos, aquí hay algunos fragmentos CSS para obtener los colores deseados: para deshacerse del color de la tarjeta, permita el camino hacia el color de fondo (esto se ajustará mejor con la apariencia) , ingrese el siguiente CSS personalizado en el personalizador del tema: .pcw-box.pcw-background.pcw-ct-navy {

Background-Kolor: ¡Transparente! Importante;

}
Esto reemplazará el color del esquema de color azul marino en la tarjeta, así que asegúrese de que el esquema de color se seleccione para obtener anulación de CSS. Para cambiar el color de fondo del botón para que coincida con el color del botón Púrpura de luz en el aspecto, agregue el siguiente CSS personalizado: .pcw-Button.pcw-cololor.pcw-ct-navy {de fondo: #4328B7!

}

En su lugar, con fragmentos CSS, hay varias otras opciones de diseño disponibles. Ahora puede regresar y agregar algunos rellenos personalizados a las borrones para crear un espacio vertical para. Además, puede agregar el botón corto debajo de cada tarjeta corta para cada uno de sus módulos para obtener una alternativa de look de la caja con el botón en el interior. El resultado final es muy hermoso.

Así es como se ven las actualizaciones de tiempo real.
Así es como se ve en los dispositivos móviles.
Creación de una tabla de cotización en la página de destino Si se ejecuta debajo de la página de destino, verá una sección titulada “Valores de mercado de moneda digital” con una imagen simulada de una tabla. Puede agregar fácilmente una tabla como esta con el código de tabla de la tabla (comillas). Navegue a Widgets de criptomonedas> Tabla (citas). Luego, elija las opciones para su comida, asegúrese de agregar / eliminar campos personalizados como desee. Para este ejemplo, dejé las opciones para su configuración predeterminada, excepto que eliminé el campo de modificación y agregué el volumen de 24 h y la comida.
Ahora solo tenemos que tomar el código corto y volver a la página de destino. Simplemente reemplace el módulo de imagen que muestra la tabla simulada con un módulo de texto que contiene su nuevo código corto. ¡Esto es! Agregar enlaces a sus páginas de criptomonedas en sus tablas. Si usa la tabla de widgets (cotizaciones) o la tabla (transacciones), puede optar por reemplazar la moneda y / o el nombre con una moneda (enlace) y / o nombre (enlace) depositado . Esto le permitirá redirigir a los usuarios a ciertas páginas de moneda en su sitio o a cualquier URL que elija. Para controlar la estructura de la URL de los enlaces, explore los widgets de criptomonedas> Configuración. Allí puede establecer una URL genérica para todos los enlaces y / o sobrescribir los enlaces a cada moneda.
Por ejemplo, si desea alojar sus propias páginas de monedas y diseñarlas con DIV, puede establecer la URL en “/ {name}”. Luego, asegúrese de que el título / babosa de la página coincida con el nombre de la moneda correspondiente. Entonces, si desea crear una página dedicada de Bitcoin, su enlace permanente debería verse así: https://www.website.com/bitcoin
Antes de dejar que se vaya, aquí hay una captura de pantalla de una página de monedas que creé con la Divic usando una tabla de clasificación de widgets, un botón de widget y un widget de comparación.

Puede que tenga tiempo para cubrir esto en el flujo en vivo, pero por ahora espero ayudar al flujo de jugos. ¿Sensible? Estaba un poco preocupado por la reacción de los widgets (especialmente las tablas), porque ajustar la ventana del navegador al tamaño móvil no siempre producía los mejores resultados, pero una verificación rápida de mi dispositivo móvil real me aseguró que todos estos widgets (incluidas las comidas ) ajuste maravillosamente. Aquí hay un ejemplo de cómo se ve una tabla en el teléfono inteligente. Final obstaculiza con 10 widgets diferentes y más plantillas y esquemas de color que puede elegir, los widgets de criptomonedas premium pueden generar fácilmente todas las citas de tiempo real que la criptomona necesitaría en su sitio web y La combinación de códigos cortos con módulos Divi realmente puede aliviar el dolor de la asociación de diseño con su apariencia. Espero tener noticias suyas en los comentarios. ¡Suerte!