TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak dodać tabelę cen w witrynie Weebly?

1

Wcześniej Weebly nie miało możliwości dodania widżetu tabeli cen w edytorze. Jednak później Weebly wprowadził bezpłatną aplikację „Cen Chart" za pośrednictwem App Center. Ta aplikacja pomoże Ci dodać proste tabele cenowe w Twojej witrynie. Jest to jedna z bezpłatnych aplikacji Weebly i mamy nadzieję, że w przyszłości dla użytkownika do wyboru. W tym artykule wyjaśnimy, jak dodać bezpłatną tabelę cenową w witrynie Weebly.

Powiązane: Jak dodać schemat organizacyjny w witrynie Weebly?

Dodaj tabelę cen w Weebly

Możesz użyć następujących metod, aby dodać tabelę cen w Weebly.

  1. Korzystanie z aplikacji Wykres cen z App Center
  2. Widżet tabeli cen przy użyciu niestandardowego skryptu

Wyjaśnijmy szczegółowo obie metody.

Aplikacja do wykresów cen Weebly

Najpierw omówmy aplikację z wykresami cen, która jest dostępna w kategorii „eCommerce” w Weebly App Center. W edytorze Weebly przejdź do sekcji „Aplikacje” i wyszukaj aplikację Wykres cen. Po znalezieniu aplikacji możesz połączyć ją ze swoją witryną. Przeczytaj nasz artykuł na temat łączenia aplikacji z Weebly App Center ze swoją witryną.

Jak dodać tabelę cen w witrynie Weebly?

Aplikacja Wykres cen Weebly

Po pomyślnym podłączeniu aplikacji przejdź do zakładki „Buduj” i przeciągnij element na stronę, na której chcesz dodać tabelę cenową. Cennik będzie wyglądał mniej więcej tak, jak poniżej. Możesz dostosować tekst, przyciski, rozmiar i kolory tabeli.

Jak dodać tabelę cen w witrynie Weebly?

Tabela cen utworzona za pomocą aplikacji Wykres cen Weebly

Funkcje bezpłatnej aplikacji Wykres cen

Aplikacja wykresów cen jest publikowana przez Weebly, dlatego możesz założyć, że integracja z edytorem Weebly będzie łatwiejsza niż jakakolwiek inna aplikacja. Pamiętaj, że musisz połączyć aplikację z każdą ze swoich witryn osobno i korzystać z następujących funkcji:

  • Widget ma plan, funkcje i elementy przycisków razem.
  • Jest to kompletny widżet, co oznacza, że ​​nie można przeciągać między nimi żadnych innych elementów.
  • Chociaż widget umożliwia nieograniczoną liczbę planów i funkcji, zalecamy ograniczenie do 3 do 5 planów.
  • Możesz dostosować kolory tła według potrzeb.

Widżet tabeli cen za pomocą skryptu

Domyślna aplikacja Weebly ma być responsywna i automatycznie dopasowywać się na urządzeniach mobilnych. Jednak nie działa poprawnie na telefonach komórkowych, a także tworzy irytujące wrażenia podczas edycji treści w edytorze. Dlatego drugą opcją, którą tutaj wyjaśnimy, jest niestandardowy widget tabeli cen przy użyciu darmowych skryptów StyleFix i PrefixFree. Widget będzie wyglądał jak poniżej:

Jak dodać tabelę cen w witrynie Weebly?

Tabela cen za pomocą skryptu

Widżet możesz dodać do swojej witryny Weebly, wykonując poniższe czynności.

  • Dodawanie skryptu
  • Dodawanie własnego stylu CSS
  • Osadzanie kodu HTML

Dodawanie skryptu

Dodaj poniższy skrypt w sekcji „Strony > Wybierz stronę > Ustawienia SEO > Kod stopki” swojej witryny 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>

Dodawanie niestandardowego kodu CSS

Drugim krokiem jest dodanie niestandardowego kodu CSS do tabeli cenowej w sekcji „Strony > Wybierz stronę > Ustawienia SEO > Kod nagłówka”.

Jak dodać tabelę cen w witrynie Weebly?

Dodaj kod nagłówka na stronie

<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>

Możesz dostosować dowolne atrybuty, takie jak rozmiar czcionki, kolor itp., zgodnie z potrzebami, aby pasowały do ​​układu witryny.

Dodawanie kodu HTML

Ostatnim krokiem jest przeciągnięcie i upuszczenie elementu „ Kod osadzania ” na stronie, na której chcesz dodać tabelę cenową i wstawienie następującego kodu HTML. Nie zapomnij zastąpić treści i linków URL własnymi.

<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>

Zaletą tego niestandardowego widżetu jest możliwość przygotowania treści offline i wklejenia skryptu/CSS/treści w kilka minut.

Ostatnie słowa

Tabela cen jest jednym z podstawowych widżetów, gdy sprzedajesz usługi i produkty w witrynie Weebly. Aplikacja Wykres cen Weebly działa dobrze na urządzeniach stacjonarnych. Jednak nie jest prawidłowo wyrównywany na urządzeniach mobilnych. Jeśli nie lubisz korzystać z aplikacji Weebly, wypróbuj niestandardowy skrypt i łatwo twórz tabele cen w dowolnym miejscu na stronie.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów