Créer un site “One Page” WordPress vite et bien avec SiteOrigin

En tant que Webmaster, parfois il arrive d’être totalement à court d’inspiration pour créer un beau site et efficace. En effet, à force de créer pour différents clients, on épuise petit à petit sa jauge de création et on en finit à faire plus où moins toujours les mêmes sites. Partant de ce constat, j’ai commencé à m’intéresser à des pages pré faites customisables à souhait, pour éviter de partir directement d’une page blanche (parfois cela peut faire peur un WP tout vide à remplir ^^).

Etant une fervente utilisatrice du plugin SiteOrigin (page builder concurrent de Elementor ou encore Beaver) , je me suis donc tournée très naturellement vers les contenus gratuits, qu’il proposait. Surprise ! Non seulement il y avait des pages toutes prêtes mais aussi des sites à customiser. Et c’est là qu’une idée a jailli de mon esprit : et si je me mettais au défi de créer un One Page en moins d’un après midi ? Est-ce seulement possible ? (Bon vous vous doutez que la réponse est oui, sans quoi l’article se serait appelé, “tenter de faire un onepage en un aprem, c’est pas gagné” … mais c’est peu vendeur)

Ok, donc vous êtes une personne en mal d’inspi, un entrepreneur qui souhaite du jour au lendemain assurer la présence en ligne de son entreprise mais qui ne sait pas comment faire, un utilisateur WordPress sans compétence particulière en web design, un peu des trois ? Voici une super solution pour créer votre site internet One Page, très rapide pour avoir un site UNIQUE et PRO. Pas besoin de desserrer les cordons de votre bourse, seule l’huile de coude est nécessaire !

 

CRÉER VOTRE SITE ONE PAGE EX-NIHILO SUPER RAPIDEMENT ? C’EST PARTI !!! 

Afin de bien démarrer ce projet de site web, il a quelques pré-requis afin d’éviter de perdre du temps sur des détails chronophages. En voici la liste : 

• Un site WordPress vide et installé sur votre hébergement
• Votre logo en taille 250×70 et 415×120
• Votre logo pour le favicone en taille 512×512 (Au fait c’est quoi un favicone ?)
• Vos polices d’écritures déjà choisies 
• Les codes hexa des couleurs liées à votre logo
• Une bannière ou image header d’une largeur minimum de 1280
• Différentes images, photos, vidéos prêtes à être intégrées sur votre futur site
• Le contenu que vous souhaitez insérer dans le site, déjà écrit, prêt à être mis en forme dans votre nouveau site

Pour ma part voici ce que j’ai utilisé :

• FONTS : Head OREGANO – Main – ROBOTO
• COLO HEXA : orange clair ff9955 – orange foncé FF6600 – Gris moyen 58595b – Gris foncé 333333

 

Installer sur WordPress le futur One Page par SiteOrigin

Voilà, votre futur site a son hébergement, vous avez bien installé sur ce dernier WordPress (la dernière version de préférence) et vous voici connecté à votre panel WordPress, qui est vide. 

(Vous ne savez pas comment obtenir un hébergement et comment y installer WordPress ? Voici un article qui vous apprendra à le faire en un tour de main et un article dédié à WP Serveur et son installation ultra rapide de site). 

Ouvrez un nouvel onglet dans votre navigateur et rendez vous sur le site de SiteOrigin. Une fois sur la page d’accueil, vous n’avez plus qu’à aller dans le menu, glisser sur THEME, puis dans le sous-menu choisir SITE PACKS – Fully prebuildt website, et cliquez. 

Une fois dans la liste des sites pré-construits que propose SiteOrigin, scrollez jusqu’à la deuxième page et sélectionnez le site MONO (le dernier des 16 proposés). Il vous sera bien sûr possible d’en choisir un autre, selon vos goûts, cependant, celui utilisé pour ce tuto est MONO. Etant d’ores et déjà un One Page, libre à vous, une fois la méthode acquise, de tout refaire avec cette fois un autre modèle de site.

Une fois sur la page, cliquez sur le gros bouton bleu de téléchargement se trouvant en haut à droite, enregistrez le fichier ZIP dans un dossier dédié à votre site web, sur votre ordinateur. (Idéalement le même dossier où vous avez rangé les photos, logos, textes, etc. L’OR-GA-NI-SA-TION est le maître mot !)

Le fichier téléchargé, retournez sur votre onglet WordPress afin d’installer votre tout prochain site. Pour ce faire, rendez vous sur la page des ajouts de plugins (extensions)

Dans la page “Ajouter des extensions”, cliquez en haut à gauche sur “Téléverser une extension”

WordPress vous indique aussitôt que si on possède un plugin au format .zip il est possible de l’upload ici. Ce que nous allons faire immédiatement en glissant-déposant dans l’encart “Choisir un fichier” l’extension que vous avez précédemment téléchargé. 

Une fois le fichier déposé dans l’encart prévu à cet effet, vous n’avez plus qu’à cliquer sur installer pour démarrer l’installation du site. WordPress vous demande alors si vous souhaitez activer l’extension, la réponse est oui bien sûr ^^ 

Puis une nouvelle page va apparaître, créée par SiteOrigin qui vous demande si vous êtes bien sûr de vouloir déployer le nouveau site pack. Pour cela, il vous est demandé de taper “Accept” dans l’encart blanc, puis cliquez sur “Start import”

En validant, tout le site pré-construit va se dézipper. Vous devrez attendre la fin de l’opération pour pouvoir retourner sur le backoffice de votre site. 

L’opération réussie, vous allez cliquer sur “Return to Dashboard” afin de pouvoir customiser votre tout nouveau site. 

Vous noterez que votre site est désormais entièrement en anglais. Pour les moins anglophone d’entre vous, pas de panique, nous allons nous occuper de suite de ce petit désagrément. Dans le menu sur votre gauche allez dans “Settings”, puis “General”

La page “General Settings” apparaît alors, et vous allez pouvoir faire la modification nécessaire dans le menu déroulant appelé “Site Language”. Sélectionnez Français (ou tout autre langue pour les plus audacieux d’entre vous 😜), puis modifiez les éléments dans “Site Title” en y insérant le titre de votre site, en dessous votre tagline/slogan ou du moins la phrase associée à votre entreprise pour décrire votre activité. Il n’est pas nécessaire de faire d’autres modifications à ce stage, WordPress et SireOrigin ayant déjà tout pré-rempli pour vous. 

Validez la modification de ces changement via le bouton bleu en bas de page. Rendez vous maintenant dans le menu “Extensions”, les plugins de votre site vont apparaître et vous allez voir une liste que SiteOrigin a déjà installé pour vous afin de réaliser le One Page. Vous pouvez désactiver l’extension “SiteOrigin Importer [MONO]”, n’étant plus nécessaire, vu que votre installation est terminée. Vous pouvez également quitter l’onglet avec la page de SiteOrigin si toutefois cette dernière était encore ouverte. Nous n’en n’aurons plus besoin. 

Vous souhaitez voir à quoi va ressembler votre futur One Page ? Allez, nous allons jeter un rapide coup d’oeil histoire de s’habituer au design. Sur votre menu WordPress, tout en haut à gauche vous avez une icône de maison avec le nom de votre site web, glissez la souris dessus, afin de faire apparaître la section “Aller sur mon site”, faites un CTRL + clic gauche, un nouvel onglet s’ouvre et TADAAAA votre tout nouveau site à customiser s’affiche ! 

Je vous laisse le temps pour découvrir ce tout nouveau design, et vous imprégner des différents éléments que nous allons customiser ensemble, tout de suite après. 

Maintenant, nous allons passer à une partie plus fun de ce tuto, soit : la customisation de votre site One Page. 

Avertissement : à partir de maintenant, vous allez devoir utiliser les images, photos, textes que vous aviez au préalable créé pour les implémenter dans votre modèle de site. Si vous n’avez pas tout préparé, vous allez perdre beaucoup de temps en réglage et découpe d’image par exemple. ;-)

 

Configurer le thème de son site One Page

Rendez vous dans le menu WordPress à gauche, sur l’onglet “Apparence”, puis “Personnaliser”. La page de customisation de thème s’ouvre et nous allons pouvoir nous atteler à la tâche.

Sur le menu de gauche vous avez les différents éléments à modifier, à droite, votre site, où vous verrez apparaître au fur et mesure les différentes modifications que vous allez faire. 

Rendez vous en premier lieu sur l’onglet Personnalisation > Theme Settings > Branding. Ici vous allez pouvoir modifier le logo MONO par le vôtre. Le premier devra être celui en dimension 250×70, le second sera celui aux dimensions 415×120. En scrollant sur la page, vous pourrez noter que votre logo diminue, ainsi que la barre de menu, mais reste “collée” au haut de votre site, permettant à vos visiteurs d’avoir toujours à leur disposition l’intégralité du menu. 

Ensuite, vous allez pouvoir choisir si vous souhaitez ou pas garder le titre de votre site “Site Title” et si vous souhaitez ou pas afficher la phrase de description ou slogan de votre entreprise. A vous de décider selon vos préférences. Enfin, en dernier lieu, vous allez choisir 2 couleurs que vous allez utiliser comme couleurs d’accentuation : une en version claire, une en version foncée. L’idéal est de ne choisir qu’une seule couleur et de prendre une variante de celle-ci plus foncée pour la seconde.. 

Passons maintenant au choix des polices d’écritures. Si vous n’avez pas de choix encore préétabli et que vous souhaitez en savoir plus sur les polices d’écritures à utiliser pour parfaire votre site, je vous conseille un de mes précédents articles qui en fait mention. Si toutefois vous avez une font custom que vous souhaitez impérativement utiliser à la place de celle de Google Fonts, lisez ce super article de Lycia qui vous explique tout !

Pour aller faire ces modifications, vous devez vous rendre dans la section Theme Settings > Fonts. Il vous sera demandé en premier lieu de choisir la police d’écriture principale, celle que vous utiliserez partout et qui sera utilisée dans les paragraphes de texte sur votre site (voir image – Police 1).

Pour ma part, j’ai choisi la police Roboto, qui est très simple et qui s’adapte à tout. Dans un second temps, vous allez choisir, la police d’écriture qui sera utilisée pour vos titres. Pour un peu de fun, j’ai choisi une police calligraphique, comme si on utilisait un gros feutre pour écrire : Oregano. Dans la mesure où cette police d’écriture sera souvent plus grosse que le reste des textes de votre site, vous pouvez vous permettre un peu de fantaisie, cela permet de mettre en évidence des titres, sous-titre, phrases importantes, etc. (voir image – Police 2).

En troisième lieu, vous allez choisir une police d’écriture qui sera utilisé pour de petites informations, ce peut être par exemple votre footer, des légendes sous les photos, etc. Enfin, la dernière police d’écriture sera celle qui sera utilisée pour votre menu. Vous avez deux solutions qui s’offrent à vous, soit choisir la principale ou une de ces variantes, ou choisir la seconde ou une de ces variantes. A vous d’essayer et de choisir, celle qui sera la plus lisible pour vos visiteurs. Pour ma part, j’ai choisi la police principale en variante condensée : Roboto Condensed. (voir image – Police 3)

Cela étant fait, nous allons continuer sur la même page, en scrollant en bas du menu. Vous voici confronté au choix des couleurs de polices d’écritures. Ré-utilisez tout simplement le choix de couleurs que vous avez déjà mis en place précédemment. Rappelez-vous que les couleurs que vous allez choisir doivent être lisibles pour vos interlocuteurs, et ne pas être trop agressives visuellement.

