Как изменить шаблон сайта


Редактирование готового шаблона сайта HTML, CSS

Инструкция по редактированию шаблона сайта Begin

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


Скачать инструкцию с примерами HTML страниц и самим шаблоном можно по ссылке внизу страницы.Этапы создания сайта от А до Я.
Подробное описание с иллюстрациями: Регистрация домена, работа с хостингом, размещение сайта, адаптивность, оптимизация - в одной статье.

Подготовка к редактированию шаблона.

Желательно, чтобы у Вас заранее был готов текст, который собираетесь размещать на редактируемой странице и картинки (фото) по размерам соответствующие тем, которые лежат в папке img.
Эта папка будет содержать Ваши личные изображения и фото для размещения на сайте.
В папке images находятся картинки, используемые в дизайне сайта, их менять не рекомендуется (тем более размер), если только позже, когда наберетесь опыта.
В названиях картинок и страниц сайта используйте только осмысленные латинские символы, чтобы потом было легче ориентироваться в коде.

- Открываем файл index_red.html в браузере. Здесь видим копию кода главной страницы сайта index.html - для наглядности. Редактировать будем другую страницу.
Обратите внимание только на то, что выделено разными цветами: меню (навигация) сайта, имена картинок (при желании), адреса ссылок на страницы (если переименуете их), основное текстовое содержание сайта (обязательно) и, так называемые, мета теги (обязательно), которые находятся в начале кода, нужны для поисковых систем - посещаемости сайта.
Менять будем только места выделенные цветом.

Переходим к редактированию шаблона.

- Открываем главную страницу index.html (папка "Ваш сайт\begin") с помощью текстового редактора и видим то, что нам предстоит редактировать. Не пугайтесь, это только при первом взгляде страшно, по мере работы присмотритесь и все встанет на свои места.
При редактировании кода используйте поиск: выделите и скопируйте код на странице инструкции и вставьте в окошко поиска редактора на редактируемой странице.

Замене подлежат: Русский текст -  ЦВЕТ , Имя картинки - ЦВЕТ , Ссылки (переходы) - ЦВЕТ

Переходим к замене контента шаблона. Не забывайте периодически сохранять и просматривать результат работы (стр. index.html) в браузере, перезагрузка окна - F5.

Редактируем основные META теги HTML страницы

Название сайта - Видно в окне браузера
Описание сайта. Будет видно в анонсе поисковых систем. Не более 200 символов" />
ключевые, слова, через, запятую" />

Мета-теги в начале страницы: title, description, keywords, являются важным атрибутом любой страницы, размещенной в Интернете.

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

Description - описание сайта при отображении Вашей страницы в результате поиска. Должно быть не более 200 символов. Наличие ключевых слов.

Keywords - ключевые слова, которые чаще встречаются в тексте страницы, несут смысловую нагрузку содержания страницы, пишутся через запятую, не более 7-8 слов. В самом тексте должны встречаться не более 4 раз (каждое слово) на 2000 символов, выделяться жирным, присутствовать в первом предложении и последнем.
Keywords в последнее время потеряли свою значимость для поисковых систем.

Сохраняем!

Редактируем меню сайта и логотип

ЛОГОТИП

Ваш логотипНазвание сайта или код-адрес картинки - для начала достаточно текста.

МЕНЮ САЙТА

На ГЛАВНУЮ
 page1.html">О сайте
 page2.html">Скачать бесплатно
 page3.html">Анонс
 page4.html">Фотографии
 video.html">Видео
 pusto.html">Пустая страница

Ссылки типа page1.html можете оставить без изменений или изменить на свои, но тогда не забудьте внести изменения в другие страницы сайта.
Здесь указана относительная ссылка: page1.html, можно указать абсолютную: http://Ваш сайт/page1.html, что одно и тоже. При первом варианте ссылки, страницы должны находиться в одной и той же папке, в пределах компьютера или хостинга.

index.html - является индексным названием, его не менять! При обращении браузера к папке в которой находиться файл index.html, по умолчанию открывается сразу этот файл.

Пример: если Вы набрали в браузере адрес: http://Вашсайт.ru, то автоматически (по умолчанию) откроется файл первой страницы index.html, если он лежит в папке Вашсайт.ru
Два адреса http://Вашсайт.ru и http://Вашсайт.ru/index.html одинаковы.

Поменяйте заголовки меню. Следите за тем, чтобы текст меню уместился в одной строке страницы.

Сохраняем!

Редактируем ШАПКУ сайта

В шапке будем менять текст слева от большой картинки. С этим Вы справитесь, далее о картинке.

Размер картинки 600х220 px, поменяйте изображение, создайте свое таких же размеров. Сама картинка лежит в папке images, называется logo.png, параметры картинки в файле style.css (папка css). При изменении ширины изображения, поменяйте параметр width:600px; (он такой один) на свой размер.

Отступы от верхнего и правого края меняйте атрибутами, соответственно: padding-top:10px; padding-right:10px; которые ниже параметра width:600px;

Следите за тем, чтобы вес картинки был не большим. Влияет на скорость первого открытия сайта для посетителя. На дальнейших переходах по страницам сайта не отображается, за счет прописки в файле .css, но тем не менее лучше держаться в пределах 50-100 кб.

Сохраняем!

СЛАЙДЕР - картинки в движении

В нашем случае состоит из восьми картинок размером 200х100 px. Размеры не менять. Если измените ширину, то расстояние между картинками увеличиться или уменьшиться. Могут наехать друг на друга. Имена картинок: slider1.gif, slider1.gif, slider1.gif и т.д., лежат в папке images. Замените их на свои, таких же размеров.
Название можете изменить, но тогда поменяйте его и в коде, пример: slider1.gif меняем на mylove1.jpg. Обратите внимание, формат картинки .gif, jpg, png... в коде должен соответствовать формату картинки.

Код:


 <li>
 <div>
 <a href="http://sitey.ru"><img src="images/slider1.gif" alt="" /></a>
 </div>
 </li>
 <li>
 <div>
 <a href="#"><img src="images/slider2.gif" alt="" /></a>
 </div>
 </li>
 

Ссылку https://sitey.ru замените на свою, куда-нибудь отправьте посетителя при ее нажатии.
Далее меняйте символ #. 
Можно изменить скорость смены картинок в файле jquery-func.js (папка js) , параметр: auto:4, - в секундах. Будьте осторожнее при редактировании этого скрипта.

Сохраняем!

Редактируем ТЕЛО страницы - контент

Содержимое (тело) страницы состоит у нас из трех блоков: левый, средний и правый.

Размеры фиксированные (подогнуты под дизайн), изменить можно лишь высоту одновременно 3х блоков.
Файл style.css параметр height:300px; - замените 300 на большее значение.
Не советую увеличивать содержимое главной страницы на много. Будет дольше открываться для посетителей. Много трафика забирают картинки, особенно не прописанные в файле .css

Заполняйте блоки своим содержимым: текст, картинки в тексте (100x100 px). В имеющийся текст для наглядности уже включены ссылки на другие страницы, удалите их или замените.

Все остальное описывалось выше. В самом коде и редактируемом тексте есть дополнительные описания и рекомендации.

Сохраняем!


Редактируем ПОДВАЛ низ страницы

Здесь все просто. Замените текст и ссылки. Сюда же можно установить счетчик посещаемости сайта.

Завершаем редактирование шаблона

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

Сейчас в шаблонах страниц блок слайдера заполнен текстом с описанием редактирования каждой страницы. Этот текст необходимо заменить на описание конкретной страницы или вставить туда сам слайдер с главной страницы (он выделен комментариями внутри кода).

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

Обязательно внесите изменения в Мета-Теги страниц и в Заголовок, они должны быть уникальными.

Работа с шаблонами дополнительных страниц.
Выделяем мышкой часть кода готовой страницы index.html, начиная от комментария <!--- КОНЕЦ Шапка ---> до самого верха, копируем ее и заменяем на всех оставшихся страницах именно эту часть, также выделив ее и удалив.

Подобным образом поступаем с подвалом страницы: выделяем код начиная от комментария <!--- Подвал страницы ---> до самого низа и заменяем на других страницах. Почему до самого верха или низа? Так проще не промахнуться.

Не забываем СОХРАНЯТЬ страницы!


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

Шаблон достаточно простой, но для совершенствования опыта вполне удобен.

Как изменить шаблон и применить этот шаблон на всех страницах?

Если вы создали настраиваемый шаблон, а затем в какой-то момент войдете и измените этот настраиваемый шаблон, изменения будут отражены на существующих страницах с этим шаблоном. Если вы попытались внести изменение, а затем перешли на страницу и не увидели изменения, выполните 2 действия.
1. Очистите кеш в WP, опция в верхней части страницы
2. Дважды нажмите F5, находясь на странице в браузере.

Мы так часто вносим изменения, которые не отображаются, и это просто проблема с кешем.

  • Этот ответ был изменен 2 года 1 месяц назад участником LesTexas60.

Во-первых, большое спасибо за ответ.
Да, я пытался внести изменения в Elementor–> Мои шаблоны и не увидел изменений ни в сообщениях, ни на страницах.
Я попытался очистить кеш (в браузере и в WP с плагином WP Super Cache) и обновить и ничего, та же проблема.

Обратите внимание, что настраиваемый шаблон является шаблоном Elementor, а не шаблоном темы.
Может быть, у Elementor нет этой опции, которая бы изменяла все, когда вы делали в шаблоне ???

Я просто зашел в Панель тем - Моя библиотека и создал собственный заголовок. Затем я перешел в Внешний вид - Настроить и установил Пользовательский заголовок и выбрал имя настраиваемого заголовка из раскрывающегося списка. Опубликовал и подтянул веб-сайт. Появился новый заголовок. Затем я вернулся на панель тем - Моя библиотека, открыл свой собственный заголовок с помощью Elementor и изменил текст, который я вставил в заголовок.Обновил шапку. Затем я открыл веб-сайт, и изменения, которые я только что внес в настраиваемый заголовок, были на веб-сайте.
Я использую тему OceanWP.

Надеюсь, у вас получится.

Я пробовал это и раньше ... но проблема в том, что я не использую ничего из темы OceanWP. Чтобы лучше объяснить, когда я создаю новый пост, в разделе Атрибуты поста-> Шаблон я использую Elementor Canvas. Чтобы сделать, как вы сказали (создать настраиваемый заголовок в моей библиотеке) в Post Attributes-> Template, я должен использовать шаблон по умолчанию, и это придаст странице весь внешний вид темы, такой как боковая панель, нижний колонтитул и т. Д.
Может быть, есть опция чтобы деактивировать всю оболочку темы и начать с пустой страницы (как я сделал с Elementor Canvas), чтобы я мог использовать шаблоны из моей библиотеки, как вы сказали.
Вы можете взглянуть на мой веб-сайт http://www.kakoresilako.com, чтобы лучше понять .. У меня нет ничего о теме OceanWP .. это просто тема, которую я использовал, потому что должен выбрать тему.
И конечно спасибо!

Вы используете несколько заголовков для своего сайта? Если нет и вы хотите, чтобы все страницы имели одинаковый заголовок, создайте его в области «Библиотека», а затем перейдите в раздел «Настройка» и выберите настраиваемый заголовок. Тогда это отображается на ваших страницах?
Если да, вернитесь и внесите незначительные изменения и посмотрите, отображаются ли изменения.
Перейдите в Панель тем - Моя библиотека, чтобы создать собственный заголовок.
Это не настройка для конкретного сообщения. Он пересекает все страницы. Используйте Внешний вид - Настройка - Заголовок.

Если вы пытаетесь создать специальные заголовки для разных сообщений, это может быть проблемой

Заголовок одинаковый для всех страниц и сообщений. Я понимаю, что вы пытаетесь объяснить ... все работает. Но дело в том, что весь мой сайт (заголовок, нижний колонтитул, сообщения, боковая панель) сделан на elementor..на пустой странице. Это не позволяет мне использовать tmp из моей библиотеки.
Но я прихожу к выводу. Я должен сделать весь свой сайт, используя заголовок OceanWP и все остальное… не в Elementor, как я. Теперь работа на ближайшие 2 дня будет только этим. Я постараюсь сделать так, как сейчас выглядит сайт ... это будет сложно, но мне нравится, как он выглядит сейчас 😀
Спасибо за время, которое вы потратили на меня, мужчины!

