Shortcode Ultimate: el plugin para crear y maquetar en WordPress

Shortcode Ultimate es un plugin de WordPress con el que podemos maquetar sin tener grandes conocimiento y sin usar Elementor. Además, con un poquito de CSS podemos crear diseños muy profesionales.

Si quieres aprender a usarlo aquí te explico todo lo que necesitas saber.

Lo que aprenderás aquí

• Qué es un shortcode en WordPress
• Qué hace el plugin Ultimate Shortcodes
• Por qué uso este plugin de WordPress
• Cómo usar Shortcodes Ultimate
• Crear una nota con shortcode
• Crear un servicio con shortcode
• Crear una bullet point con shortcode
• Crear un desplegable con shortcode
• Crear pestañas con shortcode
• Crear botones con shortcode
• Otros shortcodes de WordPress a incluir
  • Insertar video con Shortcode
  • Insertar un audio en WordPress
  • Insertar un mapa con shortcode
• Shortcodes de pago para WordPress
  • Texto con icono en WordPress
  • Pricing tables en WordPress
  • Exit Popup en WordPress
• Combinando shortcodes en WordPress

Qué es un shortcode en WordPress

Para asegurarnos de que partimos del punto correcto, vamos a ver primero qué es un short code en Wordpress:

Qué hace el plugin Ultimate Shortcodes

Shortcode Ultimate es un plugin versátil con el que podemos agregar elementos funcionales y estéticos en las páginas y entradas de WordPress, sin recurrir a un maquetador pesado, como puede ser Elementor, por ejemplo.

Ultimate Shortcode WordPress

Gracias a Ultimate Shortcodes y un poquito de CSS podemos crear listados personalizados, menús desplegables, carruseles de imágenes, tablas de precios o notas destacadas, entre otros.

Es una navaja suiza con la maquetar a golpe de clic.

Para poder usar todas las opciones tienes que recurrir a la suscripción de pago, aunque he de decir que la versión gratuita es más que suficiente en la mayoría de los casos. Y también, que la versión de pago suelen usarla en Membresías.

Por qué uso este plugin de WordPress

En resumen, yo uso Ultimate Shortcodes porque es un plugin ligero y que me permite maquetar en WordPress en gran detalle.

Que los errores técnicos no arruinen tus esfuerzos

Te enseño a auditar tu web con Screaming Frog, para que identifiques y soluciones los problemas que están afectando tu SEO.

¡Comienza mi curso de Screaming Frog gratis hoy!

Ver curso gratis y checklist

Cómo usar Shortcodes Ultimate

Para usar este plugin tienes que ir a tu panel de WordPress y acceder a Plugin e Instalar Plugin, tras ello escribe en el buscador "wp shortcodes plugin — shortcodes ultimate" o simplemente "Shortcode Ultimate" e instala el de Vova Anokhin.

Una vez instalado y activado vamos a aprender a usarlo con varios ejemplos.

Crea una entrada en WordPress y en la sección de bloques busca el bloque "shortcode"

En el bloque creado, selección la opción de los corchetes:

En este momento se abrirá un menú con todas las opciones que ves:

Crear una nota con shortcode

De todas las opciones vamos a empezar creando una nota sencilla. Para ello, seleccionamos la opción de Nota y veremos un menú como el que te muestro abajo:

Con la configuración de arriba, creamos una nota de fondo verde claro, texto en azul oscuro y radio de 3px en los bodes, en la mostramos el texto "Nota de Ultimate Shortcode", la cual tiene una clase llamada mynote y un ancla llamado myanchor.

Resultado

Los parámetros que forman este shortcode los vemos dentro del bloque para que puedas modificarlos a tu gusto.

Además, gracias a la clase mynote podemos modificar el estilo en mayor detalle y meterle, por ejemplo un box shadow como el que te muestro abajo y además, al hacer hover, invertimos los colores:

Shortcode

.mynote .su-note-inner:hover{
	background: #18233D!important;
	color: #8EFBCA!important
}
.mynote .su-note-inner {box-shadow: 3px 3px 2px #001E40;}
.mynote{border: #18233D!important}

Por otro lado, al meter el id myanchor conseguimos que si alguien hace clic en el enlace https://sergiocanales.com/plugin-shortcode-ultimate/#myanchor vayan a esta caja.

Crear un servicio con shortcode

Además de la nota antes mostrada, podemos crear un bloque destacado más profundo con un icono y título como el que ves abajo.

Para ello, tienes que usar el short code de tipo servicio y rellenar los campos siguientes:

Shortcode

• Título: Consejo
• Icono: tipee
• Tamaño deI icono: 32
• Contenido: Esto es un Servicio de Ultimate Shortcode

Haciendo clic en Selector de iconos puedes escoger entre una inmensa cantidad de emojis. Y si ninguno te gusta, puedes acceder al Gestor de medios, subir el que prefieras y usarlo.

Crear una bullet point con shortcode

Si te fijas en los listados de mi web, no tienen el clásico punto que tienen por defecto los bulletpoint en WordPress. Esto es porque lo creo también con este plugin. Para ello, uso el elemento Lista, como te muestro abajo:

[su_list icon="icon: check" icon_color="#3CAE67"]
<ul>
<li>Elemento1</li>
<li>Elemento2</li>
<li>Elemento3</li>
</ul>
[/su_list]

Te doy un consejo, si ya tienes un listado creado, solo tienes que poner delante el shortcode

Crear un desplegable con shortcode

Los contenidos desplegables en WordPress son muy interesantes ya que nos permiten introducir contenido oculto para que vea solo el usuario que se quiere informar sobre ello. Además, lo bueno que tiene Ultimate Shortcode es que aunque no esté visible, Google si lo lee por lo que nos es útiles para meter keywords interesantes de cara al SEO.

[su_spoiler title="Título del desplegable" icon="chevron" class="mycourse"]Esto es un desplegable en WordPress
[/su_spoiler]

Además, con CSS podemos dejarlo muy profesional, tal y como te muestro abajo:

.su-spoiler-title{
	background: #C2F9D7;
	border: 1px solid  #001E40!important;
	box-shadow: 3px 3px 2px  #001E40!important;
	font-size: 1.1rem!important;
	padding-top: 10px!important;
	padding-bottom: 10px!important;
	margin-bottom: 10px
}
.su-spoiler-title .su-spoiler-icon{
		padding-top: 3px!important;
	padding-bottom: 10px!important;
}
.su-spoiler-content{padding-left: 10px!important}

Crear pestañas con shortcode

Ya que estamos creando contenido oculto, otra opción interesante es crear pestañas para mostrar un contenido diferente en cada una de ellas:

[su_tabs]
[su_tab title="Pestaña 1" disabled="no" anchor="" url="" target="blank" class=""]
Contenido de la primera pestaña
[/su_tab]
[su_tab title="Pestaña 2" disabled="no" anchor="" url="" target="blank" class=""]
Contenido de la segunda pestaña
[/su_tab]
[su_tab title="Pestaña 3" disabled="no" anchor="" url="" target="blank" class=""]
Contenido de la tercera pestaña
[/su_tab]
[/su_tabs]

Crear botones con shortcode

Además de crear botones en WordPress con el bloque de Gutenberg puedes crear botones con un shortcode para mostrar una estética diferente. Esta opción te permite especificar aspectos interesantes como que se abra la URL en otra pestaña, que sea de ancho completo, atributos del enlace, colores, el radio de las esquinas o un icono, que siempre llama la atención.

Y de igual forma, también puedes especificar una clase para diseñarlo como tu prefieras.

[su_button url="https://sergiocanales.com/medir-descargas-en-ga4/" background="#3CAE67" color="#18233D" size="6" wide="yes" center="yes" radius="5" icon="icon: external-link-square" icon_color="#18233D"]Medir descargas en GA4[/su_button]

Otros shortcodes de WordPress a incluir

Además de los elementos antes indicados, también podemos crear otros bloques útiles para los usuarios como los siguientes:

Insertar video con Shortcode

Normalmente, cuando subimos videos a WordPress suelen ser de Youtube, por lo que Ultimate Shortcodes nos ofrece 2 opciones para insertar nuestro video en Wordpress: con el shortcode Youtube y el Youtube avanzado, el cual ofrece mayores funcionalidades de cara a la reproducción.

Shortcode

[su_youtube url="https://www.youtube.com/watch?v=h9XSpa3KzzQ&t=304s&pp=ygUSc2VyZ2lvIGNhbmFsZXMgc2Vv"]

Resultado

Así mismo, además de Youtube, también puedes incluir un video propio, de Vimeo o Dailymotion.

Como alternativa, aquí te muestro como insertar un iframe de video

Insertar un audio en WordPress

Para insertar un audio, tienes que elegir el shorcode Audio y escoger en el Gestor de medio el clip de audio que hayas subido a WordPress. Así mismo, puedes indicar si se escuchará automáticamente, en bucle o el anchor de la barra de reproducción.

Insertar un mapa con shortcode

Para insertar el iframe de una mapa tenemos que seleccionar la opción del Mapa de Google.

En la ventana que se abre, solo tienes que indicar el nombre o dirección del sitio en la sección Marcador:

Así mismo, también puedes configurar otras opciones, como el ancho o el alto. Yo, por ejemplo, he creado un iframe con las siguientes especificaciones:

[su_gmap width="300" height="200" address="Wanda Metropolitano" zoom="10" title="Wanda Metropolitano"]

Como alternativa, aquí te muestro como insertar un iframe de mapa.

Shortcodes de pago para WordPress

Si tienes la opción de descargar el plugin shortcode ultimate a través de su página oficial podrás usar otras opciones potentes como un exit popup, una barra de progreso, un slider en WordPress, los famosos testimonios o un textos acompañado de un icono.

Vamos a ver los que más me gustan.

Texto con icono en WordPress

Este shortcode me gusta mucho porque me permite crear fichas como las que te muestro abajo que vienen bien para describir negocios o cursos a simple vista.

[su_icon_text color="#18233D" icon="icon: clock-o" icon_color="#3CAE67"]<b>Duración:</b> 20 horas[/su_icon_text]
[su_icon_text color="#18233D" icon="icon: signal" icon_color="#3CAE67"]<b>Dificultad:</b> fácil[/su_icon_text]
[su_icon_text color="#18233D" icon="icon: eur" icon_color="#3CAE67"]<b>Precio:</b> 20[/su_icon_text]
[su_icon_text color="#18233D" icon="icon: paypal" icon_color="#3CAE67"]<b>Paypal:</b> Sí[/su_icon_text]
[su_icon_text color="#18233D" icon="icon: users" icon_color="#3CAE67"]<b>Alumnos:</b> 3 Millones[/su_icon_text]

Pricing tables en WordPress

[su_plan name="BASIC" price="$ 39 / year" before="$ 59 / year" after="$ 199 / year" period="1 year" featured="yes" color="#18233D" icon="icon: euro" icon_color="#18233D" btn_background="#8EFBCA"]<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>[/su_plan]

Resultado

Exit Popup en WordPress

Otro bloque interesante que podemos crear con este plugin es el famoso exit popup que aparece cuando el usuario hace el amago de irse de nuestra web. Yo no lo suele usar porque me parece un poco intrusivo y molesto para el usuario, pero ahí está si lo quieres usar:

[su_exit_popup style="light-boxed" onclick="close"]No te vayas todavía, no te vayas por favor[/su_exit_popup]

Combinando shortcodes en WordPress

Aunque estos Shortcodes se pueden usar tal y como te he mostrado, la gracia de ellos está en combinarlos para aumentar su funcionalidad. Para ilustrarlo mejor, voy a mostrarte cómo podemos crear un desplegable en el que se muestre un listado:

[su_spoiler title="Cómo posicionar cerrajero madrid" icon="chevron"]
Aquí las claves para posicionarlo[su_list icon="icon: check-square" icon_color="#3CAE67"]<ul>
<li>Compra enlaces</li>
<li>Compra más enlaces</li>
<li>Compra aún más enlaces</li>
</ul>[/su_list]
[/su_spoiler]

o incluso meterlo en 2 columnas con Shortcodes Ultimate:

[su_row][su_column size="1/2" center="no" class=""][su_spoiler title="Primer Desplegable" icon="chevron"]
[su_list icon="icon: check-square" icon_color="#3CAE67"]<ul>
<li>Primer listado</li>
<li>Segundo listado</li>
</ul>[/su_list]
[/su_spoiler][/su_column]
[su_column size="1/2" center="no" class=""][su_spoiler title="Segundo Desplegable" icon="chevron"]
[su_list icon="icon: check-square" icon_color="#3CAE67"]<ul>
<li>Primer listado</li>
<li>Segundo listado</li>
</ul>[/su_list]
[/su_spoiler][/su_column][/su_row]

Con estas combinaciones, un poquito de CSS e imaginación, puedes despedirte de Elementor y hace webs muy profesionales sin comprometer el WPO de tu sitio.

Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!

Quiero apuntarme a la newsletter