Enfin, les couleurs doivent toujours avoir un rapport avec votre logo et charte graphique, sous peine d’avoir un site clownesque. De toutes façons, vous pouvez essayer différentes combinaisons, avant d’arriver à la bonne et publier votre rendu. Ce qui est principalement intéressant avec le customiseur de thème WordPress, c’est que vous avez le rendu en live de vos modifications. Ça évite d’avoir à sauvegarder 120 fois par minutes, et regarder à chaque fois le rendu sur le site (à la bonne vieille époque *soupir* …)

Pour ce qui s’agit de votre texte principal, l’idéal est de choisir du noir ou du gris anthracite. Ma couleur préférée est le #333333, pas totalement gris, mais pas noir non plus, ce qui donne un peu de changement, sans en arriver à un site loufoque 😁.

Ensuite, dans la section “Icons” vous avez la possibilité de personnaliser avec vos propres images les icônes du menu pour mobile. Je vous conseille de ne pas y toucher à moins de savoir ce que vous faîtes, dans la mesure où le thème en possède déjà. Qui plus est vous risquez d’intégrer des images de mauvaises qualités si vous ne les dimensionnez pas correctement. 

Le module d’après “Page Structure” vous permet de modifier la structure de votre page, notamment la barre de menu que vous pourrez calibrer à votre convenance à gauche ou à droite. Cependant, notre site One Page n’en possédant pas, nous ne nous arrêterons pas sur ces réglages. 

Passons sans plus tarder aux modifications sur le “Header”, le chemin pour y accéder reste toujours à la suite des réglages “Thème Settings”. Le header du site correspond à la grande barre avec votre logo et le menu. Si vous souhaitez ajouter plus tard des widgets en plus dans votre header, je vous conseille d’aller lire l’article de Lycia qui vous explique la démarche à suivre, tout en sachant que SiteOrigin vous propose d’en ajouter certains dans la section Widgets du customiseur de thèmes. 

Revenons à notre One Page ! J’ai décidé de choisir en “Header layout” par défaut. Vous avez également la possibilité d’ajouter une phrase en dessous du header principale. Notre site actuellement ne l’affichera pas car nous avons juste en dessous une grande image. Mais cela reste une possibilité. Ensuite, vous pouvez changer la couleur de fond du header, ainsi que la couleur de la bordure, puis modifier la taille du header, de la bordure, l’espace entre les widget, et la marge en dessous.
A ce niveau ci, encore une fois, à moins de savoir précisément ce que vous souhaitez faire, je vous conseille de ne pas modifier ces réglages, car tel que je trouve que le header est bien équilibré, autant le laisser tel quel ! J’ai juste changé la couleur de la bordure en orange foncé, histoire d’apporter une touche de couleur discrète.  

Passons ensuite aux modifications de la “Navigation”. Il vous suffit de cocher ou décocher les options proposées. Vous pouvez retirer la possibilité de faire une recherche dans votre site, cela est représenté dans le header par une petite loupe. Je ne vois pas l’utilité d’avoir une barre de recherche sur un One Page, donc je la décoche. Après l’option “Sticky menu” est cochée, cela permet d’avoir votre menu qui reste accroché au haut de votre site. Comme je l’ai mentionné plus haut, je trouve ça vraiment bien, car votre visiteur aura la possibilité de garder le menu quoi qu’il arrive.

Puis, la case suivante permet de diminuer la barre de header lorsque l’on descend sur votre page. Pareil, c’est une option que j’aime beaucoup, car même si votre menu et logo sont conséquent, ils rapetissent une fois que l’on descend sur votre site, évitant de rendre la lecture désagréable. L’option suivante permet de pouvoir naviguer dans les articles de votre site. Dans la mesure où nous faisons un One Page qui, par définition, n’a qu’une seule page, il n’y aura pas d’article. Cependant, vous pouvez avoir une section blog accessible par le menu par exemple, donc laissez dans ce cas l’option cochée. Puis, l’option “scroll to top” est cochée. Elle se caractérise par une flèche qui apparaît en bas à droite sur la page de votre site, permettant à votre visiteur de remonter tout en haut de la page lorsqu’il navigue dessus. C’est pratique, autant le laisser activé.

L’option suivante vous propose de l’afficher également sur la version mobile ou responsive du site. A vous de choisir si vous souhaitez ou pas l’afficher. Si vous souhaitez connaitre le résultat sur mobile il vous suffit de changer les options d’affichage en bas à gauche. Pour finir l’option “Smooth scroll” permet d’avoir un défiler du site plus homogène et évite d’avoir des à-coups lorsque quelqu’un navigue sur le site. Je vous recommande de laisser l’option activée, cela rends une utilisation du site plus fluide et agréable pour votre lecteur. 

L’option suivante est la modification de l’espace “Blog” mais je ne m’arrêterais pas dessus, dans la mesure où nous réalisons un One Page. 

Puis, nous avons la possibilité via l’onglet “Responsive” de modifier l’affichage du menu en responsive. Pour ma part, je le garde tel quel, sauf les couleurs de la police, afin de rester dans la même charte graphique. La modification n’est vraiment pas nécessaire, car ce que SiteOrigin propose est plutôt bien fait et s’adapte à peu près à tous les styles. 

 Nous arrivons aux dernières modifications à faire dans le “Theme Settings”, la modification du “Footer”. Vous noterez que vous avez un affichage dynamique qui se fait directement dans le footer, donc pas besoin de modifier l’année et le nom du site. Cependant, vous pouvez si vous le souhaitez ajouter du texte en plus devant ou derrière, et modifier le terme “Copyright” pour ce qui vous conviendra.

Il ne vous sera pas possible de retirer la mention “Theme by SiteOrigin” dans la version gratuite. Si cela ne vous convient pas, vous pouvez passer en version premium ( $29/an ). Pour le footer, à vous de choisir les couleurs qui vous conviendront le mieux. Pour ma part, je les garde telles quelles, à part la couleur de la police pour les liens que je vais modifier en orange.

Ensuite, vous pouvez également modifier la taille de la bordure ainsi que la taille du footer en lui même. Je le trouve un peu gros et trop espacé, de facto, je modifie la taille de 40 à 20 pixels pour l’espacement au dessus et l’espacement sur les côtés. Et je m’arrête là pour les modifications esthétiques du footer. Et nous en avons fini pour les modifications esthétiques du thème. 

Passons désormais à l’onglet suivant qui est “Page Template Settings”. Vous allez ici pouvoir modifier l’apparence des pages de résultats de la recherche, ainsi que l’apparence de page d’absence de résultat. N’ayant pas besoin d’avoir de page de recherche, dans la mesure où nous avons qu’une seule page, il n’est pas nécessaire de faire de modification ici. 

Puis, la section “Identité du site” vous permettra de modifier l’apparence extérieur de votre site. Il va falloir mettre en place votre logo carré, qui représentera votre site sur les réseaux sociaux par exemple, y insérer le titre de votre site ainsi que votre slogan, et enfin modifier le favicone du site. Dès que les modifications seront faites, l’onglet de votre page prendra automatiquement le logo que vous avez choisi. Vous pourrez ainsi vérifier si votre image correspond bien à ce que vous souhaitiez. Pour rappel si vous avez besoin d’aide pour votre favicone, vous pouvez lire l’article d’Anne-C qui vous explique tout cela très bien ;)

Puis, grâce à l’onglet “Couleurs” vous pouvez modifier la couleur de background de votre site. Je vous recommande de toujours garder cet arrière-plan dans différentes nuances de blanc-gris afin de rester lisible et agréable pour votre lecteur. Vous pourrez par la suite, selon les blocs, faire des aplats de couleurs, mais à petites doses. Par conséquent, je ne modifie pas non plus la section suivante qui est “Image d’arrière plan”, j’ai encore des cauchemars de site clients qui en avait mis … Aaaaah les Internets des années 90

Petit conseil d’une webmaster pro qui a eu des clients qui m’amenait ↑ ce genre de site ↑, et ne comprenaient pas pourquoi personne n’allait dessus et achetait : Quelques soient vos goûts, bons ou mauvais qu’importe, votre charte graphique, votre site, vos designs doivent PLAIRE AVANT TOUT A VOS CLIENTS, jamais à vous. Evidemment, c’est mieux d’aimer ce qu’on fait, mais ce n’est pas vous qui allez acheter vos produits 😉

 

