как редактировать меню сайта на ucoz
База знаний uCoz
Меню сайта — один из основных функциональных элементов, состоящий из набора ссылок на ключевые страницы. По умолчанию в него входят ссылки на активные модули и стандартные страницы («Информация о сайте», «Обратная связь»). Конструктор меню позволяет изменить набор ссылок без редактирования HTML-кода шаблонов сразу для всех страниц сайта.
Когда вы добавляете страницы на сайт, они могут автоматически добавляться и в меню. Кроме того, при активации модуля ссылка на него также попадает в меню сайта. Однако при удалении страницы или модуля ссылка не будет удалена из меню.
Вы можете создавать до 10 различных меню в рамках одного сайта.
Данная инструкция состоит из следующих шагов:
Как узнать, используется ли конструктор меню на моем сайте?
В других случаях в панели управления нужно перейти в «Дизайн» / «Редактор» / «Глобальные блоки» и найти переменную в коде шаблона «Верхняя часть сайта»:
Не всегда меню размещается в указанном шаблоне, поэтому проверьте и другие: «Нижняя часть сайта», «Первый контейнер» и т.д.
Если вы разрабатываете свой шаблон, то включайте переменные меню в HTML-код. Когда покупаете шаблон в магазине или заказываете его разработку у фрилансеров, уточняйте, будет ли в шаблон встроен конструктор меню.
Редактирование меню
Чтобы отредактировать меню, перейдите в панель управления, откройте раздел «Дизайн» / «Конструктор меню»:
Выберите меню, которое хотите отредактировать:
Слева от названия меню нажмите на «Изменить параметры меню»:
Появится окно редактирования меню:
Когда закончите редактирование, нажмите на ссылку «Готово».
Изменить порядок пунктов в меню можно, перетащив его за точки с левой стороны от формы:
Чтобы изменить пункт, наведите на него курсор мыши и нажмите «Изменить»:
Появится окно редактирования пункта меню:
Когда закончите редактирование пункта меню, нажмите на ссылку «Готово».
Для добавления пункта меню нажмите на изображение «+»:
и повторите действия по редактированию меню, которые мы рассмотрели ранее.
Важно! Перед добавлением пункта меню убедитесь, что страница, на которую он ссылается, существует и доступна для пользователей.
Чтобы внесенные изменения вступили в силу и отобразились на сайте, нажмите на кнопку «Сохранить»:
Создание и размещение нового меню на сайте
Чтобы создать новое меню, в панели управления откройте раздел «Дизайн» / «Конструктор меню» и нажмите на кнопку «Добавить»:
Появится новое меню:
Скопируйте переменную, которая отвечает за отображение меню в шаблоне (в нашем примере это $NMENU_2$).
В панели управления откройте раздел «Дизайн» / «Редактор» и найдите в меню слева «Глобальные блоки»:
Затем выполните следующие действия:
Меню появится на сайте.
Другой способ разместить меню на сайте, включив конструктор из панели инструментов сайта, — отредактировать HTML-код глобального блока:
Адреса модулей системы
В этом разделе приведена информация об адресах модулей системы, которая поможет указать корректные ссылки на них:
Урок№6. Как изменить меню сайта на ucoz.ru
В этом уроке Вы узнаете, как поменять горизонтальное и вертикальное меню на ucoz.ru. Сначала мы поменяем верхнее меню, потом левое и правое.
Как поменять верхнее меню на ucoz
Верхнее меню мы изменим незначительно. Поменяем цвет фона, сделаем нижнее подчёркивание и установим цвет ссылки белым.
Найдите следующую строчку в верхней части таблицы стилей:
Поменяем сначала цвет фона меню #6B6B6B на #949494, т.е. так:
Нажмите «Сохранить» и Вы увидите, что фон стал более светлым.
Теперь давайте сделаем нижнее подчёркивание чёрного цвета (#000000) толщиной в 2px, т.е. нам нужно добавить следующий код (красным цветом помечено то, что было добавлено):
Нам осталось поменять цвет ссылки в верхнем меню. Для этого нам нужно найти четыре строчки, которые расположены ниже (после стилей для заголовка h1) и слегка подправить их:
Для всех вышеперечисленных стилей мы зададим белый цвет #FFFFFF. Данные text-decoration мы оставим без изменений.
Итак, приведите стили для ссылок верхнего меню в следующий вид (красным цветом помечено то, что было изменено):
Нажмите «Сохранить» и обновите сайт. Фон мы поменяли, нижнее подчёркивание сделали, и цвет ссылок поменяли. Наведите курсор мышки на любой пункт верхнего меню, и Вы увидите, что нижнее подчёркивание исчезает у ссылки (за эту функцию отвечает стиль text-decoration:none).
Как поменять вертикальное меню сайта на ucoz
Как видите, серый фон левой и правой колонки не очень сильно подходит к нашему новому дизайну. Предлагаю добавить красок в вертикальное меню.
Для начала поменяем фон, поверх которого отображаются пункты меню. Для этого нам нужно найти и отредактировать следующий код:
Вместо #F6F6F6 укажите цвет #E8B556:
Нажмите «Сохранить» и посмотрите, что получилось. Да, пока не очень всё красиво выглядит, но не пугайтесь, сейчас мы всё оформим в лучшем виде. 😉
На следующем шаге мы поменяем фон заголовков блоков меню (Поиск, Друзья сайта, Статистика, Форма входа и т.д.). Найдите строчку:
Замените цвет #EBEBEB на #9C793A:
Нажмите «Сохранить». Фон заголовка мы поменяли, теперь удалим разделительные линии серого цвета между блоками меню. Они нам не понадобятся.
Нам нужно удалить следующие стили:
border-top:1px solid #DDDDDD;
border-bottom:1px solid #DDDDDD;
Чтобы понять, что мы удаляем, я предлагаю Вам на время поменять цвет #DDDDDD на #FF0000 (красный цвет), и Вы увидите, о каких линиях идёт речь.
Нажмите «Сохранить». Линии исчезли.
Добавьте на отдельной строчке нижеприведённый код в таблицу стилей и нажмите «Сохранить»:
Обновив сайт, Вы увидите, что ссылка подчеркнута, и цвет ссылки поменялся на белый. Наведите курсор мышки на любую ссылку в блоке «Друзья сайта». Вы обнаружите, что ссылка никак не меняется. Как упоминалось раньше, a:hover – псевдокласс для ссылок, на которые наводится курсор. Цвет ссылки для псевдокласса a:hover мы не будем менять, но сделаем так, чтобы нижнее подчёркивание у ссылки убиралось. Добавьте в таблицу стилей CSS следующий код:
.boxContent li a:hover
Сохраните изменения, и Вы увидите, что при наведении курсора мыши на любую из ссылок блока «Друзья сайта» нижнее подчёркивание исчезает.
В правой колонке мы сделали всё, что нужно.
Перейдём к доработке дизайна в левой колонке.
В первую очередь мы поменяем оформление пунктов меню. Сначала мы изменим фон и цвет рамки пунктов меню. Для этого нужно найти и отредактировать следующий код:
Чтобы поменять фон пунктов меню, нужно код url(‘/.s/t/844/3.gif’) repeat-x #FFFFFF заменить на #9C793A.
Чтобы поменять серый цвет рамки пунктов меню на чёрный, нужно в border заменить код #DDDDDD (серый цвет) на #000000 (чёрный цвет).
В итоге мы получаем следующий код (красным цветом обозначены произведённые изменения в коде):
Теперь нам нужно поменять цвет ссылок пунктов меню. Для этого мы будем править следующие коды, которые расположены чуть выше .uMenuV li:
Мы поменяем только цвет ссылок во всех состояниях на #FFFFFF (белый цвет). Т.е. данные коды должны быть приведены в следующий вид (красным цветом помечены изменения, которые произошли):
Сохраните все изменения и обновите сайт. Вроде ничего получилось. 🙂
Нам осталось сделать пару завершающих штрихов – это поменять серый цвет линии под заголовком «Статистика» на #FFFFFF (белый цвет) и разобраться с формой входа.
Чтобы поменять цвет линии на #FFFFFF нужно найти и отредактировать следующий код:
Что мы видим, исходя из стилей CSS:
Чтобы поменять цвет линии на белый нужно заменить значение background – #CCCCCC на #FFFFFF. Также удалим лишний код color. В итоге мы получаем следующий код:
Осталось поменять оформление формы входа. Через таблицу стилей, к сожалению, нет возможности делать изменения в дизайне формы входа. Поэтому мы немного поменяем код в шаблоне сайта.
Найдите строчку, где стоит заголовок h2 «Форма входа»:
Передвиньте горизонтальную прокрутку вправо до места, где стоит код —>$LOGIN_FORM$ —>:
Удалите —>$LOGIN_FORM$ —> и вместо него вставьте следующий:
Вместо ЗДЕСЬ_ДОЛЖНО_БЫТЬ_НАЗВАНИЕ_САЙТА нужно вставить название сайта. В моём случае, katalogik.ucoz.ru – адрес сайта, а katalogik – название сайта. Значит я вставляю следующий код:
Вы же вставляете название своего сайта.
Нажмите «Сохранить» и обновите дизайн сайта. На данный момент мы видим обычную ссылку серого цвета. Чтобы изменить вид ссылки, нужно задать стили для #login.
#login
#login a
#login a:hover
Сохраните изменения и обновите сайт. Ссылка для входа пользователей расположена по центру, у неё теперь белый цвет, она подчёркнута, и при наведении на неё курсора мыши подчёркивание исчезает.
Осталось немного доработать форму входа. Я предлагаю сделать двойную рамку вокруг ссылки «Войти через uID». Для этого в #login мы добавим следующие значения (красным цветом то, что нужно добавить):
Нажмите «Сохранить» и обновите главную страницу сайта.
Нам осталось изменить цвет текста в левом меню, когда открываются категории каталога. Зайдите в раздел «Каталог сайтов», и Вы увидите следующую картину в левом меню:
Как видите, ссылки не сочетаются с дизайном сайта. Давайте подправим это. Для редактирования ссылок мы будем менять следующие стили:
О том, что каждый псевдокласс означает, мы поговорили в начале данного урока. Предлагаю для всех псевдоклассов указать чёрный цвет #000000 и все ссылки сделать подчёркнутыми. Ссылку без подчёркивания мы сделаем только для того случая, когда курсор мыши наводится на ссылку, т.е. для псевдокласса «a.catName:hover» мы оставим значение «text-decoration:none; » без изменений. Таким образом, мы указываем следующие значения (красным отмечено то, чтобы было изменено):
Сохраните изменения и обновите страницу, оставаясь в разделе каталога сайта. Мы видим, что оформление ссылок поменялось не только в левом меню, но и в содержимом сайта. Нам осталось поменять цвет скобок, которые стоят рядом с каждой ссылкой. Для этого нужно отредактировать следующий код:
Поменяем серый цвет #6E6E6E на чёрный #000000:
Сохраните изменения и обновите страницу. Цвет скобок поменялся.
Поздравляю Вас! За 6 уроков мы полностью поменяли дизайн сайта на ucoz. А сейчас, давайте сравним, что было до и после, и полюбуемся результатом нашей с Вами работой. 😉
После
На мой взгляд, получилось неплохо. По крайней мере, теперь Вы знаете принцип того, как надо менять основные элементы сайта, сделанного на UCOZ.
Как редактировать меню сайта на ucoz
Очень важно! Если вдруг, перед тем как изучить урок вы обнаружили что вид вашей панели отличается от того что описано в уроке, не пугайтесь! Просто переключите новую панель на старую. Как это сделать? Вот в этой инструкции.
Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.
Конечно тот кто не забрасывает, а пытается разобраться в этой системе сам, со временем делает неплохие сайты.
Где найти конструктор меню в ucoz?
Недавно один знакомый столкнулся с такой проблемой, он создал новую страницу у себя на сайте, а через некоторое время удалили эту страницу, но пункт который добавляется в меню автоматически, или по другому ссылка на эту страницу, не была удалена и теперь если нажать на эту ссылку, нас перекидывает на страницу, где написано что такой страницы не существует. Страницы давным давно нету, а вот ссылка на неё в меню осталась, как-же её удалить?
Следующим шагом в панели управления нужно найти кнопку дизайн, она располагается в самом верхнем меню на странице. Когда нажмёте на эту кнопку, появится дополнительное окно, в котором найдите кнопку конструктор меню, нажмите на неё.
На следующем этапе откроется страница, на которой можно управлять нашим меню. Здесь можно полностью настроить свою меню, добавить новые пункты, удалить старые, поменять название каждого пункта, сделать под пункты. Выглядит это так.
Сразу начнём разбираться с первой строчки. В первой строчке мы видим два кода, первый код помогает вставить горизонтальное меню для ucoz, а второй вертикальное меню для ucoz. Просто скопируйте нужный код и вставьте его туда, где хотите что-бы он отображался, например в верху сайта или на отдельной странице.
Немного ниже, можно увидеть пункты которые отображаются у нас в меню на сайте. Пункт меню, эта обычная ссылка, которая ведёт на страницу или раздел вашего сайта. Возле каждого пункта есть по две кнопочке. Первая кнопочка карандашик, он помогает редактировать пункт меню и задавать новое название для пункта. Сверху я рассказывал историю про страницу. Человек удалили страницу а ссылка в меню осталось, и он не как не мог найти как удалить её. Как раз вторая кнопочка крестик, помогает удалять ненужные пункты из меню.
Следующая кнопка помогает добавлять новые пункты в меню. Если хотите добавить ещё раздел в ваше меню, просто нажмите на это кнопку, должно открыться окно, в окне дайте название своему пункту и укажите ссылку на раздел, после нажмите сохранить. Раздел должен появится среди других кнопок в меню.
Если вы заметили, перед каждым пунктом есть маленький плюсик. Этот полюсик позволяет делать под пункты, то-есть у каждого пункта в меню, может быть под-пункт. На картинке ниже у пункта онлайн игры, есть два под-пункта. Под-пункты можно узнать по отступам от края.
Что-бы самому сделать под-пункт, захватите плюсик и перетащите его на другой плюсик, программа выполнит вложение и пункт который вы перетаскивали, станет под пунктом. После нажмите кнопку сохранить. Кстати у под-пунктов, могут быть свои под-пункты.
Ну и последние кнопки помогают изменить название у меню и удалить меню. В этих кнопках можете разобраться сами. Эти кнопки находятся с право на странице.
Если меню было удаленно, его можно заново создать при помощи кнопки создать меню. Эту кнопку найдёте вместо кнопок изменить и удалить.
В следующих уроках, мы рассмотрим как влиять на это меню при помощи стилей css. Просто заранее вы должны знать, что каждое меню на сайте ucoz можно оформить под себя, а точнее поменять цвет, вставить картинки, в монтировать в любом месте на сайте. Можете посмотреть пример на картинке ниже, я делал это меню для своего сайта.
А так спасибо за внимание, если вдруг что-то было не понятным, задавайте вопросы в комментариях или смотрите видео, там более подробно будем разбираться с меню.
База знаний uCoz
Первый вход в панель управления: где можно редактировать страницы сайта?
Все страницы сайта, перенесенного с Яндекс Народ 1 находятся в «Файловом менеджере«. Попасть в него можно с главной страницы панели управления:
Файловый менеджер представляет собой таблицу файлов и папок вашего сайта.
Перенос главной страницы сайта с «/index.htm» из файлового менеджера в редактор страниц
После переезда сайтов с Narod.Ru на uCoz многие столкнулись с проблемой редиректа (автоматического перенаправления) главных страниц своих сайтов на страницы вида http:// адрес-сайта /index.htm. Сейчас мы расскажем, как это исправить.
1. Зайдите в панель управления своим сайтом по адресу: http:// адрес-сайта /admin
2. Найдите в файловом менеджере искомый файл /index.htm, откройте его в режиме редактирования и скопируйте содержимое файла (на всякий случай, советуем сохранить данный файл у себя на компьютере, поскольку впоследствии его нужно будет удалить из файлового менеджера):
3. Теперь можно переходить к работе с модулем «Страницы / Редактор страниц»:
Если по какой-либо причине данный модуль оказался не активирован, найдите его во вкладке «Неактивные», кликните по названию модуля и нажмите на появившуюся кнопку «Активировать модуль».
4. Внутри данного модуля нам нужно перейти к «Управлению страницами сайта / Все страницы»:
5. Видим строку «Главная страница» отмечаем ее и жмем кнопку «Редактировать / Изменить»:
6. На открывшейся странице ставим галочку рядом с пунктом «Использовать персональный шаблон для страницы» и нажимаем «Сохранить»:
8. Выбираем «Главную страницу» и в открывшемся поле для редактирования заменяем всё его содержимое на код страницы, скопированный в п.2.
9. Теперь нам нужно отыскать в самом низу нашего кода тег copyright и заменить его содержимое системным кодом $POWERED_BY$. В итоге у нас должно получиться следующее:
10. Нажимаем кнопку «Сохранить», а также не забываем удалить файл /index.htm из файлового менеджера (см. п.2). Очищаем кэш браузера и любуемся результатом!
Важно! Так же стоит учитывать, что все сайты, которые только переехали с Narod на uCoz, хранят все страницы с текстами в Файловом менеджере FTP где и нужно их редактировать(файлы с именами на подобии index.html либо index.htm).
Важно! Выше мы описывали процесс переноса главной страницы Narod с файла index.htm в модуль Редактор страниц / Страницы, таким же способом вы можете перенести 20 страниц с таких же похожих файлов.
На сайтах, созданных в конструкторе Народа, весь дизайн хранится в глобальных блоках, а контент страниц в модуле Страницы / Редактор страниц, на страницы сайта.
Контент шапки со всех страниц сайта содержится в глобальном блоке «верхняя часть сайта». Контент футера – точно также, в глобальном блоке «нижняя часть сайта».
Если в страницах «редактора страниц» при редактировании данные пусты, то весь контент может находится в глобальном блоке «верхняя часть сайта», или в «нижней части сайта». Зависит от того, в какую ячейку вы добавляли контент на Народе.
После убираете тот контент что был перенесен вами в «редактор страниц, страницы сайта» (условия тоже полностью удаляете). Количество символов в глобальном блоке не будет уже превышать лимит и сохранится. В коде глобального блока должен остаться только шаблон шапки (если он есть), без контента. Подробнее в этой инструкции.
Пояснение
При сохранении изменений у вас может быть ошибка связанная с ограничением количества символов в глобальном блоке (40000 символов). В этом случае вам необходимо вручную распределить контент по страницам в модуле редактор страниц.
Отсюда вопрос: почему контент сайта не располагается в центральной части (в страницах модуля редактор страниц). Это произошло потому, что вы при создании страниц не очень хорошо изучили структуру шаблонов конструктора Народа и небрежно заполнили блоки, только поэтому содержимое не попало по назначению.
Урок№3. Учимся добавлять страницы и редактировать пункты меню на ucoz.ru
В этом уроке мы узнаем, как создавать новые страницы, как подключать модули, а также как редактировать и удалять пункты меню.
Наша задача создать следующие пункты меню и страницы:
Для того чтобы удалить пункт меню «Информация о сайте» нажмите на крестик справа от названия, после – на кнопку «Сохранить».
Теперь Вы знаете, как удалять пункты меню!
Нам нужно создать раздел «Каталог сайтов», в котором будут описания всех сайтов, распределённых по категориям. Для этого нужно в левом меню админки перейти во вкладку «Неактивные» и выбрать модуль «Каталог сайтов», после чего активировать модуль, указав пункт «Малый каталог (18 категорий)».
Перед Вами появится список групп пользователей, где Вы можете им устанавливать права. Наша задача заключается в том, чтобы дать возможность добавлять материалы на сайт всем посетителям. Для этого сначала нужно нажать на гаечный ключик напротив группы пользователей «Гости».
Затем нужно раскрыть список «+ Каталог сайтов» и поставить галочку напротив пункта «Добавлять материалы», после чего нажать на кнопку «Сохранить».
Зайдите на страницу «Каталог сайтов», и Вы увидите, что в правом верхнем углу содержимого сайта появилась ссылка [ Добавить сайт ]. Нажав на эту ссылку, посетитель может добавить информацию о своём сайте, которая будет опубликована после проверки модератора.
Давайте попробуем добавить сайт webcaum.ru в данный каталог, чтобы понять весь процесс регистрации сайта. Нажав на ссылку [ Добавить сайт ], Вы попадёте на страницу добавления материала. Выберите категорию «Интернет».
Остальные данные, которые нужно указать:
Название сайта *: Как создать свой сайт
Ссылка на сайт *: https://webcaum.ru
Описание сайта: Добро пожаловать на блог сайтостроителя! В этом блоге Вы узнаете о разных способах создания и продвижения сайтов, а также о том, как заработать в Интернете с помощью сайта и без него.
Далее укажите своё имя, e-mail и введите проверочный код, после чего нажмите «Добавить». Перед Вами появится следующее сообщение:
На странице управления материалами Вы увидите заголовок, который мы указывали при регистрации сайта в каталоге. Нажмите на гаечный ключик справа от заголовка. Данная кнопка позволяет редактировать информацию о сайте, а также подтверждать или запрещать размещение сайта в каталоге.
Пункт меню и раздел «Каталог сайтов мы создали. Теперь нам нужно создать четыре пункта меню:
Но прежде чем добавить данные пункты меню, нам нужно создать страницы, на которые они будут вести. Это будут простые страницы, где планируется размещение общей информации о каталоге и его услугах.
Для начала удалите лишние страницы «Информация о сайте» (данная информация будет на главной странице) и «Обратная связь» (мы создадим позже). Чтобы удалить страницу нажмите красный крестик.
Чтобы добавить новую страницу нажмите на кнопку «Добавить страницу» в правом верхнем углу.
Сначала добавим страницу «Как добавить сайт».
Название страницы укажите следующее: Как добавить сайт в каталог
В содержимое страницы напишите: На данной странице будет инструкция по добавлению сайта в каталог.
Опции и группы, имеющие доступ к странице мы оставим без изменений. Хочу обратить Ваше внимание на то, что в настройках опций стоит по умолчанию галочка у пункта «Добавить ссылку на страницу в главное меню сайта». Это означает, что в левом меню автоматически добавится пункт, который будет вести на создаваемую страницу.
Таким же образом создайте страницы «Полезные советы», «Правила каталога», «Платные услуги».
Данные, которые нужно указать для страницы «Полезные советы».
Название страницы: Полезные советы по добавлению сайта в каталог.
Содержимое страницы: На данной странице будут представлены полезные советы по добавлению сайта в каталог.
Данные, которые нужно указать для страницы «Правила каталога».
Название страницы: Правила каталога.
Содержимое страницы: На данной странице будут представлены правила каталога.
Данные, которые нужно указать для страницы «Платные услуги».
Название страницы: Платные услуги каталога.
Содержимое страницы: На данной странице будет представлено описание платных услуг каталога.
Итак, новые страницы мы добавили. Теперь давайте зайдём на главную страницу нашего сайта и посмотрим на автоматически созданные пункты меню, которые ведут на данные страницы. Мы увидим – из-за того что названия у некоторых страниц слишком длинные, они в левом меню сокращаются. Например, на страницу «Как добавить сайт в каталог» ведёт пункт меню «Как добавить сайт в …». Давайте исправим это и придадим нашим пунктам меню более красивый вид.
Чтобы отредактировать пункт меню, нажмите карандашик справа от его названия. Сократите названия пунктов меню, приведя их в следующий вид:
Исправив все названия, нажмите «Сохранить». Только после этого изменения вступят в силу.
Затем нажмите кнопку «Активировать модуль».
Затем нажмите кнопку «Активировать модуль».
Обновите главную страницу сайта, и Вы увидите, что в левом меню добавился пункт «FAQ (вопрос/ответ)». Если Вы перейдёте по этой ссылке, то попадёте на страницу, где любой желающий может задать свой вопрос, нажав на ссылку [ Добавить вопрос ] в правом верхнем углу.
Затем нажмите кнопку «Активировать модуль».