Skip to main content

Webdesign

Toate articolele din categoria Webdesign

____________________________________________________

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la acest blog și vei primi notificări prin email când vor fi publicate articole noi.

Cum adaug o hartă Google Maps în WordPress fără plugin

Problema vine de la mesajul de eroare Google Maps “this page didn’t load google maps correctly” sau “Pagina nu poate încărca corect Google Maps”. L-am întâlnit pe multe site-uri.

Am avut și eu această problemă pe câteva site-uri. Nu am studiat problema și am preferat să șterg harta.

Astăzi a trebuit, la cererea unui client, să pun o hartă Google la pagina de contact prin urmare trebuia în sfârșit să caut o soluție la problemă.

Am instalat vreo trei plugin-uri, care nu au funcționat, deși am generat și API Key. Se pare că trebuie plătit ceva la Google ca acest API Key să funcționeze sau nu am avut eu răbdare să-l configurez.

Mă rog am cătat o soluție mai rapidă și viabilă.

Pași inserare hartă Google în WordPress

 1. Alegere locație

Eu am ales parcul de la mine din oraș.

2. Postați locația

Apăsăm ultimul buton din dreapta “Postați locația” și alegem tabul “Încorporați o hartă”.

3. Încorporare hartă

Apăsăm buronul “Copiați codul HTML”.

La mine arată cam așa:

<iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1421.6456467247178!2d26.071939483238644!3d44.55014175893068!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b21ca35f9dbcfb%3A0x1d1bf9a3b62e85d8!2sParcul%20Otopeni%2C%20Otopeni%20075100!5e0!3m2!1sro!2sro!4v1603964956135!5m2!1sro!2sro” width=”600″ height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=”” aria-hidden=”false” tabindex=”0″></iframe>

Textul de mai sus se introduce în articol/pagină dar în varianta de vizualizare text.

Dacă ai urmat corect toți pașii ar trebui să vezi harta ca mai jos.

Cum facem harta responsive?

Mai am o problemă însă. Harta are dimensiunea fixă de 650×450 pixeli după cum rezultă din codul ei, prin urmare va ieși din ecran la dispozitivele mai mici, mai ales la telefoane.

<iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1421.6456467247178!2d26.071939483238644!3d44.55014175893068!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b21ca35f9dbcfb%3A0x1d1bf9a3b62e85d8!2sParcul%20Otopeni%2C%20Otopeni%20075100!5e0!3m2!1sro!2sro!4v1603964956135!5m2!1sro!2sro” width=”600″ height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=”” aria-hidden=”false” tabindex=”0″></iframe>

Orice modificare ai face acolo harta nu va fi responsive.

Soluția este în doi pași:

1. Adăugăm codul HTML <div> </div>

<div><iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1421.6456467247178!2d26.071939483238644!3d44.55014175893068!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b21ca35f9dbcfb%3A0x1d1bf9a3b62e85d8!2sParcul%20Otopeni%2C%20Otopeni%20075100!5e0!3m2!1sro!2sro!4v1603964956135!5m2!1sro!2sro” width=”600″ height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=”” aria-hidden=”false” tabindex=”0″></iframe></div>

2. Adăugăm câteva liniile de cod CSS în fișierul unde se regăsește stilul temei tale

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Chestia asta se face în două feluri:

a) Intrăm în menu-ul Aspect>Personalizare>CSS suplimentar din dashboardul WordPress. Mai toate temele au această opțiune. Adăugăm aici liniile de cod CSS de mai sus.

b) Intrăm în menu-ul Aspect>Editor Teme in dashboard WordPress. Adăugăm aceeași secținune de cod CSS în fișierul style.css. Nu uitați să salvați în ambele cazuri.

Harta va trebui să arate ca în pagina de contact a siteului la care lucrez acum. Verificați voi pe diverse dispozitive și veți vedea că este responsive.

În Google Chrome puteți verifica și cu click dreapta mouse + Inspect element.

Dacă toate astea ți se par complicate poți oricând să apelezi la serviciile mele.

Resurse folosite

Youtube

Blog

https://www.ostraining.com/blog/coding/responsive-google-maps/

____________________________________________________

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la acest blog și vei primi notificări prin email când vor fi publicate articole noi.

Gomag

De ce recomand platforma Gomag pentru magazinul tau online

Pentru clienții care vor să înceapă cu magazinul lor online cu o platformă plătită, 100% românească cu suport în limba română recomand Gomag. Magazinul îl vor instala și configura cei de la Gomag, tu va trebui doar să adaugi produsele sau feedul de produse, în cazul în muți un magazin online deja existent. În acest caz pot fi un bun administrator de magazin online pentru tine și te pot ajuta cu vânzarea produselor cât mai rapid.

Pentru cei ce nu știu, mă ocum de creeare de site-uri de mult timp. Lucrez in platforme gratuite precum WordPress sau Joomla. Magazinele online le creez cu Woocommerce, Virtuemart sau Prestashop, care sunt tot platforme gratuite.

Îi cunosc de mult pe cei ce administrează această platformă. Sunt foarte activi și foarte serioși. I-am întâlnit pe la tot felul de conferințe, cum ar fi Gpec și am participat la multe cursuri gratuite organizate de ei.

Îi recomand și pentru că au o listă impresionantă de peste 1.200 de clienți printre care am recunoscut destul de multe magazine online, cu care lucrez ca afiliat cum ar fi: pentruanimale.ro, sportpartner.ro sau neakaisa.ro. Daca vrei să vezi mai multe exemple le găsești aici. Sunt sigur că vei recunoaște multe dintre magazine.

Avantajele platformei

  1. Platforma este oprimizată SEO, prin urmare vei ajunge destul de repede în primele pagini pe Google.
  2. Multiple instrumente de marketing care duc la creșterea vânzărilor
  3. Magazin online optimizat pentru telefon mobil, tableta, laptop sau PC – design responsive
  4. Diverse teme adaptabile stilului magazinului tău
  5. Proces de comandă intuitiv
  6. Diverse metode de plată inclusiv PayU, EuPlatesc, MobilPay sau Paypal
  7. Compatibil cu platformele majorității firmelor de curierat din România
  8. 15 zile de test pentru platformă
  9. Emag Marketplace este integrat cu platforma Gomag
  10. Gomag pune la dispoziție o sumedenie de resurse care te vor ajuta să vinzi mai bine prin Academia Gomag. O mare parte din ele sunt gratuite.

Cui recomand platforma Gomag

Antreprenorii aflați la început de drum vor avea un start mult mai bun sau ca să spun așa vor fura un pic startul dacă folosesc această platformă.

Cei care au deja un magazin online de ceva vreme, dar acesta nu vinde atât de bine, cum se așteptau sau vor rezultate mai bune.

Celor care nu stau foarte bine în căutările pe Google cu magazinul lor online.

Celor care vor să să crească în mod spectaculos vânzăile propriului magazin online.

Cui nu recomand platforma Gomag

Dacă ai magazin online vechi, care vinde foarte bine, mai ales prin căutari organice pe Google. Dacă magazinul tău este construit pe o platformă online gratuită, trebuie să știi că dacă treci pe Gomag, linkurile tale vor avea altă sintaxă și vei pierde o parte din vânzările organice. Adică  acele vânzări pe care le faci fără nici un efort atunci când produsele tale sunt găsite de clienți pe Google. (later edit) Gomag are însă soluții și pentru această problemă.

Dacă nu ești însă mulțumit numai cu vînzări organice (care între altele fie spus nu sunt foarte multe) și investești în campanii plătite pe Google sau Facebook, poți trece fără probleme pe Gomag, pentru că în scur timp vei avea din nou vânzări organice, iar magazinul tău va beneficia de o platformă competitivă, care îți poate aduce vânzări mult mai bune.

Cât costă accesul la platforma?

Sunt trei plafoane de abonamente, pronind de la 27 de euro pe lună. Abonamentele diferă în funcție de numărul de produse pe care le va avea magazinul tău și de funcționalitățile pe care le dorești pentru magazin.

Dacă ai un magazin nou cu câteva sute de produse, poți începe cu varianta minimă și pe măsură ce va crește numărul de produse sau vei dori funcționalități noi, poți trece la abonamente mai mari.

Toate abonamentele și funcționalitățile fiecăruia le găsești aici.

____________________________________________________

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la acest blog și vei primi notificări prin email când vor fi publicate articole noi.

Am aflat de ce woocommerce nu mai trimite e-mailuri si am rezolvat problema

Zilele trecute m-a sunat un client pentru că nu mai primea e-mailuri când apărea o nouă comandă pe site-ul lui. Site realizat de mine în WordPress și Woocommerce.

Am investiga un pic problema și am constatat că este o problemă cu e-mailul unde vin comenzile care era un email free pe Yahoo. Am încercat cu un e-mail free de Gmail și se întâmpla la fel.

Am instalat un e-mail dedicat de genul contact@numedomeniu.ro și acesta primea comenzile.

Dar am observat că dacă clientul are o adresă de e-mail de Yahoo sau Gmail nu primește confirmarea comenzii, ceea ce poate duce la abandonarea comenzii.

Soluția finală vine de la pluginul Easy WP SMTP. Se instalează ușor și rezolvă problema în întregime. Acum și clientul și tu vei primi din nou e-mailuri când se realizează o comandă.

Mai am două precizări

  1. Dacă nu te descurci cu instalearea și setarea pluginului nu ezita să mă contactezi și rezolv eu totul pentru tine sau îți dau un sfat,
  2. Nu îți mai încarc memoria cu ce se înmplă în spatele Woocommerce și de ce nu mai funcționează cu e-mailurii free de la Yahoo, Gmail sau alte servicii asemănătoare. În principiu sunt blocate pentru că aducea mult prea mult spam.
____________________________________________________

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la acest blog și vei primi notificări prin email când vor fi publicate articole noi.

Guttenberg Wordpress editor

Cum am scăpat de noul editor Guttengerg de la WordPress 5.0

Cu toții știm ca este foarte necesar un update la ultima versiune WordPress. În special din rațuni de securitate. La un update însă ai mereu surprize. De multe ori se întâmplă ca unele pluginuri să nu fie aduse la zi cu noua versiune de WordPress și să nu mai funcționeze corect. Din această cauză eu folosesc în special pluginuri premium sau plătite.

De data asta odată cu trecerea la WordPress 5.0 am avut o altă surpriză neașteptată și neplăcută.

Editorul de text Guttengerg

Nu am mai văzut în viața mea un update aruncat pe piață așa de prost și netestat. Nimic nu merge ca lumea. Nu mai găsești nimic din instrumentele ajutătoare cu care scrii un articol. Trebuie să inserezi un link de trei ori ca să apară. Multe dintre vechile pluginuri nu mai funcționează și lista poate continua.

Am încercat, ce să zic, să lucrez cu acest nou editor de text câteva săptămâni, dar mi-a ieșit pe nas. Azi am hotărât să revin la vechea interfață de editare text.

Daca vrei să faci și tu același lucru trebuie … surpriză să instalezi un nou plugin – Classic Editor. Alta tâmpenie făcută de WordPress. După ce că introduci o variantă netestată de editare text, nu îmi dai nici posibilitatea să revin doar cu o bifă la cea veche și mă obligi să mai instalez un plugin cu riscurile de rigoare.

Dacă nu știi cum să instalezi un plugin urmează pașii: Plugins >>> Add New >>> completează Classic Editor în search Box >>> Instalează Pluginul >Activează Pluginul și gata nu mai trebuie să faci nimic. Vei avea vechiul editor de text atunci când vrei să scrii un articol nou.

Mă rog ideea cu nou sistem de editare nu este rea și aș spune că este bine venită. Dar WordPress s-a grăbit de data asta. O să urmăresc evident fenomenul și voi vedea dacă v-a merita în viitor să lucrez cu noul editor de text Guttenberg.

Vă țin la curent.

Photo by Ryan Franco on Unsplash
____________________________________________________

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la acest blog și vei primi notificări prin email când vor fi publicate articole noi.

Woocommerce templates suitable for your mobile phone

I work a lot with Woocommerce, the plugin that converts your WordPress site in an online shop. Last week I was looking for a suitable Woocommerce template that looks good on a mobile phone.

Free Woocomeerce templates

I found that most of the free templates don’t look good on the mobile phone’s because they don’t have my requested conditions:

  • big titles and prices
  • good desktop layout
  • excellent mobile phone layout

I look from a lot of free templates but I found only one that I liked and I used it on my rebranded affiliate website.

Paid Woocomeerce templates

The only site that provides Woocommerce templates that I liked was Template Monster. The templates I selected are:

Photo by Matthew Fournier on Unsplash

____________________________________________________

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la acest blog și vei primi notificări prin email când vor fi publicate articole noi.

Vrei să primești un e-mail de căte ori scriu un articol?

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la acest blog și vei primi notificări prin email când vor fi publicate articole noi.