Passons désormais à la modification de votre menu. Idéalement à ce moment de la création de votre site, vous avez déjà pu vous faire une petite idée des blocs que vous allez garder sur ce template. Vous n’êtes absolument pas obligé de garder le site tel quel, et vous pouvez retirer ou ajouter des sections à ce menu.

Pour ma part, je me contenterai de traduire les différents onglets afin d’utiliser tous les blocs utilisés par SiteOrigin. Vous noterez que lorsque vous souhaitez modifier la section de lien personnalisé, vous avez la possibilité de mettre une adresse web dans l’encart. Le problème est qu’un One Page ne possède pas d’autres pages à enregistrer dans le menu, de ce fait on utilise la balise #titredepage qui va être le nom de votre section sur la page. Nous y reviendrons plus, lors de la personnalisation de ces blocs. Cependant, si vous choisissez comme moi de garder les mêmes titres de section, ne touchez pas à cet encart, ce serait de la pure perte de temps, vu que le menu est déjà créé. De même, ne modifiez pas les “emplacements de menus”, à moins que vous souhaitiez avoir un autre menu, mais encore une fois, nous sommes sur un One Page. 

Par la suite, nous allons modifier les Widgets de notre petit site. Pour cela, vous avez différents onglet qui vous permettent de le faire. “Main Sidebar” modifie les plugins à intégrer sur la barre latérale du site, mais qui est absente ici, donc n’y touchez pas. Vous avez également la possibilité de changer la “Top Bar” si vous en avez ajoutez une. Ce qui nous intéresse ici, c’est la modification des widget du footer. Cliquez sur “Footer Widgets”, vous allez avoir l’onglet “Mise en page Builder”, recliquez dessus. Puis sur “Ouvrir le builder”. 

Grâce au builder SiteOrigin vous allez pouvoir mettre strictement ce que vous souhaitez dans ce footer. Ici je ne vais pas modifier le menu, car il me convient. Modifions donc la colonne suivante qui est “FIND US”, ici changez le titre pour par exemple “Nos coordonnées” ou “Nous trouver”, puis dans la zone de texte insérez vos coordonnées postales, téléphoniques et mail par exemple. Après, dans la dernière colonne de droite, il vous faudra mettre votre logo. Je vous recommande de choisir la plus petite version de ce dernier (250×72), sous peine de vous retrouver avec un ÉNORME footer. Puis dans la section en dessous, vous pouvez ajouter quelques mots à propos de votre entreprise. Puis validez vos changements, et publiez si le résultat vous convient.

Voici une liste des éléments que l’on retrouve sur beaucoup de sites web, qui sont la norme actuelle (Rien ne vous oblige à les mettre tous, bien évidemment) :

• Mentions légales,
• Carte du site web,
• Logo de l’entreprise,
• Informations de contact,
• Informations sur l’identification de l’entreprise,
• Menu vers les pages principales,
• Liens vers les réseaux sociaux. 

Les deux derniers réglages “Réglages de la page d’accueil” et “CSS Additionnel” ne nous concernant pas pour ce site, je vous conseille de ne rien toucher, d’autant que tout est déjà fait pour vous, suivant ainsi la maxime bien connue dans l’IT : TPACPC !

Vous avez désormais tout le squelette de votre site qui est réalisé. Nous allons pouvoir maintenant nous attarder sur la page en elle-même. Vous pouvez quitter le menu de modification du thème, après avoir bien évidemment publié votre dur labeur ^^

 

Modification de la page principale

Une fois que vous vous êtes rendu sur la page appelé “Home Page”, vous avez tout une page remplie de différents blocs représentant les différentes parties de votre site. Avec SiteOrigin vous avez 2 possibilité d’affichage : soit garder cette page-ci et faire vos modifications tout en allant, ou alors choisir d’avoir l’éditeur live qui vous donne un rendu immédiat de vos modifications.

Personnellement je n’utilise jamais l’éditeur visuel, je préfère travailler avec les blocs (les goûts et les couleurs …), cependant pour notre article, je vais travailler sur l’éditeur visuel ce qui vous permettra de suivre exactement les modifications de blocs. Pour ce faire, il vous faut cliquer sur le bouton en haut de votre modificateur de page sur le bouton appelé “Éditeur”

 

Voici un tour rapide de l’éditeur de page que vous allez avoir. A noter que chaque bloc apparaît en transparence d’un coté ou de l’autre dès que votre souris passe dessus. Il vous suffit de sélectionner le bloc à modifier en cliquant dessus. Vous avez en premier les rangées (qui sont en bleu ou vert sous les widgets, sur la barre gauche) et dedans des widgets modifiables, que vous pouvez retirer ou ajouter selon vos envies.

Nous allons commencer par le commencement, soit par la grande image qui se trouve sur la première section d’affichage de la page web. Le bloc constitué d’un Widget de SiteOrigin s’appelle “SiteOrigin hero image” Cette photo doit être représentative de votre activité. Faîtes en sorte de choisir une image d’une largeur de 1280 pixel minimum afin de cadrer à l’affichage de votre site. 

Cliquez ensuite sur “Cadre” afin de modifier photo et texte, pour les remplacer par les vôtres. 

Vous noterez que sous le texte un shortcode [button] apparaît. Si vous souhaitez le garder, ne touchez pas à ce shortcode, mais rendez vous en dessous dans la section “Boutons”, puis modifier le texte, par celui que vous aurez choisi. Ici je choisi de mettre “NOS RÉALISATIONS”, pour l’adresse “URL de destination” n’ayant pas différentes pages sur le site, je vais utiliser le raccourci des blocs ou “Attribut – Widget ID”. Nous l’avons utilisé pour faire le menu, ainsi je vais choisir d’utiliser celui que SiteOrigin avait mis en place qui est #work.

Vous avez la possibilité ensuite de modifier la couleur et la police du bouton. Enfin, vous pouvez modifier l’arrière plan, et plus précisément l’image de l’arrière plan. Sélectionnez le média que vous souhaitez mettre en place et validez. Une fois l’image choisi et mise en place, vous pouvez modifier sa taille, si vous souhaitez qu’elle soit plus ou moins opaque, et la couleur d’arrière plan pour l’opacité. Ou alors vous pouvez même intégrer une vidéo, ce qui est assez en vogue sur les sites actuels. Vous pouvez soit l’héberger sur Youtube ou Viméo et copier l’adresse ou l’héberger directement sur votre site.

Enfin, si vous préférez, vous pouvez mettre en place un diaporama, en ajoutant de nouveau “Cadre”. Puis scroller dans le panel “Hero Image”, afin de modifier si diaporama il y a, les réglages de ce dernier, sinon scrollez jusqu’à “Design et mise en page” afin de modifier par exemple les couleurs de la police, si vous souhaitez avoir une ombre derrière votre gros titre, la taille de ce dernier, la taille de la police de texte, son ombre, etc, etc. Si vous n’êtes pas sûr de vos changement, ne vous inquiétez pas, en cliquant sur le bouton en bas à droite “Terminé”, vous sortirez du panel, et automatiquement le résultat chargera et s’affichera sur votre écran, vous permettant de vérifier les changements. 

Ensuite, vous pouvez modifiez tous les autres blocs en suivant le même principe qu’expliqué au dessus, en choisissant à chaque fois uniquement les modifications à faire. Si vous aimez ce que vous propose Siteorigin, ne modifiez que le texte, sinon vous pouvez avoir accès à toutes les modifications sur cette page. 

