Как сделать кнопку joomla
Как создать кнопку призыва к действию
Призыв к действию (ПКД) используется в маркетинге, чтобы преобразовать посетителей сайта в потенциальных клиентов или покупателей. Это очень простой элемент дизайна, используемый на веб-сайтах, который выделяется из основного содержимого и стимулирует читателя к действию. Как правило, призыв к действию поможет пользователю перейти к регистрационной форме, форме подписки или к странице покупки.
В этом уроке я покажу вам несколько трюков, как создать призыв к действию в Joomla и интегрировать его в ваш контент.
Создайте картинку призыва к действию
Создание стильной картинки, которая привлечет внимание ваших посетителей может быть хорошим способом, чтобы увеличить конверсию. Вы можете создать картинку с помощью Photoshop или других программ для редактирования изображений.
Во-первых, выбрите классный фон для вашего изображения, добавьте заголовок, который будет привлекать внимание и создать яркую кнопку. Вот быстрый пример, который я создал:
После того как изображение будет готово, зайдите в ваш менеджер модулей Joomla, создать новый пользовательский HTML модуль и загрузите изображение. Вставить картинку в модуль текстового редактора, разместить ссылку на изображения, скройте Заголовок модуля и опубликовать модуль на несуществующей позиции модуля (это необходимо, поскольку вы только хотите, чтобы этот модуль отображался в контенте).
Теперь перейти к статье, в которой вы хотите разместить модуль, и добавьте следующий код в любом месте текста:
Эта команда загрузит установки модуля “calltoaction”. Если у вас есть несколько модулей, опубликованных в этом положении, все они будут загружены, так что подготовьте модули соответствующим образом.
Сохраните статью и проверьте страницу материала на вашем сайте. Теперь вы должны увидеть изображение в вашей статье.
Вы наверное спросите, почему не напрямую вставить изображение в статью вместо создания модуля? Ну, если Вы планируете использовать один и тот же призыв к действию, отображая его на нескольких страницах, то легче контролировать его с помощью модуля, вместо постоянной настройки модуля и ссылок в каждой статье.
Использование модуля призыва к действию
Вместо того, чтобы использовать изображение, Вы также можете использовать модуль призыва к действию. Например, вот отличный модуль призыва к действию, который может быть полностью настроен. Вы можете изменить любой цвет, а также стили кнопок, чтобы заставить его выделиться на вашем сайте еще больше. Этот модуль совместим с Joomla версий 2.5 и 3.x.
Чтобы использовать этот модуль на вашем сайте, его необходимо скачать и установить, как вы делаете это с любым другим расширением Joomla. После установки, перейдите в менеджер модулей и настройте модуль:
1. Добавить название вашего призыва к действию (и описание, если хотите), а также выбрите для него цвет
2. Выберите цвет фона модуля (выбирайте цвет, который выделится из контента и сделает заголовок более заметным)
3. Настройте кнопки, выберите стиль, цвет и значок FontAweasome.
Теперь обновите ваши статьи, страницы и убедитесь, что модуль установлен и настроен правильно.
Эти два метода я использую, чтобы вставить форму призыва к действию в моих проектах. Иногда я использую просто изображения, в других случаях я использую модуль. Все зависит от каждой конкретной ситуации. Но решение с модулем может быть особенно универсальным, если вы хотите добавить его к большому количеству избранных статей.
Хотите рассказать о том, как вы создаете призывы к действию? Расскажите об этом в нашей группе ВКонтакте!
Как создать кнопку призыва к действию
Призыв к действию (ПКД) используется в маркетинге, чтобы преобразовать посетителей сайта в потенциальных клиентов или покупателей. Это очень простой элемент дизайна, используемый на веб-сайтах, который выделяется из основного содержимого и стимулирует читателя к действию. Как правило, призыв к действию поможет пользователю перейти к регистрационной форме, форме подписки или к странице покупки.
В этом уроке я покажу вам несколько трюков, как создать призыв к действию в Joomla и интегрировать его в ваш контент.
Создайте картинку призыва к действию
Создание стильной картинки, которая привлечет внимание ваших посетителей может быть хорошим способом, чтобы увеличить конверсию. Вы можете создать картинку с помощью Photoshop или других программ для редактирования изображений.
Во-первых, выбрите классный фон для вашего изображения, добавьте заголовок, который будет привлекать внимание и создать яркую кнопку. Вот быстрый пример, который я создал:
После того как изображение будет готово, зайдите в ваш менеджер модулей Joomla, создать новый пользовательский HTML модуль и загрузите изображение. Вставить картинку в модуль текстового редактора, разместить ссылку на изображения, скройте Заголовок модуля и опубликовать модуль на несуществующей позиции модуля (это необходимо, поскольку вы только хотите, чтобы этот модуль отображался в контенте).
Теперь перейти к статье, в которой вы хотите разместить модуль, и добавьте следующий код в любом месте текста:
Эта команда загрузит установки модуля “calltoaction”. Если у вас есть несколько модулей, опубликованных в этом положении, все они будут загружены, так что подготовьте модули соответствующим образом.
Сохраните статью и проверьте страницу материала на вашем сайте. Теперь вы должны увидеть изображение в вашей статье.
Вы наверное спросите, почему не напрямую вставить изображение в статью вместо создания модуля? Ну, если Вы планируете использовать один и тот же призыв к действию, отображая его на нескольких страницах, то легче контролировать его с помощью модуля, вместо постоянной настройки модуля и ссылок в каждой статье.
Использование модуля призыва к действию
Вместо того, чтобы использовать изображение, Вы также можете использовать модуль призыва к действию. Например, вот отличный модуль призыва к действию, который может быть полностью настроен. Вы можете изменить любой цвет, а также стили кнопок, чтобы заставить его выделиться на вашем сайте еще больше. Этот модуль совместим с Joomla версий 2.5 и 3.x.
Чтобы использовать этот модуль на вашем сайте, его необходимо скачать и установить, как вы делаете это с любым другим расширением Joomla. После установки, перейдите в менеджер модулей и настройте модуль:
1. Добавить название вашего призыва к действию (и описание, если хотите), а также выбрите для него цвет
2. Выберите цвет фона модуля (выбирайте цвет, который выделится из контента и сделает заголовок более заметным)
3. Настройте кнопки, выберите стиль, цвет и значок FontAweasome.
Теперь обновите ваши статьи, страницы и убедитесь, что модуль установлен и настроен правильно.
Эти два метода я использую, чтобы вставить форму призыва к действию в моих проектах. Иногда я использую просто изображения, в других случаях я использую модуль. Все зависит от каждой конкретной ситуации. Но решение с модулем может быть особенно универсальным, если вы хотите добавить его к большому количеству избранных статей.
Хотите рассказать о том, как вы создаете призывы к действию? Расскажите об этом в нашей группе ВКонтакте!
Добавление безопасных кнопок социальных сетей в материалы Joomla и товары Virtuemart
Знаю-знаю, тема избитая. Но не думайте, что будет совсем скучно читать. В этой статье мы поговорим не только о том, нужны ли кнопки социальных сетей на сайте. Мы разберем вопросы безопасности использования таких кнопок, а также научимся быстро и легко интегрировать безопасные кнопки социальных сетей в материалы Joomla и Virtuemart. Никаких хаков, никаких дополнительных расширений Joomla.
Кнопки социальных сетей: добавлять ли на сайт?
Когда я обновлял сайт wedal.ru, кнопки социальных сетей, которые присутствовали на страницах с материалами, утерялись. Из-за перехода сайта на Seblod, полностью изменились макеты страниц материалов и ранее интегрированные кнопки были потеряны.
Я некоторое время думал: «Стоит ли восстанавливать кнопки социальных сетей?». В итоге пришел к выводу: да, стоит. «Почему?» – спросите вы. В первую очередь, как ни странно, для себя. Для сайта wedal.ru есть отдельные профили Вконтакте и в других социальных сетях. Группу Вконтакте я не создаю, поскольку боюсь, что не буду успевать следить за ней, а вот профиль в самый раз. Если вы не хотите подписываться на новые выпуски по Email, то можете просто подать заявку в друзья, и получать новые статье в ленте новостей Вконтакте. Думаю, некоторым людям так удобнее.
Так вот, при чем здесь кнопки социальных сетей? На стену профиля Вконтакте я публикую материал именно с помощью одной из таких кнопок. Да, можно автоматизировать процесс таким образом, чтобы при публикации статьи, запись на стене появлялась сама. Но часто статью приходится пересохранять по несколько раз, исправляя мелкие или крупные недочеты. Мне гораздо удобнее нажать на такую социальную кнопку, которая опубликует запись на стене, чем пытаться этот процесс автоматизировать, избегая всех подводных камней.
Или другой вариант: вы – читатель. Вам понравилась статья, и вы не хотите ее потерять. Раньше мы бы добавили статью в закладки браузера или в социальные закладки. Сегодня проще добавить анонс статьи себе на стену в одной из социальных сетей. У многих людей стены как раз и играют роль закладок. Кроме того, статья, которую пользователь добавить на стену, используя социальные кнопки, автоматически показывается в ленте всех его друзей (по крайней мере, во Вконтакте именно так), а это значит, что анонс увидит большее число людей. Кого-то он может заинтересовать, и, вуаля, к вам на сайт идут новые посетители.
Некоторые веб-мастера дополнительно накручивают счетчики социальных сетей через сервисы вроде Bosslike. Есть мнение, что это способствует ускоренной индексации статей, а также привлекает на сайт дополнительных посетителей.
Недостатки социальных кнопок для сайта.
Основным недостатком использования на сайте социальных кнопок для меня всегда было то, что они связываются со сторонними серверами, что замедляет загрузку страниц сайта. Было бы неплохо иметь асинхронную загрузку.
Второй недостаток: вопрос безопасности. Сейчас развелось очень много сервисов, позволяющих интегрировать кнопки социальных сетей на сайт «буквально в пару кликов». Вы выбираете нужные для интеграции кнопки, после чего получаете готовый скрипт. Чаще всего этот скрипт обращается на сайт сервиса, через который уже происходит взаимодействие с социальными сетями. Какую информацию он собирает и передает? И главное, за счет чего существует сервис? Часто данные о посетителях, использующих кнопки таких сервисов у себя на сайте, собираются и продаются заинтересованным лицам. Репутация же может пострадать ваша.
«Какие кнопки социальных сетей выбрать?» – вот основной вопрос, к которому мы приходим.
Какие кнопки социальных сетей выбрать?
Проще всего воспользоваться старым добрым набором кнопок от Яндекса. Но внутренний параноик подсказывает, что есть какой-то подвох. Вряд ли Яндекс организовал такой сервис по доброте душевной. Если посмотреть документацию по сервису, то мы увидим пункт, что Яндекс оставляет за собой право сбора статистических данных:
«Пользователь понимает и соглашается с тем, что блок, с момента, установленного п. 2.2. Условий, собирает анонимные и обезличенные (без привязки к персональным данным посетителей сайта пользователя) данные о посещениях сайта Пользователя, а также анонимные и обезличенные данные о самом сайте Пользователя, и в автоматическом режиме передает их Яндексу для хранения обобщенной статистической информации, доступной для дальнейшего использования Яндексу в его собственных целях.»
Вообще, есть у меня подозрения, что любой скрипт от Яндекса, интегрированный на сайт (Директ, Метрика, Карты), собирает всё, что только может собрать. Такие данные могут, как помочь улучшить позиции сайта, так и подвести его под фильтры поисковой системы. Всё зависит от качества сайта. Что-то после прочтения этого пункта условий желание использовать кнопки от Яндекса лично у меня пропало.
Что в итоге имеем? Нам нужен скрипт социальных кнопок, который:
Еще некоторое время назад я приметил подходящий скрипт – Social Likes. Его преимущество в том, что это именно скрипт, скрипт для сайта, но не сторонний сервис. Вы можете интегрировать этот скрипт так же, как слайдер или скроллер.
Для параноиков: исходный код Social Likes полностью открыт. Вы можете знать обо всем, что он делает.
Social Likes предоставляет возможность разместить на сайте кнопки:
На сайте по ссылке выше вы сможете найти простейший конструктор для создания одного из вариантов, представленных на рисунке. Если же вы владеете CSS, то всегда можете оформить кнопки под себя.
Интеграция Social Likes в Joomla.
Интеграция Social Likes очень простая и состоит из двух этапов:
Если эти пункты кажутся сложными, спешу успокоить: все очень просто. Идем по шагам.
Шаг 1. Загрузка файлов на сервер.
В архиве, который вы скачаете со страницы конструктора, будет 3 файла:
Файлы social-likes.min.js и social-likes_classic.css мы должны поместить в каталоги templates/ваш_шаблон/js/ и templates/ваш_шаблон/css/. Если каталогов css или js нет в папке с используемым вами шаблоном Joomla, просто создайте их.
На этом первый шаг закончен. Вроде несложно?)
Шаг 2. Подключение файлов и добавление кода кнопок.
Обычно социальные кнопки используются не на всех страницах сайта, а значит подключать файлы их скриптов и css-стилей на всех страницах также бессмысленно.
Мы объединим код кнопок и код подключения файлов в общий код.
Этот код будет следующим:
Весь код, кроме первых двух строчек вы должны взять из файла index.html, который будет в скачанном архиве, но не из примера кода выше! Также обратите внимание на название CSS-файла в первой строчке. Его название в архиве может быть другим, в зависимости от того стиля оформления, который вы выбрали в конструкторе. Название этого файла в коде и на сервере, куда он был загружен, должны совпадать!
Еще одна важная особенность! В используемом шаблоне Joomla должен быть подключен JS-фреймворк jQuery. Если у вас Joomla 3+, то практически наверняка он уже подключен.
Теперь самое главное и сложное: разобраться с тем, куда этот код вставлять.
Добавление социальных кнопок в материал Joomla
Если вы хотите добавить социальные кнопки в материал Joomla, то вам нужно поместить данный код в макет материала Joomla. Для этого файл:
components/com_content/views/article/tmpl/default.php
нужно скопировать в:
templates/ваш_шаблон/html/com_content/article/
и в скопированном файле подобрать место, в которое вы хотели бы вставить социальные кнопки. Как это сделать, если в коде файла вы ничего не понимаете? Методом тыка! Вставляйте несколько единичек в том или ином месте файла и смотрите, где они появятся на странице материала на сайте. Когда нужное место будет подобрано, замените единички кодом кнопок. Все, что важно знать об этом макете – основной текст материала выводится переменной:
Все, что выше нее, будет над текстом материала, все, что ниже, под текстом.
Если вы хотите добавить социальные кнопки в товар Virtuemart, то вам нужно поместить данный код в макет товара Virtuemart. Для этого файл:
components/com_virtuemart/views/productdetails/tmpl/default.php
нужно скопировать в:
templates/ваш_шаблон/html/com_ virtuemart/productdetails/
и в скопированном файле подобрать место, в которое вы хотели бы вставить социальные кнопки по аналогии с тем, как это описано для материала Joomla.
Если все сделано правильно, в нужном вам месте появятся красивые социальные кнопки. Они не будут привязаны к какому-либо сервису, и вы сможете быть спокойны за данные вашего сайта и его посетителей.
Продолжаем серию уроков посвященных редактированию стандартного шаблона Joomla 3, имя которому Protostar. С редактированием шаблонов мы уже познакомились на предыдущих уроках и делали следующее:
Данный урок мы посвятим оформлению правого меню, а так же создадим красивую кнопку «Наверх», которая будет вести в начало страницы.
Редактирование оформления правого меню на сайте
Первым делом начнем с меню в правой части страницы, ведь его стандартное оформление в шаблоне Protostar оставляет желать лучшего:
Оформлять внешний вид модуля меню в правой части страницы будем как всегда при помощи CSS. Но для начала необходимо определить из чего состоит меню, и какие классы применены к его элементам. Не буду вдаваться в подробности как это сделать, об этом мы говорили в соответствующем уроке.
Для начала давайте уберем серый фон и рамку модулей в правой части страницы (position-7). Как выяснилось, за цвет фона модуля отвечает контейнер с классом «well»:
Чтобы от него избавиться применим к контейнеру
Эти стили уже прописаны в стандартном файле template.css в строках 2173 и 2174 и их тут же можно подправить. Но так как у меня подключен новый файл стилей (как это сделать мы говорили в данном уроке), чтобы не потерять изменения при обновлении Joomla, я буду записывать все стили в него. Однако в моем случае придется к каждому стилю дописать свойство «!important» чтобы повысить их приоритет.
После этого я применил к данному контейнеру еще несколько стилей – подправил отступы и убрал тень сверху, они реально не нужны. В результате код получился таким:
Теперь модули, в том числе и меню в правой части страницы выглядят следующим образом (для наглядности в модуле меню я скрыл некоторые пункты):
Меню несколько преобразилось, но выглядит все так же не красиво, оно и понятно, мы толком то ничего и не поменяли. Продолжаем редактирование, на этот раз поменяем оформление заголовков модулей, в том числе и меню. Для этого к заголовкам добавим следующие стили:
Следом добавим стили к пунктам меню, для начала обведем их небольшой рамкой слева и снизу и добавим отступы:
Теперь напишем стили, чтобы текущий пункт меню выделялся из общей массы (под текущим пунктом меню подразумевается тот, который активен в данный момент), и точно так же выделялись бы пункты меню при наведении:
Сохраняем файл стилей и переходим на наш сайт, перезагружаем страницу (на всякий случай с очисткой кэша Ctrl+F5 ) и смотрим на результат:
Теперь наше меню выглядит более привлекательным. Точно таким же образом можно создавать меню любой сложности, главное в этом деле знание CSS, а результат зависит только от Вашей фантазии.
Оформляем навигатор сайта (хлебные крошки)
По умолчанию оформление модуля хлебных крошек вполне сносное, но все же тут есть над чем поработать:
Для начала избавимся от ссылки «Главная» просто потому что мне так больше нравится (убирать или оставить это на Ваше усмотрение). Открываем модуль для редактирования и ставим переключатель «Показывать главную» в положение «Нет».
Теперь переходим непосредственно к стилям, по аналогии с меню убираем у навигатора цвет фона, добавляем нижнюю рамку и т.д.
Стили для оформления хлебных крошек на сайте:
Результат изменения оформления навигатора сайта:
Делаем красивую кнопку «Наверх» для нашего сайта
Теперь настало время самого интересного – создание в шаблоне Joomla собственной кнопки, которая будет вести в начало страницы. Данный процесс несколько сложнее, нам потребуется вносить изменения в индексный файл шаблона, в файл стилей и кроме того написать небольшой скрипт который будет обрабатывать событие при нажатии на нашу кнопку.
Вариантов создания подобных кнопок достаточно много, есть варианты без использования JavaScript либо jQuery, но их применение делает результат гораздо эффективнее. К примеру, мы можем настроить плавный переход, плавное исчезновение кнопки, когда она не нужна и т.д.
Изначально данный процесс может показаться трудоемким, но это совсем не так, сейчас постараюсь все наглядно объяснить.
Первое что нам надо будет сделать, это внести изменения в индексный файл шаблона – создать дополнительный контейнер для нашей кнопки.
Внесение изменений в индексный файл шаблона
Он у нас получится вложенным в блок с классом «body». Чтобы стало понятнее, смотрите на скриншот с кодом:
Сохраняем и закрываем файл index.php, он нам больше не понадобится.
Стили для кнопки «Наверх»
Блок для кнопки мы создали, но его на сайте не видно, потому что он не имеет никакого содержимого да оно нам и не нужно. Сейчас напишем несколько стилей для того чтобы кнопка приобрела очертания:
Сохраняем и закрываем файл стилей. Если перейти на сайт то и сейчас кнопку Вы не заметите, все потому что мы прописали в стилях свойство display: none. Сделали мы это для того чтобы изначально, когда пользователь еще не успел пролистать страницу кнопку не было видно, ведь в это время она и не нужна.
Скрипт для кнопки «Наверх»
Теперь самое интересное – написание собственного скрипта, который будет отображать нашу кнопу, когда пользователь начнет пролистывать документ и скрывать ее, когда страница в самой верхней точке. Кроме того напишем обработчик события при нажатии пользователем на кнопку.
Открываем файл template.js и смотрим на его содержимое. Не пугайтесь, разбираться в его коде нам не придется, мы просто добавим в него свой код, который я постараюсь как можно доступнее расписать.
Между строками кода 58 и 59 вставляем следующий код:
Скрипт не сложный, к тому же по комментариям можно понять, что за что отвечает. Если Вам потребуется сделать переход еще более плавным, то измените число миллисекунд с 800 до 2000 к примеру. В результате за указанный промежуток времени страница будет пролистана с текущего положения до начала.
Для наглядности как всегда выкладываю скриншот файла скрипта:
Теперь сохраняем файл и смотрим на результат, а результат такой – изначально кнопки нет, а как только вы начнете листать страницу, она появляется. После нажатия на кнопку страница плавно переходит к началу и точно так же плавно кнопка исчезает.
Окончательный результат страницы у меня получился таким:
Урок подошел к концу, в заключение хочу сказать, что редактирование стандартных шаблонов достаточно не сложный процесс и порой лучше отредактировать стандартный шаблон Joomla, чем искать и устанавливать сторонние шаблоны с других сайтов.