Jak Zrobić Kalkulator Dla Strony Internetowej Bez Programisty. Część 1: Konstruktor Kalkulatora

Spisu treści:

Jak Zrobić Kalkulator Dla Strony Internetowej Bez Programisty. Część 1: Konstruktor Kalkulatora
Jak Zrobić Kalkulator Dla Strony Internetowej Bez Programisty. Część 1: Konstruktor Kalkulatora

Wideo: Jak Zrobić Kalkulator Dla Strony Internetowej Bez Programisty. Część 1: Konstruktor Kalkulatora

Wideo: Jak Zrobić Kalkulator Dla Strony Internetowej Bez Programisty. Część 1: Konstruktor Kalkulatora
Wideo: Najlepsza aplikacja do nauki podstaw Javascriptu - Kalkulator 2024, Może
Anonim

Zazwyczaj stworzenie widżetu kalkulatora dla strony internetowej wymaga płatnego programisty i budżetu na wsparcie techniczne. Ostatnio jednak pojawiły się co najmniej trzy opcje, jak zaoszczędzić czas i pieniądze na tworzeniu i utrzymaniu kalkulatora: zacznijmy od najprostszego i najtańszego - bezpłatnego kreatora kalkulatorów, który pomoże ci wizualnie złożyć kalkulator - podobnie jak wypełnianie profil w sieci społecznościowej.

Przykład kalkulatora stworzonego bez znajomości technologii i zatrudniania programistów
Przykład kalkulatora stworzonego bez znajomości technologii i zatrudniania programistów

Czy to jest to konieczne

Laptop lub komputer, dowolna przeglądarka, 10-30 minut czasu, skrzynka pocztowa lub konto w sieci społecznościowej (Facebook, Vkontakte, Google+, UID) oraz zrozumienie, jaki powinien być Twój kalkulator

Instrukcje

Krok 1

Aby rozpocząć montaż, a w przyszłości zarządzać Twoim kalkulatorem, rejestrujemy się w serwisie uCalc.pro za pośrednictwem poczty lub jednego z popularnych portali społecznościowych.

Po rejestracji otrzymasz mailem e-mail z poradą dotyczącą projektu kalkulatora
Po rejestracji otrzymasz mailem e-mail z poradą dotyczącą projektu kalkulatora

Krok 2

Po rejestracji zostaniesz przeniesiony na Twoje konto osobiste, gdzie będą przechowywane Twoje kalkulatory. Tutaj możesz wybrać gotowy szablon lub zacząć składać kalkulator od podstaw.

Klikając ikonę
Klikając ikonę

Krok 3

Po wybraniu na korzyść szablonu lub samodzielnego złożenia, przed tobą otworzy się edytor wizualny: przeciągając elementy - listę, suwak, znacznik wyboru, pole wyboru, pola kontaktu lub przycisk - z kolumny po lewej stronie możesz złożyć kalkulator.

Elementy można umieszczać obok siebie (kilka w rzędzie) lub pod sobą
Elementy można umieszczać obok siebie (kilka w rzędzie) lub pod sobą

Krok 4

Najedź myszą na dowolny element, a zobaczysz ikony ustawień - w nich możesz ustawić rozmiary, uczynić element obowiązkowym, ustawić nazwy pól dla listy i zmienić ich umiejscowienie. Klikając na jasnozieloną ramkę, która pojawia się wokół elementu, możesz zmienić jej położenie nad lub pod pozostałymi częściami kalkulatora.

Opcjonalnie możesz usunąć dowolny element, klikając go i naciskając
Opcjonalnie możesz usunąć dowolny element, klikając go i naciskając

Krok 5

Możesz zmienić kolor i rozmiar etykiet, po prostu podświetlając żądany fragment tekstu. Lepiej jest dodawać wyjaśnienia do tekstów: jeśli mówimy o szerokości, dodaj „metry” lub „mm”, o cenach „ruble”, „ruble za metr” i tak dalej.

Aby zmienić kolor tekstu, kliknij szare kółko i wybierz kolor z palety
Aby zmienić kolor tekstu, kliknij szare kółko i wybierz kolor z palety

Krok 6

Aby zmienić kolor tła lub zmienić kolor suwaka i znacznika wyboru, użyj ikon nad kalkulatorem. Lewa ikona odpowiada za kolor tła - lepiej pomalować ją w kolorystykę Twojej strony internetowej. Środkowa ikona to kolory elementów: możesz wybierać spośród 10 gotowych schematów.

Możesz również zmienić styl czcionki klikając w prawą ikonę - obecnie dostępne są 4 opcje
Możesz również zmienić styl czcionki klikając w prawą ikonę - obecnie dostępne są 4 opcje

