artisteer-france.fr

Le Site Officiel Français d'Artisteer

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

Remplacer l’Image d’Arrière-Plan de l’En-tête du Template Artisteer en Mode RWD

Les templates Artisteer sont par défaut responsive (RWD), mais certaines images ne le sont pas complètement. Une solution consiste alors à remplacer l’image par une couleur, dès lors que la taille de l’écran est inférieure à une taille donnée.

Ajout de Code CSS Personnalisé pour modifier l’Image d’Arrière-Plan de l’En-tête

Vous pouvez ajouter du code CSS personnalisé à votre template Artisteer directement dans Artisteer.

Cliquez sur le menu Fichier > Exporter > Options… puis sur Options CSS pour afficher la fenêtre vous permettant d’ajouter du code personnalisé.

Le code ajouté dans les Options CSS (Styles CSS supplémentaires) est sauvegardé avec votre projet Artisteer (fichier .artx). Lorsque vous réouvrez votre projet Artisteer, le code est toujours présent et vous pouvez le modifier à tout moment.

Remplacement de l’Image d’Arrière-plan de l’En-tête par une Couleur

Si vous voulez supprimer l’image d’arrière-plan de l’en-tête pour tous les supports dont la taille de l’écran est inférieure à 799 pixels et la remplacer par une couleur d’arrière-plan, il vous suffit d’ajouter le code personnalisé suivant (menu Fichier > Exporter > Options… > Options CSS) :

@media (max-width: 799px)
{
#art-header
{
background-image: none !important;
background-color: #DBBEA5;
}
}

Le paramètre max-width détermine la largeur maximum de l’écran. Vous pouvez changer cette valeur.

Renseignez le code couleur voulu pour le paramètre background-color.

Lorsque vous visualiserez le site sur un écran dont la largeur de l’écran est supérieure à 799 pixels, l’image d’arrière-plan de l’en-tête du template s’affichera. Dès lors que vous le visualiserez sur des supports (tablettes, smartphones…) dont la largeur de l’écran est inférieure à 799 pixels, l’image d’arrière-plan de l’en-tête du template sera remplacée par la couleur de remplissage paramétrée.

Visualisation de l’En-tête dans la Vue Responsive

Vous pouvez vérifier ce comportement avec la Vue Responsive disponible dans Artisteer.

 

Artisteer 4.3 build 60902 supporte Joomla 3.5

Support du CMS Joomla 3.5

Artisteer 4.3 (dernier build en date : 60902) supporte Joomla 3.5.

Lorsque vous exportez pour Joomla, vous devez choisir Version : 3.2-3.3 (on devrait lire à partir de la v.3.2) :

export Joomla dans Artisteer 4.3

Au moment de l’export une connexion au serveur Artisteer se fait et le template est mis à jour.

Rappel

A partir de la version 4.2, Artisteer requiert de disposer d’une connexion internet lors de l’export des templates Joomla, WordPress et Drupal.

Certaines fonctionnalités du logiciel Artisteer ont été « déplacées » sur un serveur en ligne. Dans l’ensemble, Artisteer 4.2 fonctionne de la même manière que précédemment, MAIS vous devez être connecté(e) à internet lors de l’export des templates.

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.

Newsletter Kapitec

Abonnement

Les champs en gras sont obligatoires.