Diseño web

Hoy vamos hablar de cómo alinear los elementos usando CSS, pero antes déjame que te cuente una cosa:

Cada 2 jueves mando un correo.

Bueno, mando muchos más, pero ese es especial.

Se lo mando a mis suscriptores.

Tiene tanto valor que debería ser de pago.

De momento es gratis, pero en breve dejará de serlo.

En cada uno de esos correos comparto una historia interesante que quizá te haga pensar y mejorar en tu negocio.

Además, al darte de alta te voy a regalar un audio de 7 minutos en el que explico:

* Las 2 únicas cosas que necesitas para que tu negocio tenga éxito en internet. No 25, ni 100, ni 1000, sólo 2 que no son ni una web ni un hosting por muy loco que te pueda parecer.

* Cómo saber seleccionar a qué dedicar tu tiempo y tus esfuerzos usando la técnica de toma de decisiones que utilizó Jeff Bezos para decidir si intentar montar Amazon o seguir con su trabajo por cuenta ajena.

En cuanto la lista sea de pago, dejaré de regalar el audio.

Apúntate ahora mismo en www.pampua.es/regalo o deja pasar esta oportunidad, tu mismo…

Total, si no te gustan los mails que mando puedes darte de baja…

Te lo digo por última vez: pampua.es/regalo

Cómo alinear elementos con CSS en WordPress

Por defecto los contenidos que creamos se van alineando en la parte superior izquierda de nuestra web, pero podemos alinearlos en otras posiciones.

Centrar elementos horizontalmente

La forma más sencilla es con la etiqueta en el html aunque como íbamos a hablar de CSS os cuento otras opciones que tenéis:

Si se trata de un texto, podéis usar: text-align: center;

Si se trata de un bloque, podemos usar margin-right:auto

Y si son varios bloques lo más sencillo es encerrarlos en un bloque padre y asignarle las propiedades: display: flex;

  justify-content: center;

See the Pen bQPbQZ by Ramon (@pampua) on CodePen.

Alinear elementos a la derecha

Lo más habitual es tratar de poner una imagen a la derecha del texto, pero antes de entrar en detalle tengo que explicarte la diferencia de las 2 opciones que hay, porque dependiendo de como desees mostrar la imagen deberas usar una de las propiedades CSS align o float.

Imágenes alineadas: no permiten ajustar el texto alrededor de ellas, solo puedes colocarlas a las izquierda, derecha o al centro con el texto antes o después de la imagen. Alinear la imagen deja un espacio en blanco al texto siguiente, puedes ver el espacio en blanco si vas a la sección de la imagen alineada. Como verás esta opción te limita bastante el diseño.

Imágenes flotantes: te permitirá que el texto se ajuste alrededor de la imagen como ocurre en un libro o un periódico. las imágenes flotantes aparecen horizontalmente en su sitio.

Es por esto que te recomiendo que en lugar de usar text-align: right para alinear elementos a la derecha, mejor uses float: right; Además puedes definirle los márgenes que te interesen con la opción margin: 0px 3px 6px 9px; El orden es el mismo que en un reloj, el primer valor corresponde arriba (a las 12) el segundo a la derecha (las 3) el tercero abajo (las 6) y el último a la izquierda (las 9). Si sólo indicas un valor se lo aplicará a los 4 lados por igual. También tienes la opción de usar margin-top, margin-right, margin-bottom y margin-left sí sólo deseas aplicar el margen por un lado.

See the Pen alinear a la derecha by Ramon (@pampua) on CodePen.

Atención, un detalle importante sobre la propiedad float: las imágenes flotantes se su...

Hoy vamos hablar de cómo puedes insertar una galería de fotos responsive en tu WordPress, pero antes un poco de autobombo!!!:

Si quieres que te ayude a crear o mejorar tu página web pásate por Pampua.es

Te ofrezco garantía de satisfacción total (hasta que no esté a tu gusto no pagas el último 50%) y soporte ilimitado por mail. El 100% de los clientes terminan contentos. Lee sus reseñas!

Cómo crear una galería responsive en WordPress

Crear una galería de fotos desde el propio WordPress es  muy fácil.

Dentro de la página o entrada en las que quieras incluirla, solo tienes que hacer clic en el botón “Añadir objeto” como si fueras a añadir una imagen normalmente.

