ПАРУСА-МАГЕЛЛАНА.РУ

Как работать с конструктором сайтов "БЛОКМАСТЕР 5.0" - Центр Магеллан

Вы на странице: Как работать с конструктором сайтов "БЛОКМАСТЕР 5.0"!

Конкурс не выбран
0

страница в процессе создания

 

ИНСТРУКЦИЯ НА АНГЛИЙСКОМ ЯЗЫКЕ

РАБОТА С КОНСТРУКТОРОМ

 

 

Создание сайта с помощью блоков

 

HTML Builder позволяет пользователям перетаскивать HTML-элементы на холст и помещать их туда, где они хотели бы, чтобы они появились. После того, как блок помещен на холст, его положение может быть изменено с помощью перетаскивания, Элементы можно удалять по отдельности или все элементы на текущей странице могут быть удалены за один раз.

 

Редактирование контента

 

Пользователь может отредактировать текстовое содержимое внутри каждого элемента (просто установив режим "здание" на "содержимое"). Конструктор использует богатый текстовый редактор, позволяющий вносить изменения в текст. В зависимости от того, какой тип элемента вы редактируете, некоторые опции будут отключены в редакторе. Редактируемые текстовые элементы должны быть сконфигурированы через "/js/builder.js", и в зависимости от конкретной конфигурации, некоторые текстовые элементы не могут быть доступны для редактирования.

 

Редактор стилей CSS

 

Конструктор также позволяет редактировать стили CSS и редактировать HTML ссылки. Используя встроенный редактор CSS, конечные пользователи могут настраивать любые CSS атрибуты администратора скрипта. При редактировании ссылки, конечный пользователь может указать ссылку на любой внутренней странице или (внешний) URL.

 

Редактирование ссылки

 

Конструктор позволяет пользователю редактировать ссылки. Для того, чтобы иметь возможность редактировать ссылки, во - первых, ссылка селекторы должны быть добавлены в массив "editableItems" в /js/builder.js файле. Чтобы изменить ссылки на холсте, во - первых , выберите Подробности режим здания, это позволит вам выбрать ссылки. При выборе вкладки "ссылка" будет виден в левой панели, что позволяет либо выбрать страницу ссылку или ввести URL вручную.

 

Связывание в пределах одной страницы


При создании веб - сайта на одной странице, вы можете связать с разделами в пределах одной страницы , а затем на отдельную страницу. Чтобы сделать это, просто отредактировать ссылку и использовать второй выпадающий список , чтобы выбрать блок , который Вы хотите сделать ссылку. Идентификаторы , к которым могут быть связаны между собой , должны быть сконфигурированы в пределах блока HTML - файлов, а также атрибут ID должен быть назначен первый дочерний элемент основного контейнера (для примера, пожалуйста , посмотрите на любой из сгруппированных блоков файлов).



Редактирование изображений

 

Конструктор позволяет пользователю редактировать изображения. Для редактирования изображений на холсте, во - первых , выберите Подробности режим здания, это позволит вам выбрать изображения. При выборе вкладки "изображение" будет виден в левой панели, что позволяет либо загрузить изображение или ввести URL вручную. 
- Чтобы изменить изображение, введите новое изображение URL внутри URL (), например: 
URL (ваш_домен .com / image.png) 
- чтобы удалить изображение, просто введите "URL ()" 





* чтобы сделать параллакс фоновое изображение, установите "фон-размер , чтобы покрыть" и "фоновое приложение к фиксированным".

 

Видео Фон

 

Для изменения раздела в фоновое видео, открыть исходный код раздела и введите URL-адрес видео в атрибуте SRC исходного тега, также вводится альтернативный (плакат) изображения, которые показывают, в мобильных устройствах, а не видео в атрибуте постер в тег видео.

 

Клонирование пункты

 

Элементы, которые были установки в массиве "editableItems" в /js/builder.js может быть клонирован.Переключение в режим строительства "Подробности", выберите элемент , который вы хотите клонировать и ,наконец , нажмите кнопку клон из левой панели. Обратите внимание , что клонированные элементы будут вставлены в холст прямо рядом с исходной позиции.

 

Экспорт HTML

 

Всякий раз, когда пользователь доволен конечным результатом, созданной разметки, можно экспортировать нажмите зеленую кнопку экспорта. Функция экспорта будет захватывать все используемые HTML-элементы для каждой созданной страницы. После того, как все страницы будут завершены, все HTML файлы архивируются в ZIP-архив вместе с другими внешними ресурсами, такими как таблицы стилей, JavaScript файлов и изображений, которые будут разгружены конечным пользователем.

 

Проекты Экспорт & Импорт .pixbuilder

 

Вы можете в любой момент экспортировать копию целевой страницы проекта вы работаете как файл "project.pixbuilder" , который можно импортировать его позже к строителю и продолжить редактирование. Для экспорта или импорта проекта откройте левую боковую панель и нажмите на кнопку "Экспорт & импорт" в нижней части боковой панели. 
* Примечание: после того, как в процессе импорта все текущие целевые страницы будут удалены! поэтому убедитесь , чтобы сделать копию текущей работы, экспортируя его с помощью кнопки экспорта над ним в том же файле окна (project.pixbuiledr).

 

Просмотр HTML

 

Для предварительного просмотра страницы нажмите на кнопку предварительного просмотра в верхней панели, вы можете просмотреть только одну страницу; ссылки на другие страницы не будут работать. При внесении изменений на страницу, перегрузочные предварительный просмотр не будет работать, а вам придется снова использовать кнопку "Предварительный просмотр".

 

Страницы

 

Сценарий HTML Builder позволяет пользователям создавать сразу несколько страниц. Чтобы добавить новую страницу, просто нажмите на зеленую кнопку с надписью "+ Добавить" чуть ниже текущего списка страниц. Вы можете изменить имена страниц, а также (пожалуйста, используйте имена без расширения .html, они автоматически добавляются при экспорте). При экспорте разметки, страницы будут использовать одни и те же имена. Чтобы удалить страницу, просто нажмите на маленькую иконку Удалить рядом со страницей, которую хотите удалить.

 

 

Всплывающие окна

 

Если вы хотите добавить всплывающее окно на вашу целевую страницу, скрипт всплывающего окна должны быть включены в код страницы, чтобы работать, но в случае , если вы используете одну из предопределенных секций всплывающих в строителя, здесь вам не нужно добавить скрипт всплывающего окна на странице, потому что это уже существует в источнике секции, и если вы хотите добавить это всплывающее окно , чтобы другие ссылки и кнопки на странице, просто переключиться в режим Подробности, нажмите на ссылку или кнопку, а затем положить#popup_id в области связи, например , # popup_1 . вы можете посмотреть это видео для редактирования и пользовательской настройки PixBuilder

Предопределенные Popups: https://www.youtube.com/watch?v=-AEWipK9HR8&list=PLhuQqRln0YTH0bk1_akRxB62iYwTIM81r~~HEAD=dobj Если вы не используете из предопределенных секций всплывающих в строитель, то вы должны добавить код всплывающего окна на странице, и сделать это просто скопировать код всплывающего окна от в статье базы знаний и вставить его в источнике любой секции в строитель после существующего кода и всплывающее окно будет работать на всей странице, а затем добавить всплывающее ссылки и кнопки, просто переключиться на Подробности режим, нажмите на ссылку или кнопку, а затем положить #popup_id в области связи, например # popup_1 . для редактирования всплывающее окно просто переключиться на Content режим, нажмите на ссылку или кнопку всплывающее окно, а затем переключиться в Подробности режим и настроить всплывающее стиль , как обычно.для получения дополнительной информации , пожалуйста , проверьте нашу статью базы знаний о добавлении новых Popups к вашей целевой страницы: HTTP: // support.pixfort.com/knowledgebase/popups/



 

Настройка форм

 

Настройка почтовых форм в Builder

 

Чтобы настроить все формы, используемые внутри строителя, просто вам просто нужно выбрать почтовую службу при условии (форма тип) при нажатии на кнопку экспорта внутри строителя, то вы заполнить необходимую информацию для службы электронной почты при условии, что вы выбранные (инфо для других поставщиков услуг электронной почты не требуется). 

 

 

