Шаблон helix 3 настройка меню



Joomla3-x.ru

Вступление

Шаблон Helix3 это удобный, современный, адаптивный, легко настраиваемый шаблон. Его легко использовать для создания уникального дизайна сайта Joomla 3.

О Helix3

После установки Helix3 вы сразу получаете доступ ко всем настройкам плагина. По сути, Helix3 это не просто шаблон с плагином, это полноценный framework Helix3 для Joomla 3. Получается тавтология, но шаблон Helix3, это базовый шаблон, созданный при помощи Фреймворка Helix3.

Примечание: Фреймворк это программная платформа, по сути, каркас для расширений Joomla типа шаблон. Фреймворк это плагин, на базе которого, создается и работает шаблон.

Рассматриваемый в этой статье шаблон называется Helix3, создан на плагине Helix3. У компании Agethemes, есть шаблоны с названиями AT Vegeret, AT Woodus и еще два десятка шаблонов, которые тоже созданы на плагине Helix3. У компаний Joomdev и JoomLead аналогичная ситуация, распространяется масса Free шаблонов на базе фреймворка Helix3.

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

Автор Helix 3

• Автор Helix3 компания
• Сайт: https://www.joomshaper.com/joomla-templates/helix3
• Демо шаблона: http://demo.joomshaper.com/?template=helix3

Стоит отметить, что на базе Helix3 можно создать свой собственный шаблон и распространять его под своей маркой. JoomShaper не делает из фраймворка Helix3 секрета с платным доступом. Компания выложила в свободный доступ необходимую документацию не только для пользователей, но и для разработчиков. Есть видео уроки на английском языке.

Базовые характеристики

Базовые характеристики всех современных Фреймворков и шаблонов на их основе, можно копировать из описания в описание. И всё же, Helix 3:

Адаптивный шаблон с автоматической подстрокой формата под тип устройства.

Шаблон может работать в двух режимах формата: Boxed layout и Stretched layout. Первый ограничивает содержание сайта рамками на экране. Содержание располагается посередине экрана. Второй режим растягивает содержание на весь экран. Оба режима адаптивны. В настройках шаблона есть кнопка для отключения включения режима «Boxed layout».

Есть возможность загрузить три типа логотипов: стандартный (основной), для мобильных устройств и логотип retina для дисплеев с большим расширением. Стандартный логотип можно положить в любой модуль шаблона.

По умолчанию на Helex 3 работают четыре цветовые схемы:

Переключение цветов меняет всю цветовую основу шаблона (ссылки, иконки, линии). Есть возможность сменить фон сайта, установив любую фотографию фона.

По умолчанию в шаблоне созданы 5 областей для модулей с 16 позициями для модулей. В настройке «Layout Manager» вы легко сможете создать любое дополнительное количество модулей. В этом и есть главная фишка всех современных Фреймворков.

Сделать это можно используя следующие кнопки.

Add Row: добавит область для модулей. Например, была одна область «Top Bar» с позициями модулей top1, top2, top3, top4. Кнопкой Add Row вы можете создать еще одну область «Top Bar 2» и в ней кнопкой Add columns разбить эту позицию на нужное количество позиций для модулей top5…top12. 12 максимальное количество в макете позиций модулей.

Кроме этого есть кнопки Setting настраивающие цвета, фоны и способ показа как областей для модулей, так и отдельных позиций модулей.

На Helix 3 безумная настройка типографики Google шрифтов. Однако нет классических шрифтов типа Arial, Verdana и т.п. По моему восприятию это минус.

Исправить этот и любой другой недостаток дизайна можно на вкладке «Custom Code». Здесь же можно добавить скрипты сбора статистики Яндекс Метрика и Google Analytics.

Настройки меню Helix3

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

Недостатки Helix 3

Плагин шаблона конфликтует с аналогичными плагинам других Фреймворков, поэтому если вы ставите Helix 3 поверх другого Фреймворка из нужно отключить, а потом лучше удалить.

До версии Joomla 3.8 Helix 3, конфликтовал с плагином кеширования системы. При включенном кэше, вместо содержания страницы отдавал поисковым ботам «кракозябры». Причин я найти не успел, вышел Joomla 3.8 и всё исправилось. Поэтому после настройки шаблона проверьте сайт на Яндекс.Вебмастер на вкладке «Ответ сервера», смотрите содержание страницы или на этом сайте: https://bertal.ru/ .

Выводы

Описав Фреймворк Helix 3, я практически описал все шаблоны, создаваемые с помощью этого фреймворка. Используя его можно создать не только уникальный шаблон своего сайта, но и создать лэндинг пейдж с нужным количеством модулей.

Источник

Шаблон helix 3 настройка меню

• Page Builder Page Builder
  • Overview Overview
  • Features Features
  • Layout Bundles Layout Bundles
  • Pre-made Blocks Pre-made Blocks
  • Interactions Interactions
  • Showcase Showcase
  • Documentation Documentation
  • Facebook Users Group Facebook Users Group
• Products Products

  • 

    

    

    

    Helix3

    Nothing Found

    How To Tips

    This section contains answers from some popular «How to create/use/hide/override/translate . « questions about the Helix3 framework. HowTos’ are short, highly-targeted tips for accomplishing a specific task. They are intended to help you learn our framework so that you can get the best experience with your projects. If you have more questions or suggestions feel free to write on the support forum.

    How to update Helix3

    There are two methods to update the Helix3 framework:

    Method #1

    1. Extensions: Update > click «Clear cache» button (top left)
    2. Click «Find updates» button
    3. Mark all plugins with «helix3» name
    4. Click «Update» to install new versions

    

    Method #2
    Download and install the Helix3 template, it will update the framework too.

    Google Font API insertion in Helix3 v2.5.6

    The users of Helix3 v2.5.5 have been facing difficulties with Google Font API key insertion after updating to v2.5.6. Here’s the solution on how to fix this issue. The following solution was shown using the HOPE template. Please be informed that the fix is exactly the same for all Helix3 based templates.

    After updating Helix3 from v2.5.5 to Helix3 v2.5.6 (it is done usually by downloading the Helix3 template and installing), you need to do the followings.

    Now before we begin, our Helix3 Typography section looks like this one:

    

    Step 1: Replacing the font section of our template (in this case Hope)

    First, we need to copy the font section of the Helix3 template i.e. the templateDetails.xml file found in root folder > templates > shaper_helix3 > templateDetails.xml

    Once you’ve opened up the file using a text editor you need to copy the font section. You can find it easily, the section starts from and ends at . Now you need to copy the section.

    Or, you can just copy the following code snippet.

    Now you need to replace the font section of your template (Hope in this case) with the code you just copied. To do so, open the templateDetails.xml file, which is found in root folder > templates > shaper_hope (if you’re using a different template it will be under the name of that template) > templateDetails.xml

    Select the code from to and replace it with the code you just copied (the above code snippet) then save the file.

    At this stage, our Helix3 Typography section looks like this one:

    

    Step 2: Fixing the language file

    To fix the language file, we need to copy the typography code section from the en-GB.tpl_shaper_helix3.ini file and replace it in the en-GB.tpl_shaper_hope.ini file (if you’re using a different template it will be under the name of that template). The files are located in the root > language > en-GB folder.

    Once you’ve opened up the en-GB.tpl_shaper_helix3.ini file, copy the codes under #Typography#

    Or, you can just copy the following code snippet.

    Now, we need to replace the #Typography# code of en-GB.tpl_shaper_hope.ini file with the one we just copied (the above code snippet).

    After doing so, we need to save and close the file. Now if we go to the Helix3 template styling > typography section, we’ll see the following.

    

    The above screenshot confirms that we have successfully solved our issue. Now to get the Google Font working we need to insert the API key and click on «Save» button to make changes.

    Lastly, we’ll click on «One Click Update» button to load Google Fonts. This completes the process.

    How to customize the Header

    To reduce the height of a header from the Helix3 template you need to use custom CSS code. The default value is 90px, but you can always change the value. For example: 60px.

    Customization by CSS code:

    #sp-header, #sp-header .logo < height: 60px; >
    .sp-megamenu-parent > li > a, #offcanvas-toggler

    How to reduce the Header height on (or after) scrolling

    If you want to reduce the header height only after scroll down, you can use the following custom CSS code:

    header.menu-fixed, header.menu-fixed .logo < height: 60px !important >
    header.menu-fixed .sp-megamenu-parent > li > a,
    header.menu-fixed #offcanvas-toggler

    

    How to use a different font instead of Google Fonts

    By default, in almost all of our JoomShaper (template) QuickStarts, we have used Google Fonts for template typography, but you do not need to stick with the fonts we have chosen. You can select different ones or just use the classic font sets. In the current version of Helix3, it requires only one line of custom CSS.

    Basic CSS knowledge

    The font-family CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The font-family property specifies a list of fonts, from highest priority to lowest. Traditionally only «websafe» fonts could be used on web pages. These fonts are standard fonts installed in both Windows and Mac computers. You will find the full list here: http://www.cssfontstack.com

    How to use Arial, Verdana, Sans-serif etc.

    1. In template settings — in «Typography» Tab, please turn off Google fonts for body, probably all Headers and Menu as well.
    2. In «Custom code» tab inside the Custom CSS field please add the following code or any other «websafe» font collection:

    You are advised to use only those HTML tags that you need to change.

    Note: Some popular fonts, for example, Tahoma belongs to the Microsoft Corporation, so they are installed by default only in Windows, not in Mac OS X, Linux or Ubuntu!

    How to use custom CSS

    Useful tip on how to use custom CSS in Helix3 bases templates can be found here: https://www.joomshaper.com/documentation/helix-framework/helix3#custom-css-header-code

    How to add a new font to Helix3 Template

    If you don’t want to use Google Font in Typography section nor the default Helvetica Neue, Helvetica or Arial you can load your own font. For example, you can integrate a custom font from MyFonts.com, fontspring.com, transfonter.org or fontsquirrel.com or use WebFonts Generator from it (suggested method). Please ensure to download the @font-face Kit.

    

    

    All you need to do is copy and paste the font files, and make some edits to your custom.css file. In this example, we will explain how you can add the custom free font AlexBrush to your JoomShaper template. This method can be used with any template based on Helix3 framework.

    1. Please unzip all font files (.eot, .woff, .ttf, .svg) from template package to this same template folder where the template keeps other fonts, for example here: templates\shaper_helix3\fonts
       Use FTP tool for this purpose.
       
    2. Now open stylesheet.css which should be in generated font package, in my PC it looks like this:
    3. But we need to change the paths for the files, it’s advised to use following change (../fonts/):
    4. Now open or create a custom.css file inside /css folder (in JoomShaper template) and copy the updated code there.
    5. Once you have added the font to your template’s font directory, you can apply it to your site. Now you need to choose this new font for selected CSS selectors or HTML tags, also inside custom.css file, for example: Here is the content from my example file
       
    6. Remember to disable Google Fonts from Typography tab (helix3) for those chosen HTML tags where you want to use the custom font instead.
       
    7. You can also replace the default font color and font size with your preferred font color and size, using the basic CSS rules.
    8. If you want to use custom fonts for HTML tags or menu items etc. please turn off (disable) Google Fonts for them in the Typography tab.

    Final result on front-end

    

    How to change the direction to RTL

    By default all new templates based Helix3 template framework have built-in separate CSS styles for Right-To-Left (RTL) direction in languages like Hebrew, Persian and Arabic. In template folder /css — you will find : bootstrap-rtl.min.css, rtl.css and rtl.less file. We use this function, so if your Joomla website is set to a RTL language the Enfold RTL stylesheet will be included automatically. Of course you can build multilingual site on Joomla, with language switcher.

    • Default Layout Builder in JoomShaper Templates doesn’t have separate RTL layout. It means that you have to create your own. First use a Duplicate feature in Templates: Styles section to create template clone of Default Template style, for example «shaper_revibe — Default».
      
    • Second, inside Layout tab replace positions of logo and menu.
      
    • Then choose different menu for RTL language in Menu tab. Don’t forget to Save settings.
      Of course, order of menu items you can change in Menu Manager (Joomla Core Feature). So it shouldn’t be a problem to set Home as a last item in the menu row. If this should be your default template set it as a default one.
    • If this RTL template must be for selected language(s) only — please assign this «new» template to those menu items which are used for RTL language.
    • In Custom Code tab you can use separate css styles to fix small issues with other components or module which do not support RTL.
    • If you want to align menu more to right side, not left side as it’s by default, please use following CSS code:

    

    SP Tabs Module

    If you’re using SP Tabs module and you need to have RTL direction style please use extra two lines of CSS code:

    How to add custom module position above and below component area

    By default Helix3 do not allows you to add a new module above or below component area. In most cases Layout Manager allows you to add new rows and columns.

    

    But with very small php/xml customizations you can add two new modules.

    

    Small Code Customization

    If you have any JoomShaper template or just Helix3 already installed, all you have to edit those two files:

    First edit helix3.php file — where you should find those lines:

    and do those changes, for Helix3 v2.5+ template(s) only:

    Now save changed file and upload on your server.

    In second file (templateDetails.xml): you have to add new positions as well. Add them before ending

    For example here:

    Do not forget to save this edited file also. Those two changed files must be on server, not only on your local drive,
    if you know what I mean.

    That’s all now you can use those two new: above and below module positions in Module Manager for all installed modules.
    Until it won’t be included in new version of Helix3 framework you can use this temporary but 100% working solution. Remember about that change!

    How to hide on mobile

    U nfortunately , those module position do not have any options in Helix3 Layout Manager. So to hide them in mobile (small device) view you have to use addcional module class suffix.
    Please use:» hidden-xs hidden-sm » — of course without («) !

    How to increase logo size

    If in template based on Helix3 uploaded/chosen by you logo is displayed too small or too big, you have to make small changes, start with:

    For desktop purposes, use logo image with finial height, for example 100px. Do not use HUGE images, it doesn’t make sense.

  • In some templates to see bigger logo image (in normal size), you have to also:
    a) Increase Logo column in Template settings > Layout > Header. If 3,9 is too small, use 4,8 or custom layout.
    b) Override logo height limit
    #sp-header .logo h1 > img

  How to fix Cannot use object of type stdClass as array

  If after Joomla update to 3.9+ you cannot edit menu any items you have to remove extra menu plugin.

  1. Extensions > Manage > Plugins
  2. Then disable and uninstall plugin «System — Extra Menu Params«

  It’s not compatible with Joomla 3.9+, it was developed by YouTech Company , not JoomShaper.

  How to transfer template settings

  In this guide we will show you how to transfer (copy) Joomla template settings (also based on Helix3 framework) from one website to another. We will show you all steps, which you should follow:

  1. On second (desitanion) site install Joomla template (this same like you have on first site), of course with default settings.
  2. On server where you have both sites (A & B) open tool named PHPMyAdmin, it should be in your Hosting panel. If you cannot find it ask support. But you can use also standalone php script named Adminer (formerly phpMinAdmin) which is a full-featured MySQL management tool written in PHP. Conversely to phpMyAdmin, it consist of a single file ready to deploy to the target server.
  3. Open both databases in that tools on which you have installed your Joomla sites.
  4. Find table named: PREFIX_template_styles and click «Select» to browse content.
  5. On the list find your Helix3 template name and click on «edit» link.

  

  6. Select and copy whole area from «params» field (see above image), scroll window if you have to.

  7. Open in edit mode this same table on second («B») database and paste whole settings code.

  8. Then click «Save» to keep new changes (modifications).

  9. Next in template settings «Basic» tab check if logos have assigned this same path for logo images. If not, you have to correct only this part.

  10. If in your first template you made manually some changes in core files like in: templateDetails.xml — which might be possible. Using FTP client tool you have to copy them into second (B) server as well.

  Now you can use both sites with exactly this same template settings inside them. But it doesn’t mean this same modules or content of course. That’s all.

  Import & export

  New version of Helix3 allow you to use new feature: Export &b Import settings. Since that moment you do not have to use PHPMyAdmin or similar tool to copy-clone template settings from site A to site B. We implement a new transfer feature. On first site you have to export json file, then open it in text editor, copy whole content and paste on second site in export textarea field.

  Источник