Дизайн на продажу => Дизайн групп социальных сетей => Тема начата: Olga Z от Мая 20, 2017, 12:30:40 pm
Название: Верстка под мобильные устройства меню группы ВКонтакте.
Отправлено: Olga Z от Мая 20, 2017, 12:30:40 pm
Добрый день участники форума и гости! Продолжаем изучение и применение на практике возможностей wiki-разметки. В прошлом уроке я подробно на примере показала как с помощью wiki-разметки создать в ваших группах страницы и внутреннее меню. https://photoshop-forum.com/index.php?topic=918.0 (Всем, кто не знаком с wiki-разметкой, рекомедую перейти по ссылке и выполнить урок по созданию страниц с wiki-разметкой) Все вы огромные молодцы, так как применили данный урок на практике и у всех получились замечательные группы. Потренировавшись на своей группе можно брать заказы на оформление групп в контакте + выполнение wiki-разметки, что увеличит ваш доход. Wiki-разметки мы уже научились делать. Сегодня я покажу на примере своей группы как сделать, чтобы ваши группы были адаптивные под мобильные устройства. Для этого нам нужно разместить код в таблицу. Для создания wiki-разметки мы изначально подготавливали в фотошоп картинку с кнопочками и потом разрезали её на нужные нам части. У кого то дизайн был кнопочек в один столбец у кого то в два или три столбца. У меня внутреннее меню с двумя столбцами. Привожу пример таблицы на 2 колонки. В конце урока пропишу код для одного, двух и трёх столбцов.
Сейчас у меня стоит код такой как мы делали в первом уроке.
3. Заходим на страницу редактирования внутреннего меню. В режим wiki-разметки 4. Ставим курсор впереди кода и опускаем код чуть ниже. 5. Копируем с текстового документа таблицу и вставляем выше нашего кода ( у кого код не опускается можно таблицу вставить после кода) 6. Теперь нужно из нашего кода скопировать код картинок и вставить их в таблицу по очерёдности так как стоят картинки.
{|fixed noborder nopadding |-305px 305 px |- |[[photo302483756_456239210|305px;noborder;nopadding;nolink| ]] |[[photo302483756_456239211|305px;noborder;nopadding;nolink| ]] |- |[[photo-133487395_456239098|305px;noborder;nopadding|page-133487395_54340499]] |[[photo-133487395_456239099|305px;noborder;nopadding|page-133487395_54340508]] |- |[[photo-133487395_456239100|305px;noborder;nopadding|page-133487395_54340501]] |[[photo-133487395_456239101|305px;noborder;nopadding|page-133487395_54340513]] |- |[[photo-133487395_456239102|305px;noborder;nopadding|page-133487395_54340502]] |[[photo-133487395_456239103|305px;noborder;nopadding|page-133487395_54340511]] |- |[[photo-133487395_456239104|305px;noborder;nopadding|page-133487395_54340503]] |[[photo-133487395_456239105|305px;noborder;nopadding|page-133487395_54340507]] |- |[[photo302483756_456239212|305px;noborder;nopadding;nolink| ]] |[[photo302483756_456239213|305px;noborder;nopadding;nolink| ]] |} Вместо синего кода вставляем код своих картинок. Вместо картинок которые были целые вставляем разрезанные.Незабываем о том, что если картинка некликабельная (нет перехода с ссылкой ) в таких случаях мы прописываем ;noborder;nopadding;nolink|
В шапке кода
{|fixed noborder nopadding |-200px 200px 200 px
( мы прописываем размер картинок если в 2 столбика размер ставим |-305px 305 px, если в один столбик ставим размер 510рх, если в три столбика ставим размер |-200px 200 px 200рх)
7. Сохранить и предпросмотр . 8.После того как проверили всё ли правильно разместилось, удаляем старый код. Оставляем новый прописанный в таблице. 9.Для того чтобы проверить адаптивность на мобильном устройстве нужно в строке браузера Ставим английскую букву m. Это будет выглядеть так:
Теперь ваши группы будут адаптивними. В портфолио можете писать делаю адаптивную wiki-разметку. Число ваших заказчиков и посетителей групп возрастёт. Всем удачного творчества. У кого возникнуть вопросы обращайтесь, всегда рада помочь!
Название: Верстка под мобильные устройства меню группы ВКонтакте.
Отправлено: TatianaL от Мая 20, 2017, 10:01:22 pm
Оля, спасибо!Обязательно сделаю. А на мобильном устройстве будет сразу загружаться меню? не приходилось загружать какие-либо группы на моб.устройство...
Название: Верстка под мобильные устройства меню группы ВКонтакте.
Отправлено: Маркевич Юлия от Мая 20, 2017, 10:25:36 pm
Оленька! Спасибо! Ты ,как всегда, на высоте! Молодец, что разбираешься в таких непростых техниках,это очень нужная информация.И особенно,что делишься и помогаешь нам.Просто суууупер!!!
Название: Верстка под мобильные устройства меню группы ВКонтакте.
Отправлено: Olga Z от Мая 21, 2017, 10:16:16 am
Добрый день, Юлия, Татьяна и все форумчане! Благодарю за тёплые слова! Очень приятно! Татьяна, не нужно никуда загружать меню. Делаете по шаблону таблицы у себя в группе и всё! Это делается для того , чтобы те посетители кто зашёл в вашу группу с мобильного телефона увидели сложенные картинки, смотрите пример выше. Адаптивность увеличит трафик посетителей.
Название: Верстка под мобильные устройства меню группы ВКонтакте.
Отправлено: Гала от Мая 22, 2017, 04:53:44 pm
Ольга, спасибо за подробное объяснение вики разметки. Ты - супер! Всего наилучшего тебе! Удачи во всём! С уважением, Галина.
Название: Верстка под мобильные устройства меню группы ВКонтакте.
Отправлено: Olga Z от Июля 01, 2017, 10:02:26 am
Благодарю, Галина! Желаю всем Удачи и творческого вдохновения!