Kada stvaramo stranicu proizvoda u Diviju, možemo koristiti modul harmonike za prikaz podataka o proizvodu pomoću dinamičkog sadržaja. To će vam pružiti jedinstveni dizajn stranica proizvoda, uz istovremeno očuvanje dragocjenog prostora na stranici.
U ovom vodiču pokazat ćemo vam kako koristiti Divijevu značajku dinamičnog sadržaja za stvaranje harmonike s informacijama o proizvodu, kao i kako dizajnirati harmoniku (i njezin sadržaj) pomoću Divi Visual Builder.
Počnimo.
pregled
Ovdje je pregled dizajna koji ćemo graditi u ovom vodiču.
Imajte na umu da morate imati konfiguraciju proizvoda kako je opisano u ovom vodiču da biste postigli iste rezultate.
početak
Za početak morat ćete učiniti sljedeće:
- Ako već niste, instalirajte i aktivirajte Divi tema instaliran (ili dodatak Divi Builder ako ne koristite Divi tema).
- Instalirajte i aktivirajte dodatak WooCommerce. Ako konfigurirate WooCommerce po prvi put, morat ćete pokrenuti čarobnjaka za osnovno postavljanje kako biste pripremili svoju trgovinu. Kada završite, spremni ste za dodavanje novih proizvoda.
- Napravite novi proizvod kao što je prikazano u nastavku.
Postavljanje uzorka proizvoda
Da biste konfigurirali uzorak proizvoda za ovaj vodič, idite na Proizvodi> Dodaj novo. Dajte proizvodu naslov „Masaža (jedna sesija)“ i kliknite da biste koristili Divi Builder.
Zatim ažurirajte sljedeće postavke stranice proizvoda i podatke o proizvodu:
1. U odjeljku Postavke stranice Divi odaberite izgled bočne trake.
2. Dodavanje / odabir kategorije proizvoda
3. Dodajte sliku proizvoda
4. Dodajte sadržaj opisa.
5. Sous Podaci proizvoda, promijenite vrstu proizvoda u Varijabilni proizvod.
6. Dodajte atribut pod nazivom "Type" sa sljedećim vrijednostima: švedski | Vrući kamen | Aromaterapija | Duboko tkivo. Svakako odaberite "Koristi se za varijacije".
7. Zatim na kartici Varijacije pod prekidačem données proizvoda, koristite padajući unos za stvaranje varijacija svih atributa.
8. Na padajućem izborniku odaberite "Postavi redovne cijene" da biste postavili redovnu cijenu za tri varijable.
9. U dijaloškom okviru upišite vrijednost "50" i odaberite U redu.
10. Nakon što završite, spremite ili objavite proizvod.
Sada ste spremni započeti dizajn dizajna s prilagođenom harmonikom proizvoda.
Izrada harmonike Product Info s dinamičnim sadržajem u Diviju
Zadani izgled proizvoda prikazuje podatke o proizvodu pomoću različitih Woo modula. U ovom primjeru želimo koristiti harmoniku za prikaz tri glavne informacije o proizvodu: opis proizvoda, dodatne informacije o proizvodu i recenzije proizvoda. Ova se tri sadržaja trenutno prikazuju u modulu woo tabs. Sve što moramo učiniti je ukloniti modul vunenih kartica i zamijeniti ga modulom za harmoniku s istim informacijama unesenim putem dinamičkog sadržaja.
Evo kako to učiniti.
Prvo kliknite kako biste koristili Divi na prednjem sustavu za postavljanje vizualnog generatora. Zatim uklonite modul Woo Tabs.
Zatim dodajte novi modul harmonike za zamjenu kartica.
U skočnom prozoru Postavke harmonike kliknite ikonu zupčanika na prvoj harmonici da biste otvorili pojedinačne postavke harmonike.
Unesite naslov "O proizvodu".
Zatim zadržite pokazivač iznad okvira za unos sadržaja tijela i kliknite ikonu dinamičkog sadržaja.
Na popisu dinamičkih sadržaja odaberite "Opis proizvoda".
To će prikazati dugi opis proizvoda koji smo definirali za proizvod na pozadini.
Nakon što je na mjestu prvi sadržaj harmonike, otvorite druge postavke harmonike i ažurirajte sljedeće:
- Naslov: Specifikacije
Zatim tijelu dodajte dinamički sadržaj "Dodatne informacije o proizvodu".
Kad je drugi sadržaj harmonike spreman, dodajte novi element harmonike i ažurirajte postavke harmonike na sljedeći način:
- Naslov: Dodatne informacije
Zatim dodajte dinamični sadržaj "Recenzije proizvoda" u tijelo kako biste ugradili stavku / sadržaj recenzije proizvoda.
NAPOMENA: Svakako dodajte barem jednu recenziju proizvoda kako biste vidjeli sadržaj na aktivnoj stranici.
Dizajn proizvoda i ugovor o sadržaju s tvrtkom Divi
Sad kad naša harmonika s informacijama o proizvodu ima dinamički sadržaj za prikaz podataka o proizvodu, spremni smo je prilagoditi pomoću postavki ugrađenog modula za harmoniku.
Otvorite postavke modula harmonike i ažurirajte sljedeće:
- Boja ikone: # ff9375
- Koristite veličinu fonta ikone: DA
- Veličina fonta ikone: 26px
- Uključi / isključi boju pozadine: #ffffff
- Otvori naslov teksta Boja: #ff9375
- Naslov teksta: #222222
- Font naslova: Lato
- Font naslova: Bold
- Naslov Font Stil: TT
- Veličina naslova teksta: 20px
- Razmak slova u naslovu: 0.2em
- Visina naslovnog retka: 2em
- Krstionica za tijelo: Lato
- Veličina tijela: 16px
- Visina tijela: 1.8em
- Boja teksta veze: #ff9375
To će ciljati na sve veze koje imate u dinamičnom sadržaju za svaku harmoniku, poput ocjene zvjezdica.
- Boja teksta s neuređenim popisom: # ff9375
- Neodređena vrsta stila popisa: Krug
- Neuređena uvlaka stavke popisa: 5%
- Širina granice: 0px
- Širina gornje granice: 1px
- Boja gornje obrube: #222222
I za posljednji korak, dodajmo mali css ekstrakt za izdvajanje zadanih margina između ljestvica harmonike.
Na kartici Napredno dodajte sljedeći CSS elementu Toggle:
margin-bottom: 0px;
Sada ćemo pogledati konačni dizajn harmonike s informacijama o proizvodu.
Završne prilagodbe izgleda
Nekoliko se prilagodbi može prilagoditi dizajnu kako bi odgovarao dizajnu harmonike. Na primjer, font svakog modula možemo prilagoditi Lato-u, dodati prilagođeni obrub i radijus obruba oko padajućeg popisa promjenjivih i ažurirati gumb Dodaj u košaricu s jednobojnom bojom pozadine koja njemu odgovara.
Jednom učinjeno, evo konačnog rezultata.
Gore sam ovaj dizajn uključio kao besplatno preuzimanje. Slobodno to provjerite sami. Imajte na umu da morate imati konfiguraciju proizvoda opisanu u ovom vodiču da biste postigli iste rezultate.
NAPOMENA: Zadana boja za većinu stavki WooCommerce proizvoda u Diviju nasljeđuje se od vrijednosti sekundarne boje postavki prilagodbe teme. Možda bi bilo lakše ažurirati ovu sekundarnu boju nakon što woo modulira modul boje.
Završne misli
Kao što smo saznali, Woo modovi nisu jedine stvari koje se mogu koristiti za izdvajanje dinamičkih podataka o proizvodu. Harmonika s podacima o proizvodu izvrstan je primjer kako možete koristiti bilo koji Divi modul za prikaz podataka o proizvodu na jedinstven i sažet način. Slobodno istražite nove, uzbudljive dizajne harmonika za vaše stranice proizvoda. I, naravno, možete koristiti više rockerskih modula umjesto harmonike da biste postigli slične rezultate.