Типы форм:

 

1- Пользовательские E-mail:

Когда вы выбираете "Custom Email" в качестве типа формы в вас посадки страницу, которую вы будете получать все suscription занесена в формах прямо на Ваш адрес электронной почты, которые вы выбираете в поле электронной почты, а также вы должны ввести предмет полученных писем в теме поле.

2- MailChimp:

Для того, чтобы отправить занесена дату вашего MailChimp вы зарегистрированы , вы должны ввести следующие ИНФОРМАЦИОННО: 
Ваш ключ API здесь - http://admin.mailchimp.com/account/api 
Список уникальный идентификатор отсюда - HTTP: //admin.mailchimp. COM / списки / 
И вы должны убедиться в том , что каждое поле формы имеет то же имя в вашем Mailchimp счете, чтобы изменить имя поля просто переключить строитель в режим "Подробности" , а затем нажмите на поле, а затем открыть "поле Строитель" вкладка и здесь вы можете изменить имя, место держатель поле и изменить , если он или нет взыскательных.

Монитор 3- кампании:

Для того, чтобы отправить занесена дату вашего монитора кампании вашего аккаунта вы должны ввести следующее ИНФОРМАЦИОННО: 
Ваш ключ API (изменить-имя пользователя с вашим собственным именем пользователя) - https://your-username.createsend.com/admin/account/ 
список идентификаторов отсюда - https://www.campaignmonitor.com/api/getting-started/#listid 
И вы должны убедиться в том , что каждое поле формы имеет то же имя в вашей учетной записи Monitor кампании, чтобы изменить имя поля просто переключить строитель в режим "подробности" , а затем нажмите на поле, а затем откройте "Field Builder» вкладку и здесь вы можете изменить имя, место держатель поле и изменить , если он или нет взыскательных.

4- GetResponse:

Для того, чтобы отправить занесена дату вашего GetResponse вы счета , вы должны ввести следующую Информатио: 
Ваш ключ API здесь - https://app.getresponse.com/my_api_key.html~~HEAD=dobj 
название кампании здесь - https://app.getresponse.com /campaign_list.html 
И вы должны убедиться в том , что каждое поле формы имеет то же имя в вашем аккаунте GetResponse, чтобы изменить имя поля просто переключить строитель в режим "Подробности" , а затем нажмите на поле, а затем открыть "Field Builder" вкладка и здесь вы можете изменить имя, место держатель поле и изменить , если он или нет взыскательных.

5- AWeber:

Для того, чтобы отправить занесена дату вашего AWeber вы счета , вы должны ввести следующую ИНФОРМАЦИОННО: 
Ваш AuthCode отсюда - https://auth.aweber.com/1.0/oauth/authorize_app/647b2efd 
Список имен отсюда - https: // WWW. aweber.com/users/autoresponder/manage 
И вы должны убедиться в том , что каждое поле формы имеет то же имя в вашем аккаунте AWeber, чтобы изменить имя поля просто переключить строитель в режим "Подробности" , а затем нажмите на полях, а затем открыть "Field Builder» вкладку и здесь вы можете изменить имя, место держатель поле и изменить , если он или нет взыскательных.

 


Использование нескольких Провайдеров услуг электронной почты в той же странице:

Если вы хотите использовать несколько provideres услуг электронной почты в той же странице , просто переключить строитель в режим "Подробности" , а затем нажмите на каждую форму затем откройте вкладку "Form Builder" , а затем выберите "Тип формы" для этой формы. 
Не забудьте для ввода информации для взыскательных поставщика услуг электронной почты перед экспортом целевую страницу (нажмите на кнопку экспорта в строителя и заполнить требуемую информацию экспорта HTML).

 

Добавление новых полей в форме:

Для добавления новых полей форм просто переключить строитель в режим "Подробности" , а затем нажмите на любое поле и нажмите на кнопку "клон", после этого вы можете нажать на новом generted поле и изменить его параметры (имя, заполнитель, . ...) Вы можете посмотреть это видео для добавления новых полей в форме:https://www.youtube.com/watch?v=GcYjUQ82XeI&feature=em-upload_owner



 

Настройка "froms" после экспорта и в предварительно определенных страниц

Если вы используете одну из предопределенных целевых страниц или вы экспортировали целевую страницу от застройщика, и вы хотите, чтобы изменить поставщика услуг электронной почты для форм на странице, просто выполните следующие действия:

  1. Откройте папку "pix_mail".

  2. Откройте файл "config.php".

  3. В строке номер (2) введите Поставщик услуг электронной почты, который вы хотите использовать следующим образом:

    • "CE" для пользовательских Email.

    • "MC" для Mailchimp.

    • "См" для монитора кампании.

    • "Г" для GetResponse.

  4. Для ввода используемого поставщика услуг электронной почты требуемую информацию следующим образом:

    • Пользовательские настройки линий (4 и 5), ввод ваш адрес электронной почты и тему сообщения электронной почты электронная почта.

    • Mailchimp настройки линий (12 и 13), введите ваш ключ API и список идентификаторов.

    • Монитор сеттинг линий (16 и 17), входные Ваш ключ API и список идентификаторов.

    • GetResponse настройки линий (20 и 21), входные ваш ключ API и название кампании.

  5. Сохраните файл и ваша форма будет готова к использованию.

 

 

Установка рекапчи в формах

Шаг 1

Во-первых, нам нужен ключ API, поэтому на голову к https://www.google.com/recaptcha/admin. Чтобы получить доступ к этой странице вам необходимо войти в учетную запись Google. Вам будет предложено зарегистрировать свой сайт, чтобы дать ему подходящее имя, а затем список доменов (например tutsplus.com), где будет использоваться этот конкретный рекапчи. Поддомены (такие как webdesign.tutsplus.com и code.tutsplus.com) автоматически учитываются.

Шаг 2

Сделав это вы будете уделять сайта ключ и секретный ключ партнера:

Шаг 3

Под клавишами вы увидите некоторые фрагменты для включения рекапчи на вашей странице. Сначала есть в JavaScript: 
<SCRIPT SRC = 'https: //www.google.com/recaptcha/api.js'> </ скрипт> 

Вы можете также определить , какие из 40 поддерживаемых языков , которые вы используете, добавив параметр к строке. Здесь мы добавляем эс , который даст нам испанский язык рекапчи: 
<SCRIPT SRC = 'https:? //www.google.com/recaptcha/api.js Гектолитров = эс'> </ SCRIPT> 

Поместите этот тег сценария в ноги вашей страницы (или просто под формой которой будет показано рекапчи, взависимости от того, как расставить приоритеты загрузки ресурсов).

Шаг 4

Далее идет заполнитель , который вам нужно добавить в форму разметки , куда вы хотите, чтобы рекапчи появится:
<DIV класс = "г-Recaptcha" данных sitekey = "6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"> </ DIV> 
Это пример форма с кодом рекапчи: 


после того, что рекапчи будет готов к использованию.

 


Настройка формы PayPal

Чтобы изменить Paypal после того, как вы добавляете его в вашу целевую страницу с помощью строителя, сначала переключить строитель в режим "Подробности", а затем нажмите на форму, а затем откройте вкладку "PayPal Builder" из ledt боковой панели, после того, что вы можете легко изменять значения полей (ваш PayPal адрес электронной почты, название пункта, цена товара, успешное возвращение URL, отменить обратный адрес и уведомить URL).

 

Настройка PayPal уведомления электронной почты

1. Найти вам уведомления URL

После экспорта целевую страницу и загрузить его на сервер , вы должны найти полный URL файла "paypal_ipn.php" , который находится внутри папки "pix_mail", например , если вы загрузили целевую страницу в корневой каталог полного уведомления URL будет: http://www.yourdomain.com/pix_mail/paypal_ipn.php А если вы загружаете целевую страницу в подкаталоге URL - адрес будет: http://www.yourdomain.com/landing_page/pix_mail/ paypal_ipn.php 

 

2. Установка Ваша учетная запись PayPal

Для настройки IPN (Instant оповещения о платеже) вы должны будете иметь бизнес-счет, после этого выполните следующие действия:

  1. Войдите в свой аккаунт Paypal.

  2. Нажмите на кнопку "Профиль".

  3. Нажмите на кнопку "Профиль и настройки".

  4. На левой боковой панели, нажмите на "Мои продавая инструменты".

  5. Нажмите кнопку "Обновить" в разделе "Мгновенные уведомления об оплате".

    И нажмите кнопку "Выбрать параметры IPN" после этого.

  6. После ввода URL из файла "paypal_ipn.php" (которая находится внутри папки "pix_mail") в поле URL уведомления и выберите "Получение IPN сообщения" вариант, и нажмите кнопку Сохранить после этого.

  7. PayPal должен работать сейчас, на каждую покупку вы получите по электронной почте со всеми oreder деталями и статуса, а покупатель получит также по электронной почте с его deatils того, чтобы подтвердить свою покупку.

Для получения дополнительной информации вы можете проверить эти Полезные ссылки:


Как проверить, что IPN Уведомления работают на вашем сайте:

 

  • После экспорта целевая страница открыть файл "/pix_mail/paypal_ipn.php" и измените "USE_SANDBOX" в строке 13 до 1:

    определить ( "USE_SANDBOX", 0);

    Так что это будет:

    определить ( "USE_SANDBOX", 1);

  • Затем загрузить файлы целевой страницы на сервер, после этого вы должны найти полный URL файла "paypal_ipn.php" , который находится внутри папки "pix_mail", например , если вы загрузили целевую страницу в корневой каталог полного уведомления URL будет:http://www.yourdomain.com/pix_mail/paypal_ipn.php А если вы загружаете целевую страницу в подкаталоге URL - адрес будет: http://www.yourdomain.com/landing_page/pix_mail/ paypal_ipn.php 
     

  • После этого перейдите по ссылке: https://developer.paypal.com/developer/ipnSimulator/

  • Затем войдите в свою учетную запись (от кнопки входа в систему в верхнем правом углу).

  • После этого ввести уведомление URL в первом поле "URL обработчика СПИ".

  • Вы можете выбрать любой тип транзакции, чтобы проверить с вашим сайтом, например, выбрать "Echeck - полный".

  • В "receiver_email" , введите Ваш адрес электронной почты. 
    В "payer_email" ввод любой другой адрес электронной почты , который вы будете испытывать вкачестве покупателя по электронной почте.

  • Затем нажмите на кнопку "Отправить IPN", и вы получите два электронных письма от продавца и покупателя адресов электронной почты.

 


Как редактировать и добавлять сложные поля цен PayPal

Вы можете использовать простую форму PayPal в вашу целевую страницу, которая имеет одну цену, используя поле "количество" в виде:

<Тип входного = "скрытые" NAME = "количество" значение = "15.00">

Если вы хотите добавить сложную форму PayPal (несколько цен), сначала добавить "выбрать" код, чтобы позволить клиенту выбрать план на заказ:

<Выберите имя = "os0" требуется = "" ария-требуется = "истинный">
<Параметр значение = ""> Выберите план </ вариант>
<Параметр значение = "Normal"> Нормальный $ 9.99 USD </ вариант>
<Параметр значение = "Премиум"> Премиум $ 14.99 USD </ вариант>
<Значение опции = "Pro"> Pro $ 24.99 USD </ вариант>
</ Выберите>

Если значение каждого параметра является имя плана. 
После этого вы добавляете этот код в форме, для каждой опции , которые вы добавили в предыдущем коде вы добавляете ( "option_select" со значением имени) и ( "option_amount" с значение цены опциона), с добавлением порядка (число) в конце имени поля.

<Тип входного = "скрытые" NAME = "option_select0" значение = "Normal">
<Тип входного = "скрытые" NAME = "option_amount0" значение = "9,99">
<Тип входного = "скрытые" NAME = "option_select1" значение = "Премиум">
<Тип входного = "скрытые" NAME = "option_amount1" значение = "14,99">
<Тип = "скрытый" имя = значение "option_select2" вход = "Pro">
<Тип входного = "скрытые" NAME = "option_amount2" значение = "24,99">
<Тип входного = "скрытые" NAME = "option_index" значение = "0">

 

Для получения дополнительной информации, пожалуйста, проверьте:

HTML Переменные для PayPal платежей Standard

Как добавить поле количества к PayPalform

Чтобы добавить поле количество к вашему PayPal форме необходимо добавить поле "выбрать" с количеством вариантов количества и тир видимых titls:

<Выберите имя = "количество" требуется = "" ария-требуется = "истинный">
<Параметр значение = ""> Выберите количество </ опции>
<Значение параметра = "1"> 1 Билет </ вариант>
<Значение параметра = "2"> 2 билета </ вариант>
<Значение параметра = "3"> 3 билета </ вариант>
</ Выберите>

 

Для получения дополнительной информации, пожалуйста, проверьте:

HTML Переменные для PayPal платежей Standard

Настройка Eventbrite

Чтобы добавить Eventbrite всплывающее окно на целевую страницу, пожалуйста, выполните следующие действия:

  1. Открыть свой счет на Eventbrite .

  2. Нажмите на кнопку "Управление событиями".

  3. Нажмите кнопку "Управление" на событие вы хотите добавить.

  4. Нажмите на кнопку "Виджеты" из левой боковой панели (в разделе "Invite и содействовать").

  5. Нажмите на кнопку "Форма билет".

  6. Скопируйте код "IFRAME" только (без дел). 
    Поэтому код "перед" должен выглядеть следующим образом :

    <DIV стиль = "ширина: 100%; выравнивания текста: слева;" > <IFRAME SRC = "// eventbrite.com/tickets-external?eid=21069420203&ref=etckt" frameborder = "0" высота = "260" ширина = VSPACE "100%" = "0" HSPACE = "0" = MARGINHEIGHT "5" MARGINWIDTH = "5" скроллинг = "авто" allowtransparency = "истинный"> </ IFRAME> <DIV стиль = "семейство шрифтов: Helvetica, Arial, размер шрифта: 10px; обивка: 5px 0 5px; маржа: 2px; ширина: 100%; выравнивания текста: слева; " > <Класс = "питание-по-ЕВ" стиль = "цвет: #dddddd; текст-отделка: нет;" целевых = "_blank" HREF = "http://www.eventbrite.com/r/etckt"> Работает на Eventbrite </a> </ DIV> </ DIV>

    И вы скопировать только "IFRAME", который должен выглядеть следующим образом:

    <IFRAME SRC = "// eventbrite.com/tickets-external?eid=21069420203&ref=etckt" frameborder = "0" высота = "260" ширина = "100%" VSPACE = "0" HSPACE = "0" MARGINHEIGHT = " 5 "MARGINWIDTH =" 5 "скроллинг =" авто "allowtransparency =" истинный "> </ IFRAME>

  7. После этого вставьте код IFrame внутри этого кода (непосредственно после текста комментария):

    <DIV ID = "popup_2" класс = "хорошо pix_popup pop_style_1 pop_hidden light_gray_bg pix_builder_bg">
    <DIV стиль = "ширина: 700px; выравнивания текста: слева;" >

     <! - IFRAME код здесь ->

     </ DIV>
    </ DIV>

    Таким образом, код должен выглядеть следующим образом:

    <DIV ID = "popup_eventbrite" класс = "хорошо pix_popup pop_style_1 pop_hidden light_gray_bg pix_builder_bg">
    <DIV стиль = "ширина: 700px; выравнивания текста: слева;" >

     <! - IFRAME код здесь ->
    <IFRAME SRC = "// eventbrite.com/tickets-external?eid=21069420203&ref=etckt" frameborder = "0" высота = "260" ширина = "100%" VSPACE = "0" HSPACE = "0" MARGINHEIGHT = " 5 "MARGINWIDTH =" 5 "скроллинг =" авто "allowtransparency =" истинный "> </ IFRAME>

     </ DIV>
    </ DIV>

  8. После этого вы можете вставить этот код внутри вашей целевой страницы (в любом месте, например , в конце страницы), и вы можете открыть Eventbrite всплывающее окно, изменив ссылку на любую кнопку на "#popup_eventbrite". 
    В связи кнопка должна быть как это:

    <a href="#popup_eventbrite"> Eventbrite POPUP КНОПКА </a>