Si vous souhaitez modifier la photo qui est derrière un texte sur un widget : le background. Pour cela il vous faut ouvrir le widget, puis vous rendre dans le menu sur le côté droit. Sélectionnez “Design” puis “Image d’arrière plan” et choisissez la photo ou l’image que vous souhaitez mettre. Pensez qu’il s’agit d’une image en parallaxe, il vous donc une image de grande taille, de façon à ce que lorsqu’on scroll en haut ou en bas sur votre site, elle puisse se déplacer. Cela vous fera un rendu assez sympa et dynamique, selon l’image que vous aurez choisi d’intégrer. Si toutefois vous ne souhaitez pas avoir cet effet, il vous suffit de cliquer dans le menu déroulant “Affichage de l’image d’arrière plan” et choisir l’effet qui vous conviendra. 

Je passe volontairement et rapidement sur les prochains widgets, car c’est la répétition de ce qui est expliqué au dessus. Vous cliquez, ouvrez le module, choisissez de modifier ce qui vous plaît ou non, et validez. Si vous souhaitez cependant retirer totalement un bloc, pour cela vous devez cliquer sur la petite clé anglaise à droite du bloc, faire dérouler le menu, et sélectionner “Supprimer la rangée” et valider votre suppression.

Pour terminer, l’onglet avec la carte (qui normalement n’apparaîtra pas sur votre site) google map, vous permet d’ajouter un plan google map interactif. Malheureusement dorénavant il est obligatoire d’avoir une google API. Suivez donc la procédure qui vous est indiquée entre les cases de modification du panel.

Cependant, la démarche étant relativement complexe, je vous conseille d’installer tout bonnement un petit plugin qui fera plus simplement le job tel que WP Google maps, par exemple. Très simple à configurer, il vous suffira de copier le shortcode, et par la suite, remplacer le Widget de SiteOrigin par un simple éditeur texte, et coller le shortcode.

 

Créer et modifier de nouveaux blocs de contenu

Si vous souhaitez créer de toutes pièces un nouveau bloc, qui n’existait pas dans la page actuelle, c’est parfaitement possible. Il suffit de vous rendre en haut à gauche sur “ajouter une rangée”. 

Puis une nouvelle fenêtre s’ouvre où vous allez pouvoir ajouter le nombre de colonne que vous souhaitez, en haut à gauche, ainsi que la taille qu’elle représenteront sur votre site, en modifiant le pourcentage.

Puis allez à droite, et sélectionnez “Disposition”, puis descendez sur “Mise en page rangée” et sélectionnez “Pleine largeur” de manière à ce que votre nouvelle rangée corresponde au design des autres sur la page. 

Si vous souhaitez que votre rangée soit d’un bloc de couleur comme par exemple la section “Our Client” sur la page actuel, qui est vert d’eau, il vous suffit de cliquez sur la petite clé anglaise sur le côté droit de votre rangée. Puis une fois la nouvelle fenêtre ouverte, vous allez vous rendre sur “Design” et cliquer sur le panel de couleur de “Couleur d’arrière plan”, vous n’avez plus qu’à valider en appuyant sur “Terminé”

ET VOILA ! Votre One Page est créé ! 👏👏🎉

Vous devez vous assurer que vous avez bien publié les modifications, afin de ne pas perdre votre travail, et pouvez dès à présent passer aux étapes de référencement de votre site web et le remplissage de votre SEO de manière à ce que vos prochains clients puissent vous retrouver avec les bons mots clefs !

Vous pouvez par exemple utiliser le plugin leader sur le marché YOAST, et si vous ne savez pas comment faire, pas d’affolement, nous avons un article tout prêt pour vous !

Je vous mets ci-après la visualisation du One Page crée à l’occasion, sur lequel les modifications ont été faites. 

Si vous avez des questions ou des points de ce tuto qui vous semble encore nébuleux, n’hésitez pas à me faire part de vos questions dans les commentaires, je tâcherai d’être la plus précise possible !

Egalement, si vous souhaitez que je développe dans d’autres articles la création de bloc avec SiteOrigin, il n’y a qu’à demander, c’est depuis 3 ans mon builder préféré ! Et pour finir, n’hésitez pas à me partager vos créations, j’adore voir le résultats de mes élèves 😁