Resumen

Sigue los pasos en este orden

DIA #1

Guía Web con WordPress Paso a Paso, #1

Instalación WordPress #2

Configurando WordPress #3

Mejorando tu instalación WordPress #4

DIA #2

Instalación del Theme: Divi #5

Optimizando tu instación: Analaytics y Search Control #6

¿Necesitamos un Child Theme? #7

Los 3 secretos que harán de tu web un sitio profesionaldiferente a los demás #8

DIA #3

Creando la página de inicio #9

Fijando la página de inicio y creando el menú #10

Añadir contenido al blog: los posts #11

Usando el contructor en los posts #12

DIA #4

Sidebar y widgets #13

Una página de blog que mola #14

Tuneando el footer (pié de página) #15

Más potencia a WordPress: Bloom, formularios de suscripción #16

DIA #5

Barra inferior del pié de página #17

Insertar un botón de llamada en un clic para móvil #18

Llevar tu web a otro nivel: Plantilla de estructura #19

Guía de imágenes #20

Instrucciones paso a paso para la creación de una página web para empresarios, comercios y pequeñas empresas locales

Este post es para tres tipos de empresarios

1. personas que gestionan comercios tradicionales y no quieren comercio electrónico
2. gerentes de pequeñas empresas
3. profesionales liberales como abogados, gestores, psicólogos, dentistas…

Y cuyo objetivo es, ser encontrados en la red ya que esta se ha convertido en el primer (y casi único medio de búsqueda por parte de los usuarios)…

y no necesitan de un gran desarrollo web sino que lo que precisan es una ficha de negocio personalizada para dirigir tráfico offline o la venta de una primera cita o consulta.

¿eres de alguno de estos tipos de personas?

-Genial, porqué estás en el sitio adecuado, así que… vamos a empezar.

Tu página web es el único espacio en internet que controlas 100%

Spam: Akismet

Desde sus comienzos WordPress ha sido una pieza codiciada para el spam. La «puerta» de los comentarios siempre pusieron las cosas fáciles en ese sentido.

A estas altura de la película te habrás dado cuenta ya que tu instalación viene de fabrica con un plugin instalado, mejor dicho dos. Uno, Hello Dolly lo puedes borrar del tirón. Y dos Akismet, muy recomendable para evitar el spam.

Puede que tu instalación, dependiendo de donde tengas alojado en hosting traiga más, pero estos son lo normal. Así que directamente pasamos a activarlo, ya que está instalado

Haciendo clic en actualizar, esperamos…

Ahora si, hacemos clic en activar…

Ahora necesitamos una clave para terminar la activación del plugin. Vamos a conseguir una clave Akismet y terminamos de protegernos contra el spam. Hacemos clic en el botón azul…

Clicamos de nuevo en el botón azul (en caso que sea la primera vez que usas akismet)

Lo dejaremos como muestra la imagen

ahora si activamos   

y seremos redirigidos a nuestra web, guardamos y ya estamos seguros en cuanto a spam se refiere… y gratis.

Seguridad: IThemes Security

Seguimos con la seguridad. Un aspecto muy importante, ya que el aumento de webs y blogs con wordpress aumenta día a día, encontrar vulnerabilidades es un medio de asegurarse métodos para entrar en cantidad de webs.

Tenemos varias opciones, tanto de pago como gratis. Yo uso IThemes Security y por tanto esa es mi recomendación, aunque también os podría valer All in one wp security o Wordfence Security, ambas son opciones estupendas.

El procedimiento es el mismo: Plugins, añadir nuevo buscamos en el casillero instalamos y activamos… y llegaremos a la siguiente pantalla

Tendrás delante una pantalla como esta. No voy a entrara en detalle en todas las opciones. Te recomiendo que te descargues el manual (lo tienes a la derecha en la imagen) y vayas configurando según tus preferencias.

Existen millones de plugins, hay uno para casi cada cosa que se nos ocurra. Se habla mucho del número recomendable de plugins instalados ya que un gran número de estos sobrecargará la web en exceso y todos sabemos lo importante que es el tema de la velocidad de carga.

Para cuestiones estéticas, la verdad es que instalando Divi nos ahorraremos muchos: sliders, formularios… etc

También habrá que tener en cuenta cual es nuestro negocio. Si lo que queremos es montar una tienda online tendremos que instala woocommerce.

Si somos una casita rural y queremos tener un motor de reservas hay varios medios de hacerlo pero también podríamos hacerlo con woocommerce y la extensión para reservas. En el caso que queramos una escuela online o vender cursos nos vendrían bien instalar un plugin que actuara de LMS (Learning Management System)

Como ves… casi infinitas las posibilidades. Pero sea cual sea el caso gestionar nuestras oportunidades de venta será imprescindible y para eso uso dos plugins que los vemos a continuación.

Thrive Leads

Si tienes que hacer crecer una lista de suscriptores, este plugin para mi, también es imprescindible. Es más que un generador de formularios para la captura de leads, es todo un sistema completo, estadísticas incluidas.

Podrás poner formularios según categorías, en páginas determinadas, en el sidebar de los posts… y de todo tipo: scroll matt, popups, ribbon…etc Personalmente lo combino con…

Thrive Architect

…Antes Thrive Content Builder o TCB. En mi opinión junto con el Divi Builder el constructor visual más potente del mercado… además de intuitivo.

Con el puedes construir una web completa si quieres pero la mayoría de la gente para lo que los usa es para construir todos los elementos necesarios para embudos de venta: Página de captura o de Opt-in, página de gracias, página de descargas…

Incluso, si tu objetivo es vender un curso online, no muy complejo de estructura, podrías hacerlo ya que trae multitud de páginas predefinidas a las que tan solo tendrás que cambiar los textos de muestra por los tuyos… y a funcionar.

Echa un vistazo aquí.

Instalación del theme: Divi Theme #5

Desde que salió al mercado no uso otro. Entonces ¿todas las webs que haces son iguales? En absoluto, es tan flexible y versátil que puedes hacer infinidad de webs con esta plantilla y todas serán distintas (si así lo quieres, claro). Habrás visto que en muchas webs, te recomiendan temas en función del sector de actividad, bien pues con Divi las tienes cubiertas casi todas (por no decir todas que queda mal). Echa un vistazo aquí y verás varias webs de varios sectores y todas con Divi. Como te comentaba antes, Divi Theme viene con Divi Builder el plugin que dota a tu instalación de un potente constructor visual lo que hace que puedas hacer tu propia web casi, casi sin ningún conocimiento técnico y que… si te apetece con posterioridad… puedes mejorar, podríamos decir que… jugando. Fíjate bien como funciona esta maravilla, haz clic aquí. En el capítulo plantilla o themes, como prefieras, dos últimas consideraciones:

1. Existen millones de plantilla gratuitas, puedes verlas desde tu propia instalación en el menú Apariencia –> añadir tema nuevo
2. Por mi experiencia… NO recomiendo plugins ni plantillas de Theme Forest.

Estos funcionan como un supermercado donde los autores venden sus creaciones. El problema viene cuando retiran el producto, lo hacen sin previo aviso y te quedas sin soporte con lo que es imposible que puedas actualizarlos y con el tiempo comiencen a dar incompatibilidades con otros componentes o la plataforma wordpress. Vamos con el paso a paso para instalar Divi (aunque vale para cualquier theme). Ve a Elegantthemes y compra una licencia. Te recomiendo que hagas un esfuerzo y compres la Lifetime, aparte de ahorrar una importante cantidad de pasta, tendrás accesoa tooodos las plantilla y los plugins, así como al diseño en PSD. Una vez «dentro» descarga en tu equipo el archivo del theme Haz clic en Apariencia >> Temas Clica en añadir nuevo… y ahora en subir nuevo navega hasta la carpeta de tu equipo donde hayas descargado Divi (Downloads, descargas, escritorio…) seleccionalo y clica en abrir… ¿lo tienes? .. haz clic en instalar ahora, tomará un par de minutos y tendrás esto haz clic en activar… Asegurate que tienes Divi activo (como en la imagen) y, como prefieras… borra todos los demás. WordPress permite que instales tantos themes como quieras. De esta forma puedes probar distintas plantillas, pero activos SOLO PUEDES TENER UNO DE ELLOS. Ahora, si vas a tu sitio verás el aspecto que tomando tu nueva web pero ya con Divi instalado… será más o menos esto… ¿deprimido? No te preocupes. Iremos más adelante a arreglar esto. Ahora tenemos otras tareas por delante Seguimos…

Optimizando tu instalación: Analytics y Search Control #6

Pueden que ni te suenen, pero ya habrá tiempo que busques más info y aprendas. El caso es que aunque no tengas intención de trabajar mucho el SEO de tu web, ten vendrá bien saber al menos de donde procede el tráfico a tu web (sobre todo si pagas por él). También es necesario que vincules tu sitio a Google Search Control (antes Webmastertools de Google). No son totalmente imprescindibles ahora, pero conviene hacerlo. Hará falta que tengas una cuenta de gmail y con ella accedes o creas una de analytics. Una vez logados añdimos la cuenta de nuestra nueva página y rellenamos los datos para crear la cuenta. Una vez tengamos el código de seguimiento lo seleccionamos y copiamos para a continuación pegarlo en la opción de Divi para ello Ya estamos casi, vamos a terminar de configurar Deja todo como en la imagena continuación… y muy importante, ANTES DE GUARDAR… haz clic en ajustes de Search Control A continuación clica en añadir y continua con añadir un sitio a search control Serás redirigido a Search Control (hasta ahora estabas aún en Analytics… y verás la siguinete pantalla, clica en el botón rojo     Bien, la verdad, y no te asustes es que hasta aquí podría haberlo hecho cualquiera y cuando digo cualquiera me refiero a que podías NO ser tu. Google tiene un sistema para verificar que es quien debe ser quien ejecuta todas estas acciones y para ello tenemos que verificar el sitio. Existen varios métodos, nosotros vamos a escoger la pestaña métodos alternaativos y vamos a elegir hacerlo mediante google analytics.      Esperamos unos segundos tras hacer clic en el botón rojo «verificar» nos debe aparecer la imagen de abajo… ¡¡Hemos terminado!!

¿Necesitamos un Child Theme? #7

Si no has tocado ninguno de los ficheros originales de Divi, realmente NO lo necesitas… pero es conveniente. Igualmente, si no tienes pensado de momento hacer ninguna modificación del CSS no hará falta tampoco, además con el espacio que Divi trae para ese propósito tenemos suficiente ya que NO lo borrará cuando actualicemos la plantilla.

En cualquier caso, tampo tiene complicación y evitamos problemas posteriores y… hablando de posteriores puedes hacerlo después, no necesitas que sea ahora mismo.

Un poco de luz

¿Que es un child theme o tema hijo? Son un conjunto de archivos que proceden del tema padre y con los que podremos hacer modificaciones sin el riesgo de perderlas posteriormente cuando realicemos las actualizaciones de la plantilla original ya que estos archivos se guardan en una carpeta diferente en tu instalación y por tanto cuando actualices el theme estos, el hijo, NO SE VERÄ AFECTADO y por tanto tus modificaciones se guardarán. No pretendo darte una master, por eso nno vamos a entrar en materia en profundidad. Como te contaba antes puedes hacerlo otro día, otro mes… o no hacerlo si no vas a tocar los archivos del theme original, pero de todas formas te cuento como puedes tener un tema hijo (yo lo recomiendo) Podrías hacerlo de forma manual, creando los archivos y picando el código (son apenas unas lineas) pero como comentaba, ni esto es una master ni es el propósito del post (hacerlo lo más fácil) así que te recomiendo un par de opciones y tu escoges con el que te encuentres más cómodo. Por una lado Orbisius. Me gusta porque una vez creas el child, puedes borrar el plugin y así descargamos la instalación de «peso» innecesario. Te dejo este video… ¡¡en dos minutos listo!! https://youtu.be/BZUVq6ZTv-o Por otro lado Luis Alejandre de Divi4you tiene uno con el que no solo podrás hacer tu tema hijo sino que además trae un montón de opciones… y si, GRATIS.

Como ves en la imagen padre e hijo viven juntos, NO borres Divi, ten en cuenta que el child theme, SOLO tiene los archivos que han sido modificados, el resto los aporta el padre.

Los 3 secretos que harán de tu web un sitio profesional diferente a los demás #8

Cuando ves un sitio realizado por si mismo hay cosas que chocan a la vista y no sabemos bien que son pero que no causan buen efecto. La mayoría de los sitios profesionales se rigen por el código de diseño y que cumple siempre estos tres principio.

Secreto #1: Paleta de Colores

Define que colores integrarán tu web. Sin profundizar demasiado, existe 6 colores básicos que tienes que definir, aunque la mayoría de la herramientas te darán solo 5:

• Color Principal
• Color Secundario
• Sombra Clara
• Sombra Oscura
• Sombra Fondo Clara
• Sombra Fondo Oscura

Pero no te preocupes, existen herramientas que te ayudarán, por ejemplo colourlovers.com o pictacolous.

Secreto #2: Anchos de Contenidos

Puedes seguir la regla de situar un ancho a 1.100px y otro a 960px. Este simple efecto dará a tu web un aspecto elegante y te permitirá integrar distintos elemntos en tu web según tus necesidades, tamaños para imágenes, etc.

Secreto #3: Fuentes

Lo normal es una única pero puedes jugar con dos principal y secundaría, aunque ya te digo que esta es opcional.

Creando la Página de inicio #9

¿Recuerdas más arriba cuando instalamos Divi? dijímos que la web se veía más o menos asi:     Pues bien lo primero que debemos hacer es añadir una página y comenzar a configurarla. El caso es que cuando instalmos wordpress, verás como ya tienes una «página de ejemplo», vamos a usarla para que sea nuestra página de inicio, la que se verá cuando alguien visite tudominio.com    

Primeros pasos

Esta será la pantalla de edición de página. Sigue las instrucciones en el orden que ves:

1. Cambia el nombre: aquí puedes poner lo que quieras… Inicio, Home, Homepage, el nombre de tu negocio… lo que quieras
2. Clica el botón editar, aquí pon lo mismo que el nombre que le hayas dado, con esto conseguira que la url (la dirección) sea igual que el nombre de la página
3. Selecciona tooodo el texto y borralo, no nos sirve
4. Haz clic en el botón morado para usar el constructor de Divi
5. Clica ahhora el formato de la página, despliega y selecciona Fullwidth (todo el ancho de página)
6. La página está publicada, es decir, la podría ver cualquiera, selecciona el estado Borrador, de esta forma solo se verá por quien este logado editando wordpress
7. Por último, guarda o actualiza para guardar los cambios

Este será el aspecto que tendrá ahora Por experiencia se que ahora viene lo más complicado, organizar el contenido y darle un aspecto agradable para su consumo por el usuario, que refleje nuestra marca… quienes y qué somos. Pero también para eso contamos con ayuda de parte de esta plantilla, haz clic en cargar de la biblioteca y lo vemos. Tendrás delante de ti, una de las herramientas mas potentes, la biblioteca de Divi. No solo por el montón de plantillas predefinidas que cubren casí cualquier tipo de página que quieras crear sino también porqué puedes crear las tuyas propias para reusarlas con posterioridad. También es posible que escojas por ejemplo la plantilla Shop Basic y no quieras este o aquel módulo. Puedes quitarlo y añadir un módulo de cualquiera de las plantillas restantes… las posibilidades son casi infinitas Nosotros vamos a hacer lo siguiente: Vamos a construir una web de una sola página, reduciendo lo más posible el tener varias y una estructura complicada. Vamos a poner en marcha la web lo más pronto posible, después… podremos seguir ampliando y completando todo lo que quieras… así que al lío.

Configurando la página Inicio

Haz clic en cargar de la biblioteca y carga Página de Inicio de Empresa Fíjate en la imagen superior. No es nuestro caso pero quiero dejarlo claro. Mucha atención con la casilla que ves señalada. Si cargaramos la plantilla ahora sobreescribiríamos el contenido que ya hubiera. Repito no es nuestro caso porque estamos empezando de cero, pero mucha atención a esto. Para hacerlo más sencillo y que no tengas que cargarlas todas para ver cual es la que mejor te conviene, descarga este PDF donde están todas y puedas ver mejor todos los módulos que las componen, así elegir te será más fácil.

Fijando la Página de inicio y creando el menú #10

A continuación vamos ajustes >> lectura Seleccionaremos como página de inicio la que acabamos de crear, en mi caso también se llama inicio También es importante que realizemos otros ajuste ahora, el de los enlaces permanentes Ve a ajustes >> enlaces permanentes Una vez alli selecciona el que muestra la imagen y haz clic en guardar Si ahora vas al frontend y haces clic en el logo, arriba a la izquierda verás como tenemos delante la plantilla que acabamos de seleccionar… ahora la web es más o menos esto

Menú

te habrás fijado ya que en la parte superior izquierda hay un menú de navegación y que no corresponde muy bien ni con lo que tenemos ni con lo que queremos. Ve a apariencia >> menús tendremos esto en pantalla escribimos el nombre del menú, puedes poner wl que quieras, primario, principal… y clicamos en crear… ahora toca añadir los elementos Tendremos a la izquierda un cuadro como este Podríamos escoger cualquiera de los elementos… páginas, actegorías… cualquiera Hoy nos interesa enlaces personalizados. Vamos a dividir la que será nuestra web en 3 zonas De momento es tan solo una división imaginaria… no efectiva, pero vamos a seguir Volvemos a nuestro menú vamos a crear tres enlaces personalizados (uno por zona) Escribe la url añadiendo el nombre de la sección, nosotros, testimosnios, contacto; a la url de tu página web (mira la imagen) Ahora en texto del enlace pon lo que quieras que aparezca en el menú y por último haz clic en añadir al menú. Repite 3 veces, una por cada sección. Ahora localizamos en nuestra página el modulo correspondiente a las secciones (es fácil, tranquilo)     y a continuación          Repite esta operación con las otras dos secciones que vamos a configurar en la página. Te debe de quedar así       Y si ahora actualizamos nuestra página de inicio debe quedar así Cuando cliquemos en cualquiera de ellos se desplazará suavemente hasta la parte que corresponde.

Añadir contenido al blog: Posts #11

Al tener Divi instalado tenemos dos posibilidades de añadir posts, mediante el editor tradicional y por medio del constructor de Divi. En ambos casos necesitaremos:

• Un titulo
• Una imagen que represente el post
• contenido

Verás al acceder a la edición de posts que es muy parecido a la edición de páginas, pero en el caso de los posts tenemos más posibilidades. La primera diferencia con respecto a las páginas es la posibilidad de categorizar y etiquetar. Es como si tus recibos de casa y docuemntos personales los ordenarás mediante carpetas y post-its. La diferencia con el «mundo real» es que un documento, un recibo, por ejemplo, físicamente solo puede estar en una carpeta. Con las tecnologías de la información, podríamos meter ese docuemnto en dos o más carpetas, dos o más categorías. Ahora es cuestión de estrategía y planificación como queremos que el usuario, y Google, encuentren nuestros contenidos. Por ejemplo, si tuviéramos un blog de cocina y decidimos que ordenaremos nuestros posts en carnes, pescados y postres, categorías, no tendría sentido que un mismo posts estuviera en dos a la vez. Pero por otro lado, si tuviéramos un blog de marketing por ejemplo, podríamos tener un post sobre Facebook en marketing online y socialmedia. Después tenemos las etiquetas. En este caso si que hay que pensar menos en la cantidad, serían palabras relativas, que nos recordarán el tema principal del post, de esta forma, un usuario podría navegar por tus posts buscando por etiquetas. Siguiendo con el ejemplo del blog de cocina, un post de la categoría pescados, si lo etiquetamos con besugo, un usuario podría ver todas las entradas de pescado o seleccionar la etiqueta y encontrar todas las recetas etiquetads con besugo.

Creando contenido de forma estandar: el editor tradicional

La pantalla de edición no te resultará especialmente extraña, ya que como ves, es practicamente un editor de textos como Word o Docs de Google pero con muchas menos posibilidades de edición. Hablando de Word y Docs, hay quien acostumbra a escribir en estos soportes y después copiar y pegar en Wordprees. Este sistema es WYSWYG (What you see, what you get) >> «lo que ves es lo que te llevas». Quiere decir que lo que ves difiere poco de lo que realmente publicarás. En cualquier caso puedes previsualizar el post antes de publicar y rectificar cuantas veces quieras, incluso si lo has publicado.

Creando contenido de una forma distinta: constructor de Divi

Igual que cuando creamos la página, accede al editor de entradas y haz clic en el botón morado de Divi Ahora el editor nativo de wordpress desaparece y en su lugar tendremos esto Ahora tienes un módulo de texto pero podrías usar cualquiera de los disponibles: imágenes, sliders, videos… y no solo eso, tambien podrías gestionar todo tipo de combinación de columnas

La decisión

Ahora es cuando toca decidir cual será el tipo de publicaciones de tu blog. Conviene que veamos algunos pros y contras: Editor WordPress Puedes jugar con la opción Formato de Posts, lo que te permitirá también hacer el juego de prestación de parrilla de posts muy original (caso que vayas a editar posts de distintas clases: videos, podcasts, textos) Confianza. Al parecerse a cualquier editor de texto que conocemos nos encontramos en un medio más habitual No hay pasos extra. Una vez escrito y corregido podemos publicar, solo etiquetar y categorizar Editor DIVI No hay opciones de Formato de Posts Puedes tener una o varias plantillas de posts, guardalas en la biblioteca y usarlas según te convengan Ganas en impacto visual a cambio de algunos pasos extra

usando el constructor en los posts #12

Lo mejor que puedes hacer… es dibujar como quieres que sean tus post. Si con papel y lapiz… como siempre Después podemos extrapolar ese diseño al constructo, lo grabamos y podemos usarlo tantas veces como queramos. he diseñado este para que veas que potencia tiene y el impacto visual que produce (es cierto que llva mas curro… pero quien algo quiere algo le cuesta) 🙂 Si te gusta puedes descargarlo (luego veremos como usarlo)

Grabando y reutilizando una pantilla

Lo genial de Divi es que todas estas plantillas las puedes grabar en su biblioteca para usarlas posteriormente… y lo mejor… puedes usarlas incluso en otros proyectos porque puedes exportarlas e importarlas (lo veremos más adelante) Esta es la plantilla que acabamos de hacer para este post Una vez este a nuestro gusto (la podemos retocar después sin problema) podemos grabarla en la biblioteca     Haz clic en guardar en biblioteca y a continuación dale nombre y guarda. Te devolverá a la edición del post, pero tranquilo que estará guardado       A continuación añadiremos una plantilla En el menú de la izquierda Entradas >> Añadir nueva Habilitamos usar el constructor y cargamos de la biblioteca     Clicamos el botón azul cargar y ya tendremos cargada la plantilla para reutilizarla y podremos hacerlo sin limite, tantas veces como se quiera, pero, … ¿y si quisieras usarlo en otra web, tuya o de un cliente? Vamos a verlo

Exportar una plantilla

Desde el escritorio, accedemos a Divi >> Biblioteca Y accedemos a la siguiente pantalla Seleccionamos la plantilla (en este caso solo tenemos una) y a continuación en importar exportar     Por último hacer clic en el botón inferior azul y ya tendremos en nuestro equipo el fichero de la plantilla

Importar una plantilla

Para importar, iremos tambien a Entradas >> Añadir una nueva y haremos clic en un pequeño icono arriba a la derecha con dos flechas A continuación , haz clic en el botón o arrastra el archivo que quieres importar Ahora verás como en tu nueva entrada tienes cargados todos los módulos. Por último cambia lo que necesites ya que la importación lo actualiza todo, contenidos incluidos

Sidebars y widgets #13

He creado una página nueva y la he llamado blog     Este es el aspecto que presenta ahora, verás que he señalado un recuadro a la derecha, es la barra lateral, vamos a verla, como se configura y ponemos el contenido en ella. Vamos a Apariencia >> Widgets        A la izquierda, tienes los distintos widgets disponibles. Estos son los que trae una instalación de wordpress típicas, aunque puede haver muchos más. En ocasiones hay plugins que al instalrlos, añaden widgets para poder usarlos en los sidebars, como por ejemplo, plugins para gestion de redes sociales o formularios. A la derecha, lo primero que vemos es las distintas áreas donde estos widgets van a parecer. Por un lado tenemos la barra lateral y 4 áreas para el pié de página… y algo que no todos los themes tienen: puedes crear tantas como quieras y luego ponerlas donde quieras usando para ello el módulo de barras laterales del constructor. Por otro lado cada widget tienen su propia configuración que salvo en un par de casos concretos es super-simple.

Configurando la barra lateral

Como ves en la imagen es como viene por defecto una vez instalas wordpress. La barra lateral ha sido una característica de los blogs desde sus comienzos, y en muchos casos se ha usado para publicidad y spam. Quizás por eso como que nuestros ojos se han hecho «inmunes» y apenas si llama la atención lo que aperece en ella, esto puede ser una causa de porque ahora los bloggers se inclinan por no usarlas y hacen los posts a pantalla completa (como este que estás leyendo por ejemplo). En cualquier caso, vamos a configurar una que resulte útil para el usuario. Pondremos, un casillero para buscar, más posts realcionados con este que leen para aunmentar el número de páginas vista, las categorías y una nube de etiquetas. Como ves todo pensando en el usuario y que este pueda encontrar más info de su interés. Podríamos poner también, y esto lo hacen la inmesa mayoria de bloggers, un formulario de suscripción para que les envíemos por email los posts que vayamos publicando. Por partes. Dejar la barra vacía Como te he dicho viene ya con algunos widgets, vamos a quitarlos, fíjate en la imágen.     Lo desplegamos haciendo clic en el triangulo invertido de la parte derecha del widget y hacemos clic en borrar. Esto lo repetimos con Archivos y Meta. A continuación vamos a la parte izquierda y buscamos entre los disponibles «Nube de Etiquetas» (están por orden alfabético)       Podríamos elegir en el área que lo queremos, bastaría con clicar en ella, pero lo vamos a dejar tal cual y clic en añadir widget. Ahora tenemos la barra lateral con los widgets que necesitamos/queremos, quedaría ordenarla, y eso se hace clicando y sin soltar arrastar hasta el lugar que quieres el widget. Yo por ejemplo, la nuebe de etiquetas la quiero por encima de categorías, arrastro y suelto en su lugar y la barra quedaría de esta forma:     De igual forma que el editor tradicional de wordpress, esto también es WYSWYG, osea, que tal cual lo tienes, tal cual se verá, como puedes comprobar   Están en el mismo orden que hemos dejado la sidebar.

Añadir un widget nuevo

Antes de continuar. En alguna ocasión me han preguntado en un curso ¿los widgets se acaban? es decir, si usamos el de nueb de etiquetas, ¿podremos usarlo en otra sidebar otro de nube de etiquetas? Por supuesto que si, tantas veces como quieras, no, no se acaban. Dicho esto, echa un vistazo. Verás que no hay ninguno sobre instagram… ¿y si quisieramos poner nuestro instagram en la barra lateral? ¿Donde hay más widgets? Imagina que quieres que en la barra lateral aparezcan los iconos de tus redes sociales para aumentar tus seguidores. Esta opción, ni viene por defecto con wordpress ni hay ningún widget para ello Tendremos que instalar un plugin. Vamos a Plugins >> Añadir nuevo >> Subir (lo debes de haber descargado de ElegatThemes previamente y estará por tanto en tu equipo) lo instlamos y lo activamos. Sigue las instrucciones para configurarlo (prácticamente te guía en el proceso) y una vez esté si volvemos a Apariencia >> Widgets verás esto…     Instalando el plugin hace que aparezca este nuevo widget que podrás llevar a tu barra del mismo modo que hicimos antes.

Creando una nueva Sidebar

Antes de nada una advertencia. Verás que si estas en widgets, el tecto que pone es «crear un nuevo widget» y esto es algo confuso. No se crean widgets aquí, se crean nuevas barras para poder persnalizar y usar donde nos convenga. Aclarado esto, lo único que hay que hacer es darle un nombre, por ejemplo, «barra personalizada», clic en crear y actualizamos la página, tendremos esto Al igual que cualquier otra podemos incluir en ella los widgets que nos convengan. Para usarla, lo único que tenemos que hacer es incluir en el diseño el módulo barra lateral     Y en su confuguración, elegir la que necesitamos       

Una página de blog que mola #14

Esta es la página original de Divi en la que se muestran las entradas No es que sea muy molona… pero tiene arreglo Vamos con ello Como siempre, lo primero, hacer clic en usar el constructor de divi, usaremos ancho de página completo… Esta será la pagina que usaremos para el blog     Empezamos incluyendo la imagen superior y el título            Es sencillo, lo único a tener en cuenta es el módulo Post Destacado que tendremos que poner que solo muestre uno          A continuación el módulo con los tres últimos posts (en realidad 2º, 3º y 4º) y resto de posts (a partir del 5º incluido)       Ahora vamos a hacer que cada módulo muestro los post sin que repitan los ya mostrados. Para eso usaremos la siguiente opción     En la imagen el módulo resto de posts de la izquierda compensado con uno. Lo siguientes habremos de compensarlos con 2 y con 3. Esto hará que evite repetir el 2º y el 3º respectivamente Así tendremos este resultado       Si te gusta te la puedes llevar, haz clic en la imagen y descargala

tuneando el footer (pié de página) #15

Como ya hemos visto los widgets y como funcionan, estamos en disposición de personalizar el pié de página. Estos funcionan algo distinto ya que los vamos a trabajar por medio del personalizador Ahora hacemos clic en Pié y a continuación en Diseño     ahora elegimos el diseño que más se adecue a nuestro gusto Yo voy a escoger este para poner después un formulario en el espacio más ancho (lo veremos después cuando integremos Bloom, un plugin para crear listas de suscriptores) En los otros dos espacios podríamos poner un menú personalizado por categorías, para facilitar la lectura del blog… y en el segundo de los espacios más pequeños los datos de contacto. Por último el fondo, el que creas mejor para tu imagen corporativa. Ten en cuenta que también personalizaremos el espacio inferior bajo el pié. Una buena idea es usar el mismo tono pero un poco más oscuro para esta última zona. Volvemos hacia atrás y seleccionamos Widgets. Como hemos seleccionado un diseño con tres huecos solo será necesario usar estas zonas     La primera, más ancha, la dejamos para más adelante. En la del centro pondremos un menú personalizado solo con categorías que deberemos de tener creado previamente (recuerda que lo hicimos más arriba) Clicamos en Área de pié #2 y añadir widget y bajamos hasta seleccionar Menú Personalizado      Añadimos el widget y guaradr y publicar Como ves ya aparecen en la parte inferior las categorías, más tarde seguiremos personalizandolas. Vamos con la seguna zona de widgets (en nuestro caso 3ª zona), allí pondremos nuestros datos de contacto. Usaremos un widget de texto     Escribimos tal cual nuestros datos y guara y publicar            Ya te habrás fijado como quedan pegados a la izquierda, esto es porque el área #1, la más ancha, la hemos reservado para poner un formulario de suscripción y al quedar vacía, se ajustan al margen izquierdo. En cuanto pongamos el área #1 se solucionará esto. Dejamos de momento la personalización del pié aquí y volvemos cuando hayamos instalado y configurado Bloom (formualrio de suscripción). La barra inferior también la dejaremos para más adelante, antes instalaremos otro plugin y usaremos esta zona para colocar los enlaces de privacidad y cookies.

más potencia a wordpress: bloom, formularios de suscripción #16

Tanto bloggers profesionales como empresas y emprendedores coinciden en una cosa: «Hubiera empezado a construir mi lista de suscriptores desde el día uno» Hoy en día el bien más preciado en internet es la atención del usuario, pero no hay atención sin usuario. Esto que te puede parecer una perogrullada no quiere decir ni más ni menos que sin tráfico no hay nada. Pero debemos tener un plan trazado «para después» para una vez que el usuario llegue a nuestra web. ¿Porqué es tan importante tener una lista, una buena base de datos de usuarios? Por que ese tráfico será gratis. Tanto el posicionamiento como la publicidad son de pago. En el primer caso pagamos tiempo y recursos y en el segundo pagaremos con pasta. Pero a nuestros suscriptores tan solo tenemos que enviarles un email, el táfico es totañmente nuestro… y a coste prácticamente cero. ¿Como comenzar a construir nuestra lista? Materiales necesarios Debemos tener 2 elementos básicos:

• Un plugina para la captura de los datos y…
• un proveedor de emailmarketing

Para lo primero usaremos Bloom, un plugin también de ElegantThemes lo que garantiza una compatibilidad del 100% con Divi. Y para lo segundo tenemos en el mercado infinidad, cada uno con sus cosas buenas y sus cosas malas. Personalmente uso ActiveCampign, pero para este manual usaremos Mailchimp por tener la parte gratuita más amplia (hasta 2.000 suscriptores y 12.000 emails/mes)

Crear una cuenta en Mailchimp

Empezaremos por aquí ya que nos hará falta alguna cosa para poder configurar posteriormente Bloom, así que allá vamos. Accedemos a la web de Mailchimp     Completa el alta rellenando el formulario        Haz clic en Listas y crea una       Completa el formulario para creación de listas y vuelve al dashboard. A continuación, haz clic en tu usuario y seguido en account.          Ahora ve a Extras >> Api Keys     Haz clic en Create api key Ahora selecciona y copia la api (lo que ves sombreado) y guardala para después (nos hará falta para configurar Bloom)         

Instalando, activando y configurando Bloom

De nuevo tenemos que descargar el plugin Bloom desde la web de ElegentThemes de la misma forma que descargamos el theme. Lo instalaremos de la misma forma que ya hicimos… en Plugins >> Añadir Nuevo… y ahora en subir lo seleccionamos desde el directorio que lo hayamos descargado, subimos y a continuación activar. Ahora aparecerá un nuevo item en el memnú principal de la izquierda de tu pantalla     Y hacemos clic en Optim Forms y en nuevo optin; y ahora escogemos el tipo Nosotros escogeremos widget ya que lo que queremos es que aparezca en una zona de widgets del pié de página            Seguimos, dale un nombre, selecciona tu proveedor (MailChimp) tu nombre de usuario y la cave api (la que guardamos antes)           Clicamos en siguiente y pasamos al diseño del formulario   Escoge el que quieras y… abajo del todo, clic en siguiente             Esta es la configuración que le he dado, yu puedes cambiar lo que prefieras            Finalmente haz clic en el icono y previsualiza como ha quedado     Seguimos en Apariencia >> Widgets Clica Bloom y arrastra has Área pié #1        Configura así y…     ¿Genial? pero aún podemos mejorarlo… ve ahora a personalizador y juega con las opciones hasta dejarlo como te gusta       

Barra inferior del pié de página #17

Esta zona es ideal para inserta la información legal: Aviso de Cookies, Política de Cookies… etc Antes de nada vamosa instalar un plugin llamad Asesor de Cookies (ya sabes el camino, no me hagas explicarlo de nuevo) Recuerda instalar y activar Vamos a Herramientas >> Asesor de cookies Y configuramos     Déjalo como en la imágen, y muy importante, haz clic en generar páginas y por último graba El plugin, como acabas de ver generará dos páginas, una de más info sobre cookies y otra de política de cookies, copia sus url’s, nos harán falta ahora. Vamos de nuevo al personalizador y déjalo a tu gusto En la parte inferior hay una caja (resaltada en la imagen)          Aquí pega directamente lo siguiente:

Información Cookies | Política Cookies

Quedará así:        Ya va tomando forma Solo queda ir a Divi >> Opciones del Tema y configuramos las redes sociales que tengamos, las que no, las descativamos        y este será el resultado final     

Insertar un botón llamada en 1 clic para móvil #18

La mayoría del tráfico que llegará a vuestras páginas será a traves de móvil, esto ya no es noticia… pero la gente aún se olvida. Lo que el usuario tiene en la mano es un teléfono, aún así, si quiere contactar en la mayoría de los casos lo envíamos a un formulario… y a veces condemasiados campos a rellenar. ¿No sería buena idea que pudiera hacer una llamada tan solo con hacer clic en un botón? Un botón con un color llamativo, texto bien legible y que pueda clicarse tan solo con una mano, ya sabes, de esos que no hay que apuntar, sobrevolarlo y hacer clic. Vamos a insertar uno de estos. Un botón situado casí en el pié, por debajo del formulario, pero… que solo se vea cuando el usuario se conecte desde móvil. Vamos En primer lugar vamos a insertar una nueva sección normal, tamaño una sola columna y seleccionamos el módulo botón. Abrimos el módulo y lo configuramos. Comenzamos por a pestaña contenidos y esta la dejamos tal como se ve en la imágen. Seguimos con la pestaña Diseño, esta la dejamos como se ve a continuación Por último vamos a la pestaña Avanzado y la dejamos todo tal cual excepto lo que muestra la imagen y ya por último Guardar y Salir. Con este último paso como ves, desactivamos el módulo para Tablets y equipos de escritorio.

Llevar tu web a otro nivel:

plantilla de estructura #19

Vamos a avanzar un poco más. Tanto para ti si eres un profesional independiente, pymes, start up… o bien, estás pensando en ganarte la vida con el diseño de páginas web, esta herramienta te va a simplificar mucho, pero mucho, el diseño de una página web. Se trata de una plantilla, multipropósito, ya que la puedes aplicar para: diseño de páginas web de producto de empresas comercio electrónico páginas de aterrizaje… y además, para cualquier sector de actividad… como ves una auténtica joya. Practicamente, lo único que tendrías que hacer sería sustituir los textos e imágenes que ya trae por los tuyos, ocultar aquellas secciones que no te hagan falta y duplicar y tunear aquellas que necesites.     Comenzar a trabajar con esta plantilla es tán fácil como ir a Divi >> Biblioteca de Divi y seleccionar importar. Seleccionamos entonces el archivo zip que te puedes descargar más abajo e importarlo. A continuación crea una página nueva, selecciona el constructor de Divi y Añadir desde biblioteca, eso será todo. Y como te comentaba un poco más arriba, ahora solo queda sustituir textos e imagenes por los que necesites y listo.

Guía de imágenes #20

Sin duda hoy en día las imágenes osn una parte muy importante a la hora de diseñar una página web. En ocasiones es dificil acertar con el tamaño adecuado de las mismas con respecto a la columna donde van a ser insertada. Con el objeto de hacer más fácil esta tarea te dejo estás guías. Son propias de ElegantThemes con lo que tienes garantía de ser acertadas, ya que están hechas por sus propios diseñadores. Los formatos que mejor van son JPG, PNG y GIF, este va genial ya que tienen la posibilidad de animaciones (como si fueran pequeños videos) Los tamaños que vas a ver a continuación están pensados para un ancho de página de 1080 px y separación de columna de 3.          

Pasos siguientes…

Espera que hayas disfrutado de esta guía… y que te haya despejado una duda o dos de las que tuvieras Ese era mi objetivo al escribirla… y antes de despedirnos, deja que te pregunte algo ¿Tienes ya una página web para ti o tu negocio? Si es así ¿Está optimizada para laventa y te proporciona contactos comerciales? ¿cada día? Tómate un minuto y piénsalo ¿Sientes que podrías darle un empujon a tu negocio…? Entonces debes estar muy atento los próximos días a tu buzón de correo Te voy a envíar un minicurso en video que ter,minará de resolver esas duas que aún te persiguen… Estoy completamente seguro que te va a encantar… Pero necesito saber que te vas a poner en serio que no vas a leer la guía y  ver los videos y ya Ponte a ello… ¡AHORA! Seguimos… es hora de ponerse en marcha