Обучение работе со страницами

Давайте разберемся, как работать со страницами на примере того, как была сделана эта страница.

  1. На панели администратора нажмите на кнопку "Создать":
  2. В открывшемся диалоге задайте название новой страницы и нажмите "Создать" и выберите один из заготовленных шаблонов:
  3. Страница будет создана. Отобразится уведомление. Нажмите на него, чтобы открыть новую страницу:
  4. На панели администратора MADWWW нажмите на кнопку "Включить редактор":
  5. Включится режим редактирования страницы:

     

  6. Теперь вы можете редактировать любой элемент на странице.
    Внимание! Слайдеры и формы редактируются в отдельном редакторе.
    Остальные элементы редактируются на самой странице. Просто нажимаете на текст, меню, изображение и изменяете его.
  7. Просто нажимаете на элемент и у вас открывается редактор. Например, если это текст или изображение, то появится панель редактора tinymce
  8. Вы можете добавлять на страницу ряды, колонки, элементы.

  9. Давайте попробуем создать ряд по шаблону. Нажмите на кнопу "Добавить ряд" в меню слева:
  10. Откроется диалог с шаблонами рядов на выбор. Выберите любой не пустой шаблон. Наведите на него и нажмите кнопку "Использовать" - она отобразится, когда вы наведете мышь на шаблон.
  11. Новый ряд из шаблона добавится на страницу. Теперь вы можете его редактировать: заменить текст и изображения на нужные.
  12. Давайте теперь попробуем создать пустой ряд с нуля без шаблона.
  13. Нажмите на кнопку "Добавить ряд" в левом меню

  14. Откроется диалог с шаблонами рядов на выбор. Выберите шаблон "Пустой ряд". Наведите на него мышью и нажмите кнопку "Использовать"
  15. Пустой ряд будет вставлен на страницу. Обратите внимание, что ряд пустой и он не будет отображаться, пока в него ничего не добавлено.
  16. Структура страницы следующая: ряды. В ряды вставляются колонки. В колонки вставляются элементы.
  17. Давайте создадим колонку.
  18. Нажмите кнопку "Добавить колонку" в меню слева:
  19. Во всех местах, куда можно добавить колонку, появится кнопка "+". В каждый ряд можно вставить одну или несколько колонок. Если в ряду несколько колонок, то они будут добавляться слева или справа друг от друга. Выберете место, в который хотите поместить колонку и нажмите на кнопку "+"

     В одном ряду может быть одна или несколько колонок. Для каждой колонки Вы должны задать ширину.

  20. В открывшемся диалоге задайте ширину новой колонки для каждого экрана.
    Как это работает: ширина страницы - 100%. Если в одном ряду есть две колонки с шириной по 50%, то они будут отображены одна сбоку от другой. Если три колонки шириной по 33%, то они также будут отображены сбоку друг от друга. Если колонка не помещается, то она будет перенесена на следующую строку.
    Таким образом, можно задавать для больших экранов такую ширину колонок, чтобы они отображались сбоку друг от друга, а для маленьких экранов так, чтобы они отображались одна под другой.
    Например, если нам нужно сделать 4 колонки, то для большого и среднего экрана ширина будет по 25%, для маленького - по 50% (колонки будут отображены по две в строку), для сверхмаленького экрана - 100% (каждая колонка на новой строке).
    Задайте нужную ширину и нажмите "Создать"
  21. Колонка добавлена:
  22. Теперь добавим новый элемент текст в колонку (в колонку можно добавлять тексты, изображения, карточки, а также, любые виджеты, доступные на Вашем сайте). Для этого нажмите на кнопку "Добавить элемент" в меню слева:
  23. Нажмите на кнопку "+" в колонке или в ряду, куда хотите поместить текст:
  24. Откроется диалог с выбором типа элемента. Вы можете выбрать любой элемент из списка или элемент из заготовленных шаблоново.
    Мы создадим просто текст. Нажмите на пункт "Текст"
  25. Откроется диалоговое окошко со всеми текстами, прикрепленными к текущей странице (если они есть). Вы можете также найти текст, прикрепленный к другой странице или находящийся в другой папке.
    Чтобы вставить существующий текст, просто нажмите на галочку слева от его названия.
    Мы создадим новый текст -  нажмите на кнопку "Создать текст"
  26. Новый текст автоматически вставится на страницу в выбранное место.
  27. Теперь вы можете его редактировать.
  28. Добавьте текст, картинки и нажмите кнопку "Сохранить":

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

  29. Теперь давайте попробуем сделать так, чтобы у нас было 2 колонки на больших экранах и 1 колонка на маленьких.
  30. Давайте изменим ширину нашей колонки на 50%. В блоке "Колонки" в левом меню нажмите на кнопку "Изменить ширину"
  31. Нажмите на колонку, ширину которой будем менять.
  32. В открывшемся диалоге введите новые размеры колонки: для большого и среднего экрана 50%, для маленького и сверхмаленького - 100%. После этого нажмите кнопку "Сохранить"
  33. Теперь добавим колонку справа. Для этого нажмите на кнопку "Добавить колонку" в меню слева:
  34. Нажмите на "+" справа от колонки, которая уже есть

  35. Укажите ширину новой колонки. Для больших экранов - 50%, для маленьких - 100%. Нажмите кнопку "Создать"
  36. Колонка будет создана. Обратите внимание, что она не будет отображаться, так как она пустая - в ней ничего нет.
  37. Давайте добавим новый текст в нашу новую колонку. Для этого нажмите на кнопку "Добавить элемент" в меню слева:
  38. Нажмите на кнопку "+" в колонке или в ряду, куда хотите поместить текст:
  39. Откроется диалог с выбором типа элемента. Вы можете выбрать любой элемент из списка или элемент из заготовленных шаблоново.
    Мы создадим просто текст. Нажмите на пункт "Текст"
  40. Откроется диалоговое окошко со всеми текстами, прикрепленными к текущей странице (если они есть). Вы можете также найти текст, прикрепленный к другой странице или находящийся в другой папке.
    Чтобы вставить существующий текст, просто нажмите на галочку слева от его названия.
    Мы создадим новый текст -  нажмите на кнопку "Создать текст"
  41. Новый текст автоматически вставится на страницу в выбранное место.
  42. Таким образом, у нас 2 колонки с текстами. На большом и среднем экране они будут отображаться сбоку друг от друга, а на маленьком и сверхмаленьком - друг под другом.
  43. В целом все - вы можете создавать ряды, колонки, элементы

Что еще можно делать с элементами?

  • Удалять любой элемент, колонку, ряд - нажмите на кнопку "Удалить" у этого элемента
  • Изменять положение элемента - нажмите на кнопку "Переместить" и следуйте всплывающим подсказкам.
  • Задавать стилизацию элемента, колонки, блока или всей страницы с помощью CSS - нажмите на соответствующую кнопку
  • Создавать шаблоны страниц, рядов, элементов - в левом меню есть соответствующие кнопки

В целом, вам всегда подсказывает всплывающая подсказка справа - просто следуйте ей и все будет понятно.

Если возникнут вопросы - пишите нам. На основе ваших вопросов мы улучшаем свою систему и дополняем эту инструкцию

Заказать звонок

Мы позвоним
в рабочее время

Позвоните мне
Нажимая на кнопку "Заказать звонок", вы даете согласие c Политикой обработки персональных данных
Спасибо,

Спасибо! Заявку получили, сейчас позвоним.

Подождите,

Ваша заявка обрабатывается!

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

Подробнее о cookies можно прочитать здесь