Formations web et création graphique - Un bouton Call to action pour landing page

Fermer



Connexion

Formations sur-mesures…

  • Basées sur des programmes solides
  • Adaptées pour répondre à vos besoins
  • Animées par des formateurs issus des entreprises
  • Intégrant le background des participants avec une pédagogie pro-active
  • Associant vos objectifs  et contraiintes de production
  • 20% sous les tarifs usuels
  • Éligibles  à la prise en charge des OPC

Pour une étude gratuite Demandez nous!

Coaching post-formation

  • Vous bénéficierez d'une Hotline directe avec le formateur qui vous coachera amicalement
  • Vous pourrez compter sur lui pour vous aider à résoudre vos petits soucis
  • Vous serez tenu régulièrement au courant des évolutions de votre métier
  • Vous serez intégré à notre réseau d'alertes et de tutoriels
  • Et ce service est gratuit!

Pour une étude gratuiteDemandez nous!

Audits concrets

  • Les solutions pour un site marchand?
  • Optimiser les Cms : Joomla Drupal Worpress, Hikashop, Prestashop ?
  • Développer un Community Management rentable?
  • Créer un  Réseau Social d'Entreprise?
  • Tester l'ergonomie d'un site?
  • Évaluer les rédactionnels?
  • Optimiser pour les moteurs de recherche?

Demandez un devis gratuitDemandez nous!

Votre site mérite le meilleur!

Votre Projet Web mérite un site Joomla Dynamique

un site web plus attractifAttractif un site web plus fonctionnelFonctionnel un site web plus convivialConvivial

Nous concevons pour vous tous types de sites sous Joomla : Sites institutionnels, e-commerce, communautaires, associatifs…

Les avantages d'un site sous Joomla

  • Vous modifiez et enrichissez le contenu à tout moment sans connaissance technique particulière.
  • Vous changez l’aspect (couleurs, formes) des éléments en un simple clic.
  • Chaque contributeur édite son propre contenu, libérant l’administration de tâches fastidieuses.
  • Votre site est interactif est consultable sur périphériques mobiles : smartphones, tablettes…

Que peut-on faire avec un site sous Joomla ?

La configuration de base intègre :

  • Gestion des utilisateurs : Public, Privé, Contributeurs, Administration.
  • Gestion des articles et Blogs
  • Agenda
  • Galeries Photo et Vidéos
  • Documents à télécharger
  • Newsletter (Infolettre par email)
  • Formulaires de contact
  • Géolocalisation

D’autres modules sont facilement intégrables : Petites annonces, Forums et Communautés, Vente en ligne, Gestion d'événements, Manifestations sportives, pré inscriptions, menus des cantines…

Combien ça coûte ?

48cash0 € : Vous pouvez bénéficier d’une prise en charge totale par votre organisme de formation professionnelle, car le site peut être déployé avec vous lors d'une session de formation
Vous n’avez alors rien à payer : nous sommes réglés directement par votre organisme collecteur (Agefos, Agec, Afdas…). Pour des projets complexe, les budgets sont en général inférieurs de moitié aux solutions propriétaires.

Comment se passe la mise en service ?

48lettreNous vous envoyons gratuitement un dossier complet que vous transmettez à votre organisme : convention de formation, itinéraire pédagogique, devis complet.
Une fois l’accord obtenu, vous fixez les dates de votre session de formation. Un formateur se déplace en vos locaux avec le matériel nécessaire. Avec lui vous vous formez à Joomla, configurez le site Joomla et mettez en place les premiers contenus.

Combien de temps cela prend-il ?

48agendaComptez une semaine au maximum pour préparer votre site Joomla (hébergement mise en service), puis une formation de trois jours dans votre établissement.

Et la maintenance ?

inbox-5Vous êtes totalement maître de votre hébergement et de votre nom de domaine. Dans ce cas le coût annuel est inférieur à 20 euros (chez OVH). Vous avez totalement la main sur votre site.

Pour être libéré des contraintes de mise à jour, optez pour une journée de formation annuelle, au cours de laquelle nous faisons ensemble évoluer votre site Joomla en améliorant ses fonctionnalités. Cette journée de formation peut être prise en charge et ne vous coûtera donc rien.

Contactez-nous sans engagement de votre part pour recevoir toutes les précisions complémentaires

Exemples de sites

thumb_001 thumb_002 thumb_003 thumb_004 thumb_005 thumb_006

Un bouton Call to action pour landing page

Un Bouton "Call to action", qu'est-ce que c'est? Si le vous savez vous allez apprendre à en réaliser un. Sinon, vous allez apprendre ce que c'est…

Bouton Call to action : tutoriel gratuit de Didier Mazier

Landing Page et CTA

Vous publiez une publicité en ligne ou par e-mail et voulez déclencher un acte particulier de la part de votre cible. Vous ne pouvez pas diriger le lien sur votre site web qui est trop compliqué.

Dans ce cas vous réalisez une page spécifique, nommée Landing Page (page d'atterrissage) préparée pour générer des remontées.

En général une Landing Page est basée sur une structure graphique simple très proche de la publicité "papier", et constituée de ces éléments:

  • Accroche avec une promesse claire
  • Visuel principal fort
  • Bref descriptif des avantages produit
  • Bouton invitant à… commander, demander un devis, s'inscrire, bref agir! Ce bouton est un CTA (Call to Action).

Nous allons réaliser un CTA maintenant.

Créer le document

Un bouton CTA doit répondre à ces critères :

  • De couleur différente des autres élements de navigation de la page
  • De taille conséquente
  • Avec une originalité graphique qui attire l'oeil

Pour ces raisons, prévoyez un document Photoshop assez grand : ici 350 px de large par 150 de haut.

Prévoyez tout de suite un fond transparent.

Bouton call to action pour une landing page

Dessiner la forme principale

Avec l'outil Formes, nous avons tracé un rectangle à coins arrondis de 10px.

Bouton call to action pour une landing page

Peu importe la couleur de la forme, car nous allons travailler avec les styles de calque. Nous pourrons donc incruster une couleur, un dégradé etc.

Toutefois pour ce premier rectangle vous pouvez choisir un gris très clair dans les couleurs Web, en cliquant sur la vignette de la palette des calques.

Bouton call to action pour une landing page

Dessiner le bouton

Nous voulons faire un CTA avec deux messages. Le premier invitant à l'action, le deuxième précisant des conditions.

Dans ce cas il ne faut surtout pas vouloir tout écrire dans le bouton. Nous allons donc tracer une deuxième forme de rectangle à coins arrondis (réduisez l'arrondi à 6 px), et y incruster un dégradé.

Bouton call to action pour une landing page

Notre page utilise une navigation bleue, nous allons choisir un dégradé dans une autre couleur, vert par exemple.

Bouton call to action pour une landing page

Ajouter des contours et un double Outline

Pour les deux calques de forme, ajoutez des contours en cliquant sur l'icône Fx de la palette des calques et en choisissant Contour.

Utilisez pour le contour un gris à peine plus sombre que le fond.

Pour ajouter un double contour, nous avons utilisé la lueur interne en choisissant le même gris que pour le fond et en ne la dégradant pas. Affinez pour cela en fonction de vos besoins les réglages (Taille à 4 px et Étendue à 0 par exemple).

Bouton call to action pour une landing page

Les textes du bouton

Utilisez une police la plus simple possible, de préférence en minuscules.

Vous constatez ci-après que visuellement Posez une Option attire l'oeil, et sans obligation ne parasite pas le message principal

Bouton call to action pour une landing page

Un appel visuel

Nous avons prévu plus de place en hauteur car, même avec un bouton, l'appel visuel doit être amplifié.

Avec une police scripte (mais par pitié pas de Comic!) nous avons ajouté une note manuelle.

En choisissant une forme de pinceau adhoc (craie), nous avons tracé une flèche sur un calque indépendant.

Bouton call to action pour une landing page

Si la forme de la flèche ne vous convient pas tout à fait, essayez de faire Ctl+T (PC) ou Commande+T (Mac) et de cliquer sur le Warp (déformation) dans le panneau des options.

Vous pourrez triturer à loisir l'enveloppe pour trouver le bon arrondi.

Bouton call to action pour une landing page

Enregistrer au format PNG et insérer le CTA

Pour finir, enregistrez au format PNG, le seul qui peut vous garantir une vrai transparence (utile car le fond de la page Web n'est pas forcément blanc)

Bouton call to action pour une landing page

Dans votre CMS préféré, insérerez le bouton CTA à sa place et attribuez-lui un lien vers le formulaire d'achat, de contact etc.

Bouton call to action pour une landing page

Et voilà, un beau CTA en place. Vous pouvez trouver de nombreux exemples de CTA réussis sur le web en saisissant dans Google : "Successful call to action buttons"

Bouton call to action pour une landing page

Vous savez quelle action serait OK?

Bises

Avec Xdata

XData  pour Xpress (comme InData pour InDesign) est le meilleur plug-in pour réaliser des mises en pages automatiques à partir de données tabulaires (Excel par exemple). Nous travaillons en production avec ce logiciel et formons à son utilsation depuis 1995.

Avec XData (ou Indata)…

  • Flora édite des catalogues de vins en 5 langues
  • Cédric imprime des DVD personalisés
  • Sylvie publie des guides de gites ruraux
  • Fabienne édite des annuaires professionnels

Pour en savoir plus

Pour savoir comment réaliser votre projet de mise en page automatique

Partenaires

Licence MCI partenaire Freeeport

LIcnece Marketing et Commerce sur Internet de l'IUT d'Evry

Ici formation partenaire Freeport

ICI Formation est l'annuaire national de référence pour la formation continue, le droit individuel à la formation (DIF), le bilan de compétences , l'outplacement et la validation des acquis de l'expérience (VAE).

Infos-Support

Appelez-nous par Skype
call didiermazier
C'est gratuit!

Qui est en ligne?

Nous avons 16 invités en ligne

Tutoriels Photoshop gratuits

Quels formats pour le web?

Trois formats s'offrent à vous Jpeg, Gif et Png. Alors pourquoi un jipègue? Pourquoi pas? Ce n'est pas très compliqué.

Changez les couleurs des objets avec Photoshop

Le remplacement de couleur est une fonction ancienne de photoshop injustement oubliée. Voici comment changer les couleurs des objets… et des gens!

Triple outline pour vos textes 1/2

Sur les quais la Pub IDTGV… triple outline, vous vous demandez comment c'est fait? On va voir comment ruser avec les effets de calques. En voiture!  

Effet Kodackolor old style

Meilleurs sont les appareils numériques, plus nous avons la nostalgie des veilles photos que nous prenions avec notre Instamatic ou notre Dacora Dignette (made in DDR?). Voici comment à partir d'une...

Mettez en scène vos photos

Vous avez une imprimante grand format (A3+) et vous voulez faire des tirages pour une expo? Ou plus simplement recadrer efficacement une photo que vous trouvez plutôt moyenne? Objets dynamiques et...

Créer un emballage de dentifrice

Le designer a 12 secondes pour convaincre le consommateur de faire passer le dentifrice du linéaire au caddy. Photoshop va produire un impact visuel maximum avec : Formes d'outils, Effets de calques,...

Mettre du mouvement dans une photo de sport!

Voici comment booster une photo de sport prise Indoor dans des conditions d'éclairage désastreuses. Attention, il faut quand même que la photo de départ soit intéressante!

Camera Raw : Chassez le naturel…

Camera Raw est un logiciel dans le logiciel. À l'ouverture d'une image vous effectuez toutes les opérations d'amélioration de base. Celles-ci ne seront pas destructives, car enregistrées en Xml, donc...

Un bouton Call to action pour landing page

Un Bouton "Call to action", qu'est-ce que c'est? Si le vous savez vous allez apprendre à en réaliser un. Sinon, vous allez apprendre ce que c'est…

Videz les maillots!

Bientôt les vacances… Comment présenter des maillots de bains si vous n'avez pas de Top-Modèles à disposition? Avec Photoshop, en détourant puis en ajoutant un petit effet d'ombre, vous devriez vous...

Perspective et point de fuite

Prévu initialement pour corriger des perspectives, le filtre Point de Fuite est peu utilisé. Voici pourtant une des ses applications intéressantes pour incruster des images à l'instar du générique de...

Photo produit sur le web : balance et détourage rapide

La balance n'était pas réglée, et de plus vous voulez détourer un produit blanc pour le mettre en ligne sur des fonds de couleurs différentes… Photoshop va travailler super vite.

Un packaging paquet de lessive!

D'accord ce n'est pas de très bon goût, mais au moins ça impacte! Voici comment réaliser cet effet pour vos flyers, cartes de visites, CV (avec ça vous êtes sûrs d'avoir le Job).

Photo rétro avec Lightroom, Photoshop, Camera raw…

On en a tous marre des superbes belles photos numériques bien léchées! On a tous la nostalgie de nos vieux Instamatics, de nos Dacora Dignette et autres appareils offerts par Pif Gadget! Voici comm...

Pêle-Mêle d'images

Une photo pas terrible peut illustrer efficacement un article. Il faut juste savoir utiliser la bonne technique : ici Incrustation de motif avancée.  

Un cheval dans les nuages

Onirisme, rêverie… Les chevaux plaisent. Voici comment les faire voler dans les nuages avec Photoshop.

Logo laid? Logo beau!

La plupart des logos sont nuls à… Bref, voici pourquoi et comment s'en sortir sans être graphiste, avec un exemple qui rassemble tous les défauts.  

Mélange Dessin-Photo avec Photoshop

Encore une fois une photo qui n'est pas extraordinaire, mais qui va pouvoir être utilisée dans un catalogue avec peu de travail sous Photoshop.

Mazflelou c'est flou!

Encore une fois nous allons extraire un personnage du fond, mais cette fois avec un apport de dynamisme. Nous allons en profiter pour voir les avantages des objets dynamiques et du nouveau panneau...

Maquillage digital

Même si le mannequin est sublime, le photographe très bon, et la maquilleuse talentueuse…

  • Quels formats pour le web?

  • Changez les couleurs des objets avec Photoshop

  • Triple outline pour vos textes 1/2

  • Effet Kodackolor old style

  • Mettez en scène vos photos

  • Créer un emballage de dentifrice

  • Mettre du mouvement dans une photo de sport!

  • Camera Raw : Chassez le naturel…

  • Un bouton Call to action pour landing page

  • Videz les maillots!

  • Perspective et point de fuite

  • Photo produit sur le web : balance et détourage rapide

  • Un packaging paquet de lessive!

  • Photo rétro avec Lightroom, Photoshop, Camera raw…

  • Pêle-Mêle d'images

  • Un cheval dans les nuages

  • Logo laid? Logo beau!

  • Mélange Dessin-Photo avec Photoshop

  • Mazflelou c'est flou!

  • Maquillage digital