Сайт

Сайт визитка макет: Шаблоны для сайта-визитки — KonstruktorySajtov.com

15.11.2022

Содержание

Как сделать сайт-визитку с контактами. Шаблон сайта визитки

Содержание

  1. Преимущества
  2. Регистрация хостинга и домена
  3. Установка SSL-сертификата
  4. Установка WordPress
  5. Установка Elementor
  6. Установка Woody code snippets
  7. Настройка WordPress
  8. Установка шаблона сайта визитки
  9. Редактирование страницы “под себя”
  10. Услуга по созданию сайта визитки

Всем привет! Многих интересует вопрос, как сделать сайт-визитку со своими контактами или где взять шаблон сайта визитки бесплатно? Я думаю, каждый хочет иметь свой сайт со своими контактами и своими данными, называемый сайт визитка, мини-сайт или мультиссылка. Такой сайт-визитку можно указать у себя в профиле Instagram, в вконтакте или Facebook, на бумажной визитке, в резюме, в объявлении и т.д.

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

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

Преимущества

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

Способ создания сайта-визитки описанный в этой статье тоже платный (необходимо платить за хостинг около 60 руб/мес + за собственный домен около 17 руб/мес.), но плюсов создания сайта на WordPress больше, чем минусов.

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

Сайт принадлежит вам, а не “сервису”

Собственное доменное имя

Содержание сайта дешевле, чем на сервисах по созданию сайтов и мультиссылок

Способ создания мини-сайта немного сложнее чем на сервисах

Регистрация хостинга и домена

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

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

Внимание! Купон скидки на хостинг FastFox можно получить здесь.

Установка SSL-сертификата

После того как вы оформили на себя хостинг и домен, вам необходимо зайти в панель управления хостинга (доступы с паролями у вас должны были прийти на email) и установить SSL-сертификат, для этого в меню выбираем «SSL-сертификаты» и нажимаем кнопку «Let’s Encrypt» (все картинки кликабельны)

Внимание! Обновление DNS-серверов для домена занимает до 48 часов (как правило 2-3 часа). После этого домен станет доступен в сети Интернет. Только после этого возможна установка SSL-сертификата.

Выбираем ваш домен и нажимаем «OK»

Далее нам необходимо сделать настройку своего домена, для этого переходим в «WWW-домены», выбираем свой домен и нажимаем кнопку «Изменить»

Выставляем настройки для домена согласно этим скриншотам, версию PHP ставьте последнюю на данный момент…

Установка WordPress

Теперь нам необходимо установить CMS WordPress для нашего сайта или движок сайта. Для этого переходите в «Каталог Web-скриптов», находите строку с WordPress и нажимаете «Установить»

Директорию установки лучше оставить по умолчанию, сервер лучше выбрать: «Mariadb». Нажимаем «Далее»

Соглашаемся с лицензионным соглашением. Нажимаем «Далее»

Придумываем и вводим имя базы данных, имя и пароль пользователя базы данных, а также логин и пароль для входа в админку сайта (отмечено красным на скриншоте). Запишите куда нибудь эти данные (особенно для входа в админку сайта). Нажимаем «Далее»

Подтверждаем установку нажатием кнопки «Завершить»

Теперь заходим в админку вашего сайта. Для этого в адресной строке браузера вбиваем адрес вашего сайта (ваш домен) и через слеш wp—admin. Вот так: домен/wp—admin/

Вбиваем Логин и Пароль для входа в админку вашего сайта (который вы придумали при установке WordPress)

Теперь нам необходимо обновить до последней версии WordPress, установленные плагины и темы. Для этого в левом меню выбираем «Обновления»

Обновляем вначале WordPress

Обновляем установленные плагины

Обновляем установленные темы

Кстати, рекомендую очень классную многоцелевую русскоязычную тему «Reboot». Данный блог работает на данной теме.

Установка Elementor

Устали? Потерпите, половину пути вы уже прошли ). Теперь устанавливаем плагин-конструктор «Elementor». С помощью данного плагина можно верстать практически любые сайты. Для сайта-визитки нам подойдет его бесплатная версия. Если вам нужна платная версия с еще большими возможностями, находится она тут.

Для установки бесплатной версии, в левом меню выбираем «Плагины» — «Добавить новый»

В строке поиска вводим: Elementor. В результатах поиска выбираем «Elementor Website Builder» и нажимаем «Установить»

После установки плагина нажимаем «Активировать»

Установка Woody code snippets

Теперь установим плагин для вставки кода Woody code snippets. Он нам необходим чтобы прописать стили к нашим кнопкам Elementor. Данный плагин в дальнейшем вам тоже может пригодиться, если вы будете прописывать другие коды на свой сайт, например код и цели Яндекс-Метрики.

В строке поиска плагинов вводим: Woody… В результатах поиска выбираем «Woody code snippet» и нажимаем «Установить»

После установки плагина нажимаем «Активировать»

Настройка WordPress

Теперь нам необходимо сделать настройки WordPress. Для этого в меню выбираем «Настройки» — «Общие» и вписываем ваше название и описание сайта, административный адрес Email. Формат даты и времени желательно поставить такой же как на скрине ниже. Нажимаем «Сохранить изменения»

Переходим в «Настройки» — «Постоянные ссылки» и вид ссылки настраиваем произвольный. Сохраняем изменения.

Установка шаблона сайта визитки

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

Теперь в меню выбираем «Шаблоны» — «Импортировать шаблоны»

Кликаем «Выберите файл» и указываем наш скачанный файл шаблона сайта-визитки

Нажимаем кнопку «Импортировать»

После этого наш шаблон (сайт-визитка) появится в списке шаблонов

Теперь нам необходимо создать страницу на основе данного шаблона. Для этого в меню WordPress выбираем «Страницы» — «Добавить новую»

Кликаем на «Редактировать в Elementor»

Загрузится редактор Elementor. Он визуально поделен на левую и правую часть. В левой части находятся все виджеты из которых строится страница, в правой части — страница, собранная из этих виджетов.

Нам необходимо в правой части добавить наш импортированный шаблон.

Для этого жмем «Добавить шаблон»

На вкладке «Мои шаблоны» выбираем наш шаблон и нажимаем «Вставить»

Нажимаем «Да», соглашаясь на импорт параметров документа шаблона

Вуаля! Наш готовый шаблон сайта-визитки загружен! Чтобы все кнопки данной страницы были определенной одинаковой ширины, нам нужно загрузить стили данных кнопок. Это мы сделаем чуть позже…

Теперь переходим в настройки страницы и прописываем заголовок данной страницы

Можно уже опубликовать данную страницу, нажав кнопку «Опубликовать»

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

Кликаем верхний левый значок гамбургера и нажимаем «Выйти в консоль»

Далее нам желательно прописать окончание адреса данной страницы на латинице, для этого редактируем поле «Ярлык URL» и нажимаем кнопку «Обновить».

Можно уже открыть нашу страницу в новой вкладке браузера, кликнув по ссылке в графе «Просмотреть страницу»

Оставим пока открытой вкладку со страницей нашего сайта-визитки, а в текущей вкладке, чтобы импортировать стили наших кнопок, в левом меню админки WordPress выбираем «Woody snippets» — «Импорт/Экспорт»

Во вкладке «Импорт» жмем «Выбрать файлы»

Выбираем наш скачанный файл со стилями…

Нажимаем «Загрузить файлы и импортировать»

После успешного импорта появится сообщение: «1 сниппет успешно импортирован».

Теперь в меню выбираем «Woody snippets», находим наш импортированный код и нажимаем «Изменить»

Идем вниз и выставляем опцию «Тип перелинковки» — «Встроенный код»

В верхнем правом углу нажимаем кнопку «Обновить»

Обновляем нашу страницу во второй вкладке, все кнопки должны выровняться по ширине…

Редактирование страницы “под себя”

Теперь можно приступить к редактированию нашей страницы “под себя”.

Для этого в верхней панели страницы выбираете «Редактировать в Elementor»

Страница откроется в редакторе Elementor, в котором можно редактировать данную страницу как в конструкторе. Я покажу лишь некоторые функции редактирования для примера, т.к. показать весь функционал редактора Elementor в данной статье невозможно. Можете посмотреть хорошие видео-уроки по Elementor у Александра Парфилова на его Youtube-канале.

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

После смены картинки фона…

Меняем текст в заголовке, для этого кликаем на заголовок и меняем текст заголовка

Аналогичным способом меняем текст во втором заголовке

Меняем фотографию на свою, для этого кликаем на фото и слева в виджете меняем файл картинки на свое фото

Теперь можно поменять текст и ссылки на кнопках

Мы можем настроить цвет кнопок

А также его шрифт и начертание

Ненужные виджеты на странице можно удалить, например, лишние кнопки. Для этого кликаем правой кнопкой мыши на карандашик виджета и выбираем «Удалить»

Аналогичным способом меняем текст и ссылки кнопок социальных сетей

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

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

Для примера я вставил виджет «Текстовый редактор» и ввел текст в него

Не забываем периодически сохранять изменения, нажимая кнопку «Обновить» внизу редактора

Вот такая страница получилась у нас после ее редактирования

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

Также на сайте можно настроить Яндекс-метрику для отслеживания различной статистики по вашему сайту, в т. ч. статистику кликов по кнопкам. Вы можете настроить Яндекс-Метрику сами, почитав документацию Яндекс или же заказав данную услугуу меня.

Теперь нам осталось только сделать одну настройку в редакторе WordPress, чтобы наша страница открывалась на главной странице. Для этого в меню WordPress открываем «Настройки» — «Чтение» и меняем главную страницу на страницу «Моя визитка». Сохраняем изменения

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

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

Услуга по созданию сайта визитки

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

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

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

Подать заявку

Можете посмотреть обзор бесплатного конструктора сайтов Elementor

В комментариях ниже можете обсудить данную статью и напишите есть ли у вас свой сайт?

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

Подпишись, дальше будет еще интереснее.

С Уважением, Марат Наурузбаев

Заказать сайт визитку под ключ

Заказать сайт визитку под ключ | создание сайтов визитка

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

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

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

Сайт визитка

*Указана минимальная цена

$300

$ 250.00