Привет!

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

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

Видеоурок по созданию странички-каталога с партнерскими продуктами смотрите ниже:

Я сделала страничку под 6 инфопродуктов, но никто не мешает делать и больше. Применила несколько блоков – заголовок с подзаголовком, обычный текстовый блок, новый вид блока – «структура», разделяющий страничку на несколько секций. Это и позволило сделать страничку а-ля интернет-магазин.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

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

Теперь покажу на практике, как я создавала эту страничку:

Перешла в кабинет Soluspage в раздел «Конструктор», создала новый шаблон с названием «Страница с подарками».

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Добавила в этот шаблон одноименную страницу.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

И попала в конструктор Soluspage. Чтобы начать добавлять нужные блоки, используем список в нижней части конструктора. Просто кликаем на блок – он добавляется, и мы можем начинать его редактировать.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Итак, первый блок я добавляю заголовок с подзаголовком.

Кликаю на блок «Заголовки» и выбираю подходящий мне вариант.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Когда наводим мышкой на блок, появляются 2 вкладки – «Настройка» и «Содержимое».

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

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

В «Содержимом» добавляется контент блока и настраивается его отображение.

В содержимом 1 блока я вписываю свой заголовок и подзаголовок – нажимаю на «+», чтобы раскрыть меню редактирования.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Выравнивание оставляю по центру.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Кроме того, тут есть возможность использовать обводку текста.

А также настроить отступ между заголовком и подзаголовком. Эту настройку я применю, поставив отступ 20 пикселей.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Чтобы изменения вступили в силу, всегда нажимаем «Сохранить».

Во вкладке «Настройка» добавлю фон. Я выберу просто цвет. Но повторюсь, можно подгрузить фоновую картинку и даже добавить видеофон по ссылке из Ютуб.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

И задам эффект для блока. Выберу эффект появления блока из невидимости слева.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

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

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

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

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

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

В «Настройках» подкорректирую отступ между этим блоком и блоком заголовка. Поставлю верхний отступ 30 пикселей.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Третьим я добавлю блок «Структура» из трех секций. Это самая трудоемкая часть по настройкам, но и самая интересная. Нажимаю на одноименный блок и выбираю подходящую структуру.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Все три секции у меня будут одинаковы по содержимому – я просто добавляю в каждую по три блока – картинку, текст и кнопку.

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

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Таким образом, наполняю все три секции.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

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

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

И зайду в «Настройки» блока.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Здесь поменяю ширину рабочей области на 10 колонок и отступ слева на 1 колонку, сохраню.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Теперь поработаю с отступами внутри самих секций.

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

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Тут ставлю ширину рабочей области 8 колонок и отступ слева 1 колонку.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

То же самое делаю в настройках блока с картинкой во второй секции.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

А вот для блока с картинкой в третьей секции ставлю ширину рабочей области 12 колонок и отступ слева 0.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Вы спросите – почему именно такие параметры? Нащупала их методом тыка, когда в самый первый раз тренировалась делать эту страничку в Солуспейдж.

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

Теперь займусь отступами и шириной второго блока внутри секций – текста.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Во всех трех секциях ставлю для этого блока ширину 10 колонок и отступ слева 1 колонку.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Ширину рабочей области и отступ в настройках блока с кнопкой во всех трех секциях я оставляю ту, что была изначально. Ширина – 8 колонок. Отступ слева – 2 колонки.

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

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

В каждой секции по очереди захожу в настройки блока «Текст» и ставлю верхний отступ 0.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе SoluspageДелаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

То же самое проделываю для блока «Кнопка», также ставлю верхний отступ 0.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

В финале уменьшу отступ всего блока «Структура» от предыдущего блока «Текст». Для этого снова выйду из режима структуры.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Нажму в меню блока «Настройка».

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

И уменьшаю верхний отступ блока до 0.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

А также в настройках верхнего блока «Текст» еще  уменьшу отступ межу данными блоками, поставив в параметрах нижнего отступа цифру 0 вместо 60.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Следующий шаг – наполняем блоки в секциях контентом.

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

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

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Добавляю картинку первого продукта в первой секции.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Затем добавлю название и описание продукта в блок «Текст».

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

И отредактирую кнопку.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Раскрываю меню, нажав на плюсик.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Указываю партнерскую ссылку в кнопке.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Меняю надпись и цвет.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Здесь я хочу сделать малиново-красный цвет.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

В блоках «Изображение» и «Кнопка» я добавляю эффект «Увеличение» при наведении мышки. Для этого вначале захожу в «Настройки» блока с изображением и там выставляю эту настройку:

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Затем захожу в настройки блока с кнопкой и там также выставляю нужную настройку:

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

По аналогии делаю наполнение продуктами второй и третьей секции. Все так же. Единственное отличие – во второй секции цвет кнопки я делаю голубым.

Вот, что получается (нажимаем вверху справа «Предпросмотр» и смотрим, как выглядит страничка, заданные эффекты в браузере.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

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

Вот так:

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

 

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Далее редактирую содержимое скопированных блоков под еще 3 инфопродукта. Для редактирования выделяю нужную секцию, навожу мышкой на тот или иной блок – добавляю свой контент во вкладке «Содержимое»

– меняю картинку,
– описание продукта
– и ссылку в кнопке.

Настройки отступов, эффекты при наведении на кнопку и картинку уже не трогаю, они скопировались из предыдущих блоков.

Единственное – в настройках скопированного блока «Изображение» во всех трех секциях уменьшаю верхний отступ до 0.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

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

Последний четвертый блок у меня будет текстовым – просто сделаю подвал с копирайтом и контактами.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Захожу в «Содержимое» блока и добавляю свой копирайт.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

В настройках задам этому блоку серый цвет фона.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Когда все готово – нажимаю вверху справа «Сохранить».

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Пока что, это просто шаблон. Жму «Опубликовать для себя».

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Теперь, чтобы страничка стала доступна в интернете по ссылке, перейдем во вкладку «Домены» и нажмем «Добавить домен» (бесплатно в Солуспейдж можно создать 1 домен и до 20 страниц на нем).

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

На этом домене вы можете автоматически добавить страничку из созданного шаблона.

Чтобы перейти на опубликованную страничку и скопировать ссылку на нее – просто нажмите по названию страницы в разделе «Домены».

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

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

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Если у вас уже есть домен и вы хотите добавить страницу на нем, тогда напротив этого домена жмите «Добавить страницу».

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Укажите имя для этой страницы латиницей и задайте другие настройки опционально.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Ниже переключитесь на вкладку «Созданные шаблоны» и выберите ваш шаблон.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Затем поднимитесь выше, переключитесь на вкладку «Страницы» и выберите станицу на этом шаблоне.

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

У вас откроется страница в каталоге, нажмите вверху справа «Сохранить».

Делаем страницу-каталог с партнерскими бесплатностями в конструкторе Soluspage

Страница опубликуется на домене.

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

Буду рада, если данная информация вам пригодилась. Понимаю, что в текстовом формате со скринами может восприниматься сложнее – т.к. много мелких манипуляций. Поэтому, если что-то не совсем понятно, то лучше посмотреть в наглядном видеоуроке.

Благодарю за внимание!

С уважением, Виктория Карпова