В даній публікації я покажу вам варіанти створення Лендінгу і там і там.
Як створити Landing Page на Blogger
Щоб створити односторіночний сайт на Blogger вам потрібно:
- Завести профіль в Гугл та блог у самій платформі Блоггера
- Оберіть одну із Тем, яка більше всього вам підходить
- Встановіть Тему в блог
- Відредагуйте вміст шаблону згідно відео інструкції
Шаблони (Теми) для Landing Page
Безкоштовні Теми для реалізації власного дизайну. Усі теми редагуються згідно вище представленої відео інструкції. У файлі кожної теми знаходиться додатковий файл з інструкціями по налаштуванню Теми "documentation".
Kovid
Гарний шаблон по вельми неприємну тему. Можна використовувати для сайту медицини в цілому, або для інших тим не пов'язаних з медициною. Складається і восьми секцій, які можна налаштувати відповідно до своїх потребами, включаючи форму контактів і підписку по email. Є можливість вести блог.
Affiliation
Affiliation можна використовувати для креативного цифрового агента або навіть особистого / фрілансера, для демонстрації портфоліо і продажу послуг. Він поставляється з конструктором перетягування для створення сторінок сайту в найпростіший спосіб.
Tyrin
Tyrin - це портфоліо, бізнес і особиста сторінка. Багатофункціональний шаблон, створений за допомогою Bootstrap. Дизайн теми плоский і простий, з яскравими квітами і призначеними для користувача модулями, спеціально сконструйованими для зручного створення контенту.
Basil
Basil в порівнянні з іншими Темами має одну з найефектніших посадочних сторінок. Його спливаючі анімаційні блоки здивують будь-якого користувача. Якщо ви прийшли за красивим дизайном, тоді Basil це те, що потрібно.
Alex
Alex орієнтований на веб-дизайнерів, цифрових фахівців, програмістів або фотографів. Ідеально для просування вашого бізнесу!
Ideal
Мінімалістський, елегантний і адаптивний. Для професіоналів будь-якого типу, щоб відобразити своє резюме (освіта, досвід роботи, нагороди і т. Д.). Покажи себе і свій бізнес в кращому вигляді разом з Ideal.
Vivid
Призначений для професіоналів своєї справи, які хочуть продемонструвати користувачам своє портфоліо в сучасному стилі. Vivid це найкращий спосіб продемонструвати свій продукт, портфоліо і резюме.
Elvish
Elvish виконаний в стилі галереї для односторінкових сайтів, діє ефект Amazing Mouse. Сучасний дизайн приверне більше уваги до вашої пропозиції.
Pilvia
Pilvia - портфоліо, бізнес і особиста сторінка. Багатофункціональний чорний шаблон, створений за допомогою Bootstrap. Дизайн шаблону Flat, з яскравими квітами і призначеними для користувача модулями, спеціально створеними для зручного створення контенту. Ви можете змінити кольори з макета.
Invite
Графічно дивовижна, надзвичайно винахідлива і дуже елегантна тема веб-сайту для весіль та інших заходів. Це чудова і ретельно відпрацьована тема, розроблена з максимальною увагою до кожного закутка.
Isac
Isac це особистий шаблон Blogger для портфоліо, чуйний і швидко завантажується. Isac призначений для творчої людини, яка хоче продемонструвати своє портфоліо в сучасному стилі.
MArtin
Даний шаблон популярний перш за все через те, що в ньому зосереджена мінімальна кількість секцій, через що він є надпростим у користуванні.
StudioPress
Це один з найпопулярніших і затребуваних шаблонів в області бізнесу. Він ідеально підійде для корпоративних сайтів, сайтів візиток або Landing Page. Колірна гамма переважно в світлих тонах. Дизайн і функціонал відпрацьовані до дрібниць і практично ідеальні. Головна сторінка має в своєму арсеналі все необхідне для того, щоб представити товар або послугу в найкращому вигляді. А якщо потрібно поділитися з відвідувачами важливими новинами, функція блогу в вашому розпорядженні.
Invento
Дизайн Invento виконаний на 5 з плюсом, що дуже важливо в даному типі шаблону, оскільки комерційні сайти повинні показувати відвідувачам, що їм можна довіряти і одним з подібних чинників довіри є саме дизайн.
Досить зручна та сучасна Тема, яка облаштована усім необхідним для односторіночного сайту. Окрім цього у вас є можливість вести блог. Вбудовано декілька секцій для відтворення потрібної інформації.
Inventive
Примітно, що творець асоціює своє творіння більше з портфоліо, ніж з темою для комерційних проектів, хоча звичайно ж портфоліо так само може приносити дохід. Загалом, щоб не забивати вам голову зайвою інформацією просто скажу, що Inventive відмінно підійде до будь-якого комерційного проекту будь то сайт візитка, Landing Page або ж корпоративний ресурс. Його особливість в тому, що крім картинок на головної сторінки для опису діяльності свого проекту ви так само можете використовувати різні іконки. У загальному списку близько сотні іконок, так що вистачить на всі випадки життя.
Відео інструкція створення Landing Page на Blogger
Як створити Простий Landing Page
Якщо вам потрібен сайт по типу Лендінгу, я пропоную скористатися наступним варіантом. Для основи беремо звичайний шаблон Blogger Contempo, після його встановлення вам потрібно скористатися наступним кодом:
<b:if cond='data:view.isHomepage'>
<style>
@media (min-width: 480px){ .page-homepage-header { padding: 55px 0 50px 0; } } .page-homepage-header { background: #f7f7f7; color: #43464b; padding: 35px 0; text-align: center; } .page-homepage-header .advanced { letter-spacing: .025em; padding-bottom: 1.5em; margin-bottom: 1.31818em; } @media (min-width: 768px){ .size-22 { font-size: 22px; line-height: 1.63636; } } .size-22 { font-size: 18px; line-height: 1.66667; } .page-homepage-header .title { margin-bottom: .5em; line-height:48px; } @media (min-width: 480px){ .size-84 { font-size: 56px; line-height: 1; } } .size-84 { font-size: 34px; line-height: 1.17647; } @media (min-width: 480px){ .page-homepage-header .bonus { margin-bottom: 3.4em; } } .page-homepage-header .bonus { font-size: 15px; line-height: 1.66667; color: #a0a3a7; letter-spacing: .025em; margin-bottom: 2em; } .blog-title { font-size: xx-large; font-weight: bold; color: rgb(250, 140, 4); display: inline-block; letter-spacing: 0; margin: 0; vertical-align: top; } @media (min-width: 480px){ .page-homepage-header .btn, .page-homepage-header .btn2, { padding: 20px 30px 18px 30px; } } .page-homepage-header .btn { letter-spacing: .16em; border-color: #f16334; font-size: 12px; line-height: 1.66667; height: auto; border: 4px double #fefefe; } .btn-wrap { display: flex; } .page-homepage-header .btn2 { letter-spacing: .16em; border-color: #f16334; font-size: 12px; line-height: 1.66667; height: auto; border: 4px double #fefefe; background: #333; display: inline-block; text-transform: uppercase; text-align: center; font-size: 12px; line-height: 1.5em; font-weight: 700; letter-spacing: .126em; padding: 21px 10px 19px 10px; width: 100%; cursor: pointer; border-radius: 2px; white-space: normal; color: #fff !important; } .btn-wrr { background-color: #f16334; border-color: #f16334; } @media (min-width: 480px){ .btn { width: auto; min-width: 140px; padding-right: 20px; padding-left: 20px; } } .btn { display: inline-block; text-transform: uppercase; text-align: center; font-size: 12px; line-height: 1.5em; font-weight: 700; letter-spacing: .126em; padding: 21px 10px 19px 10px; width: 100%; border: solid 1px; cursor: pointer; border-radius: 2px; white-space: normal; color: #fff !important; } .btn-wrap a { color:#fff; } .page-homepage-header .btn:hover { text-decoration:none; background: #f16334; color: #fff; -webkit-box-shadow: 0 20px 28px 0 rgba(241,99,52,.16); box-shadow: 0 20px 28px 0 rgba(241,99,52,.16); } @media (min-width: 1024px){ .page-homepage-header .inner { display: -webkit-box; display: -ms-flexbox; display: flex; } } .inner { max-width: 1200px; margin: 0 auto; padding: 0 10px; } @media (min-width: 1024px){ .page-homepage-header .text { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding: 8px 0 0 6.77966%; align-self: center; width:60%; float:left } } .page-homepage-header .photo { display: block; width: 30.25424%; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; align-self:center;float:right; } .regular { font-weight: 400!important; } .light { font-weight: 300!important; } .page_body { margin-left: 0px !important; } .page-homepage-header .inner { display: inline-block; } .text { width: 60%; float: left; } @media screen and (max-width:768px){iframe, object, embed{width:100%;height:320px}}@media screen and (max-width:640px){iframe, object, embed{width:100%!important;height:300px}}@media screen and (max-width:480px){iframe, object, embed{width:100%;height:auto}}@media screen and (max-width:320px){iframe, object, embed{width:100%;height:auto}}
</style>
<div class='page-homepage-header'>
<div class='inner'>
<div class='text'>
<div class='blog-title'>Шеф Рекомендує</div>
<div class='size-22 regular border advanced'>Меню нашої кухні</div>
<h1 class='size-84 light title'>Як створити простий Landing на Blogger, або гарно оформити головну сторінку блогу</h1>
<div class='size-15 regular bonus'><span class='bold red'>БОНУС:</span> Безкоштовна консультація для 40 ГОСТЕЙ 😃</div>
<div class='btn-wrap'>
<button class='btn btn-wrr'><a href='/search/'>Наш Блог</a></button>
<button class='btn2 btn-wrr'><a href='/search/'>Оформити Замовлення</a></button>
</div>
</div>
<div class='photo'>
<img alt='' class='img' height='auto' src='http://1.bp.blogspot.com/-xiNYP9HGjO8/Un90-HOrgRI/AAAAAAAAAC4/_RDJVPRApPg/s798/%25D1%2580%25D0%25B0%25D1%2582%25D0%25B0%25D1%2582%25D1%2583%25D0%25B9.jpg' width='100%'/>
</div>
</div>
<br/>
<br/>
<iframe allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen='' frameborder='0' height='350' src='https://www.youtube.com/embed/7iLZSvNWtFU' width='750'/>
</div>
</b:if>
Скопіюйте його та слідуйте вказівкам в відео:
Лендінг з підключеною платіжною системою
Якщо ви бажаєте отримати готовий сайт до якого вже підключено платіжну систему (тобто людина може оплатити товар банківською картою) тоді ви можете
скористатися конструктором лендінгів від Fondy, це безкоштовно:
Або просто використовуйте їхні платіжні кнопки на своєму сайті в Blogger, Google Sites та ін..
Або просто використовуйте їхні платіжні кнопки на своєму сайті в Blogger, Google Sites та ін..
Як створити сайт-візитку | Портфоліо
Для створення сайту візитки можемо також скористатися шаблонами з даної сторінки. Приклад того, як налаштувати під себе: