Как оформить страницу контакты на сайте: Приятно связаться: 15 примеров страниц «Контакты»

Содержание

Страница контактов на сайте - пример оформления

  • Примеры по страницам, как сделать лучше
  • 3 минуты на чтение, изложено просто и доступно
  • Самые простые шаги, о которых вы не догадывались

Павел, руководитель компании
вопросы:

После того, как вы сделаете страницу контактов- правильно. Доверие к сайту сильно возрастет. Откуда я это знаю? Мы уже применяем эти знания на страницах наших клиентов

 

Примеры правильных страниц контактов

 

Большинство web-мастеров недооценивают значение страницы контактов: они интегрируют на сайт сложные формы обратной связи, указывают в реквизитах неполные либо недостоверные сведения (неверный e-mail, неактуальный телефон). Это сильно раздражает пользователей, желающих легко и быстро связаться с владельцем портала.

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

 

Каким должен быть стиль страницы контактов?

Общие требования к дизайну страницы: дружественный стиль и копирование цветовой гаммы основного бренда.

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

Если эмблема сайта сочетает синий и белый тона, то оформление страницы контактов в красный и желтый цвета будет большой ошибкой.

Ассоциативное противоречие вызовет у посетителя ощущение, что он попал на другой сайт, а ведь он уже «доверился» (зашел на портал, прочитал и пролистал несколько страниц) основному бренду.

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

как просматривают страницы

Поэтому закрепляем важные сведения (e-mail, телефон, адрес и другие контакты компании) в левой верхней части портала.

page contakts5

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

page contakts5 1

page contakts5 6

Основная тенденция в развитии стиля страниц контактов: больше творчества и меньше лишних объектов. Но как определить, где лишняя информация, а где необходимая? Рассмотрим ниже.

 

Что еще полезно знать по продвижению сайтов

 

Что обязательно должно присутствовать на контактной странице?

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

Изложу свою мысль в таблице.

 

Тип сайта Что должно быть на странице контактов Почему эти реквизиты должны быть на странице контактов
Блог или информационный сайт

1. E-mail

2. Форма обратной связи

3. Skype, ICQ или что-то подобное

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

1. E-mail

2. Форма обратной связи

3. Номер телефона

4. Ссылка на группу в социальных сетях

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

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

Корпоративный сайт или оффлайн магазин

1. E-mail

2. Форма обратной связи

3. Номер телефона

4. Адрес

5. Схема проезда

6. Часы работы

7. Реквизиты фирмы

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

Работающий телефон (а лучше несколько) будет ключевым контактом компании. Ведь прежде чем куда-либо ехать человек хочет уточнить наличие товара и услуги, их стоимость и характеристики.

Реквизиты фирмы (ИНН, ОГРН, БИК и т.д.) будут дополнительным аргументом в пользу ее серьезности.

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

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

page contakts6

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

Поисковая оптимизация страницы контактов

Люди могут быстро найти на сайте страницу контактов, чего не скажешь о поисковых машинах. Если не выделить контактную информацию должным образом, поисковик проиндексирует ее как обычный текст.

Размечаем контакты, применив структурированные данные, то есть даем поисковым системам базовую информацию о содержании страницы. Для этого используем команды HTML кода.

Также можно обернуть блок информации о местоположении компании в элемент Address. Таким образом, поисковик определит блок как адресные реквизиты фирмы.

Обращаем особое внимание на оформление разделов Title и Description страницы. В теге заглавия указываем слова «Контакты» и название фирмы либо бренда. Получится что-то вроде:

<title>Компания «Лучшая фирма» — Контакты</title>

page contakts7

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

Как повысить юзабилити страницы контактов

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

Mailto

Создаем возможность отправить сообщение по электронной почте в один клик. Для этого добавляем к нашему E-mail атрибут Mailto. Чтобы спам-боты не собирали контактные данные с сайта, запутываем их с помощью специальной программы, например mailtoencoder.com.

Карта

Если в реквизитах указан адрес, то необходимо интегрировать на сайт виджет Яндекс Карты либо GoogleMaps. Тем более что для этого не нужно прилагать много усилий: достаточно вставить HTML код, который можно взять с одного из указанных сайтов.

Виджет Яндекс Карты позволяет редактировать описание объекта и цвета карты, создавать пользовательские указатели и добавлять легенду к таким указателям. В общем, адаптировать карту под нужды своего бизнеса.

интерактивная карта от Яндекс Карт

виджет Яндекс Карты

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

Телефон и Skype

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

Для того чтобы сделать реквизит чувствительным к нажатию, оборачиваем номер телефона или ник Скайпа атрибутом tel.

Виджеты, инфографика и полезное творчество

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

page contakts10

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

Методы повышения лояльности к сайту

У меня есть несколько универсальных советов, которые позволят улучшить страницу контактов и вызвать доверие у потенциальных клиентов:

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

2. Вставляем на страничку контактов фирменную эмблему либо логотип компании. Это создаст подсознательную ассоциацию бренда с определенными реквизитами.

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

4. Закрепляем в видном месте кнопку «Версия для печати», в которой формируем основные данные: название компании, адрес, телефон и E-mail.

5. Если компания большая, то указываем на странице контактов, какие услуги посетитель может получить в каждом отделе. То есть, телефон Х – для юридических лиц, а телефон У – для частных клиентов.

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

7. Регистрируем компанию в Яндекс Справочнике. Таким образом мы не только добавим фирму в известный каталог, повысив узнаваемость сайта, но и получим возможность делиться ссылкой на персональную страничку компании в справочнике.

8. Размещаем фото фасада здания. Если до фирмы трудно добраться, детально описываем ориентиры и выкладываем их фотографии на странице контактов.

9. Указываем под каждым номером телефона и ником Скайпа Ф.И.О. контактного лица.

10. Размещаем на контактной странице QR-код. Идите в ногу со временем и добавьте на свой портал новый тренд Интернет технологий. Сгенерировать QR-код можно на специальном сервисе.

Итог

Страницы контактов – важный атрибут любого сайта.

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

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

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

page contakts10
Андреев Павел. 
Руководитель компании

Мой опыт с 2002 года и я уже помог повысить продажи  100+ компаниям. Оценю эффективность работы ваших исполнителей и дам предложения как повысить  продажи - ЭТО БЕСПЛАТНО!!

Как оформить страницу Контакты сайта правильно. Часть 2
Рубрика: Увеличиваем продажи Опубликовано 08.08.2014   ·   Комментарии: 4 комментария   ·   На чтение: 8 мин   ·   Просмотры:

121

оформление страницы КонтактыПривет, друзья и просто интересующиеся как увеличить конверсию своего сайта. В предыдушей статье Как оформить страницу Контакты. Часть 1 я начал рассказывать собственно по теме статьи, но за один присест не осилил.

Почему? Просто потому, что просто только кошки родятся. А как только начинаешь заниматься любым делом серьезно, то выяснятся, что нюансов тьма. Можно конечно махнуть рукой. Типа «и так сойдет».

Сойдет-то оно может быть и сойдет, но только в том случае, если у вас нет более прилежного конкурента. Конкурента который тщательно или даже не побоюсь этого слова — скрупулезно — подойдет к вопросу работы над своим сайтом. Он применит к нему всё, что применили вы и еще сверх того. Может быть сильно больше сверх того.

Догадываетесь, какой будет результат при прочих равных? Правильно — ваши потенциальные клиенты станут его реальными клиентами. А вы будете в растерянных чувствах заливать и заливать деньги на Яндекс.Директ. С предсказуемым результатом. Грустным.

Ну вот, чувствую нужный настрой задан и вы готовы с прежним рвением и прилежностью изучать все возможные моменты, как сделать из своего сайта суперпродавца.

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

17. Если вы работаете только по безналу, разместите ваши банковские реквизиты. Но настоятельно не советую делать это, если вы принимаете оплату еще и другими способами – наличными, пластик, интернет-кошельки, прямые переводы.

Почему? Догадайтесь сами. Уже догадались? Молодцы!

18. Оригинально выглядит и будет полезным, если вы укажете сколько времени осталось до закрытия вашей офлайновой точки. Например:

Время работы с 9.00 до 18.00

Приезжайте к нам! До конца рабочего дня осталось 4 часа 23 минуты 36 секунд.

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

19. Сейчас в крупных городах все больше становится проблем с парковкой. Поэтому успокаивайте клиентов на этот счет. Как можете. Пишите о возможности парковки непосредственно около/внутри здания + рекомендации где могут быть места. Например:

Около здания большая бесплатная парковка.

Свободные места — есть почти всегда!

Вот только обманывать не нужно. Если около вашего здания машины стоят как сардины в банке круглый день, то лучше совсем не пишите о парковке. Иначе получите обратную реакцию. Люди не любят, когда их водят за нос.

20. Насчет формы обратной связи. Есть сомнения у меня, что ее обязательно нужно применять в оформлении страницы Контакы. Если хотите ее себе поставить – ставьте, но:

    1. решите со своим вебмастером вопрос (или, если вы достаточно компетентны в вэб-программировании – сами) о том, чтобы в форме отсутствовала капча, но спам обрезался. На самом деле для разных CMSесть соответствующие решения и все приводить их в этой статье просто бессмысленно. Любой ценой убирайте капчу! Не раздражайте потенциального клиента,
    2. не «насовывайте» полей в форму. Хватит «Ваш email» и «содержание». Каждое дополнительное поле примерно на половину уменьшает желание вообще начинать заполнение формы.
      оформление страницы Контакты формой обратной связи

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

21. Активно продвигаетесь через социальные сети? У вас есть свои группы в каких-то сетях? Не забудьте поставить кнопки перехода на эти соцсети на странице Контакты. Подпишите «Мы в соцсетях».

22. Очень кстати будет кнопка «Распечатать», кликнув по которой потенциальный клиент попадает на страницу, оптимизированную для печати. То есть на ней отсутствуют шапка, меню, футер, а также все колонки, кроме основной, в которой содержится контактная информация.

23. Укажите адрес сайта в Яндекс.Справочнике. Тогда при выдаче на поиске в сниппете вашего сайта будет стоять ссылка на местоположение офиса на Яндекс.Картах.

24. Используйте дополнительную разметку Schema.org. Это позволит поисковому роботу корректно отобразить адресные данные в сниппете, что увеличит конверсию переходов из поисковика на ваш сайт.

25. Не забывайте про SEO. Обязательно заполните теги title, description и keywords. С title аккуратнее. Лучше просто написать «Контакты». Желательно еще добавить название вашей организации. Это соединение «Контакты+название» будет ключевым словом этой страницы. Проследите, чтобы в метатег описание (description) ключевые слова были включены. Ну и, разумеется в keywords.

26. Поисковики любят наличие на страницах:

  1. заголовки,
  2. списки,
  3. картинки/фото,
  4. видео,
  5. таблицы.

Уже поняли идею? Применяйту к соответствующим блокам информации заголовки уровня h3. Например, «Отделы», «Схема проезда», «Адрес», «Филиалы», «Дилеры».

Про видео смотрите пункт 16 здесь .

У вас есть дилеры, отделения, представительства. Попробуйте применить к ним оформление СПИСКИ.

Таблицы будут уместны, если у вашей офлайн-точки хотя бы немного разные расписания работы в будние и выходные дни. Кто мешает сделать что-то вроде:

Оформление таблицами страницы Контакты

???

27. Все разместили? Посмотрели как это выглядит с точки зрения дизайна? Не нравится? Обратитесь к профессиональному дизайнеру или попробуйте доработать сами. Первое предпочтительнее. Один совет – не упирайтесь в дизайн как в панацею. В статье Дизайн сайта и слайдер для сайта – деньги на ветер я подробно, с привлечением статистики, данных исследований показал, что дизайн для клиента далеко не на первом месте, когда он принимает решение о покупке. Но и оставлять на странице «непричесанную» чудовищную мешанину не стоит. Соблюдите меру, «золотую середину». Просто все должно выглядеть аккуратно, систематизировано, читабельно. Этого будет достаточно.

По странице Контакты мы разобрались со всеми пунктами, но тема будет не до конца раскрыта, если я не упомяну про

БЛОК «КОНТАКТЫ»

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

Я имею в виду специальный блок контактов, который должен быть всегда перед глазами. Лучше – в шапке.

Основное правило контактов – они должны быть доступны потенциальному клиенту на любой странице сайта. Поэтому самым правильным и классическим решением будет вынос небольшого блока с контактными данным (далее «блок контактов»=БК) в header (шапку) сайта. Например.

блок контакты

Какие правила должны быть соблюдены при размещении БК:

  1. Блок контактов должен быть вписан в шапку дизайнерски правильно. То есть не смотреться дико, чужеродным элементом.
  2. Информация в блоке контактов должна быть понятной, хорошо различимой, легко воспринимаемой.
  3. В блоке контактов должны обязательно быть телефон и e-mail. Остальные элементы контактов – skype, дополнительные телефоны – по возможности и по специфике.
  4. Не стоит указывать в блоке контактов почтовый и фактический адрес, пытаться впихнуть в него модуль «Заказать обратный звонок», более одного e-mail.
  5. В блоке контактов должен содержаться призыв к действию. Например, самый очевидный: «Звоните».
  6. Если ваша служба приема звонков не круглосуточная, то по возможности указать время, когда есть смысл звонить. Например: «Звоните с 08.00 до 20.00 (время моск).» Или «Круглосуточно и без выходных»
  7. Следует отдавать предпочтение городским телефонным номерам перед мобильными. В крайнем случае, если у вас есть возможность взять мобильный номер с коротким городским вариантом набора, то размещайте его.
  8. Идеальный вариант — номер 8-800...
  9. При указании городского номера обязательно указание кода города.

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

оформление блока конктактов

  1. Он есть. Это хорошо.
  2. Он не вписан в дизайн.
  3. Отсутствует майл. Есть категория клиентов-интровертов, которые 10 раз напишут, чем 1 раз позвонят. Не забываем про них.
  4. В блоке контактов не указан призыв к действию (ЗВОНИТЕ) и время работы call-центра.

И напоследок о том,

Что не нужно делать на странице Контакты, но советуют делать некоторые «чудо-советчики».

  1. Не стоит в Контактах указывать чем вы занимаетесь. Во-первых, вы это должны были указать в шапке. Во-вторых, подробно расписать в разделе «О нас» или «Обо мне», или «О компании». Раздел Контакты должен быть про контакты. Человек заходит туда, когда хочет с вами связаться, а не для того, чтобы узнать, чем вы занимаетесь.
  2. Нет смысла указывать координаты для GPS-навигатора. Это вообще какой-то жуткий бред. Это может иметь смысл только в том случае, если ваш офис находится в голом поле или лесу. Без всякого адреса – улицы и дома. Где они берут такой совет (ведь не сами же выдумали — скопипастили откуда-то), ума не приложу.
  3. Рекомендуют разместить на странице Контакты кнопку «Закажите обратный звонок». Еще одна ерунда. Эту функцию нужно ставить либо в шапке сайта, либо в выдвижной закладке справа или слева. То есть так, чтобы эта возможность была доступна С ЛЮБОЙ страницы сайта.
  4. Размещать на странице Контакты QR-код с картой проезда. Очередная чепуха. В реальной жизни QR-коды применяются либо в офлайне для быстрого захода на ваш сайт через мобильное устройство, либо в онлайне для быстрого перехода на магазины с мобильными приложениями типа GoogleAppsили Appstore.
    Хотите узнать, как лично вы можете применить QR-код в вашем бизнесе? Вот моя статья Сделайте себе сами визитки с barcode за 3 минуты
  5. Советуют добавлять какой-нибудь юморок. Если ваш сайт – филиал Камеди-Клаба, то согласен. Но если у вас серьезный бизнес, то с юмором лучше не шутить. У всех разное понимание смешного. Кому-то юмор может показаться не смешным, натужным, неудачным. Кому-то из клиентов вообще покажется неуместным делать предоплату клоунам. Вообще иметь с ними серьезные дела. Словом не нужно пытаться подражать «Уральским пельменям». Разве только в том случае, если вы торгуете игрушками для розыгрышей.

Ну вот. Это честно всё, что мне на сегодняшний момент известно о правильном оформлении страницы Контакты. Если вы знаете, что я не знаю — пишите в комментариях.

 


P.S. Хотите получать уведомления о новых статьях этого блога? Нажмите на эту кнопку - Хочу сразу узнавать о новых публикациях!
12 лучших страниц «Контакты» для вашего вдохновения

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

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

Но как должна выглядеть отличная страница «Контакты»?

Чаще всего на лучших страницах с контактами:

  • Объясняется, зачем нужно связаться с компанией, как это поможет решить проблему посетителя.
  • Есть email-адрес и номер телефона, которые посетитель сразу может найти.
  • Имеется короткая форма с полями, благодаря которым компания может понять, кто с ней связывается.
  • Предлагается другой способ связи, если посетитель не хочет заполнять форму.
  • Присутствует призыв к действию, который позволяет удержать посетителей на сайте.
  • Демонстрируется идейное лидерство компании в индустрии: например, публикуются ссылки на статьи о компании в прессе.
  • Указываются ссылки на активные профили в социальных сетях, где пользователи могут связаться с представителями компании.
  • Установлено перенаправление на страницу с благодарностью, где указывается, когда и как с посетителем свяжутся.

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

1. Tune

Страница с контактами Tune отличается приятным дизайном, на ней есть призыв к действию, понятно изложенная контактная информация и форма для обратной связи.

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

Заголовки «Мы всегда готовы помочь!» (We’re Here to Help!) и «Свяжитесь с нами в любое время и мы с радостью ответим на ваши вопросы» (Reach out to us anytime and we’ll happily answer your questions) создают ощущение гостеприимства, посетители чувствуют, что им здесь рады. Чем более дружелюбной будет ваша страница с контактами, тем приятнее на ней будет находиться. В любом случае, вы должны быть заинтересованы в том, чтобы клиенты связывались с вами. Ведь это помогает устанавливать с ними прочные взаимоотношения.

2. Achieve3000

Как и многие другие сайты Achieve3000 посещают разные люди с разными вопросами. Вот почем они решили пойти дальше и отказались от универсального подхода.

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

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

Так выглядит целевая страница для запросов в службу клиентской поддержки:

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

3. Choice Screening

Лучшей частью страницы с контактами Choice Screening является текст. Все начинается с потрясающей фразы «Поговорите с человеком» (Talk to a Human).

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

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

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

4. Atlas 1031 Exchange

На первый взгляд страница с контактами Atlas 1031 Exchange не отличается потрясающим дизайном. Но здесь есть все элементы отличной страницы «Контакты». Начинается все с функциональности.

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

С самого начала объясняется, насколько серьезно компания относится к запросам посетителей: «Мы невероятно быстро реагируем на ваши обращения и ценим ваши вопросы» (We are incredibly responsive to your requests and value your questions). Далее говорится о том, что получат люди, задав вопрос: ответят на него в течение 12 часов или меньше. В тексте указаны контактные данные, на странице есть иконки социальных сетей, ссылки на предложения и даже список недавно опубликованных в блоге статей.

5. Morroni

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

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

Если кто-то все же захочет позвонить, на странице Morroni указан и номер телефона с пояснением, что старомодным способом с компанией также можно связаться. Радует и проверка на ботов: «Как у вас с математикой? 2+6 = ?» (How’s your math? 2+6 = ?).

6. Dubsat

«Чем мы можем вам помочь?» (How can we help you?). Классический вопрос службы поддержки клиентов, который идеально подходит для страницы с контактами.

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

Именно его использовала компания Dubsat. Страница встречает ярким изображением, затем вопросом и выпадающим меню, которое позволяет персонализировать опыт. Например, если посетитель захочет связаться с отделом продаж, перед ним появится специальная форма.

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

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

7. Pixpa

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

Это может быть кнопка, ведущая к блогу. Либо ссылка на демо вашего продукта, скачивание инструкции или видео. В Pixpa решили добавить призыв скачать бесплатную пробную версию продукта на страницу с контактами.

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

8. PeopleMetrics

Иногда проще значит лучше. Страница с контактами PeopleMetrics понятная и содержательная, она полностью выполняет свою функцию. Большинство людей, попадая на страницу «Контакты», быстро просматривает текст в поисках нужной информации. Вот почему PeopleMetrics не стали перегружать страницу дизайном. Также чтобы упростить людям жизнь, они добавили возможность входа через Facebook и Google Apps.

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

9. Legalia

Еще одна страница с контактами, выполненная в привлекательном и функциональном дизайне. Здесь есть вся необходимая информация, включая небольшую контактную форму. Особенно радуют глаз большие изображения зданий, которые при наведении курсора на кнопку «voir le plan» превращаются в карты.

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

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

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

10. Elluminati

Центром страницы Elluminati является местоположение: верхнее изображение – карта Google, на которой отмечен офис компании. На нее можно нажать, приблизить или отдалить, построить маршрут. Это очень удобно как для пользователей ПК, так и мобильных устройств.

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

И хотя белый текст – это весьма рискованно, на ярком фоне он выглядит выигрышно и легко читается. Радуют и другие небольшие элементы. Например, иконки социальных сетей, которые меняют цвет при наведении курсора.

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

11. Weifield Group Contracting

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

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

Страница с контактами Weifield Group Contracting – отличный пример адаптированной под мобильные устройства страницы. Сравните версию страницы для ПК и для мобильных платформ: оптимизирована была практически каждая деталь страницы.

Страница для ПК:

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

Страница для мобильных устройств:

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

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

12. Survicate

Страница с контактами Survicate – еще один пример привлекательного и простого дизайна в комбинации с приятным дружелюбным текстом. Радуют глаз заголовки «Давайте сделаем что-то потрясающее вместе» (Let’s do something awesome together) и «Давайте поговорим о вашем проекте» (Let’s talk about your project). Подобный стиль общения располагает посетителей к бренду.

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

Контактная форма очень простая, с крупными полями и кнопками CTA, что делает страницу удобной для мобильных пользователей. Также здесь указана вся необходимая контактная информация: адрес офиса, номер телефона, email, время работы и т.д.

Наконец, приятно удивляет то, что кнопка с призывом к действию и иконки выполнены в том же цвете, что и логотип.

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

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

12 советов, как оформить страницу Контакты для вашего сайта

Что под собой подразумевает слово “контакты”? Это те сведения о человеке, которые другие люди могут использовать для того, чтобы с ним связаться. К ним относятся: адрес, номер мобильного или стационарного телефона, аккаунты в социальных сетях, логин в Skype, адрес электронной почты и так далее.

Так же, как контакты важны в жизни каждого отдельно взятого человека, так же они важны и в деятельности любой компании. Именно поэтому на сайте любой фирмы мы можем найти страничку под названием “Как с нами связаться?” или “Наши контакты”.

От того, насколько хорошо она будет оформлена, зависит ваша репутация и стремления клиентов приобрести что-то именно у вас.

Несколько советов о том, как должна быть оформлена страница “Контакты”

  1. В самом верху, в “шапке” текста, разместите название фирмы и то, чем она занимается. Это делается для тех людей, которые пропускают основные рубрики сайта, ведь они четко знают, что именно хотят заказать.
  2. Разместите схему проезда к офису. Особенно это актуально в том случае, если фирма находится в малоизвестном районе города. Опубликовав подобную схему, вы значительно облегчите своим клиентам поиски вашего офиса. К тому же, большим плюсом будет, если вы также разместите панорамные фотографии. Рекомендуем опубликовать на сайте несколько схем: одну для автомобилистов, а вторую для пешеходов и тех, кто будет добираться на общественном транспорте.
  3. Мы живем в век информационных технологий, поэтому полезным будет размещение данных для GPS-навигатора. Поверьте, водители скажут вам спасибо.
  4. Укажите как можно больше номеров мобильных телефонов, по которым с вами можно связаться, а также ФИО и должность человека, которому он принадлежит. Во-первых, не всегда телефоны бывают доступны, а клиенту нужно очень срочно дозвониться. А во-вторых, человеку может быть нужна помощь конкретного специалиста к которому, в случае правильного размещения контактов, он сразу сможет дозвониться.
  5. Сейчас становится очень популярной связь через социальные сети, Skype, Viber. Это значительно облегчает связь клиента с фирмой, поэтому воспользуйтесь и этими вариантами.
  6. Добавьте к номерам телефона активные ссылки по которым они смогут перейти на вашу электронную почту. Это избавит их от лишних поисков и они не будут терять драгоценное время.
  7. В последнее время ярким примером заботы о своих клиентах стала обратная связь. Создайте небольшую форму заявки, где клиент укажет свои ФИО, контактные данные (номер телефона, email) и напишет сам текст обращения.
  8. Удобной функцией является возможность печати схемы проезда и контактных данных. Не игнорируйте ее и сделайте доступной для ваших клиентов.
  9. Бывает такое, что в одном офисе вашей компании обслуживают физических лиц, а в других — юридических. Обязательно обозначьте этот момент, чтобы человек изначально знал, куда ему обращаться.
  10. Не забудьте указать график работы вашей компании: время и по каким дням вы предоставляете свои услуги.
  11. Добавьте какой-либо призыв о покупке, ведь никто не говорил, что статья на этой странице не должна быть продающей.
  12. Если ваша компания допускает отступление от делового стиля, то можно в конце текста добавить немного иронии и юмора. Этот момент закрепит хорошее впечатление и вызовет положительные эмоции у читателя.

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

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

С Вами,
       — Игорь Зуевич.

Рекомендую Вам обратить внимание на следующие программы по созданию дополнительного источника дохода в интернете:

Закрытое Master Mind сообщество
Мастера партнерских программ
Партнерский Маркетинг для Новичков

Если следующие 5 минут вы можете инвестировать в  самообразование, то переходите по ссылке и читайте следующую нашу статью: 7 правил, как составить текст для досок объявлений в интернете

Оставьте комментарий к этой статье ниже

Как оформить страницу контакты 31 рекомендация и их становится больше!

1516

21.03.2017

Время чтения: 4 минуты

Валерий Середов

Общие рекомендации

  1. Страница контакты должна быть отдельной страницей сайта - на такой странице расположено достаточно много данных. Только отдельная страница позволит удобно расположить всю необходимую информацию. 
  2. Страница контакты должна быть доступна в один клик с любой странницы - пользователь в любой момент может захотеть узнать местоположение вашей организации. 
  3. Указывайте адрес полностью, индекс, город, улица, строение, офис - всё это позволит потенциальному посетителю легче вас найти и понять ваше расположение.
  4. Указывайте адрес полностью индекс обязательно!
  5. Размещайте в обязательном порядке прямые городские номера - указывайте код города, это позволит без проблем дозвониться до вас клиенту (Например в Москве может быть прямой номер как с кодом города 499 так и 495). Для региональных компаний необходим номер 8 800, это позволит клиентам из других регионов звонить вам бесплатно и повысит статус вашей компании в их глазах. 
  6. Размещенный адрес электронной почты должен быть привязан к вашему домену, то есть выглядеть: « [email protected]» Укажите время работы вашей компании, чтоб было ясно, когда можно звонить. 
  7. Укажите телефон дежурного менеджера. Также хорошо указать, сколько ждать ответа на письма. 
  8. Если для прохода в ваш офис требуется иметь с собой документы, то лучше их перечислить (права, паспорт и т.д.). 
  9. Разместите схему проезда. Например, с помощью сервисов Яндекс.Карты или Google Maps. 
  10. Разместите ссылки на другие способы связи с вами. 
  11. Разместите форму обратной связи. 
  12. Сориентируйте пользователя по времени, сколько ему идти до офиса или сколько времени может занять получение заказа.
  13. Расскажите, где и как лучше припарковать автомобиль. Например, что для проезда на территорию нужно заранее заказать пропуск. 

Юзабилити рекомендации по оформлению страницы контакты

  1. Укажите ближайшую от вас станцию метро - это позволит легко понять, как добраться до вас своим ходом
  2. Указывайте напротив каждого номера телефона контактное лицо и должность, чтобы было ясно, с кем будет говорить звонящий. Пример: Секретарь Елена Сергеевна, директор Иванов Петрович, отдел продаж и т.д. 
  3. Дополните схему проезда возможностью проложить маршрут из любой точки до вас. 
  4. Реализуйте возможность распечатать страницу контакты со схемой проезда
  5. Разместите фотографию вашего здания и входа, чтобы было проще сориентироваться на местности. 
  6. Дополните страницу видео с объяснением, как добраться до вашего офиса на общественном транспорте или автомобиле. 
  7. Разместите ссылки на ваши группы в социальных сетях.
  8. Ссылки на социальные сети в раздели контакты 
  9. Добавьте QR-код для легкой записи ваших контактов в записную книжку телефона. 
  10. Персонализируйте вашу страницу - логотип компании, фото сотрудников или офиса внутри.
  11. Сделайте почту и телефон гипер ссылкой, что бы можно было быстро позвонить или написать письмо. 

SEO рекомендации по оформлению страницы контакты

  1. Заполните правильно тег <title> - Название вашей организации плюс ключевое слово: «схема проезда, адрес магазина, контакты

    оформляем  title на страницы контакты

  2. Разместите информативный заголовок h2 - Название вашей организации плюс ключевое слово: «схема проезда, адрес магазина, контакты»


  3. Заполните тег <description> - Укажите адрес, телефон, почту, призовите в к действию - позвонить или написать вам.

  4. Используйте микроразметку - это позволит красиво оформить сниппет в выдаче и повысит кликабельность.

  5. Зарегистрируйтесь и разместите всю необходимую информацию в геолакационых сервисах таких как; Яндекс.Картах, Google maps, 2Гис, Foursquare

  6. Разместите реквизиты компании - (юридический адрес, номер ИНН, ОГРН и прочие открытые данные), после этого вы сможете подать заявку на размещение вашей организации в Яндекс.Каталог

Контакты регионов и представительств:

  1. Реализуйте автоопределение региона пользователя - это позволит автоматически показывать ему контактную информацию его региона.

  2. Сделайте удобную карту с выбором филиала в городе это может быть либо просто карта города, либо карта метро.
Читайте нашу статью: AMP страницы что это такое и зачем нужно?

Подпишитесь на нашу рассылку

Рекомендуемые статьи

10 примеров, как оформить страницу Contact us, которые вам захочется повторить

Что вы привыкли видеть на странице контактов?
Телефоны, email, адреса, скайп, информацию о представительствах, фотографии отделений, график работы, карту проезда, форму обращения… Вы считаете этого достаточно? Загляните в свою аналитику и посмотрите, сколько человек каждый месяц покидает страницу контактов, так и не связавшись с вами.
Надеемся, эти 10 примеров заставят вас изменить свое традиционное представление о странице контактов и удержать пользователя на ней.
Страница контактов — это решающая ступень, которую пользователь должен пройти, перед тем, как связаться с вами. Поэтому от ее оформления, удобства и дизайна зависит дальнейшая судьба лидов, приближающихся к узкому горлышку воронки продаж. Найдут ли они на этой странице последний убийственный триггер, который заставит их взять в руки телефон? Как помочь им связаться с вами? В этой статье мы собрали 10 ярких способов оформления эффективной страницы Contact us.

1. Виртуальный консультант от Microsoft

Так выглядит страница контактов Microsoft.

А вот так выглядит общение с консультантом.

Для большой компании виртуальный консультант — отличный вариант, т.к. вопрос «С кем мне связаться?» может быть проблемой. Если у вас много точек контактов, это хорошая возможность перенаправить пользователя на нужного живого человека.
В самом дизайне страницы нет каких-либо лишних компонентов, которые бы его перегружали. Есть только возможность выбора нужного отдела службы поддержки и даже раздел с удобными средствами связи для людей с ограниченными возможностями.
“Конечно, это ж Microsoft! Могут себе позволить!”, — скажете вы.
Но интерактивное общение с пользователем — это уже не прихоть, а тренд, т.к. оно позволяет максимально индивидуально подойти к решению проблемы клиента. Смотрите следующие примеры.

2. Интерактивность и дружелюбность от Deux Huit Huit

Чем примечательна эта страница контактов?

На ней лаконично подана вся необходимая информация. Чистый минималистичный дизайн. Но главное отличие — это тон, который располагает к дружескому общению. Фраза “Let’s be friends” предлагает вам дружить в соцсетях. А в нижнем углу экрана мелькают фото из повседневной жизни команды: от лучшего работника месяца до любимых офисных блюд и даже кота. Но главная особенность в интерактивной форме, которую и формой-то тяжело назвать. Больше напоминает общение в соцсетях.

Курсор сам начинает писать от вас письмо, заполняя первую строку фразой “Dear Deux Huit Huit,”. И вы уже сами не замечаете, как написали и отправили сообщение.

Слово-за-слово, вот вам и первая продажа.

3. Инфографика на странице контактов от Quicksprout

Эта страница контактов понравится тем, чей ящик заваливают письмами.

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

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

4. Триггеры доверия от Unbounce

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

Фото офиса и лица “самых дружелюбных людей” из разных отделов поддержки — вот чем располагает к себе эта страница.

5. Обращение от президента Convince & Convert

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

Вот такой нехитрый ход послужит очередным триггером доверия на вашей странице.

6. Юмор и неординарный подход от Ueno

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

Ярко и минималистично выглядит первый экран, форма открывается при нажатии на вкладку.

Блок со списком офисов далее, реальные фото которых открываются при клике.

А вот и неординарный подход.

“Hello. Is it you we’re looking for? We can see it in your eyes. We can see it in your smile.” — Здравствуйте. Вы это ищите? Мы видим это в ваших глазах и улыбке.

7. Достижения на странице контактов Blue fountain media

На первом экране страницы мы видим, что компания является партнером Google и на хороших позициях в рейтингах. У вас еще остались сомнения, чтобы написать этим ребятам?

Если да, то вам не дадут просто так взять и уйти. Скрольте дальше.

Еще 2 зеленые кнопки призыва к действию: “Работайте с нами” или “Подписывайтесь на последние диджитал тренды”.

Листаешь страницу и как-будто слышишь: “Эй, ты что сразу не понял? Повторяю, мы находимся в топах нескольких рейтингов. Куда собрался? У нас смотри, какие статьи есть на блоге! А бесплатную книгу о том, как диджитал агентство выбрать, ты уже скачал?”
С такой страницы просто так не уйдешь.

8. Возможность поиска на странице Accenture

Еще один вариант того, как можно направить пользователя в нужный ему департамент.

Во вкладке «Find a location» есть возможность указать страну или город и получить список ближайших офисов.

А вот и карта, как добраться до офиса в Калифорнии.

9. Знакомство с основателями и раздел FAQ от PracticalVR

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

Но эта страница еще примечательна тем, что знакомит вас с основателями компании, причем очень неординарно.

Вот так подана информация об основателях компании.

Хочется отдельно отметить футуристичный дизайн и использование музыки на странице сайта, которые также действуют, как триггер и подчеркивают главную мысль компании: “Building the mixed reality tools of tomorrow.”

10. Расположение офисов от Doberman

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

Два офиса в разных частях мира, но одинаково простое и дружеское обращение к клиенту.

Хотите поговорить, у вас есть талант, нужна помощь? Выбирайте нужную опцию и пишите. Так просто, но так удобно. Берем на заметку.

Как создать эффективный дизайн страницы контактов?

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

Как оформить страницу с контактами

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

Страница "Контакты" есть на сайте любой компании. Обычно без этой страницы не обходится ни одна организация, хотя номер телефона и адрес посетители часто видят даже на шапке сайта. Для чего нужна эта страница? В первую очередь она дает потенциальному клиенту возможность связаться с представителями компании. Но данные на ней не ограничиваются только номерами телефонов и адресом. Этот раздел на сайте призван облегчить клиенту поиск компании.

В контактах часто указывается карта с месторасположением организации. Такие образом потенциальные клиенты могут найти организацию в своем городе. Некоторые фирмы имеют множество отделений в разных городах. Здесь руководству уже приходится обращаться к профессионалам, чтобы пользователь мог найти контакты в своем городе без труда. Не зря у некоторых ресурсов есть всплывающее окно, на котором посетитель может выбрать свой город. Но наиболее удобным был бы другой способ. Всплывающие окна раздражают практически всех, будет лучше, если на сайте расположение клиента определится автоматически. А потом посетитель сможет уже либо подтвердить свой город, либо выбрать другой.

Как оформить страницу с контактами

Страницы с контактами однотипны. По крайней мере, это касается 90% таких страниц. Предприниматели не особо задумываются, как их правильно оформить. В результате этот раздел может выглядеть, как свалка с номерами телефонов, ссылками на страницы в социальных сетях, а также адресами и контактами в мессенджерах. И среди всего этого великолепия может еще располагаться форма для отправки сообщения менеджеру компании со множеством полей для заполнения.

Если на сайте планируется размещение такой формы, то надо обязательно учитывать интересы клиентов. Никому не понравится заполнять множество полей. Лучше упростить форму и сделать ее более удобной. Тогда посетители начнут оставлять сообщения чаще. Некоторые из них могут стать клиентами компании.

Страницу с контактами нужно оптимизировать. Например, ее можно разделить на три колонки. В одной дать пользователям карту с адресом, в другой - номера телефонов, а в третьей разместить мессенджеры и кнопки социальных сетей. Отдельно можно установить форму для отправки сообщений. Некоторые компании сегодня предлагают клиентам позвонить им прямо с сайта. Такую кнопку лучше разместить на видном месте. Она может появляться в правой части сайта всегда, вне зависимости от того, на какой странице находится клиент.

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

Как сделать сайт


Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.


Создать сайт с нуля


"Черновик макета"

Перед созданием веб-сайта может быть целесообразно нарисовать макет макета дизайна страницы:

Панель навигации

Side Content

текст какой-то текст ..

Основное содержание

Некоторый текст, некоторый текст.,

текст какой-то текст ..

текст какой-то текст ..

Нижний колонтитул


Первый Шаг - Базовая страница HTML

HTML - это стандартный язык разметки для создания веб-сайтов, а CSS - это язык, который описывает стиль документа HTML. Мы будем комбинировать HTML и CSS для создания базовой веб-страницы.

Пример




Заголовок страницы



Кузов {
семейство шрифтов: Arial, Helvetica, без засечек;
}


Мой сайт

Сайт, созданный мной.


Попробуй сам "

Пример объяснил

  • Декларация определяет этот документ как HTML5
  • Элемент является корневым элементом HTML страница
  • Элемент содержит метаинформацию о документе
  • .
  • Элемент </code> определяет заголовок документа </li> <li> Элемент <meta> </code> <code> должен определять набор символов как UTF-8 </li> <li> Элемент <meta> </code> <code> с name = "viewport" делает веб-сайт хорошо выглядящим на всех устройствах и разрешения экрана </li> <li> Элемент <code> <style> </code> содержит стили для веб-сайта (макет / дизайн) </li> <li> <code> <body> </code> элемент содержит видимое содержимое страницы </li> <li> Элемент <code> <div> </code> определяет большой заголовок </li> <li> Элемент <code> <p> </code> определяет абзац </li> </ul> <hr/> <h3><span class="ez-toc-section" id="i-31"> Создание содержимого страницы </span></h3> <p> Внутри элемента <code> <body> </code> нашего веб-сайта мы будем использовать наш макет Черновой вариант" и создать: </p> <ul> <li> заголовок </li> <li> Панель навигации </li> <li> Основное содержание </li> <li> Боковое содержание </li> <li> Нижний колонтитул </li> </ul> <hr/> <h3><span class="ez-toc-section" id="i-32"> Заголовок </span></h3> <p> Заголовок обычно расположен в верхней части сайта (или прямо под верхней частью меню навигации).Часто содержит логотип или название сайта: </p> <p> <div> <br/> <div> Мой веб-сайт </ h2> <br/> <p> Веб-сайт созданный мной. </ p> <br/> </ div> </p> <p> Затем мы используем CSS для стилизации заголовка: </p> .header {<br/> padding: 80px; / * некоторые отступы * / <br/> text-align: center; / * центрируем текст * / <br/> фон: # 1abc9c; / * зеленый фон * / <br/> цвет белый; / * белый цвет текста * / <br/>} <p> / * Увеличить размер шрифта элемента <div> * / <br/> ,заголовок h2 {<br/> размер шрифта: 40 пикселей; <br/>} </p> <p> Попробуй сам »</p> <hr/> <hr/> <h3><span class="ez-toc-section" id="i-33"> Панель навигации </span></h3> <p> Панель навигации содержит список ссылок, помогающих посетителям перемещаться по Ваш сайт: </p> <p> <div> <br/> <a href="#"> Ссылка </a> <br/> <a href="#"> Ссылка </a> <br/> <a href="#"> Ссылка </a> <br/> <a href="#"> Ссылка </a> <br/> </ div> </p> <p> Используйте CSS для стилизации панели навигации: </p> / * Стиль верхней панели навигации * / <br/>.navbar {<br/> переполнение: скрыто; / * Скрыть переполнение * / <br/> цвет фона: # 333; / * Темный цвет фона * / <br/>} <p> / * Стиль ссылок панели навигации * / <br/> .navbar {<br/> float: left; / * Убедитесь, что ссылки остаются бок о бок * / <br/> дисплей: блок; / * Изменить отображение на блок, по причинам отзывчивости (см. ниже) * / <br/> цвет: белый; / * Белый цвет текста * / <br/> выравнивание текста: по центру; / * Центрировать текст * / <br/> обивка: 14px 20px; / * Добавить отступы * / <br/> text-украшение: нет; / * Удалить подчеркивание * / <br/>} </p> <p> / * Правая ссылка * / <br/>.navbar a.right {<br/> float: right; / * Плавающая ссылка справа * / <br/> } </p> <p> / * Изменить цвет при наведении / наведении курсора * / <br/> .navbar a: hover {<br/> цвет фона: #ddd; / * Серый цвет фона * / <br/> цвет: черный; / * Черный цвет текста * / <br/>} <br/> </p> <p> Попробуй сам »</p> <hr/> <h3><span class="ez-toc-section" id="i-34"> Содержимое </span></h3> <p> Создайте макет с двумя столбцами, разделенный на «дополнительный контент» и «основной контент». </p> <p> <div> <br/> <div>... </ div> <br/> <div > ... </ div> <br/> </ div> </p> <p> Мы используем CSS Flexbox для обработки макета: </p> / * Убедиться в правильности размеров * / <br/> * {<br/> размеры коробки: рамка границы; <br/>} <p> / * Контейнер для колонн * / <br/> .row {<br/> дисплей: гибкий; <br/> flex-wrap: обертывание; <br/>} </p> <p> / * Создать два неравных столбца, которые расположены рядом друг с другом * / <br/> / * Боковая панель / левый столбец * / <br/>. Сторона {<br/> flex: 30%; / * Установить ширину боковой панели * / <br/> цвет фона: # f1f1f1; / * Серый цвет фона * / <br/> отступы: 20 пикселей; / * Некоторые отступы * / <br/>} </p> <p> / * Основная колонка * / <br/>.основной { <br/> flex: 70%; / * Установить ширину основного содержимого * / <br/> background-color: white; / * Белый цвет фона * / <br/> отступы: 20 пикселей; / * Некоторые отступы * / <br/>} <br/> </p> <p> Попробуй сам »</p> <p> Затем добавьте медиа-запросы, чтобы сделать макет отзывчивым. Это обязательно что ваш сайт выглядит хорошо на всех устройствах (настольных ПК, ноутбуках, планшетах и телефоны). Измените размер окна браузера, чтобы увидеть результат. </p> / * Адаптивный макет - когда ширина экрана меньше 700 пикселей, сделайте два столбцы располагаются друг над другом, а не рядом друг с другом * / <br/> @media экран и (максимальная ширина: 700 пикселей) {<br/>.ряд {<br/> flex-direction: столбец; <br/>} <br/>} <p> / * Адаптивный макет - когда ширина экрана меньше 400 пикселей, сделайте навигационные ссылки располагаются друг над другом, а не рядом друг с другом * / <br/> @ экран мультимедиа и (максимальная ширина: 400 пикселей) {<br/> .navbar a {<br/> плавать: нет; Ширина <br/>: 100%; <br/>} <br/>} <br/> </p> <p> Попробуй сам »</p> <p> <strong> Подсказка: </strong> Чтобы создать макет другого типа, просто измените ширину изгиба (но убедитесь, что она составляет до 100%).</p> <p> <strong> Подсказка: </strong> Вам интересно, как работает правило @media? Узнайте больше о это в нашей главе CSS Media Queries. </p> <p> <strong> Совет: </strong> Чтобы узнать больше о модуле раскладки гибких коробок, прочитайте наш Глава CSS Flexbox. </p> <p> <strong> Что такое размер коробки? </strong> </p> <p> Вы можете легко создать три плавающих бокса рядом. Однако, когда вы добавляете что-то, что увеличивает ширину каждого блока (например, отступы или границы), блок разрушается. Свойство <code> с размерами ящика </code> позволяет нам включать отступы и границу в общую ширину (и высоту) ящика, следя за тем, чтобы отступы оставались внутри ящика и не ломались.</p> <p> Подробнее о свойстве box-sizing можно узнать из нашего учебника по CSS-размеру. </p> <hr/> <h3><span class="ez-toc-section" id="i-35"> Нижний колонтитул </span></h3> <p> Наконец, мы добавим нижний колонтитул. </p> <p> <div> <br/> <h3><span class="ez-toc-section" id="_footer_padding_20px_ddd_-_WordPress_adsbygoogle_windowadsbygoogle_push_-_-_-_-_A_Homepage_-_-_-_Get_Flashy_Get_Flashy_-_adsbygoogle_windowadsbygoogle_push"> Нижний колонтитул </ h3> <br/> </ div> </p> <p> И стиль это: </p> <p> .footer {<br/> padding: 20px; / * Некоторые отступы * / <br/> выравнивание текста: по центру; / * Центр текста * / <br/> фон: #ddd; / * Серый фон * / <br/>} </p> <p> Попробуй сам »</p> <p> Поздравляем! Вы создали адаптивный сайт с нуля.</p> <br/> ,<div> Как сделать страницу домашней страницей - Учебные пособия по WordPress для начинающих </h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <p> Вы можете легко превратить свой блог в веб-сайт со статической домашней страницей, на которую люди будут заходить каждый раз, когда приходят. Объедините домашнюю страницу с другими статическими страницами и некоторыми пользовательскими меню, чтобы помочь посетителям ориентироваться, и прежде чем вы сможете сказать «Скажу вам об этом!» у вас есть сайт </p> <hr/> <h4> Создайте свою домашнюю страницу </h4> <p> Начните с создания страницы, которую вы хотели бы использовать в качестве домашней страницы. Перейдите на <strong> Мои сайты → Страницы → Добавить </strong>.Назовите это «Домой». Пока не беспокойтесь о его написании - мы просто настраиваем ваш сайт здесь. Добавьте немного текста-заполнителя, если хотите. </p> <p> Теперь создайте вторую пустую страницу, перейдя еще раз к <strong> Мои сайты → Страницы → Добавить </strong> и назовите его как «Новости», «Блог» или «Сообщения» - имя, которое поможет вам вспомнить, что это это страница, на которой будут появляться ваши сообщения. </p> <p> Чтобы назначить статическую домашнюю страницу, перейдите на <strong> Мои сайты → Настройка → Настройки домашней страницы </strong>: </p> <p> </p> <p> Затем в разделе <strong> на главной странице отображается </strong>, выберите <strong> A, статическая страница </strong>.Далее, нажмите на выпадающий список <strong> Homepage </strong> и выберите «Домашнюю» страницу, которую вы создали в качестве статической домашней страницы: </p> <p> </p> <p> Далее, на выпадающей странице <strong> сообщений </strong> выберите созданную вами страницу «Сообщений». (Здесь будут появляться ваши новые сообщения в блоге, если вы решите написать сообщения для своего сайта.) </p> <p> </p> <p> Наконец, нажмите <strong> Опубликовать </strong>, чтобы эти изменения вступили в силу. </p> <p> Теперь, когда вы перейдете на свой веб-адрес, вы увидите свою новую домашнюю страницу, а не сообщения в блоге.Конечно, вы смотрите либо на пустую страницу, либо на какой-то заполнитель текста, но все же! Вы создали сайт. Престижность. </p> <hr/> <h4> Сделай свою страничку красивой </h4> <p> Теперь, когда вы заложили технические основы для статической домашней страницы, на самом деле просто нужно решить, как представить ее убедительным образом. Вот несколько идей: </p> <ul> <li> Создайте галерею, одно изображение полной ширины или слайд-шоу, чтобы показать некоторые из ваших лучших работ. Мы рассмотрим это в Get Flashy. </li> <li> Создайте приветственное сообщение и связанный список ваших любимых постов.</li> <li> Сойти с ума с изображениями, текстом, галереями и медиа, которые задают тон для вашего сайта. </li> </ul> <hr/> <h4> Создание домашней страницы для вас </h4> <p> Если вы хотите, чтобы ваша домашняя страница действительно соответствовала вашим интересам, обязательно подумайте о том, чтобы включить: </p> <ul> <li> Ясное, настраиваемое меню, указывающее на ваш лучший контент, страницы и категории блогов. Вы узнаете все об этом в статье «Получить публикацию». </li> <li> Захватывающий визуальный вид, от заголовка до пользовательских цветов и шрифтов.Вы узнаете, как применить их в действии в разделе «Настройка». </li> <li> Некоторые полезные виджеты на боковой панели вашего блога, чтобы помочь людям сориентироваться или получить представление о том, что представляет собой ваш сайт или блог. Вы можете узнать о настройке и использовании лучших виджетов в Get Flashy. </li> </ul> <hr/> <p> Вот и все - теперь у вас должна быть статическая домашняя страница, которая превращает ваш сайт из простого блога в красивый сайт. </p> ,<h2> Как создать контакт Раздел </h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <hr/> <p> Узнайте, как создать адаптивный раздел контактов для веб-страниц. </p> <hr/> <h3><span class="ez-toc-section" id="_footer_padding_20px_ddd_-_WordPress_adsbygoogle_windowadsbygoogle_push_-_-_-_-_A_Homepage_-_-_-_Get_Flashy_Get_Flashy_-_adsbygoogle_windowadsbygoogle_push"> Контактная информация </span></h3> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-36"> Создать раздел контактов </span></h3> <h5><span class="ez-toc-section" id="_1_HTML"> Шаг 1) Добавить HTML: </span></h5> <h4><span class="ez-toc-section" id="i-37"> Пример </span></h4> <p> <div> <br/> <div> <br/> <h3><span class="ez-toc-section" id="_2_CSS_input_type_text_select_textarea_100_12_1px_solid_ccc_-_6_16_4CAF50_12px_20px_input_type_submit_hover_background-color_45a049_5_f2f2f2_10_50_-_6_20_row_after_content_-_600_media_screen_max-width_600px_100_margin-top_0_5_Google_-_G_Suite_adsbygoogle_windowadsbygoogle_push_-_-_-_Google_-_Google_-_G_Suite_Google"> Свяжитесь с нами </ h3> <br/> <p> Пройдите за чашкой кофе или оставьте нам сообщение: </ p> <br/> </ div> <br/> <div> <br/> <div> <br/> <img src = "/ w3images / map.JPG» > <br/> </ div> <br/> <div> <br/> <form action = "/ action_page.php"> <br/> <label for = "fname"> Имя </ label> <br/> <input type = "text" name = "firstname" placeholder = "Ваше имя .."> <br/> <label for = "lname"> Фамилия </ label> <br/> <input type = "text" name = "lastname" placeholder = "Ваша фамилия .."> <br/> <label for = "country"> Страна </ label> <br/> <select name = "country"> <br/> <option value = "australia"> Австралия </ option> <br/> <option value = "canada"> Канада </ option> <br/> <option value = "usa"> USA </ option> <br/> </ select> <br/> <ярлык for = "subject"> Тема </ label> <br/> <textarea name = "subject" placeholder = "Напишите что-нибудь.«. > </ textarea> <br/> <input type = "submit" value = "Submit"> <br/> </ form> <br/> </ div> <br/> </ div> <br/> </ div> </p> <hr/> <h5> Шаг 2) Добавить CSS: </h5> <h4> Пример </h4> * {<br/> размеры ящика: бордюрный ящик; <br/>} <p> / * Стиль ввода * / <br/> input [type = text], select, textarea {<br/> ширина: 100%; <br/> набивка: 12 пикселей; <br/> границы: 1px solid #ccc; Маржа-вершина <br/>: 6 пикселей; <br/> нижнее поле: 16 пикселей; <br/> изменить размер: вертикальный; <br/>} </p> <p> вход [тип = отправить] {<br/> цвет фона: # 4CAF50; <br/> цвет: белый; <br/> набивка: 12px 20px; <br/> граница: нет; <br/> курсор: указатель; <br/>} </p> <p> input [type = submit]: hover {<br/> background-color: # 45a049; <br/>} </p> <p> / * Стиль контейнера / контактный раздел * / <br/>.контейнер {<br/>, радиус границы: 5 пикселей; <br/> цвет фона: # f2f2f2; <br/> отступов: 10 пикселей; <br/>} </p> <p> / * Создайте две колонки, которые плавают рядом друг с другом * / <br/>. Колонна {<br/> поплавок: слева; <br/> ширина: 50%; Маржа-вершина <br/>: 6 пикселей; <br/> отступ: 20 пикселей; <br/>} </p> <p> / * Очистить поплавки после столбцов * / <br/> .row: after {<br/> content: ""; <br/> дисплей: стол; <br/> ясно: оба; <br/>} </p> <p> / * Отзывчивый макет - когда ширина экрана меньше 600 пикселей, сделайте стек из двух столбцов друг на друга, а не рядом друг с другом * / <br/> @media screen и (max-width: 600px) {<br/>.столбец, введите [тип = отправить] {<br/> ширина: 100%; <br/> margin-top: 0; <br/>} <br/>} </p> Попробуй сам " <br/> ,<div> Как создать бесплатный сайт за 5 минут с помощью сайтов Google - полное руководство по G Suite </h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <p> Создание нового веб-сайта кажется невероятно сложной задачей, которая в лучшем случае займет несколько часов, а в худшем - несколько недель или месяцев. Вы бы никогда не создали новый веб-сайт, чтобы просто поделиться парой отчетов или написать о проекте, над которым вы работаете. </p> <p> Вы могли бы, однако. С недавно переработанными Сайтами Google - одним из лучших, но наименее известных приложений Google - вы можете создать полноценный сайт бесплатно за считанные минуты.</p> <p> Это одна из лучших скрытых функций в вашей новой учетной записи G Suite и простой способ создания современной интрасети для вашей компании. </p> <h3><span class="ez-toc-section" id="_2_CSS_input_type_text_select_textarea_100_12_1px_solid_ccc_-_6_16_4CAF50_12px_20px_input_type_submit_hover_background-color_45a049_5_f2f2f2_10_50_-_6_20_row_after_content_-_600_media_screen_max-width_600px_100_margin-top_0_5_Google_-_G_Suite_adsbygoogle_windowadsbygoogle_push_-_-_-_Google_-_Google_-_G_Suite_Google"> Что такое Сайты Google? </span></h3> <p> Оригинальный редактор сайтов Google похож на Google Docs </p> <p> Сайты Google входят в набор приложений Google с 2008 года, когда он был запущен как простой конструктор сайтов. Первоначальная версия выглядела очень похожей на Google Docs - и получившиеся сайты выглядели немного как документы с панелью поиска вверху.</p> <p> Вы можете форматировать текст, вставлять изображения, документы или видео и даже вставлять свой собственный HTML-код, если хотите добавить больше функций. Все было выложено в виде таблиц, чтобы вы могли иметь один или несколько столбцов для вашего контента. </p> <p> Новый редактор Сайтов Google больше похож на новый Google Forms </p> <p> Затем, в конце 2016 года, Google обновил Сайты Google, придав ему дизайн, очень похожий на новые формы Google. Он использует одностолбцовый дизайн, как и многие современные веб-сайты, и упрощает разметку вашего сайта, а все инструменты организованы в боковую панель или всплывающее меню, которое появляется при выборе текста на вашем сайте.</p> <p> Обе версии приложений по-прежнему доступны - вы можете выбрать, какой редактор вы хотели бы использовать при создании нового сайта. Более новый из них имеет более чистый дизайн и более прост в использовании, в то время как более старая версия включает в себя несколько дополнительных функций, включая возможность отслеживать изменения на странице, чтобы вы могли вернуться к предыдущей версии. В любом случае, это отличный способ быстро создать сайт или интранет для вашей команды. </p> <p> <strong> Совет: </strong> Новые Сайты Google не включают в себя контроль версий, поэтому вы не можете отменить изменения, сделанные на вашем сайте.Для этой и других более похожих на вики функций вы, возможно, захотите сейчас использовать более старый редактор Сайтов Google. <br/> </p> <h4><span class="ez-toc-section" id="_Google"> Что можно делать с Сайтами Google? </span></h4> <p> Вы можете создать практически любой сайт с помощью Сайтов Google </p>. <p> Может быть, вы хотите сделать подробный сайт со страницами и страницами информации, как Мэри Фрэн сделала с подробностями о приложениях Google. Возможно, вы создали онлайн-курс и хотели бы поделиться им со всем миром, как это делал Photoweb со старыми Сайтами Google.Вам может понадобиться сайт для вашего бренда, так как Steegle и DPI Partners построены на старых и новых Сайтах Google соответственно. Или вы можете захотеть поделиться контактной информацией и календарями с вашим классом, как это сделал Сеньора Агирре на новых Сайтах Google. </p> <p> Вы можете создать все это и многое другое на Сайтах Google. </p> <p> И это бесплатно. Только со стандартной учетной записью Google вы можете создать столько сайтов Google, сколько захотите, бесплатно. Новые Сайты Google используют вашу учетную запись Google Drive для хранения изображений и файлов, которыми вы делитесь на своем сайте, так что вы даже можете бесплатно хранить до 15 ГБ файлов для своих сайтов, которыми вы можете поделиться с другими приложениями Google.</p> <p> Единственная загвоздка в том, что по умолчанию ваш сайт будет находиться в домене Google с адресом вроде <code> sites.google.com/view/yoursite </code>. </p> <p> Хотите сайт на собственном домене? Просто создайте учетную запись G Suite для своего домена за 5 долларов США в месяц на человека в вашей команде, и вы можете связать свой домен с Сайтами Google от администратора сайтов G Suite, а затем следуйте этим инструкциям, чтобы добавить свой сайт в новый домен. </p> <p> <strong> Совет: </strong> Ознакомьтесь с нашим подробным руководством по настройке учетной записи G Suite в главе 1 этой книги, чтобы создать учетную запись Google для вашего домена.<br/> </p> <h3><span class="ez-toc-section" id="_-_Google"> Создайте свой первый веб-сайт Google </span></h3> <p> На новой странице Сайтов Google отображаются ваши веб-сайты - и кнопка + для создания нового </p> <p> Готовы создать свой первый сайт? Просто зайдите на sites.google.com/new, чтобы начать создание нового веб-сайта. Это приведет вас прямо в редактор сайта. </p> <p> Теперь пришло время создать ваш сайт. В качестве примера мы попытаемся воссоздать часть страницы Zapier <em> About </em> на Сайтах Google - вы можете присоединиться или начать создавать свой собственный сайт.</p> <p> <strong> Совет: </strong> Новый редактор Сайтов Google работает только в Google Chrome и Firefox, поэтому вы не можете редактировать сайт в Safari или Microsoft Edge прямо сейчас. <br/> </p> <h4><span class="ez-toc-section" id="i-38"> Добавить приветственный баннер </span></h4> <p> Начните с добавления баннера на ваш сайт </p> <p> Сначала добавьте заголовок в верхнем левом углу редактора - это имя вы увидите в приложении Сайты Google, когда будете редактировать свой сайт. Google также скопирует это в верхний угол вашего веб-сайта, но вы можете изменить его, если хотите дать своему сайту другое публичное и частное имя.</p> <p> Затем добавьте приветственное сообщение в верхний баннер или удалите текст, если вы не хотите добавлять текст. Нажмите на баннер, и вы можете выбрать новое изображение для фона или загрузить свое собственное. Вы также можете выбрать больший баннер или просто заголовок страницы. </p> <p> Здесь я добавил фотографию команды Zapier в качестве фона заголовка и написал <em> About Zapier </em> в качестве имени страницы. </p> <p> Хотите изменить внешний вид заголовка? Просто выделите текст или щелкните по краю текстового поля, и вы сможете изменить тип заголовка или выравнивание текста или добавить ссылку на другой сайт.Наведите указатель мыши на верхнюю часть окна, и вы также можете перетащить заголовок на правую или левую сторону своего баннера, хотя текст всегда будет оставаться в центре между верхом и низом вашей страницы. </p> <p> Или вы можете добавить другое изображение к вашему баннеру, например логотип компании. Просто дважды щелкните в любом месте баннера, и откроется скрытое меню круга. Выберите, что вы хотите добавить: <em> Текст </em> позволяет добавить текст обратно в баннер, если вы удалили его, <em> Изображения </em> позволяет добавить фотографию с вашего диска Google, а <em> Загрузить </em> позволяет загрузить новую фотографию.</p> <p> Есть только одна загвоздка: каждый элемент в заголовке по-прежнему центрирован, поэтому вы не можете перетащить логотип в верхний левый угол или добавить текст в нижнюю часть баннера. </p> <h4><span class="ez-toc-section" id="i-39"> Добавить текст и другие средства массовой информации на свою страницу </span></h4> <p> Добавить текст и многое другое в простом текстовом редакторе </p> <p> Теперь вы можете добавить контент, который вы хотите на свою страницу. В меню <em> Вставить </em> справа вы можете добавить текст или изображения или встроить ссылку с другого сайта. Сайты Google позволяют изменять размер и обрезать изображения, а его текстовый редактор позволяет быстро форматировать текст с помощью стандартных сочетаний клавиш или меню, которое появляется при выборе текста.Добавьте заголовки и подзаголовки из меню редактора или, если вы хотите поделиться кодом (возможно, в руководстве по написанию HTML), нажмите кнопку с 3 точками справа, чтобы добавить моноширинное форматирование в стиле кода. </p> <p> Поскольку мы не можем добавить логотип в верхний угол нашего сайта, я добавил логотип Zapier в качестве изображения и изменил его размер, чтобы он хорошо смотрелся на странице. Затем я добавил текстовое поле с форматированием подзаголовка для текста большего размера, а затем второе текстовое поле с обычно отформатированным текстом. </p> <p> Вы также можете добавить на свою страницу дополнительные элементы: видео YouTube, Карты Google, события Календаря Google, формы Google Forms, диаграммы из электронных таблиц или полные файлы из Документов, Слайдов и Листов.Выберите тип элемента, который вы хотите вставить, и вы увидите всплывающее окно в стиле Docs, где вы можете найти нужный элемент, а затем <em>. Выберите </em>, чтобы вставить его в новый раздел на вашей странице. Это простой способ создать целевую страницу или создать отчет в реальном времени со встроенной презентацией и таблицей. Вы можете использовать его, например, для создания веб-сайта для командного проекта или для планирования встреч и мероприятий в одном легко доступном месте. </p> <p> Слева от каждого раздела вашего сайта вы увидите 3-точечную кнопку, которую можно перетаскивать, чтобы изменить порядок разделов на вашей странице.Нажмите цветовую палитру, чтобы выбрать другой стиль фона для этого раздела, или щелкните мусорную корзину, чтобы удалить ее. </p> <p> Например, я добавил более темный цвет, чтобы подчеркнуть нашу карту - отличный способ визуально разбить более длинные страницы. </p> <h4><span class="ez-toc-section" id="i-40"> Создание многостолбцовой раскладки </span></h4> <p> Хотите добавить несколько столбцов в макет, возможно, создать группу изображений вместе или добавить несколько главных функций вашего продукта в одном месте? </p> <p> Просто дважды щелкните пустое место на своей странице, и снова откроется меню магических кругов Сайтов Google.Выберите то, что вы хотите добавить, и оно появится в новом столбце под тем местом, где вы щелкнули. Только в одном разделе будет несколько столбцов, поэтому вы можете указать полное описание сайта, затем 3 столбца в следующем разделе с подробными сведениями о вашем сайте и последующим разделом видео во всю ширину. </p> <p> <strong> Подсказка: </strong> Если вы добавите на страницу изображения меньшего размера, они будут автоматически добавлены в один ряд из нескольких столбцов. <br/> </p> <p> Или дважды щелкните 3-точечную кнопку, чтобы открыть меню скрытого круга, в которое можно снова вставить текст, изображения или файлы Google Диска.Это вставит новый элемент <em> рядом с </em> существующим элементом для быстрого создания этого раздела вашего сайта в несколько столбцов. </p> <p> Затем вы можете изменить размеры элементов в каждом разделе, используя линии сетки, чтобы убедиться, что все выровнено правильно. Это один из самых простых способов создания многостолбцовой разметки страницы, и он почти скрыт в Сайтах Google. </p> <p> <strong> Подсказка: </strong> Чтобы сохранить изображения в их исходном соотношении сторон, перетащите угол, чтобы начать изменять их размер, затем нажмите клавишу <code> Shift </code>, чтобы изменить размер в правильном соотношении сторон.<br/> </p> <h4><span class="ez-toc-section" id="_Google-2"> Добавить страницы на ваш сайт Google Сайт </span></h4> <p> Если вам нужна только одна страница на вашем сайте, все готово, как в нашем примере <em> О странице Zapier </em>. Или вы можете продолжать строить свой сайт с дополнительными страницами. </p> <p> Добавьте дополнительные страницы со второй вкладки на правой панели инструментов. Просто добавьте заголовок для вашей страницы, и он автоматически добавится в меню в заголовке вашего сайта. Вы можете добавить те же разделы на любую страницу - и если вы хотите скопировать что-то с одной страницы на другую, просто выберите этот раздел своего сайта, нажмите <code> CMD </code> + <code> C </code> или <code> Ctrl </code> + <code> C </code>, а затем вставьте это на новой странице.</p> <p> Вы можете перетаскивать страницы в нужном вам порядке с помощью их 3-точечной кнопки. Или перетащите страницу <em> под </em> на другую страницу, чтобы превратить ее в подстраницу, что также можно сделать из меню в правой части каждой страницы. </p> <h4><span class="ez-toc-section" id="_Google-3"> Настройте дизайн своего сайта Google </span></h4> <p> Есть еще одна вещь, которую вы можете настроить: дизайн вашего сайта. Новые темы Сайтов Google управляются вашим контентом, с большими заголовками на основе изображений и текстовыми блоками полной ширины. Но есть еще ряд способов создать уникальный образ.</p> <p> Просто нажмите вкладку <em> Темы </em> на правой боковой панели и выберите одну из 6 доступных тем. Каждый из них включает в себя 3 различных стиля шрифта, а также 5 цветовых схем, чтобы придать вашему сайту немного другой внешний вид. </p> <p> Сочетайте это с вашей собственной графикой и настраиваемой многостолбцовой раскладкой, и вы сможете настроить Сайты Google в соответствии с вашим брендом и почувствовать себя уникальным, специально созданным сайтом. Стиль по умолчанию <em> Simple </em> хорошо вписывается в фирменный стиль Zapier, хотя синий цвет по умолчанию не совсем подходит - поэтому быстрое изменение на черный и наша страница готова.</p> <p> <strong> Совет: </strong> Нужна помощь в создании графики для вашего сайта? Проверьте наш ускоренный курс Design 101. <br/> </p> <h3><span class="ez-toc-section" id="_Google-4"> Опубликовать и поделиться своим сайтом Google </span></h3> <p> Вы можете поделиться своим сайтом и позволить другим помочь вам отредактировать его </p> <p> Одна из лучших функций Сайтов Google - это настройки общего доступа, которые работают так же, как Google Drive. Вы можете поделиться своим сайтом с кем угодно, и пусть они помогут отредактировать его. </p> <p> Просто нажмите на значок человека в редакторе, и вы сможете поделиться сайтом, над которым вы работаете, со всей командой.С отдельными учетными записями вы можете добавлять конкретных людей, чтобы они могли редактировать сайт; в учетной записи компании G Suite ваш сайт будет видимым <em> для всех в вашей компании </em>, но они не смогут его редактировать. Включите редактирование, и ваш сайт превратится в своего рода вики (без контроля версий и истории редактирования), где каждый может нажать на значок карандаша на сайте и редактировать на нем все, что угодно. </p> <p> Тогда пришло время опубликовать ваш сайт. Дайте ему уникальный URL, чтобы вы могли открыть свой сайт на <code> сайтах.google.com/view/YourSiteName </code> или по адресу <code> sites.google.com/YourDomain.com/YourSiteName </code>, если у вас есть аккаунт G Suite. И выберите, хотите ли вы, чтобы этот сайт был доступен только вашей команде - по умолчанию, лучше всего подходит для большинства внутренних сайтов компании - или в Интернете, чтобы быстро создать сайт для нового общедоступного проекта. Затем вы можете выбрать, чтобы ваш сайт отображался в результатах поиска Google, если вы сделали его общедоступным. </p> <p> Zapier's About page, издание Сайтов Google </p> <p> Наш тестовый сайт оказался очень похож на нашу настоящую страницу О нас, с изображениями, текстом и даже встроенными видео и картами.Вы можете проверить наш тестовый сайт Google, и мы хотели бы увидеть, что вы делаете в комментариях ниже! </p> <hr/> <p> И это все. В любое время, когда вам нужно поделиться чем-то новым с вашей командой, вы можете раскрутить новый сайт за несколько минут. Это может быть даже лучший способ поделиться документами и презентациями, так как вы можете добавить дополнительный контекст с описанием и содержанием сайта. </p> <p> С вашей командой, создающей и делящейся таким большим количеством информации в G Suite, есть вероятность, что у вас в конечном итоге возникнут проблемы с поиском чего-либо.Но не волнуйтесь - одноименная поисковая система Google встроена в G Suite, чтобы помочь вам найти электронные письма, документы, контактную информацию и все, что вам нужно. Поэтому, прежде чем ваша команда сходит с ума в своей новой учетной записи G Suite, узнайте из главы 6, как найти что-нибудь в приложениях Google. </p> <p> Перейти к главе 6! <br/> </p> , </div><!-- .entry-content --> </div><!-- .entry-content-wrapper --> </div> </article><!-- #post --> <nav class="navigation post-navigation" role="navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/fajly-tip-imya-mestopolozhenie-fajly-tip-imya-mestopolozhenie-rabota-s-fajlami-otvety-po-informatike-zanimatelnaya-informatika-katalog-statej.html" rel="prev">Файлы тип имя местоположение – Файлы (тип, имя, местоположение). Работа с файлами. — Ответы по информатике — Занимательная информатика — Каталог статей</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/tekst-novostnoj-operativno-novostnye-teksty-oj-a-takoj-stranicy-na-sajte-uzhe-ili-eshhyo-net.html" rel="next">Текст новостной: Оперативно-новостные тексты – Ой! А такой страницы на сайте уже или ещё нет</a></div></div> </nav><div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/kak-oformit-stranicu-kontakty-na-sajte-priyatno-svyazatsya-15-primerov-stranic-kontakty.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> Обязательные поля помечены <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Комментарий</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='19110' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> </main> </div> <div id="sidebar-primary" class="widget-area sidebar " role="complementary"> <div class="sidebar-main"><div class="rtb_menu" style="display:block; background:#fff; margin: 1px auto"><center><div id="rtbBlock1"> <div id="yandex_rtb_sidebar" class="yandex-adaptive classYandexRTB"></div> </div> <script type="text/javascript"> (function(w, n) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-535903-5", renderTo: "yandex_rtb_sidebar", async: false, pageNumber: getRTBpageNumber( "R-A-535903-5" ), directSettings: { }, onRender: function(data) { if (data.product == "direct"){ document.getElementById("rtbBlock1").style.textAlign = "center"; } } }); }); document.write('<sc'+'ript type="text/javascript" src="//an.yandex.ru/system/context.js"></sc'+'ript>'); })(this, "yandexContextSyncCallbacks");</script></center></div> <section id="search-2" class="widget widget_search"><div class="zita-widget-content"><form role="search" method="get" id="searchform" action="https://xn--90abhccf7b.xn--p1ai/"> <div class="form-content"> <input type="text" placeholder="search.." name="s" id="s" value=""/> <input type="submit" value="Search" /> </div> </form> </div></section><section id="custom_html-5" class="widget_text widget widget_custom_html"><div class="widget_text zita-widget-content"><div class="textwidget custom-html-widget"><ins class="adsbygoogle" style="display:inline-block;width:100%;height:600px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="6847132033" ></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></div></section><section id="nav_menu-4" class="widget widget_nav_menu"><div class="zita-widget-content"><h2 class="widget-title">Рубрики</h2><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-19021" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19021"><a href="https://xn--90abhccf7b.xn--p1ai/category/css">Css</a></li> <li id="menu-item-19022" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19022"><a href="https://xn--90abhccf7b.xn--p1ai/category/html">Html</a></li> <li id="menu-item-19023" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19023"><a href="https://xn--90abhccf7b.xn--p1ai/category/js">Js</a></li> <li id="menu-item-19024" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19024"><a href="https://xn--90abhccf7b.xn--p1ai/category/adaptiv">Адаптивный сайт</a></li> <li id="menu-item-19025" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19025"><a href="https://xn--90abhccf7b.xn--p1ai/category/verstk">Верстка</a></li> <li id="menu-item-19026" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19026"><a href="https://xn--90abhccf7b.xn--p1ai/category/idei">Идеи</a></li> <li id="menu-item-19028" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19028"><a href="https://xn--90abhccf7b.xn--p1ai/category/chego-nachat">С чего начать</a></li> <li id="menu-item-19029" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19029"><a href="https://xn--90abhccf7b.xn--p1ai/category/sovety">Советы</a></li> <li id="menu-item-19031" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19031"><a href="https://xn--90abhccf7b.xn--p1ai/category/shablon">Шаблоны</a></li> <li id="menu-item-19027" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-19027"><a href="https://xn--90abhccf7b.xn--p1ai/category/raznoe">Разное</a></li> </ul></div></div></section><section id="custom_html-3" class="widget_text widget widget_custom_html"><div class="widget_text zita-widget-content"><div class="textwidget custom-html-widget"><style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script type="text/javascript">jQuery(document).ready(function($){$('.mylink').replaceWith(function(){return'<a href="'+$(this).attr('data-url')+'" title="'+$(this).attr('title')+'">'+$(this).html()+'</a>'})});new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> </div></div></section><section id="custom_html-4" class="widget_text widget widget_custom_html"><div class="widget_text zita-widget-content"><div class="textwidget custom-html-widget"><!-- Yandex.RTB R-A-535903-5 --> <div id="yandex_rtb_R-A-535903-5"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-535903-5", renderTo: "yandex_rtb_R-A-535903-5", async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script></div></div></section></div> </div> </div> </div> <footer id="zita-footer"> <div class="footer-wrap widget-area"> <div class="bottom-footer"> <div class="bottom-footer-bar ft-btm-one"> <div class="container"> <div class="bottom-footer-container"> © Компания <a href="http://вебджем.рф"> Вебджем.рф </a> 2009 - 2021 | Все права защищены.</a> </div> </div> </div> </div> </div> </footer> <style type="text/css"> .pgntn-page-pagination { text-align: left !important; } .pgntn-page-pagination-block { width: 60% !important; padding: 0 0 0 0; } .pgntn-page-pagination a { color: #1e14ca !important; background-color: #ffffff !important; text-decoration: none !important; border: 1px solid #cccccc !important; } .pgntn-page-pagination a:hover { color: #000 !important; } .pgntn-page-pagination-intro, .pgntn-page-pagination .current { background-color: #efefef !important; color: #000 !important; border: 1px solid #cccccc !important; } .archive #nav-above, .archive #nav-below, .search #nav-above, .search #nav-below, .blog #nav-below, .blog #nav-above, .navigation.paging-navigation, .navigation.pagination, .pagination.paging-pagination, .pagination.pagination, .pagination.loop-pagination, .bicubic-nav-link, #page-nav, .camp-paging, #reposter_nav-pages, .unity-post-pagination, .wordpost_content .nav_post_link,.page-link, .page-links,#comments .navigation, #comment-nav-above, #comment-nav-below, #nav-single, .navigation.comment-navigation, comment-pagination { display: none !important; } .single-gallery .pagination.gllrpr_pagination { display: block !important; } </style> <link rel='stylesheet' id='pgntn_stylesheet-css' href='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/pagination/css/nav-style.css?ver=5.7.2' type='text/css' media='all' /> <script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-includes/js/jquery/ui/effect.min.js?ver=1.12.1' id='jquery-effects-core-js'></script> <script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-includes/js/comment-reply.min.js?ver=5.7.2' id='comment-reply-js'></script> <script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/themes/zita/js/zita-menu.js?ver=5.7.2' id='zita-menu-js-js'></script> <script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/themes/zita/js/zita-custom.js?ver=5.7.2' id='zita-custom-js-js'></script> <script type='text/javascript' id='load-more-posts-js-js-extra'> /* <![CDATA[ */ var wp_ajax_url = "https:\/\/xn--90abhccf7b.xn--p1ai\/wp-admin\/admin-ajax.php"; /* ]]> */ </script> <script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/themes/zita/inc/pagination/js/load-more-posts.js?ver=0.1' id='load-more-posts-js-js'></script> <script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/themes/zita/inc/pagination/js/infinite-scroll.js?ver=0.1' id='script_ajax-js'></script> <script type='text/javascript' id='q2w3_fixed_widget-js-extra'> /* <![CDATA[ */ var q2w3_sidebar_options = [{"sidebar":"sidebar-1","margin_top":10,"margin_bottom":0,"stop_id":"","screen_max_width":0,"screen_max_height":0,"width_inherit":false,"refresh_interval":1500,"window_load_hook":false,"disable_mo_api":false,"widgets":["custom_html-4"]}]; /* ]]> */ </script> <script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.1.9' id='q2w3_fixed_widget-js'></script> <script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-includes/js/wp-embed.min.js?ver=5.7.2' id='wp-embed-js'></script> <script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script> <script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script> <script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script> <script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script> <script type='text/javascript' id='ez-toc-js-js-extra'> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */ </script> <script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> </body> </html>