Une communauté en ligne pour les gens en quête de consommation responsable et d'autosuffisance

francois.douville · Mai 13, 2018, 9:19

Hey guys! Petit update sur Le Peuplier!

On a commencé à rencontrer nos membres dans le vrai monde en face-à-face pour avoir leur feedback et connaitre leurs réels besoins. De très belles rencontres et on continue sur cette lancée car ça nous éclaire incroyablement. Les gens apprécient les échanges de qualité et non de quantité comme sur les groupes FB.

Avec nos formations sur l’autosuffisance et l’écoresponsabilité que les gens peuvent voir sur le calendrier et la carte, on attire pas mal de trafic et de membres! En plus, on attire l’attention des formateurs et c’est exactement ce qu’on veut. Avec le temps, on va avoir assez de crédibilité pour commencer la phase 2.

La phase 2 est devenir un marketplace sur l’éducation vers l’autosuffisance et l’écoresponsabilité. Pour ce faire, on va créer des formations en ligne avec les formateurs. Pour le moment, il y a presque rien qui s’offre en ligne dans ce créneau (sauf Solution Era). On a donc bcp à défricher On a commencé à monter un template de formations pour que les gens reconnaissent notre brand derrière chaque vidéos. C’est donc un gros défi devant nous, mais on est pas mal sûr que ça va répondre à pas mal de gens.

Les software que je vais prendre pour commencer : Memberful (section privé + paiement), Learndash - Plus (formations), Discourse (support), Youtube (hébergement vidéos) et Wordpress. J’ai donc juste Learndash à aller chercher pour à peu près 250$ CAD / année.

J’ai lu les articles dans le blogue sur les formations en ligne. Il y a pas mal d’habitués en formations en ligne ici alors si vous avez des conseils de trucs & conseils à faire et ne pas faire, n’hésitez pas à m’en faire part

Olivier_Lambert · Mai 14, 2018, 3:20

Je crois que tu fais un bon choix avec LearnDash! J’ai récemment fait le tour des plateformes de cours en ligne pour un article que @Marie_Pierre est en train de rédiger et ça me semble être la meilleure option!

francois.douville · Juin 17, 2018, 3:59

Nouveau update 1 mois plus tard!

Maudit que c’est plus difficile et plus long qu’on pensait mettre en place tout ça. On essaie de sortir quelque chose de lean, mais même ça c’est long

Big news : on a mis le forum gratuit pour tout le monde, pour toujours!!! Yessss la gratuité, c’est ça qui va payer notre loyer @mariemichele.doyon Non sérieux c’est une très bonne décision qu’on a pris. Ça va nous permettre de nous faire connaitre bien plus rapidement et on pourra bien plus faire grossir la communauté!

En même temps, on a mis aussi notre plan d’action sur la page d’accueil du Peuplier.

Concernant les softwares, gros update : j’ai laissé de côté Memberful. Ce logiciel de membership est très bien fait pour commencer et si tu ne veux RIEN CUSTOMISER!! Tu peux d’aucune façon : traduire le signup/ login/checkout pages, changer l’heure et la fréquence d’envoie des courriels et créer des courriels autres que les templates déjà mis (au moins tu peux les traduire lol), les mots de passe sont pas enregistré dans Wordpress faque quand tu veux changer de software de membership, tu te fais chier… ça coute cher… et plus encore!

J’ai donc changé pour Activemember360. Coute moins cher, parfaite intégration avec ActiveCampaign (d’où le nom )… on parle entres autres d’automation… et toute est customisable.

By the way, je voulais préciser que j’ai trouvé un meilleur logiciel de builder pages que Thrive Themes -> Elementor. En plus c’est moins cher. Bcp moins de bug et plus simple d’utilisation. Pas tous les thèmes fittent bien avec Elementor par contre, les mieux sont ceux-là. J’ai pris GeneratePress.

Faque à date ma machine de guerre ressemble à

Thème WP : GeneratePress
Page builder WP : Elementor
Membership : Activemember360
Courriel : ActiveCampaign
Forum : Discourse (pour mettre les commentaires sur WP : le plugin Discourse est parfait!)
LMS : LearnDash
Plus une dizaine de plugins WP…

J’ai aussi travaillé fort dans les derniers jours pour pondre un site test pour la plateforme de cours en ligne. Je suis très satisfait de LearnDash. Toute ou presque est customisable. J’aimerais bien avoir votre avis sur le site test, cliquez ici! Vous pouvez vous créer un compte test, je vais anyway toute les supprimer après pcq cest un sous-domaine test. Sans ça vous pourrez pas voir les formations que j’ai restreint à ceux ayant le tag test. Y’a une couple d’affaires qui seront pas dans le vrai site, comme le menu, c’était pour retrouvé les pages facilement.

J’ai aussi une question de code, dans la page d’accueil, en MOBILE VIEW, vous pouvez vor que j’ai essayé de mettre en design une formation et demie genre pour montré qu’on peut swiper de gauche à droite. Sauf que la formation coupé à la moitié, si tu swipe pas à la bonne place, tu peux voir que le site décale pcq ca prend en compte comme si la formation était en entier, et non juste la moitié. Comment faire pour considérer que la formation soit juste la moitié et que ca décale pas le site???

Avant

Après

Merci je prend tous les commentaires!!

Pascal_Cabana · Juin 17, 2018, 12:19

pour la version PRO 10% rabais avec FB10

francois.douville · Juin 17, 2018, 12:58

Fallait bien je le dise trop tard haha

Pascal_Cabana · Juin 17, 2018, 2:45

Je suis plein de ressource

Olivier_Lambert · Juin 17, 2018, 7:45

Tu dois mettre le container parent en overflow:auto; et mettre sa width à 100%.

Ça va donner ça:

Si tu veux faire disparaître la barre de scrolling horizontale, met “overflow” à “hidden”.

Mais si tu fais ça, on ne pourra plus scroller.

Si tu veux garder le comportement de scrolling tout en enlevant la scroll bar, tu dois faire ça en JavaScript:

@Alexandra a commencé à gosser avec elementor il y a quelque temps. As-tu testé Divi? Comment ça se compare selon toi? Je risque de tester prochainement .

francois.douville · Juin 17, 2018, 9:47

Merci Olivier, j’ai regardé la réponse et gosser pendant une bonne vingtaine de minutes. J’pense pas savoir lequel est le container parent et l’enfant

J’veux préciser que le nombre de slides, je l’ai setter à 2. Peut-être pas ce qu’il faut faire…

Je peux aussi t’envoyer les accès en privé?

Oui j’avais commencé avec Divi au début, après Thrive themes et maintenant Elementor. Le best est elementor selon moi. J’aime juste pas la façon dont Divi est monté. Elementor ressemble bcp à Thrive themes sur l’interface mais avec les bugs en moins et je crois plus d’options encore!

Olivier_Lambert · Juin 17, 2018, 10:07

Le parent est celui-ci:

<div class="elementor-main-swiper swiper-container swiper-container-horizontal" style="cursor: -webkit-grab;">

Tu pourrais donc te faire une media query sur .swiper-container lorsque la largeur est inférieure à 464px.

@media (max-width: 464px){
    .swiper-container {
        overflow:hidden;
        width:100%;
    }
}

francois.douville · Juin 17, 2018, 10:23

Quand je met width:100%; ça disparait complètement!

EDIT : finalement y se passe juste rien haha on dirait il est en double, comme s’il était déjà là? et je l’ai mis à un seul endroit!

Marie_Pierre · Juin 18, 2018, 12:19

Yeah !!! Je suis trop contente de lire ça.
Vraiment nice le look que ça donne (je suis sur desktop, je n’ai pas vu de bugs)!

Olivier_Lambert · Juin 18, 2018, 2:26

Heummmmm je me suis trompé de sélecteur je crois.

Essaie ça:

    .elementor-skin-carousel {
        overflow:auto;
        width:100%;
    }

Je l’ai testé et tu peux enlever la media query aussi, c’était pas nécessaire finalement.

francois.douville · Juin 18, 2018, 7:15

Génial ca marche! Mais je comprend pas comment t’as fait pour trouver le container parent? J’aimerais faire la meme chose avec cette section là, j’aimerais qu’on puisse scroller au lieu de changer de section. C’est plus bas dans cette page là.

Olivier_Lambert · Juin 18, 2018, 7:36

CTRL + SHIFT + I pour faire apparaître l’inspecteur d’élément.

Et ensuite tu peux utiliser la petite flèche en haut à gauche pour t’aider à trouver ce que tu cherches.

francois.douville · Juin 18, 2018, 9:57

Oui je sais. En tout cas j’ai trouvé le container parent .learndash_lessons, mais sa fait rien en ajoutant un overflow:auto et width:100%. Peut-être à cause que c’est en 2 pages et ca fait pas le lien?

Olivier_Lambert · Juin 19, 2018, 1:40

Non en effet, le CSS ne contrôle seulement ce qui se trouve DÉJÀ dans le DOM (les éléments HTML chargés dans le navigateur).

Je ne vois pas le truc de module sur la page, mais en tout cas LearnDash a vraiment fait une belle job! Va falloir qu’on vous passe en étude de cas ça avance vraiment bien votre projet

francois.douville · Juin 19, 2018, 2:50

Merci! Le design c’est tout monter custom. J’utiliser LearnDash que pour le tableau qui montre les modules, qui indique compléter avec le crochet et qui permet d’embarquer dans la vidéo suivante lorsqu’une vidéo est terminée.

Et j’ai finalement mixer tout ça avec Woocommerce pour permettre de faire des bundles. L’intégration avec Learndash permet de mettre le controle du paiement à Woocommerce et ça ajoute automatique un bouton d’achat que Learndash appel “Suivre ce cours”. Par contre, j’aimerais modifier l’emplacement de ce bouton. Parce qu’il est esthétiquement très mal placé lol. Comment je fais ça? J’imagine je dois jouer aussi dans le html?

Dans cette page là.

Dernière question, dans Woocommerce il y a la page par défaut “Boutique” (Shop). Il y a un setting pour mettre un autre URL et même décider de la remplacer par une autre page mais comme c’est une page single archive, c’est impossible de la remplacer avec un page builder.

Tout le monde a le meme problème :

The shop page is essentially hijacked by WooCommerce and the normal page loop is completely bypassed. This is what makes it difficult to do anything in Elementor on this page.

J’aimerais la remplacer par ma page où il y aura toutes mes formations et où j’ai lutter pour avoir un beau design haha

J’ai trouvé cette solution là :

Additionally ePro provides a WC widget of which you can build out your own shop page grid and link to that in your menu vs the defined shop page that WC uses (the page still exists but is not used). This is a small challenge in that you’ll also likely need to add custom hooks in your child theme to address the various links back the shop page, i.e. from checkout, cart, post-checkout, etc. so they link to your custom Elementor built shop page vs the one WC has defined (remember, it is there but unused). I’ve done this a few times but you have to search up the hooks to filter those urls and I don’t remember specifically what they all are but can be found fairly easily in the WC documentation.

Je pense que c’est ce document là? Mais je sais vraiment pas quoi faire pour continuer…

Olivier_Lambert · Juin 19, 2018, 5:05

Tu vas faire ça en CSS! J’ai ajouté ça à l’élément:

    display: inline-block;
    margin: 0 0 30px 35px;

Pour que ça donne ça:

Je te recommande d’enlever un peu de marge au dessus du bouton aussi pour que les espaces soient constants!

Pour ton problème de checkout page, il y a une solution plus simple donné sur la page que tu as proposé:

This isn’t an ideal solution but I’ve found if you’re using Elementor Pro you can create a template in My Library, include the WooCommerce Checkout shortcode [woocommerce_checkout], then paste the template’s shortcode into the Checkout page. This means you don’t have to worry about hooks to change the Return to shop URL. Still hacky but a simpler hack than the alternative.

Sinon, il faut créer des fonctions PHP filtres pour rediriger automatiquement à ta page et je ne suis pas super bon avec les fonctions WC

francois.douville · Juin 19, 2018, 7:26

Merci pour le code CSS. C’est ok pour le monter un peu mais si je veux le mettre complètement à une autre section. Ça va changer de div, donc faut je modifie le html? Comment?

Et merci pour l’autre solution, j’avoue que c’est plus simple et ça marché! J’ai renommé la page boutique et changé l’URL pour https://test.lepeuplier.ca/formationss/

Là y’a 3 sections qui s’ajoutent automatiquement que je veux pas -> Breadcrumb, titre et les produits.

La page-id c’est 845 alors j’ajoute ce code CSS et ça marche pas

.page-id-845 .woocommerce-breadcrumb {
display:none;
}

Olivier_Lambert · Juin 19, 2018, 9:07

3 solutions:

Sois-tu édites le fichier PHP de ton thème
Sois tu déplace l’élément après le chargement de la page en JavaScript
Soit qu’il existe une façon de faire spécifique à LearnDash!

Pour ton problème de sélecteur avec le page id, c’est sur que ça ne marchera pas puisque tu n’as pas d’élément avec la classe page-id-845 dans ta page…

Voici les classes de ton élément body:

class="archive post-type-archive post-type-archive-product wp-custom-logo post-image-below-header post-image-aligned-center sticky-menu-fade woocommerce woocommerce-page woocommerce-no-js  no-sidebar nav-below-header fluid-header one-container active-footer-widgets-3 nav-aligned-left header-aligned-left dropdown-hover elementor-default"

Prend le sélecteur qui fait le plus de sens et assures toi que ça n’affectera pas les autres pages.

Je crois que tu te sauverais pas mal de temps de gossage de faire le petit cours de CSS sur CodeAcademy ou encore celui de Karelle qu’on a ici!