Вернуться на предыдущую страницу joomla 3. Как сделать кнопку назад на web-странице

В этом видеоуроке мы рассмотрим 3 варианта как сделать кнопку НАЗАД для перемещения по сайту на предыдущие страницы в обратном порядке. Кнопка НАЗАД также необходима когда с нескольких страниц сайта (A1, A2…An) ссылки ведут на одну и ту же страницу (B), а с этой страницы (B) необходимо вернуться на предыдущую страницу (An) сайта, с которой Вы попали на страницу (B).

Смотрите новый видеоурок:

В этом видеоуроке мы сделаем кнопку возврата назад на предыдущие страницы сайта в программе Adobe Muse. Эта кнопка будет возвращать по тому же пути, по которому мы ходили на сайте.

Для того чтобы сделать этот урок, я приготовил небольшой проект, точнее его небольшим называть нельзя, здесь он состоит из , страниц верхнего уровня, страниц первого уровня и также для страницы «page-2» есть еще несколько дочерних страниц. И для разнообразия я создал два шаблона. Первый шаблон применил к трем первым страницам. А второй шаблон применил ко всем остальным.

Давайте начнем. Кнопку Назад – мы будем делать в «Шаблоне С», чтобы она сразу появилась на тех страницах, к которым применен данный шаблон. Я захожу в редактирование данного шаблона, и именно сюда мы будем вставлять нашу кнопку «Назад».

Кнопку «Назад» мы сможем вставить тремя способами. У меня есть специальный файл, который я уже заготовил в блокноте. И есть три способа, три кода, используя которые, у нас получится вставить такую кнопку на сайте.

Первый вариант – это просто текст. Кнопка будет у нас в виде текста. Я копирую данный код:

И вставляю его в шаблон. Выглядит это вот так. У нас просто текст и он выделен белым цветом. Я размещу его вот здесь. Для того чтобы понять, как это все работает, мы нажимаем клавиши ctrl+alt+E для того, чтобы просмотреть весь сайт со всеми его страницами в браузере. Вот так выглядит главная страница сайта. Мы можем серфить по меню, выбирать страницы. Здесь у нас есть выпадающие меню. И, например, с главной страницы мы сразу перешли на страницу «page-3». И здесь у нас есть кнопочка «Назад».

Эта кнопка активная, но при наведении курсора мыши на нее, не появляется рука с пальцем. Мы можем спокойно нажать на эту кнопку, и нас перебросит назад на главную страницу. Точно также мы можем нажать на страницу «page-3», потом перейти на страницу «page-4» и нажать кнопку «Назад», она нас перебросит на страницу «page-3», и если мы еще раз нажмем на кнопку «Назад», то она нас переносит на главную страницу. Вот таким образом работает кнопка «Назад».

Но данную кнопку сложно назвать кнопкой, поскольку она представляет собой только вот такую надпись, выделенную белым цветом. Если мы захотим отредактировать ее в Muse, мы сможем изменить только размер текста, например, я поставлю здесь «36», чтобы вам было лучше видно. Цвет текста мы, по-моему, менять не можем. Сейчас я попробую поставить красный. Я выбрал красный цвет, но это никак не повлияло на нашу надпись, так что цвет мы менять не можем. Мы можем поменять размер. Попробуем сделать жирным и выставить по центру. Все, что мы можем сделать, так это такое редактирование. Если мы хотим сделать заливку данному блоку, например, сделать оранжевым цветом, то наш текст все равно будет выделяться белым, и, в принципе, выглядит не очень красиво.

Сейчас мы его скопируем. Я нажимаю ctrl+C и перехожу в программу, и нажимаю ctrl+V для того, чтобы вставить на сайт. Он у нас выглядит вот такой ссылкой. Ссылка у нас синяя. Сейчас она не очень хороша видна. Давайте сделаем тоже 36-ой шрифт, чтобы укрупнить и увидеть поближе. Вот это у нас просто синяя ссылка. Если мы сейчас нажмем ctrl+alt+E, то увидим, что при просмотре она выглядит вот такой обычной синей ссылкой. Давайте еще перейдем пару раз, чтобы увидеть, нажимаем раз, два, возвращаемся. Вид у данной ссылки обычный, как у обычной ссылки.

К ней мы можем применять в программе Adobe Muse стили ссылок. Находятся стили ссылки в разделе «Гиперссылки», выбираем «Редактировать стили ссылки». У меня уже есть заготовленный вариант. Сейчас у меня уже есть заготовленный вариант. Вы видите, что к ней применен стиль. В стандартном состоянии и при наведении курсора мыши цвет синий и при активном состоянии – красный. Вы видели это при просмотре. Второй стиль я создал просто все черные состояния. Этот стиль мы можем применить к данной кнопке. Например, я выберу и применю к данной кнопке этот специальный стиль. И вы увидите, что наша надпись стала черной.

Здесь мы также можем сделать заливку, например, я сделаю тем же оранжевым цветом. Здесь уже можно редактировать текст. Поставим его по середине, выделим жирным. И, в принципе, этот вариант уже более похож на кнопку. Здесь уже нет такого белого выделения, и уже, в принципе, вариант уже вполне подходящий. При просмотре (ctrl+alt+E) давайте перейдем на страницу «page-3», на страницу «page-4» и еще раз пощелкаем. Эта кнопка работает точно также, как и первая, только имеет больше возможностей для редактирования дизайна.

И третий вариант как мы можем разместить кнопку – это кнопка у нас будет картинкой. Я копирую данный код:

Перехожу в Muse, нажимаю «Вставить». И этот третий вариант у нас – картинка. Для того, чтобы у нас тут появилась картинка какая-нибудь, нам необходимо скачать из интернета какой-нибудь файлик картинки либо создать его самостоятельно. Картинку мы добавляем через функцию программы «Файл», выбираем «Добавить файлы для передачи». Я уже скачал пару картинок из интернета. Мы можем выбрать какую-нибудь. Давайте выберем вот эту с кнопкой «Назад». Теперь если мы посмотрим в разделе «Ресурсы», то у нас добавилась кнопка «back2.png» – «Передать». Этот файл у нас для передачи.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "Назад" / > < / a >

Все, нажимаем «ОК». В самом Muse мы не увидим никаких изменений. Все изменения мы увидим только при просмотре сайта в браузере. Давайте нажмем снова ctrl+alt+E для просмотра сайта в браузере и попробуем посерфить по нашим страницам.

Перейдем на страницу, например, «page 2-1», теперь перейдем на страницу «page-2», теперь перейдем на страницу «page 3», далее на страницу «page-4». И теперь, если мы будем нажимать на кнопку назад, мы будем возвращаться последовательно в обратном порядке к главной странице сайта. Нажимаем «Назад», перемещаемся на страницу «page-3», на страницу «page-2». И здесь у нас уже нет кнопки. Если бы мы ее разместили в шаблоне, который применен к странице «page-2», то у нас бы здесь тоже была кнопка «Назад». Поскольку у нас ее нет, нам приходится перемещаться к главной странице, только нажав на кнопку «Главная» в меню. Давайте перейдем, например, на страницу «page 2-2-2», потом перейдем на страницу «page 2-2-1», потом на страницы «page-3 » и «page-4». И теперь в обратном порядке: страница «page-3», страница «page 2-2-1», страница «page 2-2-2» и на главную.

Конечно, вы можете не размещать данную кнопку у себя на сайте, а использовать обычные стрелки в браузере. Но если вы хотите, чтобы такая кнопка была у вас на сайте, то можете ее сделать вот такими способами.. И ссылка на статью будет под этим видео. На этом все. С вами был Дмитрий Шаповалов. Ставьте лайк к данному видео, подписывайтесь на канал , пишите комментарии внизу, а прощаюсь с вами до следующих видеоуроков.

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

Есть несколько вариантов, как можно добавить кнопку, но я лично использовал только один способ. А именно третий вариант из предложенных мною трех. Чуть далее расскажу, почему именно он.

Какие вообще есть у нас варианты:

Плюс в третьем варианте в том, что если надо будет отредактировать текст на кнопке или изменить/добавить класс стиля, то нужно будет всего поправить сам модуль, а не исправлять кнопку во всех местах, где она стоит.

Так вот, на одном из своих сайтах я и использовал третий вариант:

Был создан модуль «HTML-код» и туда с помощью расширения "Sourcerer", которое дает возможность добавлять любой код в материал, был вставлен код кнопки.

Мой рабочий код кнопки:

Вернуться назад

Текст немного украшен стрелкой, с помощью компонентов из bootstrap 3, а самой кнопке заданы стили через CSS.

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

Последствия этого могут быть ужасны: во время экспериментов неадекватная реакция сайта на нажатие кнопки «назад» была причиной ухода многих пользователей, причем с бранью и нелестными отзывами. В большинстве случаев даже почтенные, седовласые испытуемые страшно выходили из себя.

Из этой статьи вы узнаете:

• что ожидают пользователи от кнопки «вернуться назад»;
• каковы 5 самых распространенных ошибок;
• простое решение этих проблем.

Решение действительно очень простое, однако им часто пренебрегают даже самые крупные бренды. Исправим эту ошибку?