En la menú de la izquierda, selecciona “Crear galería”:

Ahora podrás seleccionar todas las fotos que quieras incluir. Cuando las hayas escogido todas, haz clic en el botón “Crear una nueva galería”.

En la siguiente ventana podrás editar algunas cosas, como el orden de las imágenes, las leyendas (que se mostrará como si fuera el título de la imagen), el número de columnas a mostrar, el tamaño de las miniaturas y hacia dónde enlazan, aunque esta última opción está muy limitada.

Pero la verdad es que la galería así queda un poco cutre, vamos a mejorar el aspecto un poco añadiendo un efecto “mesa de luz” o “Lightbox” para que cada vez que hagas clic en una imagen de la galería, se amplíe mostrándose en el centro de la pantalla con todo alrededor oscurecido, añadiendo además unas flechas de navegación para que puedas pasar a la siguiente o a la anterior foto.

Para activar este efecto, solo tienes que instalar este plugin llamado WP Featherlight, y en la edición de la galería seleccionar la opción “Enlazado a: Archivo multimedia”. Es un plugin muy ligero y que funciona nada más instalarlo sin tener que configurar nada.

Si queremos mejorar aún más su aspecto os recomiendo que también instaléis el plugin de “Tiled Gallery” que nos muestra la galería con un interesante efecto de mosaico:

La configuración de este plugin para que funcione correctamente es muy sencilla, dejamos solo activada la primera opción llamada “Tiled Galleries” y desactivamos el resto:

Y ahora una forma distinta de mostrar las imágenes:

Importar las fotos automáticamente desde Instagram

Esto tampoco tiene mucho misterio, simplemente tenemos que instalar el plugin “Instagram Feed” https://es.wordpress.org/plugins/instagram-feed/ y configurarlo. Sólo tienes que conectarlo con tu cuenta de instagram, configurar cuantas fotos y columnas quieres que muestre (te recomiendo que sea el mismo número en ambos campos para mostrar una tira de imágenes; 5 queda bien)

Y ahora…

EL PODCAST DE LA SEMANA

Hoy quiero recomendaros Disrupt everything del gran Isra García.

Semanalmente Disrupt Everything te ayuda a cambiar y mejorar todo lo que te propongas. Es una guía para vivir en un estado permanente de reinvención. Un proyecto diseñado para facilitar las claves, estrategias, técnicas, habilidades, rituales, nuevos fundamentos, procesos, sistemas o trucos que te ayuden a reinventarte a ti mismo, y todo lo demás. La meta final de este podcast es: incomodarte, educarte, molestarte, lanzarte, liderarte, desarrollarte, optimizarte, mentorizarte, potenciarte, propulsarte, elegirte y reinventarte. Vamos a ello.

Como siempre, los puedes escuchar en iTunes, iVoox,

Hoy vamos hablar de cómo puedes cambiar los tipos de letra, las tipografías de tu wordpress de manera sencilla, pero antes un poco de autobombo!!!:

Si quieres que te ayude a crear o mejorar tu página web pásate por Pampua.es

Te ofrezco garantía de satisfacción total (hasta que no esté a tu gusto no pagas el último 50%) y soporte ilimitado por mail. El 100% de los clientes terminan contentos. Lee sus reseñas!

Cómo cambiar los tipos de letra de tu WordPress

Básicamente hay dos opciones, la fácil y la profesional:

Forma fácil

Para los que no queráis complicaros mucho la vida, podéis acudir al plugin Easy Google Fonts. El inconveniente de este sistema es que el catálogo de fuentes es limitado y, además, únicamente podrás cambiar las fuentes de los títulos h1, h2, h3, etc. de forma genérica, por lo que todos los h1 de la web se configurarán con esa tipografía; algo que tal vez no te interese.

Forma profesional

Esta es la opción para cambiar la tipografía de una plantilla WordPress que más me gusta porque es la que más libertad de personalización te ofrece sin tener que gastarte ni un duro o muy poco dinero por el camino.

Se trata de descargar la fuente que más te guste de Internet y cargarla tú mismo al servidor de WordPress. Personalmente me gusta usar Google Fonts y 1001freefonts.com porque tienen un catálogo de fuentes espectacular y son gratuitas.

El único incordio de este método es que debes tomarte las molestias de subir los archivos y, además, deberás escribir código CSS para aplicar las tipografías en tu web.

Pero no te preocupes, te lo he puesto todo muy fácil para que puedas llevar a cabo la hazaña sin tener muchos conocimientos previos de CSS, o incluso sin que hayas accedido nunca antes al servidor de WordPress.

Vayamos paso por paso:

PASO 1. Elegir y descargar la tipografía

En este paso te recomiendo que tengas en cuenta dos cosas:

Lo más probable es que en los títulos de la web nunca llegues a usar los estilos de cursiva o negrita de la tipografía; además puedes añadir esas características a través del código CSS. Así que lo más inteligente es que te descargues la versión básica o “regular” de la fuente.

Si la tipografía elegida es de GoogleFonts la puedes importar en lugar de descargar. Luego te explico.

PASO 2. Cargar los archivos de la tipografía a WordPress

Para los que nunca hayáis accedido a los archivos de WordPress debéis saber que necesitaréis descargar un programa FTP, como FileZilla, que os de acceso al servidor de WordPress y a todos los archivos que hay en él; incluyendo las carpetas de vuestro tema, el código de la web, etc. FileZilla es bueno, bonito y gratuito y, además, muy fácil de usar.

Vamos a ello:

Lo único que necesitarás para acceder al servidor son estos datos (si no sabes cómo encontrarlos, piensa que generalmente te los facilita tu proveedor de hosting en el perfil de tu cuenta) :

Nombre del dominio o subdominio, dirección FTP, nombre de usuario y contraseña de acceso

Una vez has podido conectar con el servidor, debes encontrar la carpeta principal en la que se guardan todos los archivos del tema o plantilla que hayas instalado en tu web. Para darte una pista, dicha carpeta suele estar dentro de la ruta “wp-content/themes” y, por lo general, lleva el nombre del tema que has instalado.

Cuando hayas accedido debes encontrar otra carpeta en la que se guardan las fuentes o tipografías que vienen predeterminadas con el tema. Es posible que el archivo se llame simplemente “fonts”, aunque cada diseñador organiza los ficheros a su manera y no puedo darte una hoj...

Hoy vamos hablar de cómo puedes personalizar un theme usando la función de inspeccionar del navegador y los widgets de HTML, pero antes un poco de autobombo!!!:

Si quieres que te ayude a crear o mejorar tu página web pásate por Pampua.es

Te ofrezco garantía de satisfacción total (hasta que no esté a tu gusto no pagas el último 50%) y soporte ilimitado por mail. El 100% de los clientes terminan contentos. Lee sus reseñas!

¿Cómo personalizar un theme usando HTML?

Es muy sencillo, básicamente hay que saber un poquito de HTML, pero muy poco, porque para este cambio sólo necesitaremos entender dónde están los elementos que queremos clonar para luego poderlos modificar.

Os lo voy a compartir en vídeo, porque la verdad es que explicar algo tan técnico sólo con audio es un poco complicado, pero lo voy a intentar.

Dentro vídeo!

Enlace al vídeo

Ventajas de usar Génesis

Y ahora…

EL PODCAST DE LA SEMANA

Hoy quiero recomendaros “Potencia.pro” de Miguel Angel Terrón, Flavia y Madrillano.

Se definen como el único podcast de humor de WordPress. Hablan de plugins, experiencias y peripecias de este maravilloso CMS desde un punto de vista de lo más irreverente. Si te gusta WordPress, aprenderás con una barbaridad con ellos.

Como siempre, los puedes escuchar en iTunes, iVoox, Spotify, Youtube, etc.

Y esto ha sido todo por hoy, si ya conocías el HTML y has echado algo en falta, cuéntamelo! O si te ha quedado alguna duda o te gustaría que tratase algún tema en concreto pásate por pampua.es y déjame un mensaje; estaré encantado de comentarlo contigo.

O si lo prefieres en los comentarios de iVoox, en twitter @pampua, o en nuestra página de Facebook: facebook.com/pampua

Si te ha gustado este episodio compártelo al menos con una persona a la que pueda resultarle interesante. Por whatsapp, por mail, por  Facebook, twitter o incluso por SMS, como quieras, pero compártelo! Recuerda que puedes escucharlo y suscribirte en iTunes, iVoox, Spotify, Youtube y desde la web de pampua.es/podcast.

Y por último estaré inmensamente agradecido si me dejas una reseña de 5 estrellas en iTunes o un me gusta y un comentario en iVoox. Puedes ver cómo dejar una reseña en www.pampua.es/resena

El jueves que viene hablaremos de cómo modificar los tipos de letra de nuestra página web.

Muchísimas gracias por escuchar hasta el final, por comentar, por tus “Me gusta” y reseñas. Nos escuchamos la semana que viene llueva, nieve o truene!

Hoy vamos hablar de cómo puedes personalizar un theme usando el editor de CSS, pero antes un poco de autobombo!!!:

Si quieres que te ayude a crear o mejorar tu página web pásate por Pampua.es

Te ofrezco garantía de satisfacción total (hasta que no esté a tu gusto no pagas el último 50%) y soporte ilimitado por mail. El 100% de los clientes terminan contentos. Lee sus reseñas!

¿Cómo personalizar un theme usando CSS?

Es muy sencillo, básicamente hay que saber un poquito de HTML, pero muy poco, porque para este cambio sólo necesitaremos entender dónde están los elementos que queremos modificar, y saber los códigos de CSS que tenemos que utilizar para aplicar los cambios que queremos hacer.

Os lo voy a compartir en vídeo, porque la verdad es que explicar algo tan técnico sólo con audio es un poco complicado, pero lo voy a intentar.

Voy a ir haciendo cambios en la web de Pampua.es mientras os los voy comentando.

https://youtu.be/oHhUD91DjAk

Y ahora…

EL PODCAST DE LA SEMANA

Hoy quiero recomendaros “Libros para emprendedores” de Luis Ramos. El funcionamiento del podcast es muy sencillo: En cada episodio revisa un libro que seguro te va a ayudar en tu camino como emprendedor.

Hay un montón de episodios así que aquí te dejo dos formas de navegarlos: verlos todos por orden de publicación (del más nuevo al más antiguo), y por categorías (los más escuchados, los de marketing, los de ventas, etc).

Como siempre, los puedes escuchar en iTunes, iVoox, Spotify, Youtube, etc.

Y esto ha sido todo por hoy, si ya conocías el CSS y has echado algo en falta, cuéntamelo! O si te ha quedado alguna duda o te gustaría que tratase algún tema en concreto pásate por pampua.es y déjame un mensaje; estaré encantado de comentarlo contigo.

O si lo prefieres en los comentarios de iVoox, en twitter @pampua, o en nuestra página de Facebook: facebook.com/pampua

Si te ha gustado este episodio compártelo al menos con una persona a la que pueda resultarle interesante. Por whatsapp, por mail, por  Facebook, twitter o incluso por SMS, como quieras, pero compártelo! Recuerda que puedes escucharlo y suscribirte en iTunes, iVoox, Spotify, Youtube y desde la web de pampua.es/podcast.

Y por último estaré inmensamente agradecido si me dejas una reseña de 5 estrellas en iTunes o un me gusta y un comentario en iVoox. Puedes ver cómo dejar una reseña en www.pampua.es/resena

El jueves que viene hablaremos de cómo hacer que un theme quede como en la demo con HTML, o cómo podemos incluso modificarlo y añadirle secciones.

Muchísimas gracias por escuchar hasta el final, por comentar, por tus “Me gusta” y reseñas. Nos escuchamos la semana que viene llueva, nieve o truene!

Hoy vamos hablar de que es el CSS, para qué sirve, cómo usarlo, precauciones, etc. pero antes, demos paso al patrocinador!!!:

Ya está disponible la nueva gama de altavoces inteligentes de Amazon desde 35,99€

Tienes 4 modelos diferentes. A mi, personalmente, el Echo Spot me tiene enamorado por la pantalla que incorpora. Te permite controlar por voz la reproducción de música en Amazon Music y Spotify, las emisoras de radio en TuneIn, las secciones de noticias y mucho más: todo ello sin mover un dedo.

Si ya eres Prime, tienes Prime Music, que te permite escuchar en streaming más de 2 millones de canciones de los artistas más populares del momento, sin anuncios ni ningún coste adicional.

