artisteer-france.fr

Le Site Officiel Français d'Artisteer

Insérer et Paramétrer un Contrôle Recherche dans un template Artisteer

Nous allons vous expliquer comment insérer et paramétrer un contrôle Recherche dans un template Artisteer.

Vous noterez que certaines options avancées (dialogues de valeurs personnalisées) ne sont pas disponibles avec Artisteer édition Personnel.

Insérer le Contrôle Rechercher

1. Cliquez sur l’onglet En-tête du ruban

2. Dans la section Insérer de l’onglet En-tête, cliquez sur Contrôles pour ouvrir le menu déroulant :

ajout contrôle rechercher dans Artisteer

3. Cliquez sur Rechercher

Si le contrôle Rechercher est en grisé dans le menu, cela signifie qu’il est déjà présent dans l’en-tête.

Le contrôle est automatiquement ajouté dans l‘en-tête du template.

contrôle rechercher dans l'en-tête du template Artisteer

4. Cliquez sur le contrôle Rechercher dans la zone de prévisualisation pour le sélectionner et déplacez-le au sein de l’en-tête pour le positionner à l’endroit souhaité.

Paramétrer le Contrôle Rechercher

Le style de ce contrôle peut être paramétré.

1. Cliquez sur l’onglet Contrôles du ruban

2. Dans la section Contrôles de l’onglet Contrôles, cliquez sur Rechercher pour ouvrir le menu déroulant qui vous propose 7 options, dont 6 styles graphiques :

styles du contrôle rechercher dans Artisteer

3. Sélectionnez le style voulu, il est alors automatiquement appliqué au contrôle Rechercher, ce que vous pouvez vérifier dans la zone de prévisualisation.

La dernière option de ce menu déroulant (Plus d’options…) vous permet d’afficher la fenêtre Options de recherche. Cette fenêtre s’affiche en tant que panneau à droite de la zone de prévisualisation ou en tant que fenêtre flottante. Ces options ne sont pas disponibles pour l’édition Personnel.

options avancées du controle rechercher dans Artisteer

Vous pouvez alors paramétrer ce contrôle à votre guise :

  • Commande de recherche : c’est là que vous renseignez la largeur, la hauteur et le rayon de la zone de saisie pour le texte de recherche.
  • Remplissage et Transparence : vous paramétrez la couleur et/ou la transparence de la zone de saisie ainsi que le style du texte.
  • Bordure : Vous définissez la bordure de la zone de saisie (type de bordure, épaisseur, couleur et transparence).
  • Dégradé : Vous appliquez un style de dégradés à partir de la galerie de dégradés et vous paramétrez le contraste en pourcentage.
  • Ombre : Vous spécifiez une ombre en réglant le flou, la transparence, la distance et l’angle.
  • Bouton : Vous paramétrez l’icône recherche du contrôle, à savoir l’image de l’icône (sélection à partir de la galerie ou insertion d’un de vos fichiers image), sa couleur, et le style du texte de l’icône.
  • Texture

Vous noterez que certaines options peuvent être grisées (désactivées) si elles ne peuvent pas être appliquées.

Par exemple, si sur le bouton du contrôle Recherche vous mettez un icône alors l’option 2ème couleur ne sera pas active. Or si vous ne mettez pas d’icône, l’option 2ème couleur sera active.

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.

Nouvelle Version de Themler : Nouvelle Interface Utilisateur et Edition de Contenu

Une nouvelle mise à jour majeure de Themler est désormais disponible.

Les principales nouveautés de cette mise à jour de Themler sont, d’une part une nouvelle interface utilisateur simplifiée, et d’autre part l’édition de contenu pour WordPress et Joomla.

nouvelle interface utilisateur de themler

Il est également à noter que de nouvelles sections sont ajoutées régulièrement, et qu’à ce jour il existe plus de 1.000 sections gratuites.

Comment mettre à jour Themler ?

Nouvelle Interface Utilisateur Simplifiée

L’interface utilisateur de Themler a été repensée pour ressembler davantage à celle d’Artisteer, de sorte à ce que les utilisateurs ne soient pas déroutés.

  • Ruban avec les propriétés les plus utilisées sur l’onglet Home (Accueil)

interface en ruban de Themler

  • Panneau Sections
  • Panneau Options Avancées
  • Ajout de Sections plus facile que jamais

Edition Simplifiée du Contenu et du Template

  • Icônes arrondis dans la zone de prévisualisation pour éditer les images et ajouter du nouveau contenu
  • Effet de défilement parallaxe pour les images d’arrière-plan
  • Dialogue popup pour la Position Arrière-plan
  • Filtres couleurs d’image
  • Edition instantanée de texte
  • Nouveaux contrôles : Spacer et Separator

Divers

  • Organisation de Colonnes (fonctionnalité basée sur FlexBox)

Edition de Contenu WordPress et Joomla

En plus du support de l’édition de Templates WordPress et Joomla, il est désormais possible d’éditer le contenu des Pages, Posts et Articles dans l’Editeur Themler.

Générateur de Site Web HTML

  • Contrôles Date et Auteur de Post

DotNetNuke Skins

Themler for Mac

Artisteer

Site Themler

  • Recherche de Sections par mots clé

recherche de sections par mot clé

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.

 

 

Comment mettre à jour Themler dans sa dernière version

Vous pouvez mettre à jour Themler dans sa version la plus récente dès lors que le service de mises à jour de votre licence Artisteer/Themler est en cours de validité. Si ce n’est pas le cas, il vous faudra renouveler ce service.

Etapes pour mettre à jour Themler

1. Que vous travaillez avec Themler en local (Themler Desktop) ou en ligne intégré à votre CMS (Themler for CMS), il vous suffit d’ouvrir votre thème dans Themler pour mettre à jour votre version de Themler.

2. Cliquez sur l’icône Updates dans la barre d’outils.

Mise à jour de Themler

3. La fenêtre suivante s’affiche. Il vous est proposé de mettre à jour le thème actif dans la dernière version de Themler.

Mise à jour de Themler

Cliquez sur l’option Backup and Upgrade (Sauvegarder et Mettre à jour) pour poursuivre.

4. L’opération de mise à jour peut prendre quelques minutes. Une fenêtre vous invitant à patienter s’affiche.

Mise à jour de Themler

5. Lorsque le thème a bien été mis à jour, la fenêtre suivante vous en informe.

Mise à jour de Themler

Cliquez sur OK pour revenir à votre thème.

Remarque : Vous devrez réitérer l’opération pour tous les thèmes Themler que vous souhaitez upgrader.

Autre option de mise à jour de Themler Desktop

La version de Themler Desktop peut être mise à jour au sein de l’application (comme expliqué ci-dessus) ou en téléchargeant la dernière version du programme.

 

Newsletter Kapitec

Abonnement

Les champs en gras sont obligatoires.