Ожидания пользователей

Коротко: пользователи ждут, что кнопка «вернуться назад» покажет им то, что они воспринимают как предыдущую страницу. Слово «воспринимают» очень важно, ведь между тем, что кажется предыдущей страницей, и тем, что является ей технически — колоссальная разница.

Возникает вопрос: что именно пользователи интерпретируют как новую страницу? В большинстве случаев, если страница существенно отличается визуально, но при этом концептуально связана с сайтом, то она воспринимается как новая. Поэтому очень важно отслеживать, как сайт обрабатывает различные интерактивные элементы: лайтбоксы, формы, фильтры и прочее.

Большая часть посетителей не разбирается в технических моментах, а полагается только на интуитивные представления о том, как должен работать ресурс. Поэтому при нажатии кнопки «назад» они ожидают страницу, на которой уже получили важный опыт, а получают страницу со слегка измененным интерфейсом.

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

Цель внедрения наложений и лайтбоксов — показать пользователю элемент, который возникает поверх страницы. Поэтому пользователи воспринимают подобные элементы как новые страницы, и нажимают кнопку «назад», чтобы вернуться в исходное положение — но попадают совсем не туда, куда ожидали. Это особенно прискорбно, ведь использование лайтбоксов только умножает отрицательное восприятие web-страницы — большинство пользователей не любят эти элементы на сайтах интернет-магазинов.

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

Данный пример подчеркивает, что люди не вникают в технические аспекты при определении новой страницы, но используют только интуицию и сформировавшееся восприятие.

3. Форма регистрации/оплаты

Страница оплаты воспринимаются как новые страницы, и даже хуже — как многоступенчатый процесс, каждый этап которого можно отменить кнопкой «вернуться назад».

Подобный подход может принести проблемы, простой пример — человек хочет вернуться на шаг назад в заполнении формы, чтобы отредактировать введенную информацию. Нажатие кнопки «назад» возвращает его в корзину, и удаляет все (!) введенные данные. Раздражение и уход с сайта — закономерный эффект.

Технология AJAX может не оправдать ожидания пользователей: технически каждая страница AJAX находится под тем же URL, однако создается впечатление, что открываются новые страницы.

В контексте электронной коммерции у пользователей есть четкое восприятие того, что страница 3 и страница 4 — отдельные, и с четвертой к третьей можно перейти с помощью кнопки «назад».

Пользователи не готовы отказаться от кнопки «назад»

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

Особенно полюбилась кнопка «вернуться назад» пользователям мобильных приложений и сайтов. Как показало исследование мобильных версий сайтов, большинство пользователей использовало эту функцию на всех предложенных ресурсах. Причем использование кнопки не ограничивается откатом одной страницы — некоторые испытуемые нажимали ее до 15 (!) раз подряд.

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

Решение

Хорошая новость: HTML5 может предложить относительно простое решение проблемы, и называется оно HTML5 History API. Конкретнее — функция history.pushState() позволяет изменять URL без перезагрузки страницы. Соответственно сайт будет вести себя адекватно ожиданиям пользователя, нажавшего кнопку «вернуться назад».

Добрый день, возник вопрос как перенести кнопку назад и поставить ее рядом с кнопкой далее при оформлении заказа.У меня сейчас это выглядит так.https://yadi.sk/i/_ZNvGrvEhqSk3Если перенести ее вниз то она перестает работать.код отвечающий за...

Есть решение

Приветствую, кто подскажет, как можно сделать кнопку назад, к примеру в корзине, чтобы человек мог вернуться на предедущую страницу?

Воткнуть в шаблон где хотите кнопку, например, вот это

+1

Когда нажимаю кнопку назад на браузере у меня как будто слетают все стили пока не обновлю страницуТема default должно показывать как на скрине ниже)Подскажите в чем проблема

Здравствуйте, сделал кнопку "Вернуться назад" в корзине, даже не кнопку, а просто ссылку с кодомВернуться назадТеперь при возвращении назад в корзине...

Есть решение

Добрый день!Столкнулся с такой проблемой: при добавлении товара в корзину и нажатии в браузере кнопки "назад", информация о товарах в корзине (в дополнительном блоке) не сохраняется, пока не обновишь страницу. Т.е. заходим на сайт, переходим...

На сайте, который вы указали используется плагин для корзины.Как вариант с доработками, можно использовать отправку добавления товаров не на?html=1, а на?html=1&items=1 это в ответ даст полностью содержимое корзины.

Добрый день.При каждом шаге во время оформления заказа указывается кнопка "Далее".В теме "Suprime" код кнопки я нашел: