How to love your customers with WordPress

Hello friends, before I start talking about love 😉 I introduce myself, my name is Gonzalo de la Campa and for a long time I have been working on web design and graphic and as a teacher of my WordPress course with the theme Divi and Woocommerce and today I have the great honor of writing as a guest in this Fernando's wonderful blog.

Made the presentations … I want to tell you about the final goal, of the most important thing of all of what we should keep in mind whenever we go to design a website (or whatever) and it's something as simple as: Enamorar

 enamorar-con-wordpress-1 "width =" 2200 "height =" 900 "srcset =" https: // ayudawp .com / wp-content / uploads / 2015/11 / love-with-wordpress-1.jpg 2200w, https://ayudawp.com/wp-content/uploads/2015/11/enamorar-with-wordpress-1- 550x22 5.jpg 550w, https://ayudawp.com/wp-content/uploads/2015/11/enamorar-con-wordpress-1-840x344.jpg 840w "sizes =" (max-width: 2200px) 100vw, 2200px " /> </a> </p>
<p> Rivers of ink are written daily on plugins, themes, security, speed of web loading, etc. but there is very little talk about the most important thing, about making our customers, our readers, all those who land on our website fall in love, so today, we are going to make a parenthesis about all this information about the web design and environment. WordPress and let's see how we can seduce and conquer our customers. </p>
<h2><span id= How do you fall in love?

What a great question huh? For example, in addition to my wife and my children, I have fallen in love with the WordPress Divi theme hey, so we are the "geeks" of the design hehe we can fall in love with a theme ;-). But why does this happen? In my case it was because of the ease of use and since I am not a programmer but if I do a lot of web designs it allows me to do wonders and high quality websites without the need to know PHP or bagpipes and it also helps me save a lot of time both for myself and for my students of my wordpress course, with what I know how they fell in love with me, but how to fall in love with other clients?

Let me explain it to you with a video that I like a lot and where it comes to explain that you fall in love with … your attitude.

Yes sir, with your attitude. It's that easy. We are all "light bulbs" the difference is that some walk cast and others illuminate with a very powerful light. There is the secret. If something falls in love with you, you will infect the rest and you will fall in love. Steve Jobs was in love with Apple and managed to make the whole world fall in love with Apple. If you are not in love, how can you fall in love?

In the video I also love how a receptionist in a hotel managed to seduce this man to go to his hotel, simply with his attitude. Being correct and serious no longer works. To say that we are the best, does not work anymore. Did you fall in love with your partner because he was the same as everyone else? No, right? Well, that, do not be like everyone else. Do not tell the same boring things, say it in another way. Enamorales.

Who do we have to fall in love with?

The first thing we will distinguish here is our target audience and to simplify and make everything simpler , we will say that we must only love 2 agents: visitors to our website and Google. That's right.

So let's see how we can make each of them fall in love. First I'll focus on people and then we'll talk about Mr. Google.

 love-people-google "width =" 1600 "height =" 762 "srcset =" https: //ayudawp.com/wp-content/uploads/2015/11/enamorar-personas-google.jpg 1600w, https://ayudawp.com/wp-content/uploads/2015/11/enamorar-personas-google-550x262 .jpg 550w, https://ayudawp.com/wp-content/uploads/2015/11/enamorar-personas-google-840x400.jpg 840w "sizes =" (max-width: 1600px) 100vw, 1600px "/> [19659016] How do we make people fall in love? Do we all fall in love with all customers? </span></h2>
<p> <strong> You will like the answer more than you expect </strong>because it will make your life easier. </p>
<p> Well, the first thing we should know is "<strong> how are our clients </strong> s", but since that is something that is unique to each sector and each company, we are going to assume that when you are going to do your web you already know the profile of your clients, in fact most of the cos so that they fall in love are common to any sector and to any person, be it woman or man, old or young. </p>
<p> And I, who have a degree in Sociology, attest to that with a lot of information on the matter. To put a simple example, the good cars, the wonderful houses that we see on TV or the models or actresses and actors that are the most popular, have something in common, that a great majority of people like. That is to say, <strong> there is a canon of beauty, that although it may not like many, if it likes and falls in love with a great majority. </strong> </p>
<p> And this reflection can be transferred to architecture, painting, countries, cities , fashion, logo design, catalogs and of course web pages </p>
<blockquote>
<p><strong> Therefore, the image, the beauty, the design of our website is of vital importance. </strong></p>
</blockquote>
<h2/>
<h2><span id= What makes a customer in love?

]Very easy. Buy or contact us because he loves what we offer him.

 enamorar-clientes-wordpress "width =" 1600 "height =" 762 "srcset =" https: // helpwp.com/wp-content/uploads/2015/11/enamorar-clientes-wordpress.jpg 1600w, https://ayudawp.com/wp-content/uploads/2015/11/enamorar-clientes-wordpress-550x262.jpg 550w, https://ayudawp.com/wp-content/uploads/2015/11/enamorar-clientes-wordpress-840x400.jpg 840w "sizes =" (max-width: 1600px) 100vw, 1600px "/> </a></p>
<h2><span id= Let's see example number 1 falling in love with its customers

 Apple-Logo "width =" 512 "height =" 512 "srcset =" https://ayudawp.com/wp-content/uploads/2015 /11/Apple-Logo.png 512w, https://ayudawp.com/wp-content/uploads/2015/11/Apple-Logo-150x150.png 150w, https://ayudawp.com/wp-content/uploads /2015/11/Apple-Logo-160x160.png 160w, https://ayudawp.com/wp-content/uploads/2015/11/Apple-Logo-240x240.png 240w, https://ayudawp.com/wp -content / uploads / 2015/11 / Apple-Logo-60x60.png 60w, https : //ayudawp.com/wp-content/uploads/2015/11/Apple-Logo-184x184.png 184w "sizes =" (max-width: 512px) 100vw, 512px "/> </a> How could it not be <strong> Apple. </strong> </p>
<p> <strong> But Apple's secret is in the quality of the product? Definitely not. </strong> </p>
<p> The product helps and it is undeniable that they are really good products, but the market is full of companies with wonderful products that are not even half of Apple's half. In fact, the Iphone, Imac, Ipad … <strong> also have flaws, but a customer in love, does not even see them. </strong> That's the secret, when you fall in love with something or someone you only see the good and minimize its defects. </p>
<p> With Apple products there are not or there were many things that were more complicated than with the PCs of a lifetime (others not ), but what if your users are in love? </p>
<p> <strong> I'll give you an example: </strong> When I bought my Imac I had to buy another external hard drive because the one I had on PC was not compatible, I had to install the VLC program because my "new computer cucumber" did not read videos in Avi format, I had to learn to cut and paste because it was not as easy as pressing Control + X as in PCs, I had to learn to use Itunes because could not pass music to the Ipad connecting by usb and dragging to a folder and so a long etc including other "defects" as the demands that have internationally to create phones with programmed obsolescence and where you can not replace the battery or the exploitation in Asia, etc. </p>
</p>
<h2><span id= How do we design a web page that falls in love?

Well, let's go in parts …

1.The images you use, are web media.

The power of images is brutal. It's almost the most important of all and almost the least talked about. I am a graphic designer, I give faith to it. When I do any web design for my clients I always use the images with the highest possible visual quality (but with high levels of compression to like Google too, we'll talk about this already).

 imagenes-web "width = "2200" height = "900" srcset = "http://bootstrapx.com/wp-content/uploads/2018/06/imagenes-web.jpg 2200w, https://ayudawp.com/wp-content/uploads /2015/11/imagenes-web-550x225.jpg 550w, https://ayudawp.com/wp-content/uploads/2015/11/imagenes-web-840x344.jpg 840w "sizes =" (max-width: 2200px ) 100vw, 2200px "/> </a> </p>
</p>
</p>
<p> But, since we are talking about images, <strong> let me give you an example here with images </strong>. Apple as a reference and they tell me that they want a website like Apple's, they ask me to use their typography, their colors … ok, I accept it, but this is like thinking that because you put on Brad Pitt's pants, you're going to look like Brad Pitt. </p>
<h3><span id= Come on to see the Apple website with its images and then we will see a photomontage of the Apple website if we used poor and conventional images:

I mean, you are going to see the Apple website as it is and I'm just going to change the picture. This way we will see the importance of the image in its web and we will be able to know if they have more importance or everything else.

Here the web of Apple as it is:

 web-apple "width =" 838 "height =" 399 "srcset =" http://bootstrapx.com/wp-content/uploads/2018/06/web-apple-840x400.jpg 840w, https: / /ayudawp.com/wp-content/uploads/2015/11/web-apple-550x262.jpg 550w, https://ayudawp.com/wp-content/uploads/2015/11/web-apple.jpg 1600w "sizes = "(max-width: 838px) 100vw, 838px" /> </a> </p>
</p>
<p> And here is a photomontage where I only replaced the main photo and left the rest of the Apple website exactly the same. the typical style of those customers who say: </p>
<blockquote>
<p><em><strong> "Nah, if I put the product on the table, I take a picture with the phone and run, we save a paste in the photographer or buying images" </strong></em></p>
</blockquote>
<p><a href= web- apple-photomontage "width =" 838 "height =" 399 "srcset =" https://ayudawp.com/wp-content /uploads/2015/11/web-apple-fotomontaje-840x400.jpg 840w, https://ayudawp.com/wp-content/uploads/2015/11/web-apple-fotomontaje-550x262.jpg 550w, https: / /ayudawp.com/wp-content/uploads/2015/11/web-apple-fotomontaje.jpg 1600w "sizes =" (max-width: 838px) 100vw, 838px "/> </a> </p>
</p>
<p> In Finally, I think the images speak for themselves. Even the Apple website would be a real chestnut if you only care about one thing: <strong> Images </strong> </p>
<p> <strong> My website: </strong> buy images in Shutterstock, Fotolia or the web designer includes you some package of images free of rights to ensure you are going to have quality images. This is something that I usually do with my clients and get great results. </p>
</p>
<h3><span id= 2. Take care of the colors.

It is very important that the colors of your website be harmonics and transmit . I imagine that you will already know that each color transmits a different emotion. Well, if you knew it, I'll remember it and if not, I'll inform you. Look at this example in an easy way:

 color-meanings

But, to make it easy for you and not to deal with information, I recommend that you use some of these tools to choose the colors of your website (in case you have not yet created a corporate manual, since really create a good Branding or brand image is a previous step to design your page web, and what you have decided in this manual will apply to all your communications and so there will be a harmony between web, logo, catalogs, etc.)

  1. How many colors do I use on my website? No more than 3 You can use color ranges such as dark and light gray if you need one more.
  2. How do I combine colors harmonically? Use any of these tools: color.adobe.com paletton.com or www.pictaculous.com (the latter is very curious, you can upload a photo with colors that you like and tells you what they are)
  3. If you want more information about colors here I leave you an interesting article for more information on this subject.

3. Take care of the typographies

I do not know if you know that Mr. Steve Jobs got to expel personnel from his company for downplaying the importance of typography . And it is that if we want to fall in love we have to take care of all this. A bad type can load a web a logotype, a catalog or whatever you are designing. A false step and you do not fall in love with your cat.

Here it happens as colors, each type conveys a different sensation . In this topic I'm not going to extend but the advice would be that if you have no idea, do not risk and use a simple or better yet if you use Google Chrome for example, install the extension Whatfont and if you browse by a web that you like, click on the icon that will create you in the upper right part of your browser and it will tell you what typography is. So you can use it on your website.

 typographies "width =" 1400 "height =" 600 "srcset =" https://ayudawp.com/wp-content/uploads/2015/11/tipografias .png 1400w, https://ayudawp.com/wp-content/uploads/2015/11/tipografias-550x236.png 550w, https://ayudawp.com/wp-content/uploads/2015/11/tipografias-840x360 .png 840w "sizes =" (max-width: 1400px) 100vw, 1400px "/> </a></p>
<h3/>
<h3><span id= 4. Tell it differently Solve problems, do not talk about your product

If we have been able to take care of the images, colors and typographies we will have more than half made web and we can start to fall in love, that is, it is a necessary condition, but not enough.

What else do we lack? There are also very important things like the way of telling things .

I'll give you another example:

When Apple released the Ipod there were many companies that competed with them with MP3 players and in their websites and advertisements they said the c Gigas antity and megas that had their players making them see that they were super powerful.

Apple said: "They fit 1000 songs"

That's it. It's that easy.

What do people care about your product? They want me to solve a problem that covers their needs, not that you tell them how handsome you are.

 diseño-web-wordpress "width =" 2200 "height =" 900 "srcset =" http://bootstrapx.com/wp-content/uploads/2018/06/diseno-web-wordpress.jpg 2200w, https://ayudawp.com/wp-content/uploads/2015/11/diseno -web-wordpress-550x225.jpg 550w, https://ayudawp.com/wp-content/uploads/2015/11/diseno-web-wordpress-840x344.jpg 840w "sizes =" (max-width: 2200px) 100vw , 2200px "/> </a> </p>
</p>
<h3/>
<h3><span id= 5. There are many other things, but do not go crazy.

Another Apple motto is Keep Simple, make it simple, easy.

I could throw myself here writing hours of other things that are important, but for that you would have to spend a few years studying graphic design and others.

You can follow these tips that I have given you and you will have won a lot or you can also let you help by an expert and forget everything . Before hiring you look at their jobs and their prices and if it fits you. Ahead. You can enjoy all your knowledge to have a website that makes you fall in love without going crazy.

How do we fall in love with Google?

 enamorar-google "width =" 720 "height =" 150 "srcset = "http://bootstrapx.com/wp-content/uploads/2018/06/enamorar-google.jpg 720w, https://ayudawp.com/wp-content/uploads/2015/11/enamorar-google-550x115. jpg 550w "sizes =" (max-width: 720px) 100vw, 720px "/> </a> </p>
<p> There is more literature on this topic, so for no information, I'll summarize it with 4 simple points. ] Keyword strategy: </strong> Before designing your website, decide which keywords you want to position yourself in and try not to be too generic, once you have them clear, write the contents including those keywords </p>
<p style= Use these tools ( with free version) to have data to decide: semrush.com or kwfinder.com

Optimize the SEO of your website: Make a web design with optimized SEO settings just like Google likes.

This article may help you: Seo for beginners

Responsive designs with fast loading speed: Make sure your website adapts to mobile (or Google will penalize you) and upload fast. You will find many articles in Google to improve the loading speed in WordPress.

Here you have more interesting articles:

The favorite plugins of the experts

How to make your WordPress ultra fast

And if you want more information form: I do not know if it's wrong to say it, but well, I hope it does not bother you … for example I'm preparing a course on cursowordpress-online.com where I'll explain how to have a website that makes Google fall in love ( to complement the courses that I already have of WordPress with Divi or Woocommerce). But you can search the net and sign up for any other course you like and expand your knowledge on the subject. That is the wonder of WordPress that there is a lot and a very good offer because we are a huge community !!!


Well … I hope this article will help you fall in love. Since it is important to seduce, to conquer, to fall in love, but not in web design only, if not in life. What is more beautiful than to hope and have a world where these emotions push us to move forward?

Well, let's get to work! To fall in love with people!

If you liked it, share it and if you want to make a comment or contact me, do not cut yourself. You can find me in the comments of this blog and in my webs of www.paginaswebempresas.es and of cursowordpress-online.com

A hug!

NOTICE : this publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you:

I want the WordPress desktop to be like that, and you? • WordPress Help

Ok that MP6 is an interesting redesign of the WordPress administration, which greatly improves what we now have (at least for me) and that with the WordPress news 3.8 we will have visual improvements of a lot of caliber but boy, that after seeing certain things it is one face of …

Because of course, the future interface of WordPress is fine, cool, I like but this the proposal of George Kordas all in HTML and CSS, is another level, stratospheric, glorious, divine . I do not know if it will come out as a plugin or what but we go, that I want it already if or what and you?

Colombia loves WordPress – WordPress Help

More and more governments are using WordPress for their web developments, I do not know if by their own conviction or by the companies they commission the developments but there it is, and Colombia, in its brand website country, use WordPress .

The result is a really nice, dynamic and colorful website very much in keeping with the beauty and color of Colombia, and the adaptation made of the free theme, it seems that Plastic Lab very successful.

You can visit it in Colombia.co to enjoy its beautiful design. I just need to recognize in the credits that is made with WordPress that's right.

Remove the width and height attributes of the WordPress file loader

You'll think it's bullshit but no, it's not any nonsense and I'll explain it to you … if you want to be at Clear Day. If you are from the old and do not want to progress, pass this entry.

As you already know, when you insert an image from the file loader in the WordPress editor, the HTML attributes width and [HTML] are added automatically. height that indicate the size in which the image will be shown in your active theme for that, so that it adapts to the width of the theme and is not horrible, but you already knew this? No.

Well, this is already an old thing …

With the new customizable designs (or as they are called in English " responsive "), that are adapted to the browser and even device from which a web is being visualized it does not make sense to define fixed attributes of width and height of images, because the theme will adapt, like all elements of the content, to the size of the reader device, be it a computer, a smartphone or an iPad, cool huh?

Do you already understand why it might be interesting to delete – by default – the attributes width and height that the charger of files inserted in the editor ?. Well, that if you use a theme with adaptive design you do not need something like this:

To eliminate by default the attributes that you will have left in an adaptable design you just have to add the following code to the file functions.php of your theme:

You save and that's it. The next time you insert an image in your editor already will not add the attributes width and height that your adaptive theme will already take care of it (or " responsive ", as you prefer to call it)

NOTICE : this publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you:

WordPress 3.x template tags

Of course, you have the official reference in the Codex but the web tool that you are going to find here is a blast when it comes to searching the codes and functions necessary for the design of WordPress themes. [19659002] On the left, in the sidebar, you have the list of common uses, and clicking on each item shows the available tags, then you just have to click on the chosen one and it shows you the use for which it is created. template tag and an example of how to use it.

WordPress.org is redesigned • WordPress Help

WordPress.org launches a new design that agrees with the scheme of version 3.0, which is already visible in the entire website (Codex, Official Blog, Forums, etc) except the sites for official locations (which they still have the old design.)

Although at the moment it is only a redesign of CSS and not of structuring and distributing the contents and menu. In my opinion, the web looks "cleaner". Visual effect? Maybe. What do you think of this new design?

Prepare your site for iPhone • WordPress Help

Impressive the compilation made by Cats who code about codes with which to adapt your site to the visualization in iPhone. As I think it is of great interest to developers and advanced users and that, of course, are applicable to WordPress, here you have them with some adaptation to our environment:

Detect iPhones and iPods using Javascript

When developing for iPhone or iPod Touch the first thing to do is detect it so that, then, we apply codes or styles. The following code detects iPhones or iPods using Javascript, and redirects them to a specific page for iPhone.

Source: http://davidwalsh.name/detect-iphone

Detecting iPhones and iPods using PHP

Although the previous code was nciona of wonder can that Javascript be deactivated in the iPhone. If this is the case, you can use PHP to detect iPhones or iPod Touch.

Source: http://davidwalsh.name/detect-iphone

Define the width of iPhone as viewport

In many occasions you visit a website with your iPhone and see it in miniature. The reason is that the developer forgot to define the viewport (or does not know that it exists). The declaration of width = device-width allows you to set the width of the document to the width of the iPhone screen. The other two statements are very useful if you are developing a site "just for iPhone". Otherwise you can delete these two statements.
Defining a viewport is easy: Simply insert the following goal in the "head" section of your site (file "index.php" of the active template):

Source: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

Insert a specific icon for iPhone

When a user adds your website to your home page, the iPhone uses a screenshot of your site as an icon. But you can offer a specific icon, which is much better.
Defining a custom icon for iPhone is easy: Simply paste the following code in the "head" section of your site ("index.php" file of the template active). The image must be 57px by 57px in format .png . You do not have to add glitters or corners as the iPhone automatically adds them:

Source: http://www.engageinteractive.co.uk/blog/2008/06/19/ tutorial-building-a-website-for-the-iphone /

Prevent Safari from adjusting text size when rotating

When you rotate the iPhone, Safarie adjusts the text size. If for some reason you prefer to avoid this effect you just have to use the following CSS, which you will have to add to your style sheet (file "style.css" of your active template).
The declaration -webkit-text -size-adjust is a unique CSS property of webkit that allows you to control the text setting.

Source: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the -iphone /

Detect the orientation of the iPhone

As the iPhone allows you to see the page in portrait or landscape you may need to detect in which mode the document will be visible.
This Javascript function detects the current orientation of the iPhone and applies a specific CSS class for each targeting mode. Note that in this example the CSS class is added to the ID of page_wrapper . Replace it with the desired ID name (line 24)