Technique

1 2 3 7

Themler et les contrôles Positions

Le contrôle Position Joomla doit contenir un module. Ce module se paramètre dans le backend Joomla.

Le nom de la position peut être changé dans Themler.

Attribution d’un module à une position Joomla

Pourquoi le bloc du contrôle Position est-il vide ?

Dans Themler (CMS ou Desktop) :

  • Vous ajoutez un contrôle Position Joomla. Themler ajoute par exemple position-5.
  • Vous appliquez un style de bloc à ce contrôle.

Mais le bloc est vide et vous ne visualisez pas le rendu graphique du bloc.

En effet, si le contrôle position-5 ne s’est vu assigner aucun module dans le CMS Joomla, vous ne verrez rien.

Themler contrôle position joomla

Il vous faut alors paramétrer un module pour cette position avec le gestionnaire de modules dans le backend Joomla.

Comment visualiser le style d’une position ?

Themler attribue automatiquement un numéro à la position Joomla lorsque vous ajoutez une position. Plus exactement il incrémente à chaque fois un nouveau numéro : position-5, position-6… Vous pouvez directement modifier le nom de la position dans Themler. Par exemple vous pouvez remplacer position-5 par position-6 ou par footer-4… à vous de définir vos positions.

Si vous remplacez par exemple position-5 par position-6, vous voyez alors du contenu s’afficher pour cette position, car dans le CMS Joomla packagé avec Themler Desktop des modules sont déjà assignés par défaut à cette position.

Themler contrôle position joomla

Si vous ne voulez pas paramétrer des modules dans le CMS Joomla fourni avec Themler Desktop, alors vous pouvez changer temporairement les noms de certaines des positions Joomla dans Themler en leur attribuant des noms de positions pour lesquelles des modules sont paramétrés par défaut, afin de visualiser le rendu graphique des styles de blocs appliqués.

Même si vous travaillez avec Themler Desktop, et que vous voulez voir le rendu graphique des blocs, il vous faut paramétrer des modules « exemples » dans le backend du CMS fourni avec Themler Desktop.

Installer un Thème Themler dans WordPress (Partie 1)

Installation via le panneau Admin (template zippé)

Pour installer le template téléchargé (.zip) via le panneau d’administration WordPress, merci de vouloir suivre ces étapes :

1. Connectez-vous à votre administration WordPress.

2. Sélectionnez le panneau Apparence, puis Thèmes.

3. Sélectionnez Ajouter.

4. Choisissez Mettre un thème en ligne.

5. Cliquez le bouton Choisissez un fichier pour sélectionner le fichier zip sur votre ordinateur et cliquez sur le bouton Installer.

6. Cliquez sur Activer pour que le thème devienne le thème par défaut.

installer un thème Themler pour WordPress

Remarque : Avant d’installer un nouveau thème, assurez-vous qu’il n’y a pas déjà un thème installé portant le même nom. Si un autre thème avec le même nom existe déjà, renommez-le ou supprimez-le avant d’installer le nouveau thème.

Ajouter des Sections dans Themler

Ajouter une nouvelle section à un template ou une page dans Themler est désormais plus facile que jamais.

Etapes pour ajouter des sections dans Themler

S’applique à Themler V.319.

Etape 1

Cliquez sur l’icône vert + pour ajouter une Section Contenu à la page ou sur l’icône bleu + pour ajouter une Section au template.

Themler ajout section

Etape 2

Choisissez une Section parmi les centaines de sections disponibles.

Themler ajout section

Etape 3

Editez les éléments et leurs options.

Themler ajout section

Changer la Couleur de l’Elément Actif du Menu Horizontal dans Themler

Ce tutoriel vous explique comment changer la couleur de l’élément actif du Menu Horizontal d’un template réalisé avec Themler. Il a été réalisé avec Themler V.208.

Assurez-vous que vous disposez bien d’une version récente de Themler dans la mesure où Themler propose désormais une interface utilisateur simplifiée. Si ce n’est pas le cas, merci de vous référer à cet article pour faire la mise à jour.

Etapes pour modifier l’arrière-plan d’un élément actif du Menu Horizontal

Etape 1

Cliquez sur un élément du Menu Horizontal (1).

L’onglet Horizontal Menu s’active alors automatiquement dans le ruban. Il présente toutes les options disponibles pour paramétrer le Menu Horizontal.

L’élément sélectionné du template s’affiche en gras dans l’onglet actif du ruban. Ici Menu et Menu Item (Elément de menu).

Options de l'onglet Menu Horizontal du ruban

Capture 1

Le Menu Horizontal est constitué de la barre de menu et des éléments du menu. Un élément de menu peut contenir une barre de sous-menu (submenu) et des éléments de sous-menu (subitem).

Etape 2

Options de l'élément de menu actif du Menu Horizontal Themler

Capture 2

Cliquez sur l’option Active (2) pour afficher les options d’arrière-plan de l’Elément de menu dans son état Actif.

Un menu déroulant s’affiche avec toutes les options disponibles pour paramétrer l’élément actif du menu, regroupées en catégories :

  • Arrière-plan : Pot de peinture, Dégradé, Image
  • Bordure : Bordure, Coins, Ombre & Lueur
  • Texte : Police, Paragraphe
  • Disposition : Remplissage, Marge
  • Icône : Image, Forme
  • Plus d’options

Les mêmes options sont disponibles pour l’état Hover (survol de la souris) du menu.

L’interface de Themler n’étant pas encore disponible en français, nous avons traduit les principales options (voir Capture 2).

Etape 3

Cliquez sur l’option Fill (3) pour accéder aux options de remplissage de couleur de l’Elément de menu quand il est dans l’état Actif.

Vous pouvez alors changer sa couleur et vous verrez automatiquement la modification de couleur s’appliquer sur le menu, comme illustré ci-dessous (Capture 3).

menu horizontal Themler

Capture 3

Changer l’arrière-plan d’un sous-élément du Menu Horizontal

Pour modifier les attributs graphiques des sous-menus, il vous suffit de sélectionner un sous-élément (par exemple FAQ), ce qui activera l’onglet Menu Horizontal du ruban et mettra en gras Submenu (Sous-menu) et Subitem (Sous-Elément). Cf. Etape 1. Poursuivez comme décrit dans les étapes 2 et 3.

Supprimer le Menu Horizontal

Pour supprimer le Menu Horizontal du template, il suffit de cliquer sur la croix à droite du libellé Horizontal Menu (4). Voir capture 3.

Arborescence

L’élément du template sélectionné (ici le Menu Horizontal) est affiché dans une arborescence au bas de la fenêtre (5). Voir capture 3.

L’arborescence Header (All Templates) > Section > Container >Horizontal Menu signifie que le Menu Horizontal est dans un Conteneur qui se trouve dans une Section, qui elle-même est dans l’En-tête. Et cet En-tête est commun à tous les templates du thème Themler. L’arborescence vous aide à mieux comprendre l’imbrication des différents éléments.

Astuce : Si vous cliquez sur l’un des éléments de l’arborescence, par exemple Section alors l’onglet Section s’affichera automatiquement dans le ruban.

Activation de votre licence Themler à partir de votre licence Artisteer

Cette procédure s’applique uniquement si vous n’avez jamais activé Themler précédemment.

Etapes pour activer votre licence Themler

1. Si cela n’est pas déjà fait, créez un compte pour Themler.

Vous recevrez ensuite un email vous demandant de confirmer la création de votre compte.

2. Connectez-vous à votre compte Themler.

3. Allez sur la page Pricing du site Themler et renseignez votre numéro de série Artisteer. Suivez les instructions telles qu’indiquées sur la capture d’écran ci-dessous.

Activation licence Themler
Si le prix à $0 n’apparaît pas, cela signifie que le service de mises à jour de votre licence Artisteer a expiré, et en conséquence vous n’êtes pas éligible à une licence gratuite de Themler. Dans ce cas, veuillez nous contacter pour obtenir la référence produit à commander.

Vous noterez que l’activation de votre licence Themler peut ne pas être immédiate, et prendre jusqu’à 24 heures. Une fois la licence Themler activée, vous recevrez un email vous en informant.

4. Toujours connecté(e) à votre compte Themler, cliquez sur votre nom dans le coin supérieur droit de la fenêtre de votre navigateur web, et sélectionnez Subscriptions dans le menu déroulant.

Vous verrez alors l’état de votre souscription pour Themler :

état de la souscription Themler

L’écran Subscriptions (ci-dessus) affiche les informations relatives à votre licence Themler :

  • Themler, Free Updates for 1 year – Mises à jour gratuites pendant 1 an avec la date d’expiration (15/03/2017).
  • Artx Project Subscription – Nombre de téléchargement de projets artx par jour et date d’expiration de l’abonnement.
  • Medium Photos, 1 Year – La ligne Photos vous donne les informations sur votre abonnement à la bibliothèque d’images BillionPhotos : taille des images, nombre de téléchargement par jour et date d’expiration de l’abonnement.

Large : images de grande taille – 100 téléchargements par jour (correspond à l’édition PRO) – Période d’abonnement

Medium : images de taille moyenne – 60 téléchargements par jour (correspond à l’édition E-COMMERCE) – Période d’abonnement

Small : images de petite taille – 30 téléchargements par jour (correspond à l’édition BUSINESS) – Période d’abonnement

Free : images gratuites (correspond à l’édition PERSONAL) – Période d’abonnement

5. Si vous retournez maintenant sur la page Pricing du site Themler, vous verrez alors apparaître l’édition de votre licence Themler sur cet écran.

édition Themler

Remarque importante : Pour utiliser Themler, vous devez avoir une connexion internet et être connecté(e) à votre compte Themler.

Convertir un Template Artisteer en Thème Themler

Artisteer 4.3 (à partir du build 60902) supporte désormais l’export de templates pour Themler Joomla et Themler HTML, en plus de Themler WordPress.

Les projets Artisteer peuvent être importés dans Themler à condition d’avoir au préalable été exportés en tant que Template Themler dans Artisteer. L’import dans Themler est disponible pour les Thèmes WordPress, Joomla et HTML (à partir de la version 4.3 build 60902 d’Artisteer).

Etapes de Conversion du Template Artisteer en Thème Themler

1. Vous devez télécharger et installer la version 4.3 build 60902 d’Artisteer.

Si votre licence Artisteer n’est pas éligible à cette version, vous devrez alors souscrire au Service Annuel de Mises à Jour Artisteer pour bénéficier de cette version.

2. Lancez Artisteer et ouvrez votre projet Artisteer (.artx).

Sélectionnez le menu Fichier > Exporter > Themler :

fenêtre d'export Artisteer

Si vous souhaitez également exporter le contenu du template Artisteer, vous devez cocher l’option Inclure le contenu (4).

La dernière version majeure de Themler propose un Editeur de Contenu CMS vous permettant d’éditer le contenu des Pages, Posts et Articles WordPress et Joomla.

3. Lancez Themler.

Si vous avez choisi d’exporter le template Artisteer pour Themler Joomla, alors lancez Themler pour Joomla.

Sélectionnez le Menu File > Import from ZIP… 

menu themler pour importer un template

et sélectionnez votre template ZIP précédemment exporté avec Artisteer.

Vous pouvez désormais travailler avec votre thème Joomla dans Themler.

Remarque : Si vous avez exporté le template pour WordPress ou HTML, à l’étape 3 vous lancerez Themler pour WordPress ou HTML.

 

 

1 2 3 7