Самое замечательное в использовании OceanWP - это отсутствие реального макета, если вы установите на странице один столбец полной ширины.Затем, когда вы добавляете столбцы, вы можете выбрать, сколько столбцов для каждого раздела.
Я думаю, что это намного более гибко. Как вы сказали, единственными другими областями, которые вы определяете, являются заголовок, верхняя панель, нижний колонтитул или нижняя панель, если вы этого хотите.
Удачи

.

Как изменить шаблон сайта Joomla 3.1

Добро пожаловать в другую статью из нашей серии руководств по созданию шаблона Joomla 3.0. В нашем последнем руководстве мы показали вам, как установить шаблон Joomla 3.0, который мы сейчас создаем. Установка шаблона не активирует его немедленно, поэтому в этом руководстве мы покажем , как изменить шаблон сайта Joomla 3.1 .

Обратите внимание! Шаги, описанные в этом руководстве по изменению шаблонов сайтов, применимы независимо от того, следуете ли вы нашей серии руководств и устанавливаете шаблон, который мы создаем, или если вы загрузили Joomla 3.0 из Интернета.

Изменение шаблона сайта Joomla 3.0:

  1. Войдите в административную панель Joomla 3.0.
  2. В верхнем меню щелкните Extensions , а затем щелкните Template Manager .
  3. Вы увидите два типа шаблонов: Site и Administrator . В этом руководстве мы изменяем шаблонов сайта (шаблоны, которые влияют на внешний интерфейс нашего сайта).

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

      Сообщение  
    Стиль по умолчанию успешно установлен

    На скриншотах ниже вы можете видеть, что после выбора нового шаблона сайта внешний вид нашего сайта Joomla 3.0 изменился.

    ДО:
    Шаблон Protostar по умолчанию

    ПОСЛЕ:
    Базовая Joomla 3.0 Выбран шаблон

    Обратите внимание! Если вы следите за нашей серией руководств по созданию шаблона Joomla 3.0, вы захотите прочитать нашу следующую статью о том, как добавить javascript в статьи о Joomla 2.5. Если вы можете видеть на скриншоте выше, шаблон выглядит не так уж впечатляюще, на данный момент это просто беспорядок, потому что наш файл CSS не загружается (что мы объясним более подробно в нашем следующем руководстве).

.

изменить экземпляр шаблона | WordPress.org

извините, я нашел решение еще раз спасибо Google ..

Поделитесь, пожалуйста, своим решением!

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

Присылайте, пожалуйста, ответы на вопросы, которые вы решаете самостоятельно, это любезность кодирования! На данный момент у меня есть именно эта проблема, и я не знаю, как ее исправить, даже если я искал проблему в Google.

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

РЕДАКТИРОВАТЬ
Итак, покопавшись в документации, мне удалось найти решение.

Откройте шаблон с помощью Elementor и там, где написано «Опубликовать», должна быть маленькая стрелка рядом с ним. Нажмите на нее, и должна быть возможность изменить «Условия отображения». Вот и все.

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

северных фьючерсов… спасибо

Друг, это решение.
Напрямую из документации Elementor.

https://docs.elementor.com/article/311-conditions

В текущем состоянии плагина…

Также обратите внимание, что, поскольку он был установлен на «весь сайт», ссылка для непосредственного редактирования этого раздела также должна появиться на панели администратора каждой страницы, предоставляемой раскрывающимся меню Elementor.(и при условии, что панель администратора не подавляется пользовательской опцией plugin / theme / wp)

Даже нажав кнопку «Обновить», вы снова увидите условные параметры =)

Привет, @n Northernfutures, спасибо, что поделились!

.

изменить тип шаблона | WordPress.org

Привет Иосия,

Насколько мне известно, у вас должна быть возможность редактировать шаблон так же, как и до обновления? Elementor> шаблоны> редактировать этот шаблон?

Энни

Действительно. Но мой вопрос не в том, можно ли редактировать шаблон. Это как изменить тип. В Elementor 2 тип устанавливается при первом создании шаблона, но я не вижу места для изменения типа после этого.

О, вы имеете в виду выбор между страницей или разделом?
Полагаю, все, что было создано до обновления, может быть только шаблоном страницы, так как возможности сохранить как раздел даже не было.

Чего именно вы пытаетесь достичь?

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

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

После этого удалите эту страницу, и у вас появится новый раздел.
Это то, что вам нужно?

Энни

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий