Lavender : thème wordpress gratuit au design féminin

lavender theme wordpress gratuit 2018 féminin blog

Lavender : thème wordpress gratuit au design féminin

Ces derniers jours, j’ai trouvé un thème wordpress gratuit très sympa et complet en version gratuite développé par premium coding. Trouvant le design un peu fade en version gratuite, je me suis amusé à le re designer pour créer une version féminine! J’en ai aussi profité pour le traduire en majeure partie en français. et devinez quoi? je vous le propose aujourd’hui en téléchargement gratuit.

Le principe est simpe, il suffira de l’installer sur votre blog wordpress, il sera en version simple dans un premier temps, puis il faudra y ajouter ma feuille de style CSS personnalisé qui surchargera le design existant. (pas de panique, tout est très simple et je vous explique les différentes étapes pour configurer au mieux votre thème.)

 

DEMO

 

Lavender est un thème responsive (il s’adapte à tout les supports, smartphones, tablettes et ordinateurs) :

et vous pouvez l’utiliser en deux formats :

  • Format grille
  • Format classique

lavender theme wordpress féminin gratuit graphicart

Vous pourrez faire votre choix une fois le thème installé sur votre blog.

Le thème sera livré avec :

  • Un fichier .zip qui est le thème à installer sur wordpress
  • Une bannière au format photoshop .PSD (à modifier par vos soins afin de mettre le nom de votre blog)
  • Une deuxième bannière .PSD pour le logo du menu (quand on scroll vers le bas)
  • Le fichier typographique de la bannière
  • Le fichier CSS personnalisé qui transformera le thème de base


D O C U M E N T A T I O N

INSTALLATION

// Nous conseillons toujours de faire une sauvegarde de votre thème ou de vos données avant d’installer quoi que ce soit sur votre blog. Evidemment, tout à été installé et testé à deux reprises par mes soins.  Je ne serais en aucun cas responsable d’un dysfonctionnement ou d’une maladresse de votre part. //

  • Installer votre thème à travers le menu apparence > thèmes > ajouter et glissez y le fichiers lavender-graphicart.zip
  • Activez le
  • Le thème s’accompagne de plugins à installer, il suffit de se rendre dans le menu apparence > install plugins 
  • Procédez à l’installation et à l’activation de ces plugins comme qui suit :

  • Ouvrez le fichier Graphicart-design.css, copiez l’intégralité du code (ctrl+a) et rendez vous dans le menu apparence > thème options > custom CSS, collez y tout le code (vous pouvez remplacer celui existant s’il y a comme l’image qui suit)

 

 

  • Enregistrez « save changes »
  • Rendez vous sur votre blog, à cette étape, le design devrait être en place.

CHOISIR LA MISE EN PAGE

Pour choisir votre mise en page rendez vous dans apparence > theme options, dans l’onglet général, vous aurez deux cases à cocher :

  • Grid layout: correspond à la mise en page « grille » numéro 1 sur la photo ci dessus
  • Default layout: correspond à la mise en page classique numéro 2

Si vous choisissez une mise en page « grid layout », je vous conseille de régler le curseur sur « 20 » juste en dessous dans « lenght of the excerpt » afin d’afficher le thème comme sur ma demo. (cela correspond au nombre de mots à afficher dans la miniature en page d’accueil).


METTRE EN PLACE VOTRE MENU

Dans apparence > menu, dans le menu « main » ajoutez toutes vos catégories et items de menu désirés, puis cochez les cases comme l’image suivante :

Enregistrez et tout devrait être en place!


AJOUTER VOTRE BANNIERE

Dans le menu apparence > theme option > logo, vous pouvez ajouter votre bannière modifié. Dans « logo » et « retina logo » ajoutez la bannière présente sur la demo.

Dans « custom scroll logo » vous pouvez mettre la version de la bannière en noir, ce qui sera plus lisible en petit.


INSTALLER SON INSTAGRAM DANS LA SIDEBAR

Pour installer votre instagram en sidebar comme sur la demo (ou encore dans le pied de page), vous devez avoir installé les plugins au préalable, et plus particulièrement le plugin instagram feed

  • Tout d’abord configurez votre plugin en allant dans extensions, sous instagram feed cliquez sur settings
  • Dans l’onglet configure, cliquez sur le bouton instagram bleu afin de vous connecter et récupérer l’ID et l’access token
  • Copiez collez les informations récoltés dans les champs prévus à cet effet (juste en dessous) puis enregistrez les modifications
  • Maintenant, pour l’installer dans la sidebar, rendez vous dans apparence > widgets
  • Dans le module « sidebar main » collez le code suivant : [instagram-feed], enregistrez et admirez le résultat!

Pour installer votre instagram en long dans le pied de page :

Rendez vous dans apparence > theme options

Dans l’onglet général, scrollez vers le bas, vous aurez un encart « display instagram block » activez le bouton sur « on »

Enregistrez et rendez vous sur votre blog pour vérifier!

(le module instagram dans la sidebar et le module instagram en pied de page ne sont pas liés, vous pouvez tout à fait ne pas activer celui du pied de page et le garder simplement en sidebar ou inversement)


CONFIGURER VOS RESEAUX SOCIAUX

Tout d’abord il faudra ajouter vos liens de réseaux sociaux dans le menu apparence > theme options > social icons

Vous pouvez ajouter, supprimer des icônes afin d’adapter à vos propres RS.

Dans le champs « icon » vous pouvez chercher au préalable le nom de l’icône que vous désirez utiliser sur fontawesome, par exemple, pour utiliser une icône je tape « envelope » dans la barre de recherche de fontawesome, et je choisi mon icône, elle s’appelle « envelope ».

Dans le champ « icon » je n’ai qu’à a rajouter « envelope » à la suite du « fa-«  ce qui me donnera au final « fa-envelope », le code correcte qui me permettra d’afficher l’icône de l’enveloppe dans mon pied de page.

Si vous voulez y lier votre adresse email afin qu’au clic sur l’enveloppe on puisse vous adresser un mail, dans le champ « link »  ajoutez simplement mailto:votreadresseemail.com enregistrez et testez!

Pour faire apparaître vos réseaux sociaux en pied de page comme sur ma demo en pied de page, rendez vous dans apparence > widgets et faites glisser le widget « Lavender premium social widget » dans footer sidebar 2


AJOUTER LE MODULE NEWSLETTER

Vous devez avoir au préalable installé les plugins requis, plus particulièrement mailpoet. Le premier formulaire d’abonnement est déjà crée dans l’onglet de votre menu mailpoet > réglages onglet formulaires (ici ne touchez à rien si vous voulez qu’il apparaisse comme sur ma demo)

Dans l’onglet mailpoet > réglages > essentiels réglez votre adresse email et vos paramètres comme souhaité.

Pour faire apparaitre votre module d’abonnement comme sur ma demo en pied de page, rendez vous dans apparence > widgets et faites glisser le widget « formulaire d’abonnement mailpoet » dans footer sidebar 2

Pour aller plus loin, il faudra créer et configurer le design de votre newsletter que vous abonnés recevront, je vous ai trouvé une vidéo explicative en français (qui doit date un peu, mais le principe reste le même), ça peut aussi être une idée de futur tutoriel, qu’en pensez vous?

Pour cela, rendez vous dans mailpoet > newsletter et modifiez le guide d’utilisation afin de vus familiariser avec les outils et le template.


AJOUTER VOTRE FACEBOOK LIKE BOX

Vous devez avoir au préalable installé les plugins requis, plus particulièrement responsive facebook page plugin.

Dans apparence > widgets faites glisser le widget « facebook page plugin » dans votre sidebar et configurez le avec vos informations et comme bon vous semble, enregistrez.


Voilà! à ce stade vous devriez avoir un thème tout beau tout neuf en place, n’hesitez pas à me laisser un commentaire si vous l’avez installé afin que j’aille voir! Et si vous avez des questions, en commentaires.

Vous n’avez pas encore de blog wordPress? Vous souhaitez que je m’occupe d’installer wordpress et ce thème pour vous? Pas de problème! contactez moi via la demande de devis.

Si le thème vous a plu, vous pouvez toujours me remercier pour ce design 🙂



Pas de commentaire

Poster un commentaire