Простые и удобные сервисы помогут сделать сайт-визитку, лендинг, личный блог или даже онлайн-магазин.
1. Craftum
- Стоимость: 10 дней бесплатно, далее от 149 рублей в месяц; от 7 500 рублей — готовый сайт под ключ.
Популярный конструктор сайтов, который позволяет создавать ресурсы для малого бизнеса, от простых визиток до онлайн‑магазинов. На выбор пользователям предлагается свыше 150 стильных шаблонов, сгруппированных по тематике. Причём каждый можно посмотреть ещё до регистрации на сайте, что действительно удобно.
Сервис имеет интуитивно понятный интерфейс, позволяет применять собственные шрифты и HTML‑код, а также предлагает богатый набор дополнительно подключаемых элементов.
Доступно три тарифных плана, а для старта предлагают 10 дней бесплатного использования. Все варианты подписки позволяют подключить уже существующий домен или зарегистрировать новый для вашего сайта.
2.
- Стоимость: бесплатно или от 500 рублей в месяц.
Этот конструктор делает акцент на типографике и возможностях детальной настройки доступных блоков, которых всего около 550. Выбор шаблонов невелик, да и уникальными многие из них не назовёшь, но именно за счёт кастомизации элементов пользователю предлагается самостоятельно привести дизайн к нужному виду.
как создать фейк сайт vk
Для быстрого старта предлагает ознакомительные статьи и видеоуроки по работе с сервисом, которые новичкам будут очень кстати. Также предусмотрены встроенный поиск изображений, доступных по лицензии Creative Commons, и инструменты для их редактирования.
отлично подходит для лендингов, промостраниц и различных портфолио, но возможности сервиса этими форматами, конечно, не ограничиваются. При выборе самого дорогого из двух платных тарифных планов получится создавать крупные проекты с возможностью экспорта исходного кода и API. Бесплатно же доступен один сайт с базовым набором блоков.
3. uKit
- Стоимость: 14 дней бесплатно, далее от 9 долларов в месяц.
Этот конструктор ориентирован на малый бизнес, то есть на небольшие фирмы, которые без лишних затрат и усилий хотят получить красивый и удобный сайт. Сервис предлагает несколько сотен шаблонов, сгруппированных по тематике и цветам. Все они предоставляются уже с готовыми текстами, описаниями услуг и другой информацией, которая может быть полезна вашим клиентам.
Шаблоны можно отредактировать, но сделать дизайн полностью уникальным вряд ли получится. Сервис предоставляет минимум опций настройки блоков и доступных виджетов. Мобильная версия сайта формируется автоматически. В режиме предпросмотра вы можете увидеть готовые макеты под планшеты и смартфоны.
Бесплатно пользоваться сервисом получится лишь в рамках пробного периода, после которого нужно выбрать один из тарифов. Самый доступный из них уже включает в себя домены вида site.ru, неограниченное количество страниц и места на сервере, встроенную статистику, а также автоматические бэкапы. Кроме того, к домену вы можете получить бесплатные почту и SSL‑сертификат.
Как Вконтакте Создать Сайт Визитку Бесплатно самому из сообществагруппыпаблика ВК
4. Nethouse
- Стоимость: бесплатно с ограничениями или от 400 рублей в месяц.
Ещё один достаточно простой для освоения конструктор с ориентацией на сайты‑визитки малого бизнеса и продажи через интернет. Сервис не отличается большим набором и разнообразием шаблонов. Всего доступно 127 вариантов дизайна с минимальными настройками внешнего вида. Многие из них заточены именно под онлайн‑витрины товаров и услуг.
Nethouse позволяет интегрировать сайт с «Яндекс Кассой», программой «1С», а также сервисами «Яндекс Метрика», UniSender, «Большая птица», «Мой склад», СДЭК, Boxberry и сотнями других.
В случае возникновения сложностей с конструктором сайтов всегда можно воспользоваться набором бесплатных вебинаров, подробно рассказывающих обо всех ключевых этапах создания и продвижения. С их же помощью получится обучать персонал. При регистрации предоставляется 10 дней полного доступа ко всем возможностям Nethouse. После вы автоматически будете переведены на бесплатный тариф с ограничениями.
5. 1С‑UMI
- Стоимость: 15 дней бесплатно, далее от 136 рублей в месяц.
Этот конструктор изначально предлагает создать сайт бесплатно, но по факту тарифа без вложений не предусмотрено. В зависимости от типа вашего сайта будет варьироваться и цена. Самой доступной является страница специалиста, а далее по возрастающей — лендинг, сайт компании и интернет‑магазин. При регистрации любого из этих вариантов сервис потребует ваш мобильный телефон, на который будет выслан пароль.
Каталог шаблонов невелик, менять их в процессе создания можно, но выбрать другой тип сайта уже нельзя. Если вместо визитки вы решили сделать лендинг, придётся начинать всё заново.
Из достоинств 1С‑UMI можно отметить предоставление доступа к CSS, удобный импорт товаров, а также интеграцию с сервисами «1С: Управление торговлей», «Мой склад», «Яндекс Маркет» и другими. В рамках пробного 15‑дневного периода доступны все функции, но после придётся выбрать один из платных тарифов.
6. Moguta.Cloud
Стоимость: 14 дней бесплатно, далее от 1 390 рублей в месяц; от 6 990 рублей — готовый сайт под ключ.
Этот конструктор не отличается большим набором готовых шаблонов, однако имеющиеся радуют современным и стильным дизайном. Каждый из них можно настроить по своему усмотрению. Опций предостаточно — начиная от смены основных изображений и заканчивая редактированием CSS‑стилей.
Встроенный магазин приложений предложит ряд различных подключаемых модулей, в числе которых удобные таблицы для сайта, счётчики и галереи снимков из социальных сетей. Готовую страницу можно связать с платёжными системами, складскими программами и службами доставки. Вне зависимости от выбранного тарифа сервис предоставляет бесплатный SSL‑сертификат для вашего домена.
7. Mottor
- Стоимость: собрать дизайн — бесплатно; запустить готовый сайт — от 690 рублей в месяц.
Сервис отлично подходит для создания онлайн‑магазинов и сайтов для бизнеса. Кроме того, с помощью Mottor получится сделать портфолио или профессиональный блог. Можно детально настроить выбранный дизайн или только заменить в нём изображения и расположение элементов.
Для каждого шаблона предусмотрено несколько различных вариантов разметки страниц. Есть возможность настроить цветовые схемы и шрифты. Также получится отредактировать код HTML и CSS.
К магазину можно подключить платёжные системы, сервисы почтовой рассылки, а также CRM и инструменты для аналитики. В подарок предлагают завести новый домен в зоне .RU или .РФ для вашего сайта.
8. uCoz
- Стоимость: базовая версия с показом рекламы — бесплатно; подписка с отключением рекламы — от 8 долларов в месяц.
Это один из самых старых сервисов по созданию сайтов, который уже давно перерос само понятие конструктора. uCoz сегодня предоставляет множество дополнительных услуг и модулей для интернет‑проектов. При всём этом создать простую визитку, блог, форум или онлайн‑магазин ещё позволяет.
uCoz предлагает воспользоваться огромным количеством различных блоков, выбирать которые можно как на начальном этапе, так и по мере развития сайта. Есть масса шаблонов с возможностью редактирования кода, но по части дизайна многие из них уже давно устарели. Более или менее современные макеты предоставляются платно.
Новичкам такой сервис может показаться сложным. Освоение всей иерархии меню и способов подключения нужных элементов займёт немало времени. К тому же простые сайты, созданные бесплатно, дополняются большими рекламными баннерами, что тоже вряд ли кого‑то порадует. Иными словами, uCoz сегодня ориентирован на опытных пользователей, готовых отдавать деньги за качество.
Этот материал впервые был опубликован в июне 2018 года. В апреле 2023‑го мы обновили текст.
- 16 сайтов с бесплатными стоковыми видео
- 201 бесплатный сервис на все случаи жизни
- Чем заменить Canva: 5 аналогов для пользователей из России
- 10 сайтов, которые помогут создать крутой логотип
- Более 100 сервисов на основе нейросетей для самых разных задач
Источник: lifehacker.ru
Дизайн из Figma в HTML/CSS за 15 минут
Сегодня я хочу рассказать вам как с помощью замечательного сервиса Locofy превратить свой дизайн в Figma в адаптивный HTML/CSS-сайт, который можно будет загрузить на хостинг. Используя этот инструмент, дизайнеры, владеющие базовыми навыками вёрстки, могут самостоятельно создавать сайты. Постараюсь максимально подробно описать процесс на практике.
Содержание скрыть
Регистрация в сервисе Locofy
Переходим на сайт Locofy и нажимаем на кнопку Sign Up, чтобы зарегистрироваться. На момент написания статьи сервис находится в стадии бета-тестирования, и новым пользователям в течении 20 дней можно пользоваться всеми возможностями функционала. После 20 дней действие аккаунта можно продлить оставив отзыв разработчикам. Если есть проблемы с доступом к сайту, попробуйте воспользоваться VPN.
Заполняем форму, введя адрес электронной почты и пароль.
На электронную почту, указанную при регистрации должен прийти код подтверждения. Вводим код и переходим к следующему этапу.
Далее необходимо пройти небольшой опрос, касающийся специфики проекта. После опроса мы попадем на страницу, где будет предложено установить плагин для Figma. Нажимаем на кнопку Get Figma Plugin.
Попадаем на страницу плагина Locofy в Figma. Перед тем, как нажать кнопку Try it out, обязательно поставьте лайк разработчикам.
Попадаем в учебный проект плагина, тут можно ознакомиться с основными возможностями Locofy. Нам нужно сохранить плагин в список сохраненных плагинов, чтобы быстро его находить при работе со своими проектами. В открывшемся окошке Resources (Shift+I) на панели инструментов нажимаем на кнопку action menu (три точки) и сохраняем плагин.
Работа с плагином в Figma
Подготовка макета
Как работать с плагином я буду показывать на примере простого макета двух типичных секций сайта. Дизайн-макет из этой статьи можно получить по ссылке.
Пару слов о структуре дизайна. Чтобы было проще организовать работу по адаптации дизайна, нужно использовать Auto layout для группировки элементов. В данном примере макет будет использована концепция адаптивного дизайна. Т.е. будет использоваться контейнер для элементов, ширина которого будет фиксирована для разных диапазонов ширины экранов.
Выделяем фрейм с макетом и активируем плагин Locofy. Плагин попросит авторизоваться, в новой вкладке браузера откроется сайт Locofy, где нужно будет ввести свои учетные данные. После авторизации возвращаемся в Фигму.
Присваивание тегов элементам дизайна
Первым делом, всем элементам макета нужно проставить HTML-теги. Например, настроим, контейнер. Выделяем нужный элемент и присваиваем ему тег div.
Далее проставляем теги для остальных элементов: заголовков (h1-h3), текстовых блоков (p, span, div), картинок (img), кнопок (button) и т.д.
Работа над адаптивностью
Настроим, чтобы контейнер сайта менял ширину на разных диапазонах размеров экрана. В настройках плагина заданы несколько брейкпоинтов: 1200px, 768px и 428px. На диапазоне от 1200px размер контейнера устанавливаем в 1140px.
На диапазоне до 1200px размер контейнера устанавливаем в 720px.
На диапазоне до 768px размер контейнера устанавливаем в 408px.
На диапазоне до 428px размер контейнера устанавливаем в 340px.
Аналогичным образом можно настраивать изменение css-свойств при изменении размера экрана для других элементов. Если в функционале плагина нет какого-то css-свойства, то его можно прописать вручную.
Часто приходится сталкиваться с ситуацией когда на компьютерах блоки располагаются горизонтально, а на мобильных их нужно располагать вертикально. Для этого на мобильном диапазоне нужно сменить настройку направления в Auto layout.
Контролировать как макет перестраивается под разную ширину экрана можно в режиме Preview.
Настройка эффектов и взаимодействий
В плагине можно настроить анимацию появления элементов. Для этого выделяем элемент, на вкладке Styling https://mxsolopov.ru/2022/12/15/dizajn-iz-figma-v-html-css-za-15-minut/» target=»_blank»]mxsolopov.ru[/mask_link]
Как создать сайт с использованием табов для переключения контента
В данной статье мы рассмотрим, как создать сайт с использованием табов для переключения контента. Табы — это удобный способ организации информации на веб-странице, позволяющий разделить контент на несколько секций и отображать их по очереди при нажатии на соответствующие вкладки.
HTML-структура
Для создания табов нам потребуется следующая HTML-структура:
Здесь мы создали контейнер с классом tabs , содержащий список вкладок tab-list и контейнер с контентом tab-content . Каждая вкладка имеет атрибут data-tab , соответствующий идентификатору соответствующего контента.
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
CSS-стили
Теперь добавим немного стилей для наших табов:
.tabs < width: 100%; display: inline-block; >.tab-list < padding: 0; margin: 0; list-style: none; >.tab-item < display: inline-block; margin-right: 10px; padding: 10px; cursor: pointer; background-color: #f1f1f1; border-radius: 5px 5px 0 0; >.tab-item.active < background-color: #fff; >.tab-content < border: 1px solid #f1f1f1; padding: 20px; border-radius: 5px; >.tab-pane < display: none; >.tab-pane.active
Эти стили задают базовую стилизацию для нашей структуры табов, делая их более приятными для глаза .
JavaScript-логика
Наконец, добавим небольшой скрипт, который будет отвечать за переключение контента при нажатии на вкладки:
document.addEventListener(‘DOMContentLoaded’, function() < var tabItems = document.querySelectorAll(‘.tab-item’); tabItems.forEach(function(tab) < tab.addEventListener(‘click’, function() < var tabId = this.getAttribute(‘data-tab’); var content = document.getElementById(tabId); // Удаляем активный класс у текущих вкладок и контента document.querySelector(‘.tab-item.active’).classList.remove(‘active’); document.querySelector(‘.tab-pane.active’).classList.remove(‘active’); // Добавляем активный класс для выбранной вкладки и контента this.classList.add(‘active’); content.classList.add(‘active’); >); >); >);
Этот скрипт добавляет обработчик событий для каждой вкладки, который при нажатии удаляет активный класс у текущих вкладок и контента, а затем добавляет его для выбранной вкладки и соответствующего контента.
Теперь у вас есть функциональный сайт с использованием табов для переключения контента!
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Не забывайте продолжать изучать веб-разработку и практиковаться в создании различных элементов. Успехов вам в обучении!
Источник: sky.pro