Amazon Music Unlimited te ofrece acceso a más de 50 millones de canciones, entre las que se incluyen los últimos lanzamientos, por solo 3,99 € al mes para un dispositivo Echo. Amazon Music Unlimited es gratis durante 14 días tras configurar por primera vez el dispositivo Echo. Una vez termine este periodo, puedes conseguir una prueba de 30 días gratis.

Informate de todo en pampua.es/amazon

¿Qué es CSS, realmente?

Como el HTML, el CSS no es realmente un lenguaje de programación. Es un lenguaje de hojas de estilo, es decir, te permite aplicar estilos de manera selectiva a elementos en documentos HTML. Por ejemplo, para seleccionar todos los elementos de párrafo en una página HTML y volver el texto dentro de ellos de color verde, has de escribir este CSS:

p {

  color: green;

}

Anatomía de una regla CSS

Observemos al CSS de antes, un poco más a detalle:

p {

  color: green;

}

La estructura completa es llamada regla predeterminada (pero a menudo «regla» para abreviar). Nota también los nombres de las partes individuales:

Selector

El elemento HTML en el que comienza la regla. esta selecciona el(los) elemento(s) a dar estilo (en este caso, los elementos p ). Para dar estilo a un elemento diferente, solo cambia el selector.

Declaración

Una sola regla como color: green; especifica a cuál de las propiedades del elemento quieres dar estilo.

Propiedades

Maneras en las cuales puedes dar estilo a un elemento HTML. (En este caso, color es una propiedad del elemento p.) En CSS, seleccionas qué propiedad quieres afectar en tu regla.

Valor de la propiedad

A la derecha de la propiedad, después de los dos puntos (:), tenemos el valor de la propiedad, para elegir una de las muchas posibles apariencias para una propiedad determinada (hay muchos valores para color además de green).

Nota las otras partes importantes de la sintaxis:

Cada una de las reglas (aparte del selector) deben estar encapsulada entre corchetes ({}).

Dentro de cada declaración, debes usar los dos puntos (:) para separar la propiedad de su valor.

Dentro de cada regla, debes usar el punto y coma (;) para separar una declaración de la siguiente.

Así que para modificar varios valores de propiedad a la vez, solo necesitas escribirlos separados por punto y coma (;), así:

p {

  color: green;

  width: 500px;

  border: 1px solid black;

}

Seleccionando varios elementos

También puedes seleccionar varios elementos y aplicar una sola regla a todos ellos. Incluye varios selectores separados por comas(,). Por ejemplo:

p,li,h1 {

  color: green;

}

Diferentes tipos de selector

Existen muchos tipos diferentes de selectores. Antes, solo hemos visto los selectores de elementos, los cuales seleccionan todos los elementos de un tipo dado en los documentos HTML. Sin embargo podemos hacer selecciones más específicas que esas. Estos son algunos de los tipos de selectores más comunes:

Nombre del selector

Que selecciona?

Ejemplo

Hoy vamos hablar de que son los widgets, para qué sirven, como usarlos, precauciones, etc. pero antes, un poco de autobombo!!!:

Si quieres que te ayude a crear o mejorar tu página web pásate por Pampua.es

Te ofrezco garantía de satisfacción (hasta que no esté a tu gusto no pagas el último 50%) y soporte ilimitado por mail.

100% de clientes contentos

¿Qué son los widgets?

Hablando en términos muy prácticos, un widget es un bloque de contenido que podemos añadir en los sidebars de nuestra web. Los widget pueden contener imágenes, código que nosotros hemos creado manualmente, como código PHP, JavaScript o HTML, pueden ser un video, botones de redes sociales y prácticamente cualquier cosa. Los widgets de WordPress se añaden a los sidebars y esos sidebars son normalmente determinados por el diseño que estamos usando

Cuando instalas WordPress por primera vez podrás notar que si entras desde tu área de administración en Apariencia > Widgets tendrás una lista de Widgets que vienen preinstalados en WordPress. Los Widgets que tienes disponibles en una instalación fresca de WordPress son:

Buscar: Te permite añadir un campo de búsqueda, de esta forma tus visitantes pueden encontrar el contenido que se encuentran buscando en tu web.

Calendario: Muestra un pequeño calendario en el que los visitantes pueden ver los artículos que publicaste cada día.

Categorías: Muestra las categorías en los que se encuentran organizados tus artículos.

Entradas recientes: Muestra una lista de los artículos más nuevos en tu web.

Menú personalizado: Te permite seleccionar un menú y lo muestra en el sidebar que selecciones para mostrar el widget.

Texto: Te permite añadir texto, pero también puedes añadir código HTML.

HTML Personalizado: Pensado especialmente para añadir HTML.

Y muchos widgets más como audio, imagen, galerías, vídeos…

Estos son solo los widgets que vienen preinstalados en WordPress, pero definitivamente no son todos los que existen. Tú puedes añadir más widgets, por medio de plugins y plantillas.

¿Los Widget son iguales a los plugins?

No, los widget no son plugins pero algunos plugins contienen widgets. Eso puede sonar un poco confuso, así os pongo un ejemplo real con mi propia web para poder explicar mejor la diferencia entre widgets y plugins.

Cómo probablemente habrás visto, tenemos un apartado en nuestra página principal llamado “Últimos trabajos” desde ahí puedes ver las últimas páginas web que hemos terminado, esa área la hemos creado usando el plugin Génesis Portfolio. Ese plugin nos permite crear un área de portfolio como esa, podemos organizar los contenidos, crear categorías y muchas otras funciones.

Entonces el plugin Génesis Portfolio tiene muchas funciones, es un plugin muy robusto y parte del plugin añade widgets para mostrar las categorías del portfolio, las novedades, etc. Esos Widgets son muy buenos y mejoran la experiencia de nuestros usuarios, pero no son realmente necesarios para que el plugin funcione, son solamente parte de él, son realmente una pequeña pero muy genial parte del plugin.

Entonces los widgets son como pequeñas piezas de código que podemos añadir a nuestra web para mejorar la experiencia de usuario, y normalmente esos widgets serán parte de algo mayor, como un plugin o una plantilla por ejemplo.

Que los Widgets sean parte de los plugins y las plantillas que instalamos, les permite a los desarrolladores entregarnos más funciones en un solo paquete de instalación.

¿Cómo publico Widgets en WordPress?

Después de todo esto posiblemente te ha entrado la curiosidad de saber como publicar widgets en tu WordPress. Primero debes conocer los widgets que tienes disponibles, simplemente navega hacia apariencia > Widgets y podrás encontrar una lista de los que tienes disponibles.

Hoy íbamos a hablar de que son los widgets, para qué sirven, como usarlos, etc. pero hemos tenido que hacer un análisis web que creo que os va a ser muy útil, porque hay muchas cosas que podéis aplicar para optimizar vuestra web igualmente.

Si después de escucharlo quieres que te haga un análisis web personalizado  por 30€ analizo durante 15 minutos los puntos clave de tu web a nivel de marketing y diseño.

Cuéntame cuál es el objetivo de tu web y te diré lo que debes modificar para aumentar las conversiones.

Te enviaré el audio en un mp3 a tu email y además lo publicaré en este podcast, (con lo que obtendrás publicidad gratis!)

Pásate ahora mismo por pampua.es/analisis y solicita tu análisis web.

Análisis web de lacoix.com

Empresa de rótulos ubicada en Mutxamel, Alicante y fundada en 1982 (el año del mundial de naranjito!)

Aspectos a destacar:

Falta el favicon -> www.favicon-generator.org

Logo (episodio: 16)

Slider (no lo recomiendo: episodio: 13)

3 iconos… Han intentado adaptarse al tema, en lugar de adaptar el tema a la empresa. Theme Enfold (multiproposito y con un builder): mucho mejor usar génesis

CTA más arriba, en el primer pantallazo

Proyectos destacados… Falta texto, 1987? Leer más sólo muestra la imagen

Sobra el menú breadcrumbs / migas de pan

En el pie sobra el logo y falta el horario

Falta aviso legal y política de privacidad

Iconos de contacto demasiado grandes

Velocidad de carga: Pagespeed, Pingdom, GTMetrix

Nosotros ha de hablar de las personas que forman la empresa. Ver las caras, transmitir confianza

Desde 1982 en realidad es el portafolio de trabajos realizados, pero da mala imagen ver que en 2017 sólo hay 1 y en 2018 no hay ninguno.

Servicios, efecto tablero de ajedrez???

En realidad este apartado es un portafolio por categorías. No hay texto. Falta copywriting. Fatal para el SEO: posición 66 para “rótulos alicante”

Contacto (primero el formulario por favor)

Falta adaptación al RGPD episodio: 19

Y ahora

EL PODCAST DE LA SEMANA

Hoy voy a recomendaros un podcast para que estéis mucho mejor, más sanos y felices. Se trata de “Veteranos de la vida” un programa dedicado en parte a la vida, y en la otra parte a todo lo que tenemos que hacer para disfrutarla con salud.

Un podcast donde Nacho Serapio, un «Veterano» de 41 años, comparte vivencias y experiencias con Adolfo Pérez, un «eterno aprendiz» de 73 años.

Es muy ameno y divertido, tipo entrevista, de unos 20-30 minutos cada episodio en el que tratan temas muy interesantes: Perdida de peso, longevidad, vegetarianismo, caída del cabello, filosofías de las artes marciales, deporte, amor, estrés…

Puedes escucharlo en iVoox y iTunes

Y esto ha sido todo por hoy, si has podido ver la web analizada y has echado algo en falta, cuéntamelo! O si te ha quedado alguna duda o te gustaría que tratase algún tema en concreto pásate por pampua.

Hoy vamos hablar de que son los shortcodes, para qué sirven, como usarlos, precauciones, etc. pero antes, un poco de autobombo!!!:

Si quieres que te ayude a crear o mejorar tu página web pásate por Pampua.es

Te ofrezco garantía de satisfacción (hasta que no esté a tu gusto no pagas el último 50%) y soporte ilimitado por mail.

100% de clientes contentos

Antes de entrar con el tema de la semana quería dejaros una herramienta muy útil para sugerir ideas de títulos. Porque el planificador de palabras clave está genial y te da todos los datos para decidir, pero es posible que no se te ocurran títulos que comparar, para eso tenemos: https://answerthepublic.com

Introducimos el tema del qué vamos a hablar y nos propone distintas alternativas de títulos que hacen referencia a búsquedas que realiza la gente en Google.

Qué es un shortcode

Un shortcode en WordPress es un pequeño “tag” o código que puedes introducir en el editor de WordPress y que llama a un script o parte de un script que inserta un elemento en la página o contenido (post) que estás editando. Podemos comparar los shortcodes de WordPress con los includes de PHP.

WordPress lo introdujo en la versión 2.5. Y tiene este aspecto:

[Pampua-shortcode].

¿Cuándo utilizar shortcodes en WordPress?

WordPress tiene varios controles de seguridad y filtros incorporados.

Para evitar que el código malicioso entre en:

Posts ,Páginas, Widgets y Temas

Por lo tanto, los usuarios no pueden escribir código en dichos elementos de WordPress. Sin embargo, los shortcodes de WordPress permiten a sus usuarios añadir «contenido dinámico» dentro de WordPress.

Como:

Insertar gráficos

Incrustar archivos de vídeo

Añadir galerías o sliders (aunque no los recomiendo: ep: 13)

Crear objetos de macro

Crear un formulario o encuesta

Añadir botones

Dicho contenido dinámico necesitaría escribir mucho código. Los shortcodes simplifican este proceso de agregar funciones a un sitio web de WordPress. Añaden HTML y otros lenguajes de marcado dinámico, en la publicación, página, widget o comentario. Dondequiera que el usuario de WordPress quiere que aparezcan. En una sola línea.

¿Cuándo no usar shortcodes en WordPress?

Los shortcodes específicos no son necesarios si sólo se crea una característica en una publicación o página específica. Sin embargo, si vas a utilizar ese shortcode en muchos mensajes o páginas diferentes, es posible que desees utilizar un plugin para añadir un shortcode. Esto hará más fácil el estilo de un elemento específico de WordPress. También es más fácil de eliminar si desea por ejemplo cambiar los temas.

¿Cómo obtener los shortcodes de WordPress?

Puede obtener shortcodes de WordPress de varias maneras:

1. Shortcodes incorporados

Son shortcodes incluidos en la plantilla (tema) de WordPress elegida, bajo el editor de contenido. Por ejemplo: «, “. Estos shortcodes dejan de funcionar, cuando cambias la plantilla de WordPress.

CONSEJO: A menudo, los usuarios de WordPress no saben qué shortcodes ya están disponibles. Si (como recomiendo ep:2) usas Génesis, aquí los tienes: https://www.billerickson.net/code/genesis-shortcodes/

Si tienes claro (como yo) que siempre vas a usar Genesis, puedes usarlos tranquilamente, pero si no es así no te recomiendo su uso, puesto que al cambiar de plantilla los perderías. Esto le ha pasado a mucha gente con DIVI y Elementor (el famoso “lock-in”) que te obliga a seguir siempre con ellos porque si los desinstalas tu página se llena de shortcodes (en lugar de most...

Hoy vamos hablar de cómo elegir los títulos para los artículos de tu blog o podcast con la ayuda del planificador de palabras clave de AdWords (ahora Google Ads), pero antes, un poco de autobombo!!!:

Nuevo servicio de análisis web! Por 30€ analizo durante 15 minutos los puntos clave de tu web a nivel de marketing y diseño.

Cuéntame cuál es el objetivo de tu web y te diré lo que debes modificar para aumentar las conversiones.

Te enviaré el audio en un mp3 a tu email y además lo publicaré en este podcast, (con lo que obtendrás publicidad gratis!)

Pásate ahora mismo por pampua.es/analisis y solicita tu análisis web.

Los 3 primeros en usar el código PODCAST lo obtendréis gratis.

Cómo elegir un buen título

El título de un artículo va a hacer que te posiciones en los resultados de las búsquedas de una forma u otra.

Por eso es muy importante elegir el título adecuado, y la mejor forma de hacerlo es usando el planificador de palabras clave de Google, puesto que tiene los datos reales de las búsquedas que realiza la gente.

Acceder al planificador de palabras clave

Lo primero que necesitas es crearte una cuenta en GoogleAds (antes llamado Adwords) Mira que les gusta cambiar los nombres…

Puedes hacerlo incluso sin dar tus datos de la tarjeta de crédito, pero no te preocupes si tienes que ponerlos, si no realizas ninguna campaña no te cobrarán nada.

Una vez dentro de Google Ads vamos al menú superior y Herramientas > Planificador de Palabras Clave. Comentarte que Google cambia el diseño de la web constantemente por lo que posiblemente algunos textos no sean exactamente así, pero el concepto es el mismo.

Después le damos a “Busca palabras clave nuevas”:

Después simplemente introduces la URL de tu artículo (si ya lo has publicado) o las palabras clave por las que te gustaría posicionarlo.

Asegúrate que estás segmentando correctamente el idioma y la ubicación (en mi caso, español – España)

Ahora nos fijaremos en la columna “Competitividad” para intentar elegir las palabras que tengan competencia baja y más búsquedas.

En la parte de arriba sale por defecto los últimos 12 meses. No hay las mismas búsquedas de “regalos de navidad” en diciembre que en julio y esto es algo que tenemos que tener en cuenta.

Si tu blog está orientado a ciudades en concreto, por ejemplo “los mejores restaurantes de Madrid“, entonces selecciona desglose por ubicación en el menú izquierdo y en lugar de España pon la ciudad que necesites. No quiero complicar mucho la cosa pero como ves la clave de la herramienta está en probar para ajustar al máximo.

Al ver las palabras sugeridas se te irán ocurriendo nuevas palabras clave. Añádelas en la parte superior y haz click de nuevo en “Obtener resultados“. Repite este proceso hasta que consigas obtener las palabras y frases que más se ajusten a tus objetivos.

Por defecto Google nos activa un filtro de búsqueda en el que nos sugiere búsquedas relacionadas y nos bloquea las que estén relacionadas con contenido para adultos.

Podremos editar el filtro o eliminarlo desde la parte superior derecha.

Arriba a la derecha, junto a la caja de búsqueda, aparece el botón “DESCARGAR IDEAS PARA PALABRAS CLAVE” para poder exportar las palabras sugeridas por Google a un CSV, abrirlo en Excel y así analizarlas con más detalle. De esta forma podemos guardar estas listas e ir marcando por colores las prioritarias en base al objetivo que quieras alcanzar con el blog.

Con estas palabras podemos encontrar títulos perfectos para nuestros artículos y usar las ideas que surjan para crear distintas categorías.

A tener en cuenta

Una vez elegida la temática con las palabras clave por las que quieres que te encuentren ve a Google.