TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo agregar una tabla de precios en el sitio de Weebly?

1

Anteriormente, Weebly no tenía ninguna opción para agregar un widget de tabla de precios en el editor. Sin embargo, más tarde Weebly introdujo una aplicación gratuita "Tabla de precios" a través del Centro de aplicaciones. Esta aplicación le ayuda a agregar tablas de precios simples en su sitio. Esta es una de las aplicaciones gratuitas de Weebly y esperamos que haya muchas otras aplicaciones de tablas de precios en futuro para que el usuario seleccione. En este artículo, explicaremos cómo agregar una tabla de precios gratuita en el sitio de Weebly.

Relacionado: ¿Cómo agregar un organigrama en el sitio de Weebly?

Agregar tabla de precios en Weebly

Puede utilizar los siguientes métodos para agregar una tabla de precios en Weebly.

  1. Uso de la aplicación Price Chart desde App Center
  2. Widget de tabla de precios usando un script personalizado

Expliquemos ambos métodos en detalle.

Aplicación de gráfico de precios de Weebly

Primero, hablemos sobre la aplicación de gráfico de precios que está disponible en la categoría "eCommerce" del Centro de aplicaciones Weebly. Cuando esté en el editor de Weebly, vaya a la sección "Aplicaciones" y busque la aplicación Pricing Chart. Después de encontrar la aplicación, puede conectarla a su sitio. Consulte nuestro artículo sobre cómo conectar aplicaciones desde Weebly App Center a su sitio.

¿Cómo agregar una tabla de precios en el sitio de Weebly?

Aplicación de gráfico de precios de Weebly

Una vez que haya conectado correctamente la aplicación, vaya a la pestaña "Crear" y arrastre el elemento a la página donde desea agregar la tabla de precios. La tabla de precios se verá más abajo. Puede personalizar el texto, los botones, el tamaño y los colores de la tabla.

¿Cómo agregar una tabla de precios en el sitio de Weebly?

Tabla de precios creada con la aplicación Weebly Pricing Chart

Características de la aplicación de gráfico de precios gratuito

La aplicación de gráfico de precios es publicada por Weebly y, por lo tanto, puede asumir que la integración con el editor de Weebly será más fácil que cualquier otra aplicación. Recuerde, debe conectar la aplicación a cada uno de sus sitios por separado y utilizar las siguientes funciones:

  • El widget tiene un plan, funciones y elementos de botón juntos.
  • Este es un widget completo, lo que significa que no puede arrastrar ningún otro elemento intermedio.
  • Aunque el widget permite planes y funciones ilimitados, recomendamos estrictamente de 3 a 5 planes.
  • Puede personalizar los colores de fondo según sus necesidades.

Widget de tabla de precios usando script

Se supone que la aplicación Weebly por defecto responde y se alinea automáticamente en los dispositivos móviles. Sin embargo, no funciona correctamente en móviles y también crea una experiencia molesta al editar el contenido en el editor. Por lo tanto, la segunda opción que explicamos aquí es el widget de tabla de precios personalizado que utiliza scripts gratuitos StyleFix y PrefixFree. El widget se verá a continuación:

¿Cómo agregar una tabla de precios en el sitio de Weebly?

Tabla de precios mediante script

Puede agregar el widget en su sitio Weebly siguiendo los pasos a continuación.

  • Añadiendo el guión
  • Agregar estilo CSS personalizado
  • Insertar código HTML

Agregar el guión

Agregue el siguiente script en la sección "Páginas> Elija la página> Configuración de SEO> Código de pie de página" de su sitio Weebly.

< script > /** * StyleFix 1.0.3 & PrefixFree 1.0.7 * @author Lea Verou * MIT license */ (function() { function t(e, t) { return [].slice.call((t || document).querySelectorAll(e)) } if (!window.addEventListener) return; var e = window.StyleFix = { link: function(t) { try { if (t.rel !== "stylesheet" || t.hasAttribute("data-noprefix")) return } catch (n) { return } var r = t.href || t.getAttribute("data-href"), i = r.replace(/[^/]+$/, ""), s = (/^[a-z]{3,10}:/.exec(i) || [""])[0], o = (/^[a-z]{3,10}://[^/]+/.exec(i) || [""])[0], u = /^([^?]*)??/.exec(r)[1], a = t.parentNode, f = new XMLHttpRequest, l; f.onreadystatechange = function() { f.readyState === 4 && l() }; l = function() { var n = f.responseText; if (n && t.parentNode && (!f.status || f.status < 400 || f.status > 600)) { n = e.fix(n, !0, t); if (i) { n = n.replace(/url(s*?((?:"|')?)(.+?)1s*?)/gi, function(e, t, n) { return /^([a-z]{3,10}:|#)/i.test(n)? e: /^///.test(n)? 'url("' + s + n + '")': /^//.test(n)? 'url("' + o + n + '")': /^?/.test(n)? 'url("' + u + n + '")': 'url("' + i + n + '")' }); var r = i.replace(/([^$+[]?{}.=!:(|)])/g, "$1"); n = n.replace(RegExp("b(behavior:s*?url('?"?)" + r, "gi"), "$1") } var l = document.createElement("style"); l.textContent = n; l.media = t.media; l.disabled = t.disabled; l.setAttribute("data-href", t.getAttribute("href")); a.insertBefore(l, t); a.removeChild(t); l.media = t.media } }; try { f.open("GET", r); f.send(null) } catch (n) { if (typeof XDomainRequest != "undefined") { f = new XDomainRequest; f.onerror = f.onprogress = function() {}; f.onload = l; f.open("GET", r); f.send(null) } } t.setAttribute("data-inprogress", "") }, styleElement: function(t) { if (t.hasAttribute("data-noprefix")) return; var n = t.disabled; t.textContent = e.fix(t.textContent, !0, t); t.disabled = n }, styleAttribute: function(t) { var n = t.getAttribute("style"); n = e.fix(n, !1, t); t.setAttribute("style", n) }, process: function() { t('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link); t("style").forEach(StyleFix.styleElement); t("[style]").forEach(StyleFix.styleAttribute) }, register: function(t, n) { (e.fixers = e.fixers || []).splice(n === undefined? e.fixers.length: n, 0, t) }, fix: function(t, n, r) { for (var i = 0; i < e.fixers.length; i++) t = e.fixers[i](t, n, r) || t; return t }, camelCase: function(e) { return e.replace(/-([a-z])/g, function(e, t) { return t.toUpperCase() }).replace("-", "") }, deCamelCase: function(e) { return e.replace(/[A-Z]/g, function(e) { return "-" + e.toLowerCase() }) } }; (function() { setTimeout(function() { t('link[rel="stylesheet"]').forEach(StyleFix.link) }, 10); document.addEventListener("DOMContentLoaded", StyleFix.process, !1) })() })(); (function(e) { function t(e, t, r, i, s) { e = n[e]; if (e.length) { var o = RegExp(t + "(" + e.join("|") + ")" + r, "gi"); s = s.replace(o, i) } return s } if (!window.StyleFix || !window.getComputedStyle) return; var n = window.PrefixFree = { prefixCSS: function(e, r, i) { var s = n.prefix; n.functions.indexOf("linear-gradient") > -1 && (e = e.replace(/(s|:|,)(repeating-)?linear-gradient(s*(-?d*.?d*)deg/ig, function(e, t, n, r) { return t + (n || "") + "linear-gradient(" + (90 - r) + "deg" })); e = t("functions", "(s|:|,)", "s*(", "$1" + s + "$2(", e); e = t("keywords", "(s|:)", "(s|;|}|$)", "$1" + s + "$2$3", e); e = t("properties", "(^|{|s|;)", "s*:", "$1" + s + "$2:", e); if (n.properties.length) { var o = RegExp("b(" + n.properties.join("|") + ")(?!:)", "gi"); e = t("valueProperties", "b", ":(.+?);", function(e) { return e.replace(o, s + "$1") }, e) } if (r) { e = t("selectors", "", "b", n.prefixSelector, e); e = t("atrules", "@", "b", "@" + s + "$1", e) } e = e.replace(RegExp("-" + s, "g"), "-"); e = e.replace(/-*-(?=[a-z]+)/gi, n.prefix); return e }, property: function(e) { return (n.properties.indexOf(e)? n.prefix: "") + e }, value: function(e, r) { e = t("functions", "(^|s|,)", "s*(", "$1" + n.prefix + "$2(", e); e = t("keywords", "(^|s)", "(s|$)", "$1" + n.prefix + "$2$3", e); return e }, prefixSelector: function(e) { return e.replace(/^:{1,2}/, function(e) { return e + n.prefix }) }, prefixProperty: function(e, t) { var r = n.prefix + e; return t? StyleFix.camelCase(r): r } }; (function() { var e = {}, t = [], r = {}, i = getComputedStyle(document.documentElement, null), s = document.createElement("div").style, o = function(n) { if (n.charAt(0) === "-") { t.push(n); var r = n.split("-"), i = r[1]; e[i] = ++e[i] || 1; while (r.length > 3) { r.pop(); var s = r.join("-"); u(s) && t.indexOf(s) === -1 && t.push(s) } } }, u = function(e) { return StyleFix.camelCase(e) in s }; if (i.length > 0) for (var a = 0; a < i.length; a++) o(i[a]); else for (var f in i) o(StyleFix.deCamelCase(f)); var l = { uses: 0 }; for (var c in e) { var h = e[c]; l.uses < h && (l = { prefix: c, uses: h }) } n.prefix = "-" + l.prefix + "-"; n.Prefix = StyleFix.camelCase(n.prefix); n.properties = []; for (var a = 0; a < t.length; a++) { var f = t[a]; if (f.indexOf(n.prefix) === 0) { var p = f.slice(n.prefix.length); u(p) || n.properties.push(p) } } n.Prefix == "Ms" && !("transform" in s) && !("MsTransform" in s) && "msTransform" in s && n.properties.push("transform", "transform-origin"); n.properties.sort() })(); (function() { function i(e, t) { r[t] = ""; r[t] = e; return !!r[t] } var e = { "linear-gradient": { property: "backgroundImage", params: "red, teal" }, calc: { property: "width", params: "1px + 5%" }, element: { property: "backgroundImage", params: "#foo" }, "cross-fade": { property: "backgroundImage", params: "url(a.png), url(b.png), 50%" } }; e["repeating-linear-gradient"] = e["repeating-radial-gradient"] = e["radial-gradient"] = e["linear-gradient"]; var t = { initial: "color", "zoom-in": "cursor", "zoom-out": "cursor", box: "display", flexbox: "display", "inline-flexbox": "display", flex: "display", "inline-flex": "display", grid: "display", "inline-grid": "display", "min-content": "width" }; n.functions = []; n.keywords = []; var r = document.createElement("div").style; for (var s in e) { var o = e[s], u = o.property, a = s + "(" + o.params + ")"; !i(a, u) && i(n.prefix + a, u) && n.functions.push(s) } for (var f in t) { var u = t[f]; !i(f, u) && i(n.prefix + f, u) && n.keywords.push(f) } })(); (function() { function s(e) { i.textContent = e + "{}"; return !!i.sheet.cssRules.length } var t = { ":read-only": null, ":read-write": null, ":any-link": null, "::selection": null }, r = { keyframes: "name", viewport: null, document: 'regexp(".")' }; n.selectors = []; n.atrules = []; var i = e.appendChild(document.createElement("style")); for (var o in t) { var u = o + (t[o]? "(" + t[o] + ")": ""); !s(u) && s(n.prefixSelector(u)) && n.selectors.push(o) } for (var a in r) { var u = a + " " + (r[a] || ""); !s("@" + u) && s("@" + n.prefix + u) && n.atrules.push(a) } e.removeChild(i) })(); n.valueProperties = ["transition", "transition-property"]; e.className += " " + n.prefix; StyleFix.register(n.prefixCSS) })(document.documentElement); < /script>

Agregar código CSS personalizado

El segundo paso es agregar un código CSS personalizado para la tabla de precios en "Páginas> Elija la página> Configuración de SEO> Código de encabezado".

¿Cómo agregar una tabla de precios en el sitio de Weebly?

Agregar código de encabezado en la página

<style type="text/css" media="screen"> .pricing_table { line-height: 150%; font-size: 12px; margin: 0 auto; width: 75%; max-width: 800px; padding-top: 10px; } .price_block { text-align: center; width: 100%; color: #fff; float: left; list-style-type: none; transition: all 0.25s; position: relative; box-sizing: border-box; margin-bottom: 10px; border-bottom: 1px solid transparent; } /*Pricing Table Header Block with Plans*/ .pricing_table h3 { text-transform: uppercase; padding: 5px 0; background: #333; margin: -10px 0 1px 0; } /*Price tag section*/ .price { display: table; background: #444; width: 100%; height: 70px; } .price_figure { font-size: 24px; text-transform: uppercase; vertical-align: middle; display: table-cell; } .price_number { font-weight: bold; display: block; } .price_tenure { font-size: 11px; } /* Pricing Plan Features*/ .features { background: #def0f4; color: #000; } .features li { padding: 8px 15px; border-bottom: 1px solid #ccc; font-size: 11px; list-style-type: none; } .footer { padding: 15px; background: #DEF0F4; } .action_button { text-decoration: none; color: #fff; font-weight: bold; border-radius: 5px; background: linear-gradient(#666, #333); padding: 5px 20px; font-size: 11px; text-transform: uppercase; } .price_block:hover { box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5); transform: scale(1.04) translateY(-5px); z-index: 1; border-bottom: 0 none; } .price_block:hover .price { background:linear-gradient(#DB7224, #F9B84A); box-shadow: inset 0 0 45px 1px #DB7224; } .price_block:hover h3 { background: #222; } .price_block:hover .action_button { background: linear-gradient(#F9B84A, #DB7224); } @media only screen and (min-width: 480px) and (max-width: 768px) { .price_block {width: 50%;} .price_block:nth-child(odd) {border-right: 1px solid transparent;} .price_block:nth-child(3) {clear: both;} .price_block:nth-child(odd):hover {border: 0 none;} } @media only screen and (min-width: 768px){ .price_block {width: 25%;} .price_block {border-right: 1px solid transparent; border-bottom: 0 none;} .price_block:last-child {border-right: 0 none;} .price_block:hover {border: 0 none;} } .skeleton, .skeleton ul, .skeleton li, .skeleton div, .skeleton h3, .skeleton span, .skeleton p { border: 5px solid rgba(255, 255, 255, 0.9); border-radius: 5px; margin: 7px !important; background: rgba(0, 0, 0, 0.05) !important; padding: 0 !important; text-align: left !important; display: block !important; width: auto !important; height: auto !important; font-size: 10px !important; font-style: italic !important; text-transform: none !important; font-weight: normal !important; color: black !important; } .skeleton .label { font-size: 11px !important; font-style: italic !important; text-transform: none !important; font-weight: normal !important; color: white !important; border: 0 none !important; padding: 5px !important; margin: 0 !important; float: none !important; text-align: left !important; text-shadow: 0 0 1px white; background: none !important; } .skeleton { display: none !important; margin: 100px !important; clear: both; } </style>

Puede personalizar cualquiera de los atributos como tamaño de fuente, color, etc. según su necesidad para adaptarse al diseño de su sitio.

Agregar código HTML

El último paso es arrastrar y soltar un elemento " Código incrustado " en la página donde desea agregar la tabla de precios e insertar el siguiente código HTML. No olvide reemplazar el contenido y las URL de los enlaces con las suyas.

<ul class="pricing_table"> <li class="price_block"> <h3>Starter</h3> <div class="price"> <div class="price_figure"> <span class="price_number">FREE</span> </div> </div> <ul class="features"> <li>1GB Storage</li> <li>2 Clients</li> <li>5 Active Projects</li> <li>5 Colors</li> <li>Free Goodies</li> <li>24/7 Email support</li> </ul> <div class="footer"> <a href="#" class="action_button">Buy Now</a> </div> </li> <li class="price_block"> <h3>Basic</h3> <div class="price"> <div class="price_figure"> <span class="price_number">$9.99</span> <span class="price_tenure">per month</span> </div> </div> <ul class="features"> <li>2GB Storage</li> <li>5 Clients</li> <li>10 Active Projects</li> <li>10 Colors</li> <li>Free Goodies</li> <li>24/7 Email support</li> </ul> <div class="footer"> <a href="#" class="action_button">Buy Now</a> </div> </li> <li class="price_block"> <h3>Premium</h3> <div class="price"> <div class="price_figure"> <span class="price_number">$19.99</span> <span class="price_tenure">per month</span> </div> </div> <ul class="features"> <li>5GB Storage</li> <li>10 Clients</li> <li>20 Active Projects</li> <li>20 Colors</li> <li>Free Goodies</li> <li>24/7 Email support</li> </ul> <div class="footer"> <a href="#" class="action_button">Buy Now</a> </div> </li> <li class="price_block"> <h3>Lifetime</h3> <div class="price"> <div class="price_figure"> <span class="price_number">$999</span> </div> </div> <ul class="features"> <li>Unlimited Storage</li> <li>Unlimited Clients</li> <li>Unlimited Projects</li> <li>Unlimited Colors</li> <li>Free Goodies</li> <li>24/7 Email support</li> </ul> <div class="footer"> <a href="#" class="action_button">Buy Now</a> </div> </li> </ul> <ul class="skeleton pricing_table" style="margin-top: 100px; overflow: hidden;"> <li class="label" style="margin: 0 none;">ul.pricing_table</li> <li class="price_block"> <span class="label">li.price_block</span> <h3><span class="label">h3</span></h3> <div class="price"> <span class="label">div.price</span> <div class="price_figure"> <span class="label">div.price_figure</span> <span class="price_number"> <span class="label">span.price_number</span> </span> <span class="price_tenure"> <span class="label">span.price_tenure</span> </span> </div> </div> <ul class="features"> <li class="label">ul.features</li> <br /><br /><br /> </ul> <div class="footer"> <span class="label">div.footer</span> </div> </li> <li class="price_block" style="opacity: 0.5;"> <span class="label">li.price_block</span> <h3><span class="label">h3</span></h3> <div class="price"> <span class="label">div.price</span> <div class="price_figure"> <span class="label">div.price_figure</span> <span class="price_number"> <span class="label">span.price_number</span> </span> <span class="price_tenure"> <span class="label">span.price_tenure</span> </span> </div> </div> <ul class="features"> <li class="label">ul.features</li> <br /><br /><br /> </ul> <div class="footer"> <span class="label">div.footer</span> </div> </li> <li class="price_block" style="opacity: 0.25;"> <span class="label">li.price_block</span> <h3><span class="label">h3</span></h3> <div class="price"> <span class="label">div.price</span> <div class="price_figure"> <span class="label">div.price_figure</span> <span class="price_number"> <span class="label">span.price_number</span> </span> <span class="price_tenure"> <span class="label">span.price_tenure</span> </span> </div> </div> <ul class="features"> <li class="label">ul.features</li> <br /><br /><br /> </ul> <div class="footer"> <span class="label">div.footer</span> </div> </li> </ul>

La ventaja de este widget personalizado es que puede preparar el contenido sin conexión y pegar el script / CSS / contenido en pocos minutos.

Ultimas palabras

La tabla de precios es uno de los widgets esenciales cuando vende servicios y productos en el sitio de Weebly. La aplicación Pricing Chart de Weebly funciona bien en dispositivos de escritorio. Sin embargo, no se alinea correctamente en dispositivos móviles. Si no le gusta usar la aplicación Weebly, pruebe el script personalizado y cree tablas de precios fácilmente en cualquier lugar del sitio.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More