Krok 7

Dla jasności możesz dodać obrazki do kalkulatora: obrazek można dodać zarówno do nagłówka, jak i do dowolnego elementu kalkulatora. W tym celu wybierz ikonę „Obraz” z lewego panelu, przeciągnij ją w żądane miejsce, a następnie, klikając element, prześlij zdjęcie ze swojego komputera.

Aby kalkulator ładował się szybciej na Twojej stronie, użyj zdjęć z minimalną
Aby kalkulator ładował się szybciej na Twojej stronie, użyj zdjęć z minimalną

Krok 8

Aby określić zakres cen usług oraz dowolne inne parametry liczbowe, przejdź do zakładki „Formuła”. Zobaczysz diagram kalkulatora, w którym możesz wprowadzić potrzebne wartości.

Dowolna liczba może oznaczać zarówno ilość, jak i wagę lub np. odległość
Dowolna liczba może oznaczać zarówno ilość, jak i wagę lub np. odległość

Krok 9

Każdy element kalkulatora na schemacie ma przypisaną literę. Podstawiając litery w polu formuły po lewej stronie i dodając znaki matematyczne, możesz utworzyć jedną lub więcej formuł: na przykład, jeśli chcesz podać cenę z rabatem lub bez, utwórz dwie formuły, dodając pomnożenie przez liczbę mniejszą niż 1 w drugim (na przykład 0,8 będzie oznaczać rabat w 20% i tak dalej).

Drugą lub trzecią formułę można ustawić, jeśli chcesz osobno pokazać cenę za materiał i za pracę, i tak dalej
Drugą lub trzecią formułę można ustawić, jeśli chcesz osobno pokazać cenę za materiał i za pracę, i tak dalej

Krok 10

Jeśli chcesz otrzymywać zapytania klientów pocztą lub SMS-em, wróć do zakładki „Projekt”, kliknij przycisk swojego kalkulatora. Możesz określić w ustawieniach. Znajdziesz tam również ustawienia płatności - jeśli chcesz zaakceptować przedpłatę za pośrednictwem Yandex. Checkout.

Tutaj możesz również ustawić wygląd przycisku (owalny, kwadratowy itp.) oraz dodatkowy kolor przycisku po najechaniu na niego myszą
Tutaj możesz również ustawić wygląd przycisku (owalny, kwadratowy itp.) oraz dodatkowy kolor przycisku po najechaniu na niego myszą

Krok 11

Aby przesłać klientowi wynik kalkulacji lub inne informacje (kod promocyjny, link, komunikat „Zamówienie przyjęte”), kliknij „Powiadom klienta” w ustawieniach przycisku i wypełnij szablon listu. Aby zbierać kontakty klientów, dodaj element "pole" do kalkulatora i określ "e-mail", "numer telefonu" i tak dalej w ustawieniach.

Wszystkie dane osobowe klientów są przekazywane za pośrednictwem SLL - innymi słowy nikt nie może ich przechwycić
Wszystkie dane osobowe klientów są przekazywane za pośrednictwem SLL - innymi słowy nikt nie może ich przechwycić

Krok 12

Kalkulator jest gotowy. Aby umieścić go na stronie, kliknij przycisk „Zapisz” w prawym rogu - a przed tobą pojawi się okno z gotowym kodem widżetu. Skopiuj kod i wklej go na nowej lub istniejącej stronie w witrynie.

Twój kod kalkulatora nie może zostać skopiowany z Twojej witryny i wklejony na cudzej stronie
Twój kod kalkulatora nie może zostać skopiowany z Twojej witryny i wklejony na cudzej stronie

Krok 13

Jeśli nie masz pewności co do swoich umiejętności, skorzystaj z gotowych instrukcji dodawania kalkulatora. Witryna uCalc zawiera ilustrowane wskazówki dotyczące instalacji kalkulatora na CMS Wordpress, Joomla, Drupal, NetCat, kreatorach witryn uKit, uCoz, Tilda i Wix oraz innych znanych platformach. Jeśli nie znalazłeś swojej platformy na liście, otwórz dowolny opis i postępuj zgodnie z analogią.

Instrukcje znajdują się w dziale FAQ
Instrukcje znajdują się w dziale FAQ

Krok 14

Jeśli zdecydujesz się coś zmienić po zainstalowaniu go na stronie (projekt, ceny, ilość elementów itp.), utworzony kalkulator można edytować w konstruktorze i zapisać. Wprowadzone zmiany zostaną automatycznie wyświetlone na stronie.

Zalecana: