Nombre (requerido)
[text* your-name]
Correo electrónico (requerido)
[email* your-email]
Asunto
[text your-subject]
Mensaje
[textarea your-message]
[submit "Enviar"]
Deberá ser:Nombre (requerido)
[text* your-name]
Correo electrónico (requerido)
[email* your-email]
Asunto
[text your-subject]
Mensaje
[textarea your-message]
[submit "Enviar"]
Aunque nos vamos acercando, todavía no conseguimos que se vea exactamente como queremos. El resultado es el siguiente: Ahora necesitamos mover los títulos dentro de los campos, y aplicar el estilo de **Divi** al botón *Enviar*. Para los títulos, eliminamos el texto inmediatamente posterior a la etiqueta ``, pasamos los rótulos dentro de los códigos abreviados, entre comillas, y les anteponemos la etiqueta `placeholder`. Para el botón, añadimos las dos clases CSS de **Divi** `et_pb_contact_submit` y `et_pb_button`, precedidas de la etiqueta `class:` sin espacio:
[text* your-name placeholder "Nombre"]
[email* your-email placeholder "Correo electrónico"]
[text your-subject placeholder "Asunto"]
[textarea your-message placeholder "Mensaje"]
[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]
El resultado es el siguiente: ¡Ya casi estamos! Se preguntarán por qué el campo *Correo electrónico* quedó debajo de *Nombre*, con el espacio en blanco arriba de *Asunto*. Y si añadimos uno, dos o más campos, quedarán uno arriba del otro, menos los dos últimos. Esto es porque en el ejemplo están agrupados en el mismo `div`, cuyo estilo les da el 50% de ancho. Para resolver esto, necesitamos crear un `div` con la clase `et_pb_contact_left` para cada par de campos que queremos que se muestren juntos. Veamos el siguiente ejemplo, donde añadiremos un campo *Teléfono* para mostrar debajo de *Correo electrónico* y a la derecha de *Asunto*.[text* your-name placeholder "Nombre"]
[email* your-email placeholder "Correo electrónico"]
[text your-subject placeholder "Asunto"]
[tel tel-1 placeholder "Teléfono"]
[textarea your-message placeholder "Mensaje"]
[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]
¡Listo! Ya tenemos un formulario con dos campos más, al estilo **Divi**, sin agregar una sola línea en el *CSS personalizado*, y manteniendo intacta la propiedad adaptable (responsive). [](https://caribdis.net/imgz/2015/07/cf7-5.png) Este pequeño tutorial seguramente cubrirá las necesidades de un gran número de usuarios, pero aún podríamos aprender algunos trucos más para poder sacarle el máximo provecho. Por ejemplo, ¿qué tal si queremos añadir un CAPTCHA para evitar que nos lleguen mensajes spam? En primer lugar, instalamos el plugin **[Really Simple Captcha](https://wordpress.org/plugins/really-simple-captcha/)**, el cual está desarrollado como extensión de **Contact Form 7** por el mismo autor (**Takayuki Miyoshi**). Luego de activarlo, veremos que se habrán habilitado las opciones de CAPTCHA en la página de edición de **CF7**. Todo lo que tenemos que hacer ahora es colocar la etiqueta generada por **CF7** al final del código, y envolverla en las siguientes etiquetas de **Divi**:[captchac captcha-579] [captchar captcha-579]
[text* your-name placeholder "Nombre"]
[email* your-email placeholder "Correo electrónico"]
[text your-subject placeholder "Asunto"]
[tel tel-1 placeholder "Teléfono"]
[textarea your-message placeholder "Mensaje"]
[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]
[captchac captcha-579] [captchar captcha-579]
[select menu-862 "Tipo de consulta" "Solicitud de presupuesto" "Soporte técnico" "Consulta general"]
Nos da esto: Tendremos que meter más mano en el estilo CSS y darle al menú el color de fondo y el ancho de nuestro formulario: .wpcf7-select { width: 100%; padding: 15.5px; border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0px; font-family: inherit; color:#aaa; background-color: #eee; } [](https://caribdis.net/imgz/2015/07/cf7-9.png) Genial, ¿verdad? Y hasta podemos ir un poquito más allá y personalizar la flecha del menú (las últimas cinco líneas añadidas; no olvidar subir al servidor una imagen para la flecha y escribir la URL correspondiente), con el siguiente código: .wpcf7-select { width: 100%; padding: 15.5px; border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0px; font-family: inherit; color:#aaa; background-color: #eee; -moz-appearance: none; -webkit-appearance: none; background-position: center right 15px; background-image: url("https://urldelarchivo/arrow.png"); background-repeat: no-repeat; } Como podemos ver, ya tenemos un formulario con los campos que queremos, sin resignar el estilo de **Divi** y usando la mínima cantidad de código necesaria. Antes de terminar, un último consejo, porque nunca falta el despistado que se olvida de llenar algún campo obligatorio, o no lo completa con el tipo de datos que corresponde: [](https://caribdis.net/imgz/2015/07/cf7-11.png) Para evitar que se superponga el aviso de error al botón, añadimos el siguiente código: div.wpcf7-validation-errors { margin-top: 50px; } O, mejor aún, ya que lo consideramos redundante si cada campo muestra su propio mensaje de error en color rojo, lo suprimimos: div.wpcf7-validation-errors { display: none !important; } [](https://caribdis.net/imgz/2015/07/cf7-12.png) Casi olvidaba que cuando se envía el mensaje con éxito, también ocurre esto: [](https://caribdis.net/imgz/2015/07/cf7-13.png) Lo corregimos con el siguiente código: div.wpcf7-mail-sent-ok { margin-top: 50px; } O en caso de preferir no mostrar el borde en color verde: div.wpcf7-mail-sent-ok { border: none; } ### Para tener en cuenta: - *Si bien el usuario menos experimentado preferirá pegar los códigos CSS en las *Opciones del tema*, siempre será más recomendable trabajar con un tema hijo y añadir los códigos a la hoja de estilo correspondiente. - Siempre separar en `divs` con la clase `et_pb_contact_left` cada par de campos que queremos que aparezcan juntos. En el caso de tener un número impar de campos y no desear que aparezca un espacio en blanco, lo recomendable es sacarlo afuera del `div` para que ocupe todo el ancho del formulario. - No dejar líneas en blanco dentro del código de **CF7** (para evitar saltos de párrafo de más). - ¡No olvidarse de cerrar los `divs`! - Y no olvidarse de agregar a la plantilla de *Correo electrónico* las etiquetas correspondientes a los nuevos campos, ya que es la única manera de que nos lleguen en el mensaje todos los datos introducidos por el usuario en el formulario. - Este tutorial sirve para aplicar los estilos de **Divi** a uno o **a todos** los formularios por igual. No nos sirve si necesitamos que varios formularios tengan un estilo diferente (por ejemplo, que uno tenga los campos con bordes y otro sin bordes, o distintos colores de fondo). Tal vez otro día haga otro tutorial para eso ;) Espero que se haya comprendido y haya resultado útil. Desde ya me gustaría recibir comentarios, todas las preguntas que sean necesarias si algo no se entendió, y ¿por qué no? muestras de cómo les han quedado sus formularios **CF7** al estilo **Divi**. :) ### Edición para Divi 2.5.4 y superiores Con la actualización a la versión 2.5.4 se modificó el estilo del botón *Enviar,* para que incluya la "flechita" al posar el puntero, que aparece por defecto en todos los botones de Divi. [](https://caribdis.net/imgz/2015/07/cf7-14.png)Lamentablemente, no es posible recrear este efecto con **CF7**, ya que este usa la etiqueta `input` para el botón, mientras que Divi usa `button` con un seudoelemento `:after`. En caso de querer evitar esto: [](https://caribdis.net/imgz/2015/07/cf7-15.png)hay dos alternativas. Una es ir al *Personalizador de Tema > Botones > Estilo de botones* y seleccionar *No* en la opción *Añadir icono de botón*. Esta corregirá el relleno del botón *Enviar* de **CF7** pero desactivará el efecto de los botones a nivel global (se tendrá que manejar individualmente para cada módulo donde haya un botón presente). La otra es añadir el siguiente código a la hoja de estilos: .wpcf7-submit:hover { padding: 0.3em 1em; } Finalmente obtendremos esto: [](https://caribdis.net/imgz/2015/07/cf7-16.png) --- # JetElements: reseña del mejor complemento premium para Elementor Source: https://caribdis.net/2017/11/21/jetelements-resena-del-mejor-complemento-premium-para-elementor.md En la entrada de las [ofertas de Halloween](https://caribdis.net/2017/10/26/ofertas-de-wordpress-halloween-2017/) mencionamos este bastante reciente plugin denominado [**JetElements**,](https://caribdis.link/JetElements) que consiste en 25 complementos para el constructor de páginas gratuito **Elementor**. Hasta hace pocas semanas la empresa detrás de **JetElements** se llamaba **JetImpex**, pero después de un cambio de marca los veremos en el ciberespacio como **Zemez**. Se jactan de tener 15 años de experiencia en la creación de plantillas y extensiones de calidad para una variada gama de sistemas de gestión de contenido: Joomla, Magento, PrestaShop, OpenCart, VirtueMart, Blogger, Shopify, y el que más nos interesa a nosotros, WordPress. Cuentan con más de 10000 plantillas repartidas en las plataformas antes mencionadas (es la empresa detrás de la enorme tienda de **[TemplateMonster](https://caribdis.link/TemplateMonster)**); unos cuantos [plugins gratuitos](https://profiles.wordpress.org/templatemonster-2002#content-plugins) en el repositorio de WP.org, y últimamente incursionaron en el mercado de los plugins premium desde **CodeCanyon** con dos complementos para **Elementor**. Hoy vamos a reseñar **JetElements**, que es una alternativa económica a la extensión de [**Elementor Pro**](https://caribdis.link/ElementorPro), y que incluye muchos módulos de reemplazo y algunos muy novedosos y útiles que sacan provecho al máximo de las herramientas nativas de este constructor de páginas. Para quienes estén acostumbrados a usar **Elementor**, este agregado ampliará considerablemente las posibilidades de diseño, ya que se integra de manera armónica a la interfaz y ofrece una serie de módulos muy completos con incontables opciones de personalización. En primer lugar, vamos a detenernos en aquellos módulos que operan como sustitutos de **Elementor Pro**. ### Entradas **Elementor Pro** tiene opciones de diseño clásico y de tipo “tarjetas”.  El módulo de **JetElements** es muy similar al diseño clásico de **Elementor Pro**, aunque incluye la opción de transformarlo en un carrusel.  En ambos se pueden mostrar entradas, páginas y productos. **Elementor Pro**, además, puede mostrar diseños personalizados (de la biblioteca de **Elementor**), y permite seleccionar manualmente los contenidos. Esto último es útil si queremos combinar tipos distintos de contenidos, como productos con entradas. Ver demos: [Entradas](https://crocoblock.com/widgets/posts/?ref=198) ### Slider Este módulo de **JetElements** tiene su contraparte en *Diapositivas* de **Elementor Pro**, con algunas diferencias de estilo (**Elementor Pro** incluye un efecto Ken Burns para los fondos de imagen, por ejemplo). Ver demos: [Slider](https://crocoblock.com/widgets/slider/?ref=198) ### Carrusel avanzado Este módulo de **JetElements** es similar al *Carrusel de medios* de **Elementor Pro**, con el agregado de un título y descripción opcionales de las diapositivas. Ver demos: [Carrusel avanzado](https://crocoblock.com/widgets/advanced-carousel/?ref=198) ### Recuadro animado Ambos módulos son prácticamente iguales, con alguna que otra diferencia en los tipos de animación. Ver demos: [Recuadro animado](https://crocoblock.com/widgets/animated-box/?ref=198) ### Texto animado Este es otro módulo casi igual al de **Elementor Pro**, que solo difiere en algunos de los efectos de animación. Ver demos de **Elementor Pro**: [https://elementor.com/introducing-animated-headline/](https://elementor.com/introducing-animated-headline/) Ver demos de **JetElements**: [Texto animado](https://crocoblock.com/widgets/animated-text/?ref=198) ### Botón y Botón “Descargar” La versión gratuita de **Elementor** ya tiene un módulo *Botón*, y el de **JetElements** difiere en los efectos de animación y reemplazo de texto al pasar el puntero. Ver demo: [Botón](https://crocoblock.com/widgets/button/?ref=198) El módulo *Botón “Descargar”* es útil para enlaces de descarga, ya que incluye información adicional como el tamaño y el tipo de archivo. Ver demos: [Botón de descarga](https://crocoblock.com/widgets/download-button/?ref=198) ### Cuenta regresiva Ambos módulos son iguales. Ver demos: [Cuenta regresiva](https://crocoblock.com/widgets/countdown-timer/?ref=198) ### Tabla de precios Estos dos módulos también son bastante parecidos, con la diferencia de que **JetElements** incluye una insignia con formato de imagen, y **Elementor Pro** una “cinta” de texto. Ver demos: [Tabla de precios](https://crocoblock.com/widgets/pricing-table/?ref=198) ### Testimonios Este es otro módulo que obra como reemplazo del correspondiente a **Elementor Pro**, con varias combinaciones de diseño para mostrar los testimonios en carrusel o fijos. Ver demos: [Testimonios](https://crocoblock.com/widgets/testimonials/?ref=198) ### Servicios Este módulo de **JetElements** podría considerarse una combinación entre los módulos *Caja de icono*, *Recuadro de imagen* y *Botón*, de la versión gratuita de **Elementor**, con numerosas opciones de estilo para el título, icono, contenido y orden de los componentes.  Ver demos: [Servicios](https://crocoblock.com/widgets/services/?ref=198) ### Mapa avanzado **Elementor** incluye un módulo *Google Maps* en su versión gratuita, pero **JetElements** añade la posibilidad de usar más de un marcador y aplicar iconos personalizados con el módulo *Mapa avanzado*.  ### Módulos para WooCommerce **JetElements** incluye seis módulos para **WooCommerce:** - Producto – Permite incluir un producto individual, seleccionándolo por su ID o SKU. Ver demo: [Producto](https://crocoblock.com/widgets/woocommerce-product/?ref=198) - Productos recientes – Muestra una lista de los últimos productos de la tienda. Ver demo: [Productos recientes](https://crocoblock.com/widgets/woocommerce-recent-products/?ref=198) - Productos destacados – Muestra una lista de los productos destacados de la tienda. Ver demo: [Productos destacados](https://crocoblock.com/widgets/woocommerce-featured-products/?ref=198) - Productos más vendidos – Muestra una lista de los productos más vendidos. Ver demo: [Productos más vendidos](https://crocoblock.com/widgets/woocommerce-bestsellers/?ref=198) - Productos mejor valorados – Muestra una lista de los productos con mejores calificaciones. Ver demo: [Productos mejor valorados](https://crocoblock.com/widgets/woocommerce-top-rated-products/?ref=198) - Productos en oferta – Muestra la lista de los productos en oferta. Ver demo: [Productos en oferta](https://crocoblock.com/widgets/woocommerce-sale-products/?ref=198) ## Más módulos **JetElements** agrega siete nuevos módulos con funcionalidades únicas: ### Banner Permite aplicar once efectos distintos de animación sobre una imagen con título y descripción.  Ver demos: [Banner](https://crocoblock.com/widgets/banner/?ref=198) ### Marcas Este módulo es bastante simple y sirve para añadir logos de empresas, junto a un título, enlace y descripción opcionales. Ver demos: [Marcas](https://crocoblock.com/widgets/brands/?ref=198) ### Progreso circular Este módulo es una variante de *Barras de progreso* de **Elementor Pro**, con un diseño circular en lugar de lineal.  Ver demos: [Progreso circular](https://crocoblock.com/widgets/circle-progress/?ref=198) ### Comparación de imagen Esta es una herramienta ideal para exhibir servicios tales como el retoque fotográfico o aquellos relacionados con la estética corporal. Se puede mostrar una única imagen, o varias como carrusel.  Ver demos: [Comparación de imagen](https://crocoblock.com/widgets/image-comparison/?ref=198) ### Diseño de imágenes Este módulo funciona como galería de imágenes, que permite incluir un icono, título, descripción y un enlace externo, y en el caso de que no contenga enlace, abrir la imagen en *Lightbox.* Ver demo: [Diseño de imágenes](https://crocoblock.com/widgets/images-layout/?ref=198) ### Miembro de equipo Este es uno de los componentes más vistos en las webs empresariales, e incluye innumerables opciones para controlar el estilo de presentación.  Ver demos: [Miembro de equipo](https://crocoblock.com/widgets/team-member/?ref=198) ### Contact Form 7 Este módulo aparecerá únicamente si está instalado y activado el plugin **Contact Form 7**. Permite controlar el estilo de los campos y textos del formulario, aunque hay que tener en cuenta que el diseño del formulario dependerá del tema en uso, y/o del código personalizado que contenga el formulario. Ver demos: [Contact Form 7](https://crocoblock.com/widgets/contact-form-7/?ref=198) Hasta aquí, el resumen de los veinticinco módulos de **JetElements**. Hay tres más en preparación, que van a ir añadiendo en futuras actualizaciones ya incluyeron el la última actualización: [*Encabezado*,](https://crocoblock.com/widgets/headline/?ref=198) [*Instagram*](https://crocoblock.com/widgets/instagram/?ref=198) y [*Navegación vertical*](https://crocoblock.com/widgets/scroll-navigation/?ref=198). Es de destacar también la inclusión de seis plantillas de páginas completas en la biblioteca de **Elementor**. Una vez activado el plugin, las encontraremos al hacer clic en el botón *Añadir plantilla* de la interfaz del constructor.  En cada uno de los siguientes enlaces podrán ver en funcionamiento los seis diseños de **JetElements**: - Construcción: [Ver demo](https://jetelements.zemez.io/construction-home-page/) - Empresa: [Ver demo](https://jetelements.zemez.io/business-home-page/) - Estudio fotográfico: [Ver demo](https://jetelements.zemez.io/photography-studio-home-page/) - Bienes raíces: [Ver demo](https://jetelements.zemez.io/real-estate-home-page/) - Restaurante: [Ver demo](https://jetelements.zemez.io/restaurant-home-page/) - Fotógrafo: [Ver demo](https://jetelements.zemez.io/photographer-home-page/) Y como si esto fuera poco, también incluye todos los diseños de las demos para importar en la biblioteca de **Elementor**. Los archivos JSON se encuentran en la carpeta `/dummy-data/` del plugin.  En conclusión, **JetElements** no solo es un complemento importante para el constructor de páginas **Elementor**, sino también es una muy buena y económica alternativa a la versión **Pro.** ## Datos útiles **¿Dónde se adquiere?** En la web de [**CrocoBlock**](https://caribdis.link/JetElements) **¿Cuánto cuesta?** 24 dólares por año para un sitio web. Disponible también licencia para uso en ilimitados sitios a 49 dólares por año, y como parte del paquete *Design* en [**CrocoBlock**](https://caribdis.link/JetElements) a 80 dólares por año (incluye los plugins *JetBlog*, *JetTabs*, *JetTricks*, *JetSearch*, *JetMenu*, *JetStyleManager*, *JetThemeCore*, *JetBlocks* y *JetPopup*). **¿Qué incluye la licencia?** Uso en un dominio, actualizaciones y soporte por un año. --- # Ofertas de Black Friday WordPress 2015 Source: https://caribdis.net/2015/11/27/ofertas-de-black-friday-wordpress-2015.md El **Black Friday** ya se ha extendido a todo el mundo y es el día internacional de los descuentos, seguido del **Cyber Monday**. Millones de tiendas de todos los rubros alrededor del globo lanzan importantísimos descuentos durante estos días, y la industria de las herramientas relacionadas con WordPress no podía quedarse atrás. Esta es una selección muy acotada de ofertas, ya que siempre es mi intención recomendar productos cuya calidad he probado personalmente. Sin más, esta es la lista de empresas que se dedican al desarrollo de temas y plugins para WordPress con los más jugosos descuentos: ### Elegant Themes Nuestra favorita no podía faltar en el primer lugar. Este es el mayor descuento que ha ofrecido desde sus comienzos: un 25% en cualquiera de las tres membresías: $52 para la básica, $67 para la intermedia, y un muy tentador precio de $187 para la membresía perpetua. **La oferta vence el 3 de diciembre**. [](https://caribdis.link/ETOferta) ### MyThemeShop Esta es mi segunda favorita, que se destaca por los temas de muy rápida carga. En el caso de esta empresa, la oferta del **Black Friday** es ofrecer cada producto de su inventario por solo $19 dólares; inventario que incluye casi 90 temas y 12 plugins. Se debe usar el cupón **TheMTSDeal** (válido hasta el 3 de diciembre) [](https://caribdis.link/MTS) ### PremiumPress Esta empresa es una de las clásicas dedicadas a nichos. Los temas están orientados a funcionalidades específicas: desde directorios de enlaces hasta descargas digitales, pasando por clasificados, subastas, comparaciones de precios, cupones, bienes raíces, citas, ofertas de trabajo y más. Se pueden adquirir los temas individualmente, o en un paquete que incluye los 15 temas y aquellos que se desarrollen en el futuro. El descuento es del 35% y se debe usar el cupón **NOV2015** (válido hasta el 30 de noviembre) [](https://www.premiumpress.com/) ### Tesla Themes Esta empresa en crecimiento ofrece uno de los descuentos más importantes para el **Black Friday**: un 50%. Tienen tres planes de membresía distintos, además de comercializar cada tema de manera individual. Cada tema cuesta $48 y las membresías son de $59 (estándar) y $79 (desarrollador) por año, además de la opción *Lifetime,* de $199 por única vez. Se debe usar el cupón **50OFF** (válido hasta el 2 de diciembre) [](https://caribdis.link/Tesla) ### ThemeIsle Esta es una muy conocida de la casa, responsable de los famosos [**Zerif Lite**](https://caribdis.net/category/zerif-lite/) y **[Zerif PRO](https://caribdis.link/ZerifPRO)**. El descuento es de 35% para todos los temas y plugins. Se debe usar el cupón **TIBF2015** (válido hasta el 1 de diciembre) [](https://caribdis.link/ThemeIsle) Hasta aquí llega la lista. Para terminar, dos buenas ofertas que no tienen que ver directamente con WordPress, pero acompañan: ### Web Hosting Profesional - A Small Orange Esta es la empresa en donde está alojado este sitio. La uso desde mayo de 2014 y solo tengo elogios: es muy estable y la atención al cliente, de las mejores. Además, está ofreciendo uno de los mayores descuentos del año: un 75% en cualquier contratación nueva. Está dividida en dos: Entre hoy y el domingo se debe usar el cupón **FRIDAY** Durante todo el lunes se debe usar el cupón **MONDAY**  ### Dominios baratos - NameSilo **NameSilo** es probablemente la empresa que ofrece los precios más bajos del mercado. Los dominios **.COM** cuestan $8,99 y, a diferencia del resto de los registradores, incluye privacidad de WHOIS perpetua. Otros servicios sin cargo son: reenvío de correo electrónico, parqueo con publicidad 100% del usuario (por ejemplo, con AdSense), protección contra robo, registros de WHOIS personalizados, redirección de dominios, bloqueo y más. Para obtener un 10% de descuento se debe usar el cupón **CYBERMONDAY2015REG** (válido solo el 30 de noviembre) Esta otra oferta no es tan significativa, $1 de descuento, pero teniendo en cuenta el valor de los dominios en comparación con otras empresas, vale la pena. Se debe usar el cupón **CWD1OFF** (no tiene vencimiento) [](https://caribdis.link/NameSilo) --- # Ofertas de Black Friday / Cyber Monday WordPress 2018 Source: https://caribdis.net/2018/11/23/ofertas-black-friday-wordpress-2018.md **Black Friday** y **Cyber Monday** son las fechas de compras más profusas del calendario, en vistas de la inminente temporada de fiestas de Navidad y fin de año. Y ya han empezado a darse a conocer los adelantos de las ofertas que la industria de productos relacionados con **WordPress** va a presentar en este 2018. Algunas ofertas comenzaron hace unos días, pero se fueron sumando más hasta llegar el día de hoy. Como siempre, hemos hecho un compendio de los recomendados de la casa. ### Elegant Themes [](https://caribdis.link/ETCM18) A la cabeza, **Elegant Themes** arremete con un descuento del **25%**. No hay mejor oportunidad que esta para adquirir la membresía *Developer* en tan solo $67 al año, o mejor aún hacerse de una suscripción perpetua por la ganga de $187 (membresía *Lifetime*). Tanto aquellos que se suscriban por primera vez, como los usuarios actuales que decidan subir a la membresía *Lifetime*, recibirán [seis exclusivos paquetes de diseños](https://caribdis.link/BFPack) completos. La promoción comienza el lunes 26 y se extiende hasta mediados de diciembre. [Ver oferta](https://caribdis.link/ETCM18) --- ### ThemeIsle [](https://caribdis.link/TIPlans) Este año la isla de temas para WordPress ofrece el mayor descuento de su historia: **30%** en sus tres membresías: $63 para el plan *Esencial*, $90 para el plan *Empresa* y $139 para la membresía *VIP*. La promoción se extiende desde el 23 hasta el 26 de noviembre. [Ver oferta](https://caribdis.link/TIPlans) --- ### Elementor Pro [](https://caribdis.link/ElementorCM) Elementor repite la oferta de la edición anterior del Ciber Lunes con un **25%** de descuento en cualquiera de los tres planes del *add-on* **Pro**. La promoción se extiende hasta el 27 de noviembre. [Ver oferta](https://caribdis.link/ElementorCM) --- ### Astra Pro [](https://caribdis.link/AstraBF18) **Brainstorm Force** ofrece los mayores descuentos del año en todos sus productos. Los plugins (**WP Portfolio**, **Schema Pro**, **Convert Pro**, **Ultimate Addons for Beaver Builder**, **Ultimate Addons for Elementor**, **Astra Pro Addon**) tienen un **25%** de rebaja y los paquetes (**Mini Agency Bundle** y **Agency Bundle**), un **30%**. Además, abre al público un sorteo que tendrá como premio una MacBook Air. La promoción comienza el martes 20 y se extiende hasta el miércoles 28. [Ver oferta](https://caribdis.link/AstraBF18) --- ### MyThemeShop [](https://caribdis.link/MTS19) **MyThemeShop** ofrece cada uno de sus temas premium por un pago único de **$19**. Incluye licencia para un dominio y actualizaciones de por vida. Además, la membresía *Extended* tiene un precio final de **$87** al año. La promoción se extiende hasta el 2 de diciembre. Código: **CYBERMONDAY18** [Ver oferta](https://caribdis.link/MTS19) --- ### StudioPress [](https://caribdis.link/SP20) **Genesis Framework** estrenó su versión 2.7 y ofrece un **20%** para celebrar la compatibilidad total con Gutenberg, el nuevo editor que incluirá **WordPress 5**. La promoción se extiende hasta fin de mes. [Ver oferta](https://caribdis.link/SP20) --- ### TemplateMonster [](https://caribdis.link/TMWP) No solo hay temas de WordPress en TemplateMonster, sino muchos recursos para la creación de sitios web. El descuento es del **50%** en todos los productos. Muy buena oportunidad para adquirir el plugin [**JetElements**](https://caribdis.net/2017/11/21/jetelements-resena-del-mejor-complemento-premium-para-elementor/). La promoción se extiende hasta el 29 de noviembre. [Ver temas para WordPress](https://caribdis.link/TMWP) --- ### Tesla Themes [](https://caribdis.link/TeslaP) Luego de más de un año de ser absorbida por la compañía **Imagely**, **Tesla Themes** estuvo en un *impasse* del que planea salir pronto con la publicación de un nuevo tema: **Inc**. En este **Black Friday** ofrece un **40%** de descuento en sus tres planes: *Tema único* ($35), *Todos los temas* ($59) y *Perpetuo* ($179). La promoción ya está vigente y se extiende hasta el viernes 23, con el código **BF40**. La promoción de **Cyber Monday** se extiende hasta el 30 de noviembre con el código **CM40**. [Ver oferta](https://caribdis.link/TeslaP) --- ### Curso WordPress Online [](https://caribdis.link/curso) Se podrá optar por uno de los cursos con un **40%** de descuento. El curso de Divi pasa de costar 247€ a **147€** y el resto de cursos pasan de 190€ a **114€**. Incluye dos meses de soporte y los plugins o tema Divi estudiados en el curso para descargar. También se ofrece el mejor descuento (**67%**) de la web en todos los cursos, con los que se podrá aprender todo lo que hay que saber para diseñar webs de calidad, tiendas online, SEO, y mucho más. Incluye un año entero de soporte, y los plugins o tema Divi estudiados en el curso para descargar con código de licencia en un sitio. [Ver oferta](https://caribdis.link/curso) --- ### CSSIgniter [](https://caribdis.link/CSSIP) Especializada en hotelería y viajes, esta empresa que ya ha cumplido seis años ofrece un tentador descuento del **50%** en todos sus planes. Incluye también acceso a la biblioteca completa de *landing pages* para [**Elementor**](https://caribdis.link/Elementorism). La promoción se extiende hasta el 26 de noviembre. Código: **CYBERMONDAY** [Ver oferta](https://caribdis.link/CSSIP) --- ### GeneratePress [](https://caribdis.link/GeneratePress) **GeneratePress** repite la oferta del año anterior, con un **25%** de descuento en el paquete de complementos **Pro**. A los catorce módulos de extensión, se suma acceso ilimitado a la [**Biblioteca de Sitios**](https://caribdis.link/GPSites), que cuenta con una nutrida colección de webs creadas con y sin constructores de páginas, listas para importar. La promoción se extiende hasta el 28 de noviembre. Código: **CYBERMONDAY18** [Ver oferta](https://caribdis.link/GeneratePress) --- ### OceanWP [](https://caribdis.link/GeneratePress) **OceanWP** es un producto que sigue la línea de **GeneratePress** y **Astra**: un robusto tema gratuito con cientos de miles de instalaciones, optimizado para constructores de páginas, que cuenta con un paquete de extensiones Premium que lo convierten en una poderosa herramienta de creación de sitios web. Aunque los planes no son tan económicos como los de **Astra**, el **50%** de descuento que ofrecen en este Black Friday es bastante tentador. También tiene disponible una [**Biblioteca de Demos**](https://caribdis.link/OWPdemos) listos para importar, tanto gratuitos como exclusivos de la extensión **Pro**. La promoción se extiende hasta el 28 de noviembre. Código: **CM2018** [Ver oferta](https://caribdis.link/OceanWP) --- ### CrocoBlock [](https://caribdis.link/CrocoP) **CrocoBlock** es la solución todo-en-uno para la creación de webs donde conviven los productos estrella de **Zemez**. Los planes incluyen acceso al tema **Kava PRO** y la biblioteca de [**demos**](https://caribdis.link/CrocoDemos), a los paquetes completos de imágenes profesionales y a los siguientes plugins de complemento para **Elementor**: **JetElements**, **JetMenu**, **JetBlog**, **JetTabs**, **JetReviews**, **JetTricks**, **JetThemeCore**, **JetWooBuilder**, **JetBlocks**, **JetEngine**, **JetPopup** y **JetSmartFilters**. El plan anual para un sitio está en oferta a **$33** y para sitios ilimitados, **$53**; la licencia perpetua cuesta en este Black Friday **$200,33**. La promoción se extiende hasta el 26 de noviembre. Código: **CrocoBlackFriday2018** [Ver oferta](https://caribdis.link/CrocoP) --- # Añadir snippets de código PHP a WordPress de la manera correcta Source: https://caribdis.net/2020/10/31/anadir-snippets-de-codigo-php-a-wordpress-de-la-manera-correcta.md Queremos presentarles la mejor manera de añadir *snippets* de código PHP a sus sitios. ¿Alguna vez recibieron como respuesta “pega lo siguiente en el archivo `functions.php`”, junto con una porción de código? Ese es el peor consejo que se puede dar, y al echar un vistazo más allá de la superficie entenderán el por qué. ### Añadir snippets de código PHP al archivo functions.php del tema hijo Queremos desechar de inmediato la idea y decir que no tocaríamos el archivo `functions.php` original ni con un palo. Ese archivo es del **tema principal** en uso. Se actualizará o eventualmente reemplazará. ¿Saben qué pasaría entonces? Todos los códigos PHP personalizados **se pierden**. Además, estarían metiéndose con un archivo que ya tiene un montón de código necesario, puesto ahí por el desarrollador por una razón. Eso no está bueno. Por lo tanto, ya que el archivo `functions.php` es un lugar perfectamente correcto para los *snippets* de código PHP, querrán usar un **tema hijo** para tal propósito. Un tema hijo es algo que coexiste con el tema principal. El objetivo fundamental es darnos un lugar para las modificaciones, por lo general de estilos y funciones personalizadas. Entonces, ¿cómo ponemos manos a la obra con un tema hijo? - ¿El tema ya viene con un tema hijo? ¿Los autores ofrecen uno? Bien, finalmente podrán hacer uso de él. **Instálenlo**. - Si no, siempre se puede usar el plugin [Childify Me](https://es.wordpress.org/plugins/childify-me/) para crearlo. - En el caso de que se consideren aventureros, como nosotros, creen el suyo propio a mano, siguiendo [las instrucciones](https://codex.wordpress.org/es:Temas_hijos). Asegúrense de que el tema hijo tenga un archivo `functions.php` esencialmente vacío, y añadan el código personalizado allí. Se recomienda usar un pequeño `/* comentario */` como encabezado de los *snippets* donde se pueda describir de qué trata el código y así reconocerlo en el futuro. Puede ser un código que se usará independientemente del tema. Por eso, si algún día cambian de tema, el código podría ser aplicado allí también. Lo mejor es que **sobrevivirá a las actualizaciones** del tema principal. Vale mencionar que este archivo está pensado para servir a un tema y su contenido está relacionado con ese tema.  ### Archivo functions.php estructurado No sería el eslogan de **Let’s WP** si no les dijéramos cómo hacerlo. Aunque la sección anterior era correcta, nos gusta ir un paso más adelante, al altar de la estructuración. Nos dimos cuenta de que agregamos tantos *snippets* de código PHP a nuestro archivo `functions.php`, que se incrementó en miles de líneas. Si tienen alguna **ambición de desarrollador**, les recomendamos lo siguiente. Pongan todos los *snippets* que hacen tareas similares, en archivos PHP separados, dentro de una carpeta del tema hijo (`/includes/` sería un nombre estándar). Solo inclúyanlos en el archivo `functions.php` del tema hijo, de esta manera: **Nota de la admin**: Esta entrada fue publicada originalmente el 2 de octubre de 2018 en el blog [**Let’s WP**](https://letswp.justifiedgrid.com/php-code-snippets-wordpress/), y actualizada el 19 de febrero de 2020. --- # Ofertas de WordPress 🎃 Halloween 2020 🎃 Source: https://caribdis.net/2020/10/26/ofertas-de-wordpress-%f0%9f%8e%83-halloween-2020-%f0%9f%8e%83.md Increíble que estemos ya en la recta final del año. Y un año bastante atípico, por cierto. La pandemia del COVID-19 ha transformado de manera imprevista no solo las relaciones interpersonales, sino también las modalidades de trabajo. No pocas actividades y disciplinas han tenido que adaptarse drásticamente, y hasta re-inventarse para poder hacer frente a un panorama que todavía hoy parece lejos de volver a la normalidad. El aumento de las transacciones no presenciales catapultó el *ecommerce* a niveles impensados en un lapso relativamente corto: [estudios](https://commonthreadco.com/blogs/coachs-corner/coronavirus-ecommerce#coronavirus-ecommerce-data) indican que, por ejemplo, en Estados Unidos el comercio electrónico tuvo un crecimiento similar al de los últimos cinco años en solo seis meses. Empresas pequeñas y medianas o profesionales que hasta este año no contaban con un sitio propio en Internet se vieron en la imperiosa necesidad de buscar alternativas rápidas, económicas y efectivas para no quedar afuera de la tendencia mundial. Los descuentos en productos, servicios y recursos destinados a la presencia en línea llegaron temprano este año, para acompañar esa gran demanda. Para aquellos que no pudieron aprovecharlos, esta es una oportunidad para no dejar pasar. 👻 **Halloween** es el calentamiento de motores para la verdadera carrera de ofertas que tiene lugar a fines de noviembre con el **Black Friday**, y como acostumbramos, aquí hacemos una selección de lo mejor en temas, plugins y otros recursos útiles para **WordPress**. ### Temas y plugins #### 🎃 Astra Pro [](https://caribdis.link/BuyAstra) **Astra** es el tema más amado, y el único que supera el millón de instalaciones activas en WordPress.org, sin contar los temas predeterminados. La reciente versión 2.6.0 incluye un personalizador optimizado y controles de color que asegurarán una experiencia ágil y rápida de edición. Muy pronto se sumará el constructor de cabeceras y pies de página integrado. Para aplacar la espera, y como gran oportunidad para ampliar la funcionalidad de **Astra** con excelentes complementos premium, los descuentos de esta fecha son los siguientes: - **20%** en productos individuales (*Astra Pro*, *Ultimate Addons for Beaver Builder*, *Ultimate Addons for Elementor*, *WP Portfolio*, *Schema Pro* y *Convert Pro*) - **25%** el paquete *Mini Agency* - **30%** en el paquete *Agency* La promoción se extiende desde el 28 hasta el 31 de octubre. [Ver oferta](https://caribdis.link/BuyAstra) --- #### 🎃 One by TemplateMonster [](https://caribdis.link/OneTM) La colección de herramientas web más grande del mundo está disponible en forma de suscripción anual o con un pago único que otorga acceso de por vida a más de 30 mil elementos de diseño. Entre ellos podremos encontrar temas y plugins para varios CMS, logos, fuentes, iconos, ilustraciones vectoriales, plantillas de presentaciones y muchísimo más. Incluye también licencias de los plugins **JetElements**, **JetMenu**, **JetBlog****,**** JetBlocks**, **JetTricks**, **JetTabs** y **JetPopup**. Las suscripción anual que cuenta con acceso a temas WordPress tiene un precio de **169** dólares, y la oferta **Todo-en-uno** con licencia de uso perpetuo, está rebajada a **549** dólares (pago único). Esta última opción es ideal para las agencias web, ya que si bien es un precio alto, la inversión puede recuperarse muy pronto. La oferta solo dura dos días, el lunes 26 y el martes 27. ¡A apurarse! [Ver oferta](https://caribdis.link/OneTM) --- #### 🎃 TemplateMonster [](https://caribdis.link/TMWP) El mercado de temas individuales también ofrece descuentos para estas fechas, que se extenderán un poco más e irán disminuyendo con el correr de los días. Por ejemplo, los días 28 y 29 de octubre cualquier producto de la vidriera de **TemplateMonster** tendrá un **25%** de rebaja. Entre los días 29 y 30 un **20%**, y a partir del 31 de octubre y hasta el 2 de noviembre, un **15%**. [Ver oferta](https://caribdis.link/TMWP) --- #### 🎃 CSSIgniter [](https://caribdis.link/CSSIgniter) La factoría de temas **WordPress** de Grecia **CSSIgniter** ofrece un 30% de descuento para su cartera de más de 80 temas, 60 plantillas para **Elementor** y tres plugins premium. Código: **HALLOWEEN** (se aplica directamente en la página de pago). La promoción se extiende hasta el 1 de noviembre. [Ver oferta](https://caribdis.link/CSSIgniter) --- #### 🎃 GeneratePress [](https://caribdis.link/GeneratePress) El complemento **Premium** para este tema que es uno de los más populares en el repositorio gratuito, presenta el clásico descuento del **20%** para esta fecha. GP Premium otorga acceso a más de una docena de módulos y a la [biblioteca de sitios prediseñados](https://caribdis.link/GPSites), con una licencia de uso para ilimitados sitios. Código: **HALLOWEEN20** (se aplica directamente en la página de pago). La promoción se extiende hasta el 3 de noviembre. [Ver oferta](https://caribdis.link/GeneratePress) --- #### 🎃 OceanWP [](https://caribdis.link/OceanWP) Este tema gratuito con varias extensiones premium y una biblioteca de demos listas para importar ofrece un **20%** de descuento en todos sus planes. La promoción se extiende hasta el 2 de noviembre y se aplica directamente. [Ver oferta](https://caribdis.link/OceanWP) --- ### Recursos de optimización #### 🎃 WPRocket [](https://wp-rocket.me) La velocidad de un sitio web es más crucial que nunca. Con el crecimiento de los negocios en línea, es imprescindible brindar al usuario una experiencia ágil y rápida en la navegación de un sitio. **WPRocket** es uno de los mejores plugins de caché en el mercado, y ofrece un **20%** de descuento en cualquiera de sus suscripciones. La promoción se extiende desde el 27 de octubre hasta el 3 de noviembre. [Ver oferta](https://wp-rocket.me) --- ### Alojamiento web #### 🎃 WP Engine [](https://caribdis.link/WPEngine) **WP Engine** es uno de los proveedores de hosting administrado para **WordPress** líderes en el mundo. En 2018 adquirieron **StudioPress**, famosos creadores de **Genesis Framework**, y actualmente están ofreciendo todos los temas en sus planes de alojamiento web. La oferta para este Halloween incluye **cuatro meses sin cargo** en cualquiera de los planes anuales (*Startup*, *Growth* o *Scale*). Cupón: **SPOOKY20** Validez de la oferta: desde el lunes 26 hasta el sábado 31 de octubre. [Ver oferta](https://caribdis.link/WPEngine) --- # Ofertas de WordPress Halloween 2019 Source: https://caribdis.net/2019/10/30/ofertas-de-wordpress-halloween-2019.md La fiesta de descuentos está naciendo, al tiempo que el año toma su recta final. En esta oportunidad el acto inaugural tiene lugar en la **Noche de Brujas**, y para esperar contentos el **Black Friday** y **Cyber Monday** repasamos seis de las mejores ofertas de **WordPress** en este **Halloween** modelo 2019. ### Astra Pro [](https://caribdis.link/BuyAstra) [**Astra**](https://es.wordpress.org/themes/astra/) se ha convertido en nuestro pedal de arranque, superando este año a **Divi**. Con más de medio millón de instalaciones activas, es sin dudas el tema gratuito más popular de los últimos tiempos. Y a esta altura, el complemento **Pro** se vuelve imprescindible para lograr un sitio web atractivo, accesible y súper rápido. La gente de **Brainstorm Force** ofrece en esta oportunidad un descuento del **25%** para todas sus membresías, tanto anuales como perpetuas. La promoción se extiende hasta el 1 de noviembre y se aplica directamente. [Ver oferta](https://caribdis.link/BuyAstra) --- ### CrocoBlock [](https://caribdis.link/CrocoP) **CrocoBlock** es una de la soluciones integrales que recomiendo especialmente, luego de usarlo bastante este año para construir webs. En la biblioteca de [**demos**](https://caribdis.link/CrocoDemos) hay para todos los gustos y necesidades, y los numerosos complementos como **JetElements**, **JetMenu** y **JetTricks**, entre otros, lo convierten en una herramienta fundamental para potenciar el constructor de páginas [**Elementor**](https://caribdis.link/Elementor) de maneras insospechadas. Podrán explorar algunas de las propuestas ***Freemium*** en el repositorio de plugins: [**JetWidgets for Elementor**](https://es.wordpress.org/plugins/jetwidgets-for-elementor), [**JetSticky for Elementor**](https://es.wordpress.org/plugins/jetsticky-for-elementor/) y [**JetWoo Widgets For Elementor**](https://es.wordpress.org/plugins/jetwoo-widgets-for-elementor/). La promoción se extiende hasta el 3 de noviembre. Código: **Boo13deal** [Ver oferta](https://caribdis.link/CrocoP) --- ### CSSIgniter [](https://caribdis.link/CSSIP) Esta fábrica de temas localizada en la bella Grecia es otra de las empresas para las que solo tengo elogios. Luego de usar sus productos en varias webs este año he podido comprobar que están desarrollados con los más altos estándares de código, de manera que simplifican y aceleran las personalizaciones complejas. A la vez son increíblemente fáciles de administrar para el usuario común. **CSS Igniter** lleva ya siete años en el mercado, y a pesar de que suman nuevos temas con poca frecuencia, ofrecen un [muestrario](https://caribdis.link/CSSIgniter) bastante amplio, en el que se pueden encontrar también algunas opciones gratuitas. La biblioteca de *landing pages* para [**Elementor**](https://caribdis.link/Elementorism) se actualiza más periódicamente e incluye muy, pero muy buenos diseños. La promoción se extiende hasta el 4 de noviembre. Código: **HALLOWEEN** [Ver oferta](https://caribdis.link/CSSIP) --- ### GeneratePress [](https://caribdis.link/GeneratePress) **GeneratePress** pone a disposición un **15%** de descuento para sus complementos **Premium**. Los módulos incluyen opciones para editar colores, fuentes, tipos de menús, diseños de blog y herramientas para **WooCommerce**, por solo mencionar algunos. La [**Biblioteca de Sitios**](https://caribdis.link/GPSites) cuenta con una serie de diseños prearmados para importar en pocos clics, compatibles con **Gutenberg**, **Elementor** y **Beaver Builder**. La promoción se extiende hasta el 2 de noviembre. Código: **HALLOWEEN19** [Ver oferta](https://caribdis.link/GeneratePress) --- ### MyThemeShop [](https://caribdis.link/MTS19) **MyThemeShop** siempre repite esta tentadora rebaja a **$19** de todos sus temas premium individuales, además de un descuento del **50%** en los plugins. La promoción se extiende hasta el 3 de noviembre. Código: **halloween19** [Ver oferta](https://caribdis.link/MTS19) --- ### TemplateMonster [](https://caribdis.link/TMWP) **TemplateMonster** es un mercado de productos digitales con literalmente miles de temas y plugins, además de contar con plantillas para todas las plataformas de gestión de contenidos. En esta celebración de **Halloween** ofrece un **20%** de descuento en sus productos más populares. Otra gran oportunidad para adquirir el plugin [**JetElements**](https://caribdis.net/2017/11/21/jetelements-resena-del-mejor-complemento-premium-para-elementor/) por un pago único de **$14**, o la [**membresía One**](https://caribdis.net/2019/04/23/one-por-templatemonster-servicio-suscripcion/) por **$189** anuales. La promoción se extiende hasta el 1 de noviembre. [Ver temas para WordPress](https://caribdis.link/TMWP) --- --- # Formulario de contacto de Zerif Lite: ¿Cómo migrar desde Pirate Forms a WPForms? Source: https://caribdis.net/2018/10/28/formulario-de-contacto-de-zerif-lite-como-migrar-desde-pirate-forms-a-wpforms.md El último mes, **Pirate Forms** [fue adquirido por **WPForms**](https://themeisle.com/blog/pirate-forms-is-now-wpforms/), y desde [**ThemeIsle**](https://caribdis.link/ThemeIsle) recomiendan su instalación, tanto para **Zerif** como para **Hestia**. El proceso para migrar desde **Pirate Forms** no es complicado, pero se requieren una serie de pasos para que la transición sea óptima y el formulario de contacto de los dos temas principales de **ThemeIsle** luzca igual que antes del cambio. Vamos a detallar esos pasos para **Zerif Lite** en esta entrada (no sin antes barrer y sacar las telarañas de este pobre y abandonado blog). Si actualizamos a **Zerif Lite** v1.8.5.47 o superior, nos encontraremos con el aviso de recomendación para instalar el plugin [**WPForms**](https://caribdis.link/WPForms): [](https://caribdis.net/imgz/2018/10/zerif-wpforms-aviso.png) Si bien podemos optar por descartar esta notificación y seguir usando **Pirate Forms**, no es en absoluto recomendable, ya que el desarrollo y mantenimiento de este plugin se ha descontinuado. Aunque siga funcionando, podría convertirse en vulnerable en un futuro y comprometer la seguridad del sitio. Por esta razón, y también porque la versión gratuita de **WPForms** incluye muchas más opciones que **Pirate Forms**, es que se aconseja instalar el nuevo plugin y desactivar y eliminar el viejo. Los pasos para hacer la transición son los siguientes: ## Paso 1: Instalar y activar WPForms Cuando hacemos clic en el botón *Migrar a WPForms* de la notificación en el escritorio, se nos presentará la siguiente pantalla:  Haremos clic, por supuesto, en *Instala WPForms*. Aguardaremos a que finalice el proceso correspondiente, y veremos que se ha habilitado el botón del segundo paso: migrar desde **Pirate Forms**. ## Paso 2: Migrar desde Pirate Forms Haremos clic en el botón *Iniciar migración* (habilitado una vez que se instala y activa **WPForms**) y nos encontraremos con la siguiente pantalla:  Aquí seleccionaremos *Formulario por defecto* (o *Default Form*) y una vez que se añada al recuadro *Formularios para importar*, haremos clic en el botón *Importar*. ## Paso 3: Editar el formulario Para que podamos ver el formulario de contacto tal como lo teníamos antes de migrar a **WPForms**, será necesario este paso. De lo contrario, al insertar el *shortcode* se verá de la siguiente manera:  Vamos, entonces, a *Todos los formularios > Editar*.  Se abrirá una ventana a pantalla completa con la interfaz de **WPForms**, las opciones de configuración en la parte izquierda, y la representación del formulario en la parte derecha. [](https://caribdis.net/imgz/2018/10/zerif-wpforms-editar-campo.png) Comenzaremos con el campo *Nombre*, sobre el cual haremos clic para abrir el panel de opciones. [](https://caribdis.net/imgz/2018/10/zerif-wpforms-editar-campo2.png) Desplegaremos la sección *Opciones avanzadas*, y allí seleccionaremos *Grande* en el menú desplegable *Tamaño del campo*, escribiremos *Nombre* en el campo *Marcador de posición*, y marcaremos la casilla *Ocultar etiqueta*. Por último, iremos a *Clases CSS* y haremos clic en el enlace *Mostrar el diseño* de la derecha. Allí veremos una serie de estructuras de columnas para seleccionar. Nosotros le damos clic a la estructura de tres columnas, y seleccionamos a cuál de ellas corresponderá este campo:  Veremos que se habrá añadido automáticamente la clase `wpforms-one-third wpforms-first` al campo CSS. Repetiremos los pasos para los campos restantes. Para el campo *Correo electrónico*, desplegamos la sección *Opciones avanzadas*, seleccionamos *Grande* en el menú desplegable *Tamaño del campo*, escribimos *Correo electrónico* en el campo *Texto de marcador de posición*, y marcamos la casilla *Ocultar etiqueta*. [](https://caribdis.net/imgz/2018/10/zerif-wpforms-editar-campo3.png) En *Clases CSS* hacemos clic en el enlace *Mostrar el diseño* de la derecha y seleccionaremos la segunda columna de la estructura de diseño de tres columnas:  La clase que se habrá añadido es `wpforms-one-third`. Para el campo *Asunto*, desplegamos la sección *Opciones avanzadas*, vamos a *Tamaño del campo* y seleccionamos *Grande*, en el campo *Texto de marcador de posición* escribimos *Asunto* y marcamos la casilla *Ocultar etiqueta*. [](https://caribdis.net/imgz/2018/10/zerif-wpforms-editar-campo5.png) En *Clases CSS* hacemos clic en el enlace *Mostrar el diseño* de la derecha y seleccionaremos la tercera columna de la estructura de diseño de tres columnas:  Por último, para el campo *Mensaje*, tan solo seleccionaremos *Grande* del menú *Tamaño del campo*, escribiremos *Mensaje* en el campo *Texto de marcador de posición* y haremos clic en *Ocultar etiqueta*. [](https://caribdis.net/imgz/2018/10/zerif-wpforms-editar-campo4.png) Guardamos los cambios con un clic en el botón anaranjado *Guardar* de la parte superior derecha de la interfaz.  ## Paso 4: Insertar el formulario en lugar de Pirate Forms Este paso es la última acción que debemos llevar a cabo para usar **WPForms** en **Zerif Lite** como formulario de contacto en la página de inicio. Copiamos el *Shortcode* que se encuentra en la página *WPForms > Todos los formularios*.  Y luego vamos a *Apariencia > Personalizar > Secciones de la página de inicio > Sección “Contáctenos”*. En el campo *Shortcode del formulario de contacto* pegamos el código corto previamente copiado.  ¡Eso es todo! Tendremos una apariencia prácticamente idéntica a la que se mostraba con **Pirate Forms**:  Ahora sí, estaremos en condiciones de desactivar y eliminar **Pirate Forms**. :) --- # Guía para WordPress 5.5 disponible Source: https://caribdis.net/2020/10/16/guia-para-wordpress-5-5-disponible.md **WordPress 5.5**, bautizado “Eckstine” en homenaje al cantante de jazz y pop estadounidense [Billy Eckstine](https://es.wikipedia.org/wiki/Billy_Eckstine), fue presentado en sociedad el 11 de agosto último. Está disponible para descarga desde la web de [WordPress.org](https://es.wordpress.org/download/) o para actualizar directamente en el escritorio de nuestros sitios. Esta última versión nos trae la carga diferida de imágenes, un nuevo mapa del sitio integrado, actualizaciones automáticas de temas y plugins, más mejoras para el editor de bloques y una montaña de optimizaciones para los desarrolladores. ### Velocidad **WordPress 5.5** incluye la carga diferida (*lazy loading*) para las imágenes. Esto hará que las imágenes solo carguen apenas estamos por desplazarnos por la página para verla, contribuyendo a una velocidad de navegación más rápida. En un dispositivo móvil, la carga diferida también impide que los navegadores carguen archivos que están destinados a otros tamaños de pantalla, lo cual se traducirá en un ahorro de datos y en preservar la duración de la batería. ### Optimización para motores de búsqueda (SEO) **WordPress** siempre ha sido bueno para la SEO, pero ahora incluye un mapa XML del sitio para facilitar la lectura de los buscadores. Desde luego, si estamos usando alguno de los plugins más populares para esta finalidad, como *Rank Math* o *Yoast SEO*, estos desactivarán la característica incluida para usar sus propias herramientas de generación del mapa del sitio. ### Actualizaciones automáticas de temas y plugins Ahora podemos permitir que los temas y plugins se actualicen cuando salga una nueva versión. Esta herramienta no está activada de manera predeterminada, sino que se debe activar para cada plugin o tema respectivamente. Por el momento, solo están disponibles para los temas y plugins descargados e instalados desde el repositorio oficial de **WordPress**. Otra característica introducida con la nueva versión **5.5**, solicitada durante años por los usuarios, es la posibilidad de actualizar manualmente los plugins y temas mediante la subida de un archivo ZIP. Cuando subamos un archivo ZIP desde el escritorio, **WordPress** ahora comprobará si ya está instalado en el sitio y pedirá confirmación para sobrescribir el tema o plugin existente. Esta opción nueva es realmente útil en caso de que tengamos instalados temas o plugins de desarrolladores externos. ### Mejoras en el editor de bloques **WordPress 5.5** incluye ahora patrones de bloques. Estos son diseños predefinidos, que por lo general agrupan varios bloques construidos previamente y con estilos personalizados. Los patrones de bloques son muy útiles para añadir contenido a la página, por secciones, en lugar de tener que construir todo de cero. Veremos, además, un nuevo directorio de bloques, que nos hará más simple de encontrar e instalar bloques individuales en el sitio. Cuando hagamos una búsqueda en el insertador de bloques y no exista ninguno que coincida con los términos, se buscará también en el directorio de bloques de **WordPress**. Si encuentra alguno pertinente, tendremos la posibilidad de explorar la lista de resultados e instalarlo y activarlo de inmediato, sin salir del editor. También tendremos acceso a algunas herramientas básicas de edición de imágenes en línea, tales como la posibilidad de recortar, rotar o ampliar las fotos desde dentro mismo del bloque Imagen. Esta característica servirá para optimizar las imágenes al momento de añadirlas al contenido, e incluye algunas funcionalidades similares a aquellas que estaban disponibles en el editor clásico. ### Mejoras para los desarrolladores **WordPress** ahora tiene una manera estandarizada de definir el tipo de entorno de un sitio (desarrollo, ensayo, producción, etc.) simplemente con la definición de la constante `WP_ENVIRONMENT_TYPE` en el archivo `wp-config.php`. Se puede recuperar ese tipo con `wp_get_environment_type()` y ejecutar solo el código que corresponda. Las funciones de carga de la plantilla (`get_header()`, `get_template_part()`, etc.) tienen un nuevo argumento `$args`, lo cual significa que ahora se pueden pasar datos a esas plantillas. La biblioteca de PHPMailer ha sufrido un importante salto de versión, desde la 5.2.27 a la 6.1.6. El Opcache de PHP verá una anulación más confiable de la caché, gracias a la función nueva `wp_opcache_invalidate()`. La REST API ahora soporta valores predeterminados específicos de datos meta a través de `register_meta()`. Estas son solo algunas de las mejoras que los desarrolladores encontrarán en la última versión de **WordPress**. ### Actualizaciones de la Guía En esta última versión de la guía hay algunos capítulos nuevos y más de cien imágenes actualizadas, que incluyen los cambios de interfaz del editor de bloques. Esto nos asegura que las capturas que vemos en la guía reflejarán exactamente la versión actual de **WordPress**. Como siempre recordamos, existen dos opciones de descarga: una gratuita, en formato PDF, que servirá a la mayoría de los usuarios comunes, y otra paga, en formato editable DOCX, pensada para los desarrolladores e instructores que necesiten adaptar la guía a su marca y distribuirla entre sus clientes o alumnos. Las instrucciones de descarga se pueden encontrar [aquí](https://caribdis.net/project/guia-wp-facil-manual-de-wordpress/). ## ### Descargar PDF ## ### Comprar DOCX --- # Pandemia COVID-19: Los WordCamps también se quedan en sus casas Source: https://caribdis.net/2020/04/12/pandemia-covid-19-los-wordcamps-tambien-se-quedan-en-sus-casas.md Bueno... nada para decir sobre aquello que todos ya conocemos y padecemos: la situación mundial con respecto al coronavirus. 😷 Desde su aparición, y desde que se han ido declarando las cuarentenas a lo largo y a lo ancho del planeta, un importante número de actividades han tenido que ser adaptadas al distanciamiento social en mayor o menor medida. Los eventos más importantes en el universo **WordPress**, los **WordCamps**, son tan solo una más de esas actividades, y en estos últimos meses, por obvias razones, han sufrido más de una cancelación o postergación. La gran noticia para nosotros, amantes de **WP**, es que varias comunidades no se han rendido ante la adversidad, y han decidido adoptar la modalidad virtual para abrir los “salones cibernéticos” de sus respectivos **WordCamps** a todo el público y de manera totalmente gratuita. ### #WCSATX – 28 y 29 de marzo, San Antonio, Texas ✅  La prueba piloto tuvo lugar el último fin de semana de marzo, desde San Antonio, Texas. Dividido en tres “pistas”, *Usuario*, *Márketing* y *Desarrollador*, casi una treintena de oradores desfilaron durante los dos días del **WordCamp** con ponencias transmitidas mediante la plataforma [**Crowdcast**](https://www.crowdcast.io/), y disponibles en vivo en la [**web oficial**](https://2020.sanantonio.wordcamp.org/) del evento. Asimismo, contó con “pasillos de chat” que fueron posibles a través de **Zoom**, y donde los asistentes pudieron encontrarse a conversar por videoconferencia con organizadores, expositores y patrocinadores. Para los que se les dé bien el inglés, todas las charlas están accesibles al público en los siguientes enlaces (solo es necesaria una dirección de correo electrónico para ingresar mediante el botón *Watch replay*): Pista de *Usuario*: [https://2020.sanantonio.wordcamp.org/live/user-track-live/](https://2020.sanantonio.wordcamp.org/live/user-track-live/) Pista de *Márketing*: [https://2020.sanantonio.wordcamp.org/live/marketing-track-live/](https://2020.sanantonio.wordcamp.org/live/marketing-track-live/) Pista de *Desarrollador*: [https://2020.sanantonio.wordcamp.org/live/developer-track-live/](https://2020.sanantonio.wordcamp.org/live/developer-track-live/) La primera contiene exposiciones relacionadas con el uso cotidiano de **WordPress** y sus herramientas; la segunda está enfocada en el uso y aplicación de **WordPress** como base de una estrategia de ventas, atracción de nuevos clientes o construcción de modelos de negocios, y la tercera está volcada al ámbito del código y el rendimiento de la plataforma. Es también una buena oportunidad para familiarizarse con la mecánica de este tipo de modalidad de asistencia a un **WordCamp**, y para “calentar motores” a la espera de los próximos. ### #WCSCV – 18 de abril, Santa Clarita, California ✅  El siguiente **WordCamp** que se celebrará vía internet es el de Santa Clarita, dentro de solo seis días. Comenzará a las 8:45 hora local (12:45 de Argentina y 17:45 de Madrid) y contará con tres salas que totalizarán veintiuna charlas: Baker Ranch Stadium (equivalente a la pista *Desarrollador*), Bonelli Stadium (equivalente a la pista *Usuario*) y Saugus Speedway (equivalente a la pista *Márketing*). El cronograma de ponencias está listo [aquí](https://2020.santaclarita.wordcamp.org/schedule/) y las entradas, [aquí](https://2020.santaclarita.wordcamp.org/tickets/). Todas las transmisiones en vivo tienen subtitulado simultáneo, para aquellos que tengan mejor dominio del inglés escrito que del oral. ### #WCES – 6, 7, 8 y 9 de mayo, España ✅  El tercer **WordCamp** virtual del año es el que más nos interesa a nosotros y será el primer **WordCamp** online de la historia en nuestro idioma. Se compone de cuatro jornadas, de las cuales tres estarán dedicadas a los debates, exposiciones y ponencias, y la restante será de contribución a **WordPress** (*Contributor Day*). [Aquí](https://2020.spain.wordcamp.org/sobre-wces-2020/) nos dan un completo panorama de lo que es un **WordCamp** en general, y nos cuentan de qué va el **WordCamp España 2020** en particular. Están todos invitados a adquirir sus entradas virtuales (y, por supuesto, gratuitas) [aquí](https://2020.spain.wordcamp.org/entradas/), hasta el 5 de mayo. **¡No se lo pierdan!** ### #WCKENT – 30 y 31 de mayo, Kent, Ohio ✅  El cuarto **WordCamp** virtual se llevará a cabo a fines de mayo (¡dos **WordCamps** en un mes, viva!), gracias a la comunidad de **WordPress** del noreste de Ohio. Es el sexto año consecutivo en el que se organiza el evento en Kent, y por suerte para el mundo han decidido no interrumpirlo por causa de la pandemia. Contará con distinguidos oradores y una gran variedad de temas relacionados con el *blogging*, los negocios, el diseño y la programación, siempre en la órbita de **Word****Press**. El cronograma se encuentra aún en preparación, pero las entradas ya están disponibles [aquí](https://2020.kent.wordcamp.org/tickets/). ### #WCEU – 4, 5 y 6 de junio, Oporto, Portugal ✅  Por último, pero no menos importante, el mega-evento **WordCamp Europa** también traspasa la frontera al plano virtual. Tanto la grilla de charlas como la venta de entradas no están disponibles aún, pero lo estarán en breve. En el pie de página de la [**web oficial**](https://2020.europe.wordcamp.org/) encontrarán un formulario para suscribirse a las novedades. **WordCamp Europa** tendrá la revancha presencial del 3 al 5 de junio del próximo año, también en Oporto, Portugal. ### #WCPE – 25 y 26 de septiembre, Lima, Perú ❎  Segundo WordCamp en español del año. Veinte charlas divididas en dos salas. Comienza a las 3 PM GMT-5 del viernes 25 de septiembre. Entradas [aquí](https://lima.wordcamp.org/2020/entradas/). ### #WCUS – 27, 28 y 29 de octubre, St. Louis, Missouri (CANCELADO) ⛔  Este es uno de los últimos que han anunciado su "mudanza" al ciberespacio. Aún se encuentra en fase de organización, y en estos momentos está abierto el llamado a ponentes. Más novedades se irán agregando en la [web oficial](https://2020.us.wordcamp.org/). **Actualización 30/07**: este evento se ha cancelado. Hasta aquí los eventos confirmados. ¿Serán estos todos los **WordCamps** virtuales del año? ¿O se sumarán algunos más? Aún es temprano para hacer pronósticos, ya que no sabemos por cuánto tiempo más se extenderán las cuarentenas en sus respectivos países. La frase “toda crisis es una oportunidad” está hoy más vigente que nunca. Pues bien, esta es una gran oportunidad que los entusiastas de **WordPress** no podemos ni debemos dejar pasar. Como bien dijo [**Jocelyn Mozak**](https://2020.sanantonio.wordcamp.org/speaker/jocelyn-mozak/) en la charla de apertura del primer **WordCamp** virtual de la historia: **hay algo para todos**. No importa si lo conocemos como la palma de nuestra mano desde hace más de quince años o lo probamos por primera vez hace un par de meses; no importa si somos usuarios principiantes o programadores expertos; y en el momento que hoy nos toca vivir, no importa si estamos en la misma ciudad donde se organiza o desparramados por los cinco continentes... en los **WordCamps siempre hay algo para todos**. Ese es el obsequio que nos da **WordPress**. --- # Elementor y Underscores: ¿Es realmente necesario un tema? Source: https://caribdis.net/2020/09/22/elementor-y-underscores-es-realmente-necesario-un-tema.md Descubrirán un **nuevo y fantástico concepto** para crear sitios de WordPress, por más que rompa con muchas tradiciones. No nos adjudicamos la invención del combo **Elementor** y **Underscores**, aunque no hemos escuchado que alguien más lo usara hasta el momento de escribir esta entrada. Por lo tanto, se los enseñaremos para que tal vez puedan cambiar el punto de vista. Como recompensa, se beneficiarán de un sitio WordPress con mejor rendimiento y menor sobrecarga. ### El flujo de trabajo normal en la creación de un sitio WordPress Un método establecido, y que apela al sentido común, es algo parecido a esto: - ¡Comprar un tema WordPress en Themeforest! - ¡Usar el constructor que viene integrado! - ¡Llenar el sitio de plugins! - ¡Personalizarlo! - ¡Quejarnos de que es lento! - ¡Temblar ante cada actualización! Esto era todo lo que conocíamos y recomendábamos a nuestros amigos y conocidos. Claro que genera tráfico y ventas a los temas premium de Themeforest, pero, ¿a qué costo? La mayoría de los sitios hoy en día tienen colgado el cartel luminoso “¡PLANTILLA!” Se puede notar que el dueño está conforme con el diseño predeterminado, y no se molestó mucho en ajustar nada. ¿Nuestro método puede ser un cambio en las reglas del juego? ### ¿Qué hicimos para encontrar esta solución? Nos pasamos horas incontables **“amansando” costosos temas de WordPress** hasta que se comportaran como queríamos. Aunque un tema esté catalogado como “multipropósito”, a la larga se vuelve en contra de sí mismo. Se han tornado tan complicados, que **uno diseña el sitio entero** y no queda casi nada del concepto original del tema. Muy a menudo, los creadores de temas tienden a añadir un constructor de páginas (entre otros plugins) a su ya complejo código de base, para seguir siendo competitivos en el mercado. Si quitamos todos los plugins adicionales y las bonitas fotos de bancos de imágenes que aparecen en las demos, ¿qué queda? Si de todas maneras vamos a diseñar todo nosotros mismos, ¿para qué comprar un tema tan caro? Hemos trabajado con distintos constructores de páginas, más que nada con WPBakery Page Builder, antes conocido como Visual Composer. Nuestra experiencia fue encontrar que **algunos temas premium desactivaban la edición en vivo del *front-end***. Eso nos priva de su verdadera fortaleza, y nos devuelve una experiencia tortuosa en la interfaz de administración. Hemos creado un sitio con el combo **tema premium y Visual Composer**, pero nos cansamos de su complejidad. Decidimos abandonarlo y buscar una estrategia mejor, que más tarde se convirtió en la pareja [**Elementor**](https://caribdis.link/Elementor) y [**Underscores**](https://underscores.me/). ¿Qué tal si un constructor de páginas fuera tan poderoso como para hacer también el papel de tema? Tendríamos un sitio más rápido, con un solo producto por aprender. Uno de los mejores para esta tarea es [Elementor, en su versión Pro](https://caribdis.link/ElementorPro). ### Nuestro método alternativo con Elementor Pro y Underscores Hemos notado, luego de adentrarnos en las pantallas de administración de Elementor Pro, que tiene las mismas capacidades que un tema. Podemos crear un diseño y asignarlo a los archivos. Crear otro para las páginas 404, las barras laterales, etc. Curiosamente, hace todo lo que se supone que debería hacer un tema. Por lo tanto, parecía promisorio y quisimos ver cuánto podría lograr por sí solo. No nos tomó mucho tiempo hasta dar con un tema casi completamente vacío, llamado Underscores. Ese tema está muy lejos de lo que podríamos encontrar en Themeforest. Es como un lienzo en blanco, con lo mínimo requerido para que funcione WordPress. La idea era que todo el colorido que se viera en el *front-end*, proviniera de Elementor (ya que el tema carece de estilos). ¡Así nació la combinación de Elementor y Underscores!  ### ¿Qué es el tema de WordPress Underscores? Puede que se pregunten qué es. Cuando se crean temas (quizá para ser comercializados), un desarrollador no quiere empezar de cero. Estos “temas esqueleto” incluyen código general que es común entre cada tema existente. Es como la estructura fundamental. Claro que existen variantes en la manera en la cual los programadores implementan esa estructura general, pero la base del núcleo es la misma. Queríamos una plantilla que tuviera solo esas líneas esenciales y nada más. Las etiquetas específicas de la plantilla son las que mantienen la unidad de un sitio WordPress. Tales como las que se usan para crear un área que se transformará en la cabecera o el pie de un documento HTML. De manera similar, la página necesita saber dónde se mostrará el contenido, el menú, la barra lateral, o los comentarios. Es claro y directo. Si instalamos este tema, el *front-end* parecerá “roto”. Colores azules y morados para los enlaces, ningún estilo, texto negro sobre fondo blanco. La cosa entera tiene menos de 100KB. Para empezar, hace que el sitio sea rápido. No hay sobrecarga del lado del tema. Tal y como nos gusta. No por nada Automattic (los responsables del proyecto WordPress) crearon Underscores. Su naturaleza de código abierto asegura que el tema incluye los conocimientos de numerosos desarrolladores y un funcionamiento casi libre de errores. No se actualiza con frecuencia, ya que no lo necesita. Y por fortuna es **completamente gratuito**, y se puede modificar a gusto. Nosotros lo personalizamos agregando nuestros códigos en un tema hijo.  ### ¿Qué es Elementor? Es un lindo y moderno constructor de páginas que **le da vida** a nuestro sitio. Elementor es amigable con los desarrolladores y es ampliable. Este constructor hace posible un muy agradable flujo de trabajo, principalmente gracias a la edición en vivo. Todas estas bondades suenan a anuncio publicitario, pero de verdad nos ha gustado la **respuesta inmediata a cada cambio de valor**. Podemos aumentar o disminuir valores de márgenes o rellenos con la rueda del ratón y ver cómo cambia el elemento en **tiempo real**. Nos ha ahorrado un montón de tiempo cuando creamos el diseño. Por supuesto, como somos programadores, necesitamos añadir mucho código PHP personalizado, CSS y JS. Pero no tuvimos que crear todo de cero, solo las partes que eran propias de [nuestro sitio](https://letswp.justifiedgrid.com/). Estos componentes son los indicadores de dificultad, nuestros enlaces con subrayado animado, y la carga diferida de imágenes, entre otros ajustes. ### Elementor y Underscores combinados Una vez que nos largamos a andar, fue evidente de inmediato que el resultado era fácil de cambiar. Elementor tenía casi todo en su caja de herramientas para emular un tema hecho y derecho. [**Nuestro sitio**](https://letswp.justifiedgrid.com/) es la prueba de que el combo Elementor y Underscores funciona, y creemos que salió bastante bien. En lugar de dos “atiborramientos”, solo tenemos uno. ¿Por qué? Pues porque el tamaño de Elementor es aún significativo, y es capaz de hacer mucho más de lo que necesitamos. Pero al menos, cuando necesitamos algo (un componente), es probable que ya exista en su biblioteca. Es un costo bajo en comparación con un sitio codificado a mano desde cero. ### Dificultades con Elementor No sería una recomendación sincera si omitiéramos mencionar algunos problemas. Algo que Elementor no puede hacer al día de hoy son los **comentarios de las entradas**. Es decir, insertamos el widget de comentarios, pero este asume que el diseño provendrá del tema en uso. Y como nosotros no tenemos uno, apareció sin estilos; tuvimos que escribir todo el código CSS para ese propósito. Ningún constructor de páginas o programa es perfecto, así que nos encontramos con varios errores. Los desarrolladores son buenos para corregirlos si se les informa de ellos. **No es razón para abandonar el viaje**, pero hay que ser consciente de que en el mar de WordPress, las aguas donde tendremos que navegar nunca serán apacibles. Sin importar el discurso adornado con el cual nos quieran vender un tema o un plugin, tarde o temprano enfrentaremos algún problema. Aunque sonemos un tanto pesimistas, es la verdad. Por desgracia, les tenemos miedo a las actualizaciones, ya que con frecuencia desacomodan las cosas. Como práctica recomendada, sugerimos guardar una **copia del sitio para ensayos**, y aplicar las actualizaciones y cambios de diseño allí. Los desarrolladores prueban nuevas características para mantenerse al día con las nuevas tecnologías, pero esto no siempre es bueno. Los diseños podrían romperse, y si no sabemos cómo arreglarlos o no tenemos a un experto a mano que se encargue, la pasaremos mal. Lo mismo ocurre con los temas, por cierto, aunque en ese terreno sea tal vez peor. Así que no desestimen nuestro método con base en esto. ### Conclusión ¿Podrían no necesitar un tema WordPress después de todo? El combo Elementor y Underscores es una método rentable, bien que alternativo, para un flujo de trabajo típico. Es sencillo de usar y muestra una respuesta instantánea en el resultado de cómo se verá el sitio, aún antes de pulsar el botón *Guardar*. **Nos enorgullece el hecho de no haber utilizado un tema premium** en nuestro sitio. Nos permite evitar los descalabros que con frecuencia conllevan. Usar Elementor y Underscores juntos es lo más cercano a codificar el sitio uno mismo. La combinación tiene incluso más espacio para crecer, pero ya es buena por sí misma. Por eso **recomendamos esta solución aún para los principiantes**. Elementor contiene bloques integrados para no tener que empezar de cero. Además, la experiencia de construir con una vista previa en vivo es adictiva y se enamorarán de un verdadero proceso “lo que ves es lo que obtienes”. > **Nota de la admin**: Esta entrada fue publicada originalmente el 12 de octubre de 2018 en el blog [**Let's WP**](https://letswp.justifiedgrid.com/elementor-and-underscores-do-you-need-themes/), y actualizada el 29 de febrero de 2020. Es la primera de las traducciones de una serie de entradas relevantes creadas por Firsh en ese blog, que abarcan temas de interés y consejos relacionados con WordPress, Elementor y otros plugins recomendados. --- # 5 pequeños grandes plugins gratuitos para ampliar Elementor Source: https://caribdis.net/2019/11/24/5-pequenos-grandes-plugins-gratuitos-para-ampliar-elementor.md Es bien sabido que el plugin constructor de páginas para **WordPress**, [**Elementor**](https://caribdis.link/Elementor), constituye por sí solo una de las herramientas gratuitas más completas para la creación de sitios que se hayan conocido hasta el momento. Sin embargo, en el mundo del desarrollo web siempre se necesita algo más. A veces será alguna característica de funcionalidad, y otras, algún efecto visual que mejore la presentación. De un tiempo a esta parte, los plugins de complementos o *add-ons* para **Elementor** se han multiplicado de manera exponencial, tanto gratuitos como pagos. Muchos son en verdad una excelente alternativa a la versión **Pro**, en especial en términos de costos. Aquí ya hemos hablado de [**JetElements**](https://caribdis.link/JetElements), por ejemplo, y también recomendamos con mucho entusiasmo [**Ultimate Addons**](https://caribdis.link/UAEL) de los creadores del tema **Astra**. Otros plugins que hemos usado en opción premium son **Essential Addons** y **Element Pack**, que también cuentan con sendas versiones gratuitas: [**Essential Addons Lite**](https://wordpress.org/plugins/essential-addons-for-elementor-lite/) y [**Element Pack Lite**](https://wordpress.org/plugins/bdthemes-element-pack-lite/). En la entrada de hoy no nos vamos a detener en estos plugins, ya que en mayor o menor medida son similares, y su objetivo principal es añadir widgets que no están disponibles en la versión gratuita de **Elementor**. Esta vez nos vamos a concentrar en esas pequeñas necesidades con que nos hemos encontrado al momento de armar una página, y que requieren apenas una funcionalidad extra que los plugins de complementos no alcanzan a brindarnos por sí solos. Los siguientes plugins son livianos, gratuitos, y nos han sacado de varios apuros de la manera más efectiva: ### Necesidad 1: Convertir una columna en un enlace Esta acción parece extremadamente simple, y cuesta creer que no forme parte de **Elementor**. Muchas veces necesitamos que toda una columna sea un enlace, en especial cuando queremos facilitar la navegación del usuario. Es muy útil para los widgets *Cuadro de imagen* o *Caja de icono*, que contienen un título y una descripción. También es ideal para las columnas con imágenes de fondo y un título.  La solución es el plugin [**Make Column Clickable Elementor**](https://es.wordpress.org/plugins/make-column-clickable-elementor/), que tan solo añadirá una opción denominada *Column Link* en el panel *Disposición* de la columna. Esta tendrá los mismos ajustes de cualquier enlace dentro de **Elementor**: el campo que sirve de búsqueda dinámica dentro las páginas del sitio, a la vez que para para pegar directamente la URL (si enlaza a una página externa), y las opciones *Abrir en nueva ventana* y *Añadir nofollow*.  ### Necesidad 2: Añadir enlaces a las diapositivas de un carrusel **Elementor** incluye un widget muy completo, *Carrusel de imágenes*, que es una herramienta sumamente útil para crear un slider *responsive* simple, o un carrusel de logos. Con frecuencia será necesario enlazar las diapositivas a una sección interna de la página, o los logos a sus respectivas webs externas.  La solución es el plugin [**Gallery Custom Links**](https://es.wordpress.org/plugins/gallery-custom-links/), que no solo funciona con **Elementor**, sino que puede ser empleado en cualquier galería de **WordPress**, así como también en el bloque *Galería* del nuevo editor.  Se añadirán dos campos a las imágenes de la biblioteca de medios: *URL del enlace* y *Enlace objetivo* (mala traducción de “Destino del enlace”). Si al menos el campo *URL del enlace* está establecido, la imagen abrirá la URL que este contenga. En el siguiente campo se puede seleccionar si el enlace debe abrirse en la misma ventana/pestaña o en una nueva. Y por último, también se puede elegir el atributo `nofollow`. Tener en cuenta que la mesa de luz (*lightbox*) quedará desactivada para esas imágenes. Ejemplo con un carrusel de logos:  ### Necesidad 3: Ocultar contenido específico de acuerdo con el perfil del usuario Cuando trabajamos con sitios que requieren inicio de sesión para acceder a páginas o secciones restringidas al público, es imprescindible contar con una herramienta que nos permita controlar la visibilidad de los contenidos. Existe un plugin muy liviano y efectivo que sirve para mostrar u ocultar widgets o secciones enteras: [**Visibility Logic for Elementor**](https://es.wordpress.org/plugins/visibility-logic-elementor/). Este puede ser suficiente si la necesidad es simplemente requerir el inicio de sesión para ver u ocultar contenido a determinados perfiles de usuario. Al activarlo se añadirá una opción en el panel *Avanzado* de los widgets y las secciones (no así las columnas), *Visibility control*, desde la cual se podrán activar las condiciones de mostrar u ocultar para invitados, usuarios que han iniciado sesión, *Administrador*, *Editor*, *Colaborador*, *Suscriptor*, y los demás perfiles que existan de acuerdo con los plugins que estén instalados.  Si nuestro sistema de registro de usuarios es un poco más complejo, este plugin no es suficiente.  Aquí la solución es [**Dynamic Visibility for Elementor**](https://es.wordpress.org/plugins/dynamic-visibility-for-elementor/). Por ejemplo, si existen dos usuarios que deben tener acceso a contenidos diferentes, este plugin nos da la posibilidad de seleccionarlos desde *User & Role* > *Selected Users*, donde podremos añadir los nombres de usuario específicos. También es posible usar información meta de los usuarios, lo cual es sumamente útil cuando trabajamos con plugins de membresías.  El siguiente es un ejemplo de restricción de contenido de acuerdo con un nivel de usuario creado con el plugin [**Restrict User Access**](https://es.wordpress.org/plugins/restrict-user-access/):  Otras características muy útiles incluidas en la versión gratuita: - Ocultar elementos para su futura publicación, y establecer un día u hora determinados para cuando será visible (desde la opción *Date & Time*) - Establecer un texto de respaldo para los elementos ocultos, que aparecerá en lugar del elemento (por ejemplo, "Próximamente", "Debes iniciar sesión para acceder a este contenido", etc.) - Mostrar u ocultar contenidos de acuerdo con el dispositivo o el navegador desde donde se visite la página. - Usar las etiquetas condicionales más comunes ([https://codex.wordpress.org/Conditional_Tags](https://codex.wordpress.org/Conditional_Tags)) - Determinar si el elemento se oculta vía CSS o por completo en el código. ### Necesidad 4: Mostrar título y leyenda sobre una imagen al pasar el cursor A veces necesitamos atraer la atención del usuario con un elemento de gran impacto visual. Cuando una caja de icono o un simple botón se quedan cortos, lo ideal es encontrar un elemento que sea llamativo, a la vez que añada algo más de interactividad.  La solución es [**Call to Action Box Animate for Elementor**](https://es.wordpress.org/plugins/call-to-action-box-animate-for-elementor/). Este plugin incluye ocho tipos de transición de imagen, dos botones con separador de texto, subtítulo que se puede colocar antes o después del título, trece efectos al pasar el cursor, texto de superposición y animación de superposición. Sus características son las siguientes: - Transición de imagen de fondo al pasar el cursor (escala de grises, sepia, desenfoque, invertir, saturar, brillo, contrast y rotación de tonalidad). - Animaciones al pasar el cursor (desvanecido de entrada, desvanecido de entrada desde arriba, desvanecido de entrada desde abajo, desvanecido de entrada desde la izquierda, desvanecido de entrada desde la derecha, deslizamiento hacia arriba, deslizamiento hacia abajo, deslizamiento hacia la derecha, deslizamiento hacia la izquierda, deslizamiento hacia la izquierda superior, deslizamiento hacia la derecha superior, deslizamiento hacia la izquierda inferior y deslizamiento hacia la derecha inferior. - Animación secuenciada del contenido al pasar el cursor. - Icono, icono de imagen, título, separador, subtítulo, contenido, dos botones con separador de texto intermedio. - Superposición, texto de superposición, animaciones de superposición. - Opción de enlace para un elemento (título e icono o el `div` completo como un enlace).  Las posibilidades son casi infinitas, y [aquí](https://internetcss.com/elementor-call-to-action-box-animate-demo/) se pueden observar varios ejemplos en funcionamiento. ### Necesidad 5: Agregar una sección creada con Elementor en la plantilla de un tema En más de una oportunidad los temas gratuitos nos presentan el desafío de agregar secciones adicionales, ya que sus opciones son limitadas. Antes de **Elementor** solo quedaba recurrir a la edición del código, que la mayoría de las veces requiere un conocimiento avanzado de programación, y en algunos casos hasta se hacía imposible, dada la estructura de base del tema. [**Elementor Pro**](https://caribdis.link/ElementorPro) incluye esta característica en la biblioteca de plantillas: a cada una se asigna un *shortcode* que puede ser utilizado en cualquier parte del sitio, ya sea en el contenido de las páginas o entradas, en áreas de widgets, o también en los archivos del tema, mediante funciones.  Una alternativa gratuita y muy efectiva es el plugin **[AnyWhere Elementor](https://es.wordpress.org/plugins/anywhere-elementor/)**, que cumple prácticamente esa misma tarea de **Elementor Pro**, con la diferencia de que añade un elemento nuevo en el menú del escritorio: *AE Templates*.  Aquí podemos crear una plantilla con todas las herramientas que nos proporciona **Elementor**, y luego pegar el *shortcode* donde necesitemos que aparezca. Por ejemplo, en un área de widgets:  Hasta aquí, cinco pequeños plugins que nos dan grandes resultados a la hora de trabajar con **Elementor** y con cero costo adicional. :D --- # Astra Pro: reseña de la versión premium del tema Source: https://caribdis.net/2017/09/12/astra-pro-resena-de-la-version-premium-del-tema.md En la [última entrada](https://caribdis.net/2017/08/31/astra-resena-y-tutorial-del-tema-gratuito-mas-prometedor-del-ano/) hicimos un exhaustivo repaso por cada una de las características del tema **gratuito** que está dando mucho de qué hablar en la actualidad: [**Astra**](https://caribdis.link/Astra) de **Brainstorm Force**. En estos días que he estado trabajando en un proyecto inminente con [**Astra Pro**](https://caribdis.link/AstraPro) más [**Elementor Pro**](https://caribdis.link/ElementorPro), la experiencia es casi insuperable: no es una exageración que lo presenten como el tema más rápido, ya que la diferencia con otros temas es bastante notoria. El complemento **Pro** es el agregado perfecto para obtener un tema multipropósito y totalmente personalizable, sin resignar velocidad y facilidad de configuración. En esta entrada vamos a explorar cada una de las herramientas que componen la versión premium de **Astra**. # Reseña de Astra Pro ## Traducción La versión en español de **Astra Pro** está disponible dentro del paquete del plugin. ## Instalar el plugin Pre-requisitos: Para poder usar el complemento **Pro**, el tema [**Astra**](https://es.wordpress.org/themes/astra/) debe estar instalado y activado. Para poder usar el complemento **Pro** debemos seguir los siguientes pasos: - Iniciar sesión en el sitio de [Brainstorm Force](https://store.brainstormforce.com/my-downloads/). - Ir a *Account > Downloads*. - Descargar el plugin **Astra Pro**. Guardar el archivo .zip en una carpeta del equipo. - En el sitio WordPress, subir el archivo .zip en *Plugins > Añadir plugins > Subir plugin*. - Activar el plugin.  ## Activar complementos Lo bueno de **Astra Pro** es que podemos activar solo aquellas opciones que vamos a usar, lo cual ayuda a mantener el sitio rápido y libre de excesos. Esta es una característica sumamente útil, que otros temas como [**Total**](https://caribdis.link/Total) o la versión premium de [**GeneratePress**](https://caribdis.link/GeneratePress) ya han implementado con excelentes resultados. Enumeremos cada uno de los complementos disponibles: - **Colores y fondo** – Sirve para personalizar los colores de todas las áreas del sitio o para añadir imágenes de fondo. - **Tipografía** – Ofrece total libertad para administrar los tamaños y tipos de fuente de cada elemento del sitio. - **Espaciado** – Sirve para administrar los espacios de la estructura, para que los contenidos se vean claros y legibles. - **Blog Pro** – Incluye numerosas plantillas de blog para tener control sobre el diseño de la presentación de las entradas. - **Secciones de cabecera** – Permite añadir contenido en varias partes de la cabecera para enriquecerla. - **Menú de navegación** – Permite añadir mega menús a la cabecera. - **Cabecera fija** – Permite fijar la barra del menú primario en todo el sitio o solo en algunas páginas determinadas. - **Cabeceras de página** – Hace que los diseños de la cabecera del sitio sean más atractivos. - **Diseños personalizados** – Permite añadir contenido de manera condicional en varias áreas del tema. - **Diseños del sitio** – Con este módulo podemos manejar el diseño general del sitio entero (con ancho completo, con ancho máximo, con relleno o fluido). - **Widgets del pie de página** – Permite agregar áreas de widgets personalizables en la parte superior del pie de página principal. - **Scroll al inicio** – Proporciona funcionalidad para añadir un botón “Volver arriba” en las páginas largas. - **WooCommerce** – Para diseñar una tienda en línea atractiva que funciona perfecto con las plantillas de WooCommerce y los plugins esenciales. - **Easy Digital Downloads** – Este módulo sirve para integrar el plugin más popular de venta de descargas digitales. - **LearnDash** – Proporciona plantillas y compatibilidad total con este plugin de cursos en línea. - **LifterLMS** – Proporciona plantillas y compatibilidad total con este plugin de cursos en línea. - **Marca blanca** – Sirve en especial para agencias de desarrollo web, permitiendo ocultar el nombre del tema y del plugin a los clientes finales, y usar una marca propia.  Al activar algunos complementos, se irán agregando nuevos elementos en el menú *Apariencia;* al activar otros, aparecerán más opciones dentro de los paneles correspondientes del personalizador. También tenemos la opción de activar todos los complementos juntos, con un clic en el botón *Activar todo*. Repasemos uno por uno: ### Colores y fondo Una vez activado este complemento, se ampliará el panel *Global > Colores* del personalizador, con un subpanel más: *Contenido*, donde podremos seleccionar de manera individual los colores correspondientes a todos los niveles de encabezado.  Además, se ampliarán las opciones de color/fondo de los siguientes paneles: #### Cabecera > Identidad del sitio  #### Cabecera > Cabecera principal  #### Cabecera > Menú primario  #### Blog > Blog / Archivo  #### Blog > Entrada individual  #### Barra lateral  ### Tipografía Una vez activado este complemento, se ampliarán los subpaneles *Tipografía de base* y *Encabezados* de la sección *Global > Tipografía* del personalizador. Para el contenido, estará disponible la opción *Variantes* para las fuentes de Google, de manera que solo se carguen aquellas que se seleccionen. Y para los encabezados, habrá opciones completas en los últimos tres niveles (H4, H5 y H6). Además, se ampliarán las opciones de tipografía de los siguientes paneles: #### Cabecera > Identidad del sitio  #### Cabecera > Menú primario Aquí tendremos el control sobre la apariencia de las fuentes del menú, submenús y mega menús del sitio: la familia, que podremos elegir entre más de 800 fuentes de Google; el peso, la transformación del texto, el tamaño de la fuente (disponible para las vistas de escritorio, tablet y celular) y la altura de línea.  #### Blog > Blog / Archivo Aquí tendremos el control sobre la apariencia de las fuentes de la sección meta y la paginación, además de los títulos (disponible en la versión gratuita).  #### Blog > Entrada individual Aquí tendremos opciones ampliadas para los títulos de la entrada individual.  #### Barra lateral Aquí tendremos el control sobre la apariencia de las fuentes de los títulos y contenidos de los widgets de la barra lateral del sitio: la familia, que podremos elegir entre más de 800 fuentes de Google; el peso, la transformación del texto, el tamaño de la fuente (disponible para las vistas de escritorio, tablet y celular) y la altura de línea.  #### Pie de página > Widgets del pie de página Aquí tendremos el control sobre la apariencia de las fuentes de los títulos y contenidos de los widgets del pie de página del sitio: la familia, que podremos elegir entre más de 800 fuentes de Google; el peso, la transformación del texto, el tamaño de la fuente (disponible para las vistas de escritorio, tablet y celular) y la altura de línea.  #### Pie de página > Barra del pie de página Aquí tendremos el control sobre la apariencia de las fuentes de los textos de la barra del pie de página del sitio: la familia, que podremos elegir entre más de 800 fuentes de Google; el peso, la transformación del texto, el tamaño de la fuente (disponible para las vistas de escritorio, tablet y celular) y la altura de línea.  ### Espaciado Este módulo de **Astra Pro** nos permite administrar los márgenes y el relleno para varios elementos disponibles en el tema, cuyos valores predeterminados serán sobrescritos por los valores que se introduzcan en los ajustes de espaciado. Esta opción tendrá los siguientes controles: - **Unidad** – Se pueden seleccionar píxeles (PX), la medida relativa al tamaño de fuente (EM), o porcentajes (%). - **Opciones adaptables** – Se pueden asignar valores diferentes para los dispositivos conocidos. - **Superior, Derecha, Inferior, Izquierda** – Habrá una opción para añadir espaciado desde todos los lados del elemento. - **Conector** – El icono del enlace que se muestra junto al control de espaciado es un conector. Al hacer clic, conectará las opciones de espaciado de los cuatro lados para que se aplique el mismo valor a todos al mismo tiempo. Al desmarcarlo, será posible añadir valores diferentes para cada lado.  El módulo *Espaciado* añadirá controles a los siguientes paneles del personalizador: - **Global > Contenedor** - **Cabecera > Identidad del sitio** - **Cabecera > Cabecera principal ** - **Cabecera > Menú primario** - **Blog > Blog / Archivo** - **Blog > Entrada individual** - **Barra lateral** - **Pie de página** ### Blog Pro El tema **Astra** proporciona [opciones básicas](https://caribdis.net/2017/08/31/astra-resena-y-tutorial-del-tema-gratuito-mas-prometedor-del-ano/#blog-blog-archivo) para las páginas de archivo y entradas individuales. #### Blog > Blog / Archivo El módulo de **Astra Pro** añade —además de opciones de espaciado, tipografía y color— las siguientes características: - Diseño - Diseño de cuadrícula - Contenido de la entrada - Número de extracto - Texto «Leer más» - Tamaño de imágenes destacadas - Paginación de entrada - Estilo de paginación de entrada #### Blog > Entrada individual El módulo de **Astra Pro** añade —además de las opciones de espaciado y color— las siguientes características: - Información del autor - Desactivar navegación de entrada individual - Carga automática de entradas anteriores - Eliminar relleno de la imagen destacada - Tamaño de imágenes destacadas ### Cabecera para móviles Este módulo ofrece más opciones de diseño y colores dentro del panel *Cabecera > Menú primario*: - Estilo del menú - Radio de borde del botón conmutador - Borde para los elementos del menú - Color del borde ### Secciones de cabecera Este módulo presenta dos secciones nuevas: *Sobre la cabecera* y *Bajo la cabecera*. La primera aparece arriba de la cabecera principal y la segunda, inmediatamente abajo, antes del contenido de la página. Ambas pueden servir para mostrar, por ejemplo, un botón de llamado a la acción, datos de contacto, iconos de redes sociales, un menú, un widget, un texto arbitrario, o una barra de búsqueda. Tendrán opciones de diseño propias, así como también controles para la tipografía, los colores, el espaciado y el comportamiento al visualizar en dispositivos móviles.  ### Menú de navegación Este complemento proporciona funcionalidad para crear mega menús y se administra desde la sección *Apariencia > Menús*. Cada elemento del menú tendrá un botón *Ajustes de menú Astra*, que nos dará acceso a las opciones de estilo.   ### Cabecera fija Una vez activado este complemento, se añadirá una nueva opción en el panel *Cabecera* del personalizador para agregar funcionalidad al menú principal del sitio, y la barra del menú quedará fija al desplazar la página hacia abajo. Para activar esta característica basta con seleccionar la casilla *Fijar cabecera principal*. Las opciones disponibles son: - **¿Un logo distinto para la cabecera fija?** – Con esta opción podemos mostrar un logo distinto cuando la barra de menú cuando permanezca fija al desplazar la página. - **Activar efecto de encogimiento** – Si se activa, la barra disminuirá considerablemente la altura cuando permanezca fija al desplazar la página. - **Ocultar al desplazar hacia abajo** – Si se activa, la barra solo se mostrará cuando el usuario se desplaza hacia arriba. - **Seleccionar animación** – Aquí podemos elegir el tipo de animación para la cabecera, entre *Diapositiva* y *Desvanecer*, o bien desactivarla si elegimos *Ninguno*. - **Activar en** – Aquí podemos elegir si la cabecera debe permanecer fija o no en dispositivos tales como tablets o teléfonos.  Incluye, además, todos los controles de color para los elementos de la cabecera principal y menús, y las secciones de cabecera (si están activadas). ### Cabeceras de página Este complemento añadirá un nuevo elemento en el menú *Apariencia*. Para crear una cabecera bastará con hacer clic en *Apariencia > Cabeceras de página* y luego un clic en el botón *Añadir*.  Podemos crear cabeceras individuales, tanto para determinadas páginas o secciones del sitio, como para la navegación general, y administrar las reglas de visualización.  ### Diseños personalizados Este complemento añadirá un nuevo elemento en el menú *Apariencia*. Para crear un diseño personalizado bastará con hacer clic en *Apariencia > Diseños personalizados* y luego un clic en el botón *Añadir*.  Esta es una herramienta sumamente útil para agregar contenido o porciones de código en áreas como la cabecera y el pie de página, en la página de error 404 y en otras partes del sitio. **Astra Pro** también otorga un control total sobre los *hooks*, con los ajustes donde podemos asignar qué tipo de acción ejecutar, la prioridad y la visibilidad, tanto basada en el perfil del usuario como en condiciones que se pueden configurar como reglas.  ### Widgets del pie de página Una vez activado este complemento, se ampliará el panel *Pie de página > Widgets del pie de página* del personalizador. A la opción *Diseño* se agregarán seis estructuras más de presentación, además de un control para cambiar los valores de relleno y un menú donde se podrá elegir el ancho de los widgets (*Ancho del contenido* y *Ancho completo*).  ### Scroll al inicio / Ir arriba Una vez activado este complemento, se mostrará un botón en la parte inferior del sitio que será un enlace a la parte superior de cada página, y se añadirá una nueva opción en el panel *Global* del personalizador, donde se podrán controlar las siguientes características: - **Mostrar en** – Aquí podemos elegir en qué dispositivos se mostrará el botón. - **Posición** – Aquí podemos elegir mostrar el botón del lado derecho o izquierdo. - **Tamaño de icono** – Aquí podemos elegir el tamaño del icono de la flecha. - **Radio de fondo de icono** – Aquí podemos acentuar o atenuar el redondeado de las esquinas del botón. - **Color de icono** – Aquí tendremos opciones para elegir el color del icono de la flecha, el fondo del botón, y los colores al pasar el cursor.  ### WooCommerce El complemento para WooCommerce nos da opciones muy útiles de funcionalidad y estilos para la tienda y los productos. Ampliará el panel correspondiente del personalizador con controles para administrar las placas de ofertas, los elementos de la página del producto y del carrito, entre otras. #### WooCommerce > General - **Notificación de oferta** – Aquí podemos modificar el tipo de aviso de oferta en los productos (por ejemplo, para que muestre el porcentaje de descuento). - **Estilo de la placa de oferta** – Aquí podemos modificar la forma del aviso de oferta en los productos *(Circular, Contorno circular*, *Cuadrado* o *Contorno cuadrado*). - **Icono del carrito en la cabecera** – En esta sección tendremos opciones para modificar el tipo y estilo del icono del carrito que aparece en la barral del menú. - **Color de la valoración de producto** – Aquí podemos elegir el color de las estrellas de la calificación del producto.  #### WooCommerce > Catálogo de producto En este panel encontraremos opciones ampliadas para el diseño, el estilo del producto, el botón, la paginación y la barra lateral que puede mostrarse como un menú en aparición.  #### WooCommerce > Producto individual Aquí habrá disponibles nuevas opciones para la página donde se muestra el contenido del producto, como el tipo de diseño, los efectos sobre la imagen y las pestañas de descricpión.  #### WooCommerce > Finalizar compra En este panel ampliado veremos opciones para controlar el diseño del formulario y otras herramientas útiles para agilizar el proceso de compra.  ### Easy Digital Downloads / LearnDash / LifterLMS Estos módulos requieren que los respectivos plugins se encuentren instalados y activados, y ofrecerá opciones ampliadas para la presentación de las páginas correspondientes. Así finaliza la presentación de la versión premium de **Astra**, definitivamente el tema más prometedor de 2017. Como promoción por el lanzamiento de la versión **Pro**, **Brainstorm Force** está ofreciendo un descuento del 30% en las dos licencias disponibles: ### Licencia anual precio normal $59 - Complemento **Astra Pro** - Sitios ilimitados - Actualizaciones por un año - Soporte por un año - 20% de descuento al renovar ### Licencia perpetua precio normal $249 - Complemento **Astra Pro** - Sitios ilimitados - Actualizaciones perpetuas - Soporte perpetuo - Pago único Cupón de **10% de descuento** por tiempo limitado: **SAVE10**. --- # Astra suspendido del repositorio de temas de WordPress.org Source: https://caribdis.net/2020/08/08/astra-suspendido-del-repositorio-de-temas-de-wordpress-org.md **** Actualización 10/08/2020 - La suspensión de Astra fue levantada y vuelve a estar disponible en [WP.org](https://es.wordpress.org/themes/astra/)** Ayer se conoció la noticia de que el tema gratuito más popular de **WordPress**, **Astra** de **Brainstorm Force**, se ha retirado del repositorio oficial. Esta suspensión es por **cinco semanas** y, para disipar toda preocupación entre sus usuarios, no es por causa de ningún problema de seguridad. Poco menos de un mes atrás, **Astra** ha superado el millón de instalaciones activas, convirtiéndolo actualmente en el tema más usado, sin considerar los temas predeterminados de **WordPress** (*Twenty Twenty*, *Twenty Nineteen*, etc.) La sanción por parte del TRT (equipo de revisión de temas) obedece a una presunta violación a las políticas de publicación, que prohíbe la inclusión de enlaces de afiliados en los temas. A hoy, 8 de agosto, si buscamos **Astra** en el repositorio oficial obtendremos como único resultado el tema **Astral**. Y si escribimos la URL del tema en la web de WordPress.org nos encontraremos con la leyenda *No se han encontrado temas. Prueba una búsqueda diferente*. ### El comunicado oficial de WordPress La suspensión de **Astra** fue anunciada ayer por el TRT, y estará vigente hasta el 11 de septiembre próximo. Transcribimos el mensaje dirigido a **Brainstorm Force** a continuación: > “Hace 18 meses han comenzado a añadir enlaces de afiliado en vuestro tema. > > Tenemos un requisito en contra de esto: no se permite que los temas contengan URL o enlaces de afiliados. > > Añadimos ese requisito hace 18 meses, específicamente por este asunto. > > También hemos pedido a los autores de otros temas que eliminen esos enlaces y hemos discutido sobre este tema en *Slack* y en el blog durante muchas semanas. > > No comprendemos cómo pueden obviar algo como esto, y tampoco es la primera vez que tenemos que venir a decirles que hay algo mal con vuestro tema. > > Como consecuencia, vuestro tema será suspendido durante las próximas cinco semanas (hasta el 11 de septiembre de 2020).” ### El descargo de Brainstorm Force Los autores del tema **Astra** respondieron que no añaden enlaces de afiliados al tema en sí mismo. Por lo tanto, y como no hay enlaces de afiliados en el tema en sí, aseguraron que cumple con las reglas de publicación del repositorio. **Brainstorm Force**, asimismo, admite que el tema **Astra** usa algunos plugins de terceros para incluir código de referidos. Así lo explican: > “Admitimos que hemos usado filtros disponibles en plugins de terceros, donde incluimos nuestro código de referido. > > Pero al mismo tiempo, NO añadimos enlaces de afiliados de ninguna clase, de acuerdo con el requisito. > > No estamos seguros de si el uso de filtros de referido está en contra del requisito. Si así fuera, estaremos complacidos de eliminarlo de inmediato y enviar la nueva versión.” ### ¿Astra incluye enlaces de afiliado? **Brainstorm Force** ha aclarado que no incluyen código de afiliado en el tema **Astra**, pero sostuvieron que solo lo añaden a través de código de referidos de ciertos plugins de terceros. En su comunicado, el TRT proporcionó las capturas del código de afiliado que aparecen en uno de los archivos del tema, y zanjó la discusión con la eliminación de **Astra** del repositorio oficial, hasta cumplirse las cinco semanas. ### ¿Qué hacer hasta el 11 de septiembre? **Brainstorm Force** ya hizo las modificaciones pertinentes en el código de **Astra** y lo ha reenviado al repositorio para revisión. Mientras tanto, esa actualización se puede descargar de su **[Git](https://github.com/brainstormforce/astra/)**, o desde la [web oficial de **Astra**](https://caribdis.link/Astra). Se puede instalar esta actualización, o bien aguardar al levantamiento de la suspensión. Cabe hacer hincapié en que el tema **sigue siendo totalmente seguro** y cuyo uso no representa ningún tipo de riesgo hasta la fecha en que vuelva a estar accesible desde **WP.org**. ### Opinión personal La decisión del TRT es irrevocable e intenta servir de ejemplo. Si bien parece exagerada, no la considero del todo injusta, ya que **Brainstorm Force** no ha infringido las reglas en la teoría, pero sí lo ha hecho en el plano ético. Mi opinión de esta empresa india es altamente positiva; tanto que mi preferencia por el tema **Astra** ha crecido de manera exponencial en los últimos dos años, y encuentro todos sus productos de gran calidad y utilidad. Sigo recomendándolo como desde el primer día y voy a seguir usando **Astra** como siempre. Nada cambiará en los más de cuarenta sitios que he construido con él. Sin embargo, espero que el equipo de **Brainstorm Force** aprenda de sus errores y canalice esta experiencia en brindar un mejor servicio aún de lo que nos tiene acostumbrados. No dudo de que así será. --- # Astra: reseña y tutorial del tema gratuito más prometedor del año Source: https://caribdis.net/2017/08/31/astra-resena-y-tutorial-del-tema-gratuito-mas-prometedor-del-ano.md **** Actualizado para la versión 2.3.0+ - 01/03/2020** Hace unos meses hablamos sobre uno de los temas premium más completos del mercado: **[Total](https://caribdis.net/2017/05/29/total-el-tema-multiproposito-para-wordpress-por-wpexplorer/)**, que además de incluir una enorme variedad de diseños predefinidos, cuenta con una sólida estructura personalizable y apta tanto para principiantes como para desarrolladores expertos. Hoy vamos a recomendar un tema **gratuito** que en este último tiempo ha estado ganando renombre en la comunidad de **WordPress**, gracias a su increíble facilidad de uso, su velocidad y su flexibilidad para convertirlo en la base fundamental de todo sitio que use un constructor de páginas. **[Astra](https://caribdis.link/Astra)**, por **Brainstorm Force**, se presenta como un tema con estilo, súper rápido y totalmente personalizable, adecuado para blogs, portafolios personales y sitios corporativos. Es muy liviano (menos de 50KB en la interfaz del usuario), y ofrece una velocidad sin par. Construido con la SEO en mente, **Astra** incluye código *schema.org* integrado, así que a los buscadores les encantará. También ofrece muchas opciones de barras laterales y áreas de widgets, que brindan un control absoluto de las personalizaciones. Más aún, incluye características especiales y plantillas, otorgando la libertad de elegir el constructor de páginas preferido, para que el usuario pueda crear contenidos y transformar la apariencia de manera rápida y sencilla. Algunas de sus características: - Es compatible con **WooCommerce** - Es 100% adaptable - Es compatible con los plugins constructores más usados: **[Visual Composer](https://caribdis.link/VC)**, **[Elementor](https://caribdis.link/Elementor)**, **[Divi](https://caribdis.link/Divi)**, **[SiteOrigin](https://es.wordpress.org/plugins/siteorigin-panels/)**, **[Beaver Builder](https://es.wordpress.org/plugins/beaver-builder-lite-version/)**, **[Brizy](https://es.wordpress.org/plugins/brizy/)**, **[Gutenberg](https://es.wordpress.org/plugins/gutenberg/)**. - Está preparado para la traducción - Es actualizado periódicamente - Es 100% código abierto El foco principal de **Astra** está puesto en el rendimiento. En lugar de jQuery usa Vanilla JavaScript y necesita solo 50 KB de recursos, lo cual hace que la carga sea súper rápida. Pero la fortaleza de **Astra** no reside únicamente ahí, sino que se complementa con las incontables posibilidades de personalización y con la herramienta de importación de sitios prediseñados en un par de clics. Construir un sitio web atractivo, rápido, adaptable y amigable con los buscadores es más fácil que nunca con **Astra**. Y lo mejor de todo, es que es gratuito. :) En esta entrada vamos a seguir cada uno de los pasos necesarios para crear una web profesional con **Astra** y los plugins más populares y vigentes que están disponibles en el repositorio de **WordPress**. # Tutorial de Astra ## Descargar traducciones El tema [**Astra**](https://caribdis.link/Astra) y el plugin [**Astra Starter Templates**](https://es.wordpress.org/plugins/astra-sites/) tienen traducción al español. ## Instalar el tema **Astra** se instala como cualquier tema del repositorio de **WordPress**, buscándolo en *Apariencia > Temas > Añadir tema*. [](https://caribdis.net/imgz/2017/08/01-astra-instalar-tema.png) Una vez instalado y activado, veremos una apariencia muy simple en la portada y estaremos listos para añadir contenido y personalizar. [](https://caribdis.net/imgz/2017/08/20-02-astra-front.png) ## Opciones de Astra En el menú *Apariencia,* veremos un nuevo elemento denominado *Opciones de Astra*, que nos mostrará una lista de enlaces a los ajustes principales del tema en el personalizador, además de enlaces a algunos recursos útiles. [](https://caribdis.net/imgz/2017/08/20-02-astra-opciones.png) ## Instrucciones para personalizar el tema Toda la personalización de **Astra** se lleva a cabo desde el **personalizador** integrado de **WordPress**. Al hacer clic en *Apariencia > Personalizar* veremos todas las opciones disponibles, junto con la vista previa en vivo.  ### ¡Más opciones disponibles en Astra Pro! Este es un enlace a la web de la [versión premium](https://caribdis.link/AstraPro) de **Astra**. Esta versión es un complemento que se instala como plugin e incluye características adicionales como la cabecera fija o transparente, los encabezados de página, más opciones de color y de tipografías, más herramientas para el pie de página, un botón para volver a la parte superior de la página, *hooks* avanzados y [mucho más](https://caribdis.net/2017/09/12/astra-pro-resena-de-la-version-premium-del-tema/). ### Global > Tipografía > Tipografía de base - **Cuerpo y contenido** – Aquí tendremos el control sobre la apariencia de las fuentes del contenido del sitio: la familia, que podremos elegir entre más de 800 fuentes de Google; el peso, la transformación del texto, el tamaño de la fuente (disponible para las vistas de escritorio, tablet y celular), la altura de línea y el margen inferior del párrafo. [](https://caribdis.net/imgz/2017/08/20-04-astra-tipografia-base.png) ### Global > Tipografía > Encabezados - **Encabezados H1 - H6** – Aquí podemos seleccionar una familia de fuente para los títulos, además del tamaño, el peso, la transformación de texto y la altura de línea, que se aplicará a todos los niveles de encabezado. - **Encabezado 1, Encabezado 2, Encabezado 3** – Aquí podemos seleccionar una familia de fuente distinta para los tres primeros niveles de encabezado (H1, H2 y H3), además del tamaño, el peso, la transformación de texto y la altura de línea. - **Encabezado 4, Encabezado 5, Encabezado 6** – Aquí podemos seleccionar el tamaño de fuente para los tres últimos niveles de encabezado (H4, H5 y H6). [](https://caribdis.net/imgz/2017/08/20-05-tipografia-encabezados.png) ### Global > Colores > Colores de base - **Color de texto** – Aquí podemos elegir el color de los textos. - **Color del tema** – Aquí podemos elegir el color de acento del tema. - **Color de enlace** – Aquí podemos elegir el color de los enlaces. - **Color de enlace al posar el puntero** – Aquí podemos elegir el color que tomarán los enlaces al pasar el cursor. - **Color del encabezado (H1 - H6)** – Aquí podemos elegir el color de los encabezados. - **Color de fondo** – Aquí podemos elegir el color de fondo del sitio. - Imagen de fondo – Aquí podemos elegir una imagen para el fondo del sitio. [](https://caribdis.net/imgz/2017/08/20-06-astra-colores.png) ### Global > Contenedor - **Ancho** – Aquí podemos asignar el ancho del contenedor. La medida en píxeles puede ser un mínimo de 768 y un máximo de 1920. El valor predeterminado es 1200. - **Diseño** – Aquí podemos elegir entre cuatro estilos de diseño para el contenedor del sitio: *Recuadro*, *Recuadro de contenido*, *Ancho completo / Contenido* y *Ancho completo / Estirado* (ver ejemplos más abajo). - **Diseño de la página** – Aquí podemos elegir entre los cuatro estilos de diseño, pero para aplicar únicamente en páginas. - **Diseño de la entrada del blog** – Aquí podemos elegir entre los cuatro estilos de diseño, pero para aplicar únicamente en las entradas. - **Diseño del archivo** – Aquí podemos elegir entre los cuatro estilos de diseño, pero para aplicar únicamente en las páginas de archivo.  Los tipos de diseño disponibles son: - **Recuadro** – Este diseño muestra el área del contenido y los widgets en un recuadro de color distinto del fondo general del sitio.  - **Recuadro de contenido** – Este diseño muestra solo el área del contenido en un recuadro de color distinto del fondo general del sitio.  - **Ancho completo / Contenido** – Este diseño muestra el contenido y la barra lateral en ancho completo, sin recuadro.  - **Ancho completo / Estirado** – Este diseño muestra el contenido y la barra lateral en ancho completo, hasta los extremos de la pantalla (útil para constructores de página como [**Elementor**](https://caribdis.link/Elementor)).  ### Global > Botones Aquí tendremos el control sobre la apariencia de los botones del sitio, que incluye el color de texto y de fondo, el color de texto y de fondo al pasar el cursor, el color, grosor y radio del borde del botón, el relleno vertical y el relleno horizontal.  ### Cabecera > Identidad del sitio Aquí podemos añadir un logo para que aparezca en la cabecera de la página. Hacemos clic en el botón *Elegir logo*, buscamos la imagen en la *Biblioteca multimedia* o subimos una nueva y hacemos clic en *Publicar*. Además, podremos configurar el icono del sitio (*favicon*), el título del sitio y la descripción tal como lo haríamos con cualquier otro tema de WordPress. También podemos elegir no usar un logo y mostrar el título y descripción del sitio en formato texto, seleccionando las casillas *Mostrar título del sitio* y *Mostrar descripción corta*. La opción *Logotipo y título del sitio integrados* mostrará el título en formato texto a continuación de la imagen subida (y no abajo).  ### Cabecera > Cabecera principal - **Diseño** – Aquí podemos elegir entre los tres diseños de cabecera disponibles: *Logo a la izquierda*, *Logo centrado* y *Logo a la derecha*. - **Ancho** – Aquí podemos elegir mostrar la cabecera con el ancho del contenido del sitio, o con el ancho completo de la pantalla. - **Tamaño de borde inferior** – Aquí podemos asignar el peso del borde inferior de la barra del menú (el valor predeterminado es de 1px; llevar a 0 para no mostrar el borde). - **Color del borde inferior** – Si el borde tiene al menos 1px podemos elegir el color que queramos. - **Cabecera para móviles → Diseño** – Aquí podemos elegir entre dos diseños de cabecera disponibles para móviles: *Logo a la izquierda* o *Logo centrado*.  ### Cabecera > Menú primario - **Menú → Desactivar menú** – Seleccionamos esta casilla si no deseamos usar un menú en la cabecera. - **Menú → Último elemento en el menú **– Aquí podemos elegir mostrar un elemento personalizado en el menú, tal como un botón que resalte con un color y estilo distinto, un campo de búsqueda, un widget o cualquier texto / HTML. - **Submenú → Animación del contenedor** – Aquí podemos elegir el tipo de animación para los submenús al momento de desplegarse, entre *Predeterminada* y *Deslizar abajo*, *Deslizar arriba* y *Fundido*, o bien desactivarla si elegimos *Ninguno*. - **Submenú → Borde del contenedor** – Aquí podemos elegir el grosor del borde del submenú para los cuatro lados. - ** Submenú → Color del borde** – Aquí podemos elegir el color del borde del submenú. - **Submenú → Separador del submenú** – Si marcamos esta opción podemos mostrar una línea separadora entre los elementos del submenú, y elegir el color a continuación. - **Menú móvil → Punto de ruptura del menú** – Aquí podemos determinar la resolución de pantalla a partir de la cual se mostrará el menú móvil. - **Menú móvil → Etiqueta del menú** – Aquí podemos escribir el texto (por ejemplo, “Menú”) que se mostrará junto al icono hamburguesa cuando el sitio se visualice en celulares y tablets. Dejar vacío para no mostrar ningún texto. - **Menú móvil → Estilo del botón conmutador** – Aquí podemos elegir el tipo de icono del menú móvil: *Mínimo* (solo mostrará las tres rayas), *Relleno* (mostrará las tres rayas sobre un fondo cuadrado) y *Contorno* (mostrará las tres rayas, sin fondo, con un borde del mismo color). - **Menú móvil → Color del botón conmutador** – Aquí podemos elegir el color de icono del menú móvil. - **Menú móvil → Destino del desplegable** – Esta opción nos permitirá asignar el destino para abrir los submenús. Si elegimos *Icono*, el desplegable se mostrará al hacer clic en la pequeña flecha junto al nombre del elemento. Si elegimos *Enlace*, el desplegable se mostrará al hacer clic sobre el nombre del elemento.  ### Cabecera > Cabecera transparente Desde Astra 1.6 esta característica está disponible para la versión gratuita. - **Activar en toda la web** – Si queremos usar la cabecera transparente en todo el sitio, marcaremos esta casilla. - **¿Desactivar en 404, búsqueda y archivos?** – Generalmente, no se recomienda este ajuste en páginas especiales como las de archivo, búsqueda, 404, etc. Al desmarcar esta opción se usará la cabecera transparente también en esas páginas especiales. - **¿Desactivar en la página de blog?** – La página del blog es la que se usa cuando hay que mostrar las últimas entradas en una página determinada. - **¿Desactivar en la página de últimas entradas?** – La página de últimas entradas es la página de inicio del sitio cuando se muestran las últimas entradas en la portada. - **¿Desactivar en las páginas?** – Con esta opción podemos controlar si se muestra la cabecera transparente en las páginas o no. - **¿Desactivar en las entradas?** – Con esta opción podemos controlar si se muestra la cabecera transparente en las entradas o no. - **Activar en** – Aquí podremos elegir en qué dispositivos mostrar la cabecera transparente: *Escritorio*, *Móvil* o ambos. - **Tamaño de borde inferior** – Aquí podemos establecer un borde inferior para la cabecera transparente, con el selector del grosor. Esto servirá para dar un “corte” visual entre los elementos del menú y el resto del contenido de la cabecera, que suele ser una imagen de fondo en pantalla completa. - **Color del borde inferior** – Aquí podemos elegir el color del borde inferior para la cabecera transparente. - **Colores y fondo** – En esta subsección podremos elegir los colores correspondientes al *Fondo*, al *Titulo del sitio*, al *Menú*, al *Submenú* y al *Contenido*, así como los colores de los enlaces activos y al pasar el cursor.  ### Migas de pan - **Posición** – Esta opción nos permite elegir la ubicación para mostrar las migas de pan: *Dentro de la cabecera*, *Después de la cabecera* o *Antes del título*. - **Separador** – Aquí podemos establecer un separador personalizado para los enlaces de las migas de pan. - **Desactivar en páginas, entradas, etc.** – Aquí hay una lista de páginas y entradas en donde se podrán desactivar las migas de pan, que incluyen páginas de categoría, archivos, 404, etc. (Es posible también desactivarlas en páginas individuales a través de los ajustes meta de la entrada). - **Alineación** – Aquí podemos seleccionar la alineación de las migas de pan: a la izquierda, al centro o a la derecha. - **Espaciado** – Aquí podemos ajustar el espaciado desde todos los lados. - **Colores y tipografía** – De manera predeterminada, las migas de pan heredarán el color y la tipografía del tema. Pero en caso de querer cambiarlos, desde aquí se podrán seleccionar el tipo de fuente, el tamaño y el estilo, y los colores de fondo, texto, enlace, separador y enlace al pasar el cursor.  Actualmente, **Astra** nos permite mostrar las migas de pan en tres ubicaciones (opción *Posición*), pero si queremos que aparezcan en cualquier otro lado podemos usar un shortcode. El código que debemos pegar (en un bloque de texto, HTML o en un diseño personalizado) es `[astra_breadcrumb]`. Junto con la característica integrada, Astra también incluye soporte para las migas de pan de plugins externos: - [Yoast SEO](https://es.wordpress.org/plugins/wordpress-seo/) - [Breadcrumb NavXT](https://es.wordpress.org/plugins/breadcrumb-navxt/) - [Rank Math](https://es.wordpress.org/plugins/seo-by-rank-math/) Se pueden desactivar las opciones predeterminadas de **Astra** y usar las de los plugins, y aunque las migas de pan se tomarán de esos plugins, todavía será posible aplicar estilos como los colores y las fuentes por medio del personalizador de **Astra**. Simplemente habrá que seleccionar el plugin de la opción *Fuente de las migas de pan*. ### Blog > Blog / Archivo - **Ancho del contenido** – Aquí podremos asignar el ancho del contenedor para las páginas del blog, seleccionando la opción *Personalizado* y cambiando el valor en píxeles. La opción predeterminada es de 1200 píxeles. - **Estructura de la entrada** – Aquí podemos elegir mostrar la imagen destacada y el título e información meta de la entrada, además de asignarles la posición. Haremos clic en el icono del ojo para ocultar o mostrar la sección, y podemos arrastrar y soltar los bloques para cambiar la posición. - **Meta** – Aquí podemos elegir mostrar los comentarios, la categoría, el autor, la fecha de publicación y las etiquetas de la entrada, además de asignarles el orden. Haremos clic en el icono del ojo para ocultar o mostrar la sección, y podemos arrastrar y soltar los bloques para cambiar el orden. - **Contenido de la entrada** – Aquí podemos seleccionar si la entrada en la página del blog mostrará un extracto o el contenido completo. - **Tipografía** – Aquí podemos cambiar el tamaño del título del archivo y el título de la entrada.  ### Blog > Entrada individual - **Ancho del contenido** – Aquí podemos asignar el ancho del contenedor para las entradas individuales del blog, seleccionando la opción *Personalizado* y cambiando el valor en píxeles. La opción predeterminada es de 1200 píxeles. - **Estructura** – Aquí podemos elegir mostrar la imagen destacada y el título e información meta de la entrada, además de asignarles la posición. Haremos clic en el icono del ojo para ocultar o mostrar la sección, y podemos arrastrar y soltar los bloques para cambiar la posición. - **Meta** – Aquí podemos elegir mostrar los comentarios, la categoría, el autor, la fecha de publicación y las etiquetas de la entrada, además de asignarles el orden. Haremos clic en el icono del ojo para ocultar o mostrar la sección, y podemos arrastrar y soltar los bloques para cambiar el orden. - **Tipografía** – Aquí podemos cambiar el tamaño del título de la entrada.  ### Barra lateral - **Diseño predeterminado** – Aquí podemos asignar la ubicación global de la barra lateral (a la izquierda o a la derecha), o elegir no mostrarla, seleccionando la opción *Sin barra lateral*. - **Páginas** – Aquí podemos asignar la ubicación de la barra lateral en las páginas (a la izquierda o a la derecha), o elegir no mostrarla, seleccionando la opción *Sin barra lateral*. - **Entradas del blog** – Aquí podemos asignar la ubicación de la barra lateral en las entradas (a la izquierda o a la derecha), o elegir no mostrarla, seleccionando la opción *Sin barra lateral*. - **Archivos** – Aquí podemos asignar la ubicación de la barra lateral en las páginas de archivo (a la izquierda o a la derecha), o elegir no mostrarla, seleccionando la opción *Sin barra lateral*. - **WooCommerce** – Esta opción estará presente únicamente si está activado el plugin WooCommerce. Aquí podemos asignar la ubicación de la barra lateral en los archivos de la tienda y en las páginas de producto. - **Ancho de la barra lateral** – Aquí podemos asignar el ancho de la barra lateral. La medida en porcentaje puede ser un mínimo de 15 y un máximo de 50. El valor predeterminado es 30.  ### Pie de página > Widgets del pie de página - **Diseño** – Aquí podemos desactivar o mostrar los widgets del pie de página. La versión gratuita de **Astra** incluye cuatro columnas de widgets.  Al activar los widgets tendremos opciones para controlar el borde superior, y los colores y fondo.  ### Pie de página > Barra del pie de página - **Diseño** – Aquí podemos elegir desactivar la barra del pie de página (donde se muestran los créditos), o alternar entre dos diseños diferentes: con una o dos secciones centradas o con una o dos secciones alineadas a la izquierda y/o derecha. - **Sección 1** – Aquí podemos elegir el tipo de contenido que se mostrará en la primera sección del pie de página: *Ninguno* para desactivar, *Menú del pie de página* para asignar un menú de enlaces (previamente creado),* Texto personalizado* o *Widget*. El texto personalizado puede contener código HTML y *shortcodes* tales como `[current_year]` para mostrar el año en curso, `[site_title]` para mostrar el título del sitio y `[theme_author]` para mostrar el nombre del autor (*Astra*). - **Sección 2** – Aquí podemos elegir el tipo de contenido que se mostrará en la segunda sección del pie de página: *Ninguno* para desactivar, *Menú del pie de página* para asignar un menú de enlaces (previamente creado),* Texto personalizado* o *Widget*. El texto personalizado puede contener código HTML y *shortcodes* tales como `[current_year]` para mostrar el año en curso, `[site_title]` para mostrar el título del sitio y `[theme_author]` para mostrar el nombre del autor (*Astra*). - **Ancho** – Aquí podemos elegir mostrar la barra del pie de página con el ancho del contenido del sitio, o con el ancho completo de la pantalla. - **Tamaño del borde** – Aquí podemos asignar el peso del borde superior de la barra (el valor predeterminado es de 1px; llevar a 0 para no mostrar el borde). - **Color del borde** – Si el borde tiene al menos 1px podremos elegir el color que deseemos. - **Colores y fondo** – Aquí podemos elegir los colores de los siguientes elementos de la barra del pie de página: texto, enlace, enlace al pasar el cursor, el color del fondo y la imagen de fondo.  ### WooCommerce Este panel del personalizador estará presente únicamente si el plugin **WooCommerce** se encuentra instalado y activado. ### WooCommerce > Catálogo de productos - **Visualización de la página de la tienda** – Aquí podemos elegir qué mostrar en la página principal de la tienda: los productos, las categorías o ambos. - **Visualización de categorías** – Aquí podemos elegir qué mostrar en las páginas de categorías: los productos, las subcategorías o ambos. - Orden de productos por defecto – Aquí podemos elegir el orden predeterminado de los productos en el catálogo: por defecto (orden personalizado + nombre), por popularidad (ventas), por valoración promedio, por fecha y por precio (ascendente o descendente). - **Ancho del contenido del archivo de la tienda** – Aquí podemos asignar el ancho del contenedor para los archivos de categorías de la tienda. - **Columnas de la tienda** – Aquí podremos elegir la cantidad de columnas en las cuales se mostrarán los productos, de 1 a 6. - **Productos por página** – Aquí podemos seleccionar la cantidad de productos que se mostrarán por página. - **Estructura de producto de la tienda** – Aquí podemos elegir mostrar la categoría, el título, las calificaciones, el precio, el botón para añadir al carrito y la descripción corta, además de asignarles la posición. Haremos clic en el icono del ojo para ocultar o mostrar la sección, y podemos arrastrar y soltar los bloques para cambiar la posición.  ### WooCommerce > Producto individual - **Desactivar migas de pan** – Aquí podemos optar por ocultar las migas de pan en la página del producto, marcando esta casilla.  ### WooCommerce > Carrito - **Activar ventas dirigidas** – Marcando esta casilla se mostrarán productos relacionados dentro de la página del carrito.  ### Menús > Ubicaciones de menús Este tema soporta dos menús: *Menú primario* (en la cabecera) y *Menú del pie de página*. Podremos seleccionarlos de los desplegables correspondientes, y editar el contenido de los menús desde el administrador de WordPress *Apariencia > Menús*, o desde el enlace *Editar menú* de este panel.  ### Widgets Aquí tendremos acceso a las áreas de widgets disponibles. Tener en cuenta que para que aparezcan todas, deberán estar seleccionadas las opciones de widgets en las secciones correspondientes. Por ejemplo, para que se muestre el área de widgets en la cabecera, debe estar seleccionado *Widget* en el panel *Diseño > Cabecera > Elemento de menú personalizado*. Para que se muestren las dos áreas de widgets en la barra del pie de página, debe estar seleccionado *Widget* en *Diseño > Barra del pie de página > Sección 1 / Sección 2*. Para que se muestren las cuatro áreas de widgets del pie de página, debe estar seleccionado el diseño en el panel *Diseño > Widgets del pie de página*. Las dos áreas de widgets que no se muestran corresponden a **WooCommerce** (si está instalado y activado): *Barra lateral de WooCommerce* y *Barra lateral del producto*.  ## Importar diseños predefinidos con Astra Starter Templates Hasta aquí hemos visto las herramientas principales del tema gratuito **Astra**, que no son pocas, si se me permite afirmar. Pero el atractivo de este tema no termina aquí, sino que ofrece un complemento ideal para tener una web lista en cuestión de minutos, y es el plugin **[Astra Starter Templates](https://es.wordpress.org/plugins/astra-sites/)**. Se trata de una biblioteca de diseños listos para importar en unos pocos pasos. Veremos en esta sección el proceso de importación de un sitio entero y listo para personalizar: ### Instalar y activar Astra Starter Templates  Con las últimas versiones de **Astra**, la invitación a instalar **Starter Templates** aparecerá ni bien activado el tema. Bastará con hacer un clic en el botón **Primeros pasos** y seremos guiados durante todo el proceso. Como alternativa, podremos instalar y activar el plugin desde nuestro escritorio de **WordPress.** Iremos a *Plugins > Añadir nuevo* y escribiremos **Astra Starter Templates** en el campo *Buscar plugins…*  Una vez instalado y activado, tendremos acceso a la biblioteca de sitios desde el menú *Apariencia > Starter Templates*. Allí, en primer lugar, tendremos que seleccionar el constructor de páginas que usaremos: **Elementor**, **Beaver Builder**, **Gutenberg** o **Brizy**.  Para este tutorial, elegiremos **Elementor**. Una vez seleccionado, podremos ver la lista completa de diseños disponibles:  Al día de hoy la biblioteca gratuita cuenta con más de un centenar de diseños que abarcan una gran gama de categorías: desde reparación de autos hasta dentistas, pasando por servicios para mascotas, bodas, tiendas de ropa, restaurantes y jardinería, entre otras. Podemos incluso filtrar los resultados para ver únicamente las plantillas gratuitas, o aquellas que pertenezcan a una determinada categoría. Además, podemos usar el campo de búsqueda para filtrar por palabra clave, marcar una plantilla como favorita con un clic en el icono del corazón, sincronizar la biblioteca para buscar nuevos diseños con un clic en el icono de las dos flechas semicirculares, y cambiar el constuctor de páginas:  Con un clic sobre la miniatura accederemos al contenido completo del paquete de diseño: en la izquierda tendremos una vista previa de la página de inicio, y en la derecha las páginas internas que componen el sitio. Al hacer clic sobre las miniaturas más pequeñas, veremos la imagen ampliada en la parte izquierda. Para ver el sitio en funcionamiento podemos hacer un clic en el botón *Preview "[nombre de la plantilla]" Site*, que abrirá la URL de demo en una nueva ventana del navegador.  Las dos opciones son *Importar el sitio completo* e *Import "[nombre de la página]" Template*. Un clic en el primer botón importará todas las páginas que componen el sitio, mientras que un clic en el segundo botón solo importará el diseño único de la página seleccionada. Para este ejemplo vamos a elegir el diseño **Digital Agency**. Le damos clic a *Importar el sitio completo* y veremos una ventana emergente con todas o algunas de las siguientes opciones: - **Borrar el sitio importado anteriormente** – En caso de que hayamos importado otro sitio antes, podemos elegir borrarlo automáticamente. - **Instalar y activar el tema Astra** – *Starter Templates* está diseñado para **Astra**. Solo en el caso de que el tema no esté instalado o activado, será visible esta opción y podremos seleccionara para que se instale y active automáticamente. Si nos salteamos esta opción, la plantilla importada heredará los ajustes del personalizador presentes en el tema activo, por lo cual podría dar como resultado una apariencia diferente de la que se ve en la demo original. - **Instalar los plugins obligatorios** – *Starter Templates* instalará y activará automáticamente los plugins necesarios. No hace falta ninguna otra selección manual. - **Importar los ajustes del personalizador** – Las plantillas de sitios tienen sus propios ajustes de tipografía, color, botones, etc., dentro del personalizador. Si salteamos este paso, se heredarán los ajustes que ya estén aplicados en el tema. - **Importar el contenido** – Si activamos esta opción, se importará el texto y las imágenes de la plantilla. Si solo necesitamos la estructura del sitio, podemos omitir esta opción. - **Importar los widgets** – Este paso importará los widgets usados (en especial para la cabecera y el pie de página) en la plantilla seleccionada.  Haremos clic en el botón *Importar* y aguardaremos el progreso de la importación, sin cerrar la ventana hasta que se haya completado.  Al terminar, veremos el siguiente aviso:  Sí, ¡listo! Eso es todo :) En cuestión de minutos tenemos un sitio idéntico a [este](https://websitedemos.net/agency-02), y estamos en condiciones de editarlo con nuestros propios contenidos.  Hasta aquí, la presentación de **Astra**, el tema gratuito para **WordPress** más prometedor del año. La empresa **Brainstorm Force** está abocada de lleno a promocionarlo como su producto de bandera y promete ir agregando a su biblioteca de sitios gratuitos de dos a cuatro diseños nuevos por mes. También ofrece plugins complementarios para **Astra** que se pueden encontrar en el repositorio oficial: - **[Import / Export Customizer Settings](https://es.wordpress.org/plugins/astra-import-export/)** – Un plugin muy fácil de usar, que permite importar y exportar los ajustes del personalizador de un sitio a otro. Solo funciona con el tema *Astra*. - **[Astra Customizer Reset](https://es.wordpress.org/plugins/reset-astra-customizer/)** – Con este plugin se podrán restablecer los ajustes del personalizador a cero. - **[Customizer Search](https://wordpress.org/plugins/customizer-search/)** – Añade un campo de búsqueda al personalizador para que sea más fácil encontrar las opciones. Funciona con todos los temas de WordPress. - [**Astra Bulk Edit**](https://es.wordpress.org/plugins/astra-bulk-edit/) – Este plugin es útil para editar en lote los ajustes meta del tema *Astra* (por ejemplo, desactivar el título o cambiar el diseño del contenedor). - [**Astra Widgets**](https://es.wordpress.org/plugins/astra-widgets/) – Añade tres widgets para incluir información de contacto más fácilmente: *Dirección*, *Listado de iconos* y *Redes sociales*. - **[Custom Fonts](https://es.wordpress.org/plugins/custom-fonts/)** – Permite subir archivos de fuentes adicionales para poder usar en el sitio y aplicar desde el personalizador. Los formatos admitidos son *woff2, woff, ttf, svg* y *eot.* - [**Custom Typekit Fonts**](https://es.wordpress.org/plugins/custom-typekit-fonts/) – Permite incrustar fuentes de Adobe para poder usar en el sitio y aplicar desde el personalizador. Funciona con el tema *Astra* y con los plugins *Elementor* y *Beaver Builder*.* * - **[Astra Hooks](https://es.wordpress.org/plugins/astra-hooks/)** – Permite usar *hooks* de acciones para agregar código o contenido al tema *Astra* desde el personalizador. - **[Switch To Astra](https://es.wordpress.org/plugins/switch-to-astra/)** – Permite convertir automáticamente todas las páginas creadas con los constructores *Elementor*, *Beaver Builder* y *Visual Composer* en páginas de ancho completo en el caso de cambiar de un tema anterior a *Astra***.** - **[Lightweight Sidebar Manager](https://es.wordpress.org/plugins/sidebar-manager/)** – Permite crear barras laterales personalizadas y mostrarlas de manera condicional. Se pueden usar barras ilimitadas, colocarlas en entradas o páginas específicas (también en tipos de entradas personalizadas) y hacerlas visibles de acuerdo con el perfil del usuario. Este plugin es **compatible con cualquier tema**. - [**Ultimate Addons for Gutenberg**](https://es.wordpress.org/plugins/ultimate-addons-for-gutenberg/) – Añade más de veinte bloques al editor de WordPress. En la próxima entrega repasaremos las características completas del plugin [**Astra Pro**](https://caribdis.link/AstraPro). --- # Plugin Premium Slider Revolution traducido al español Source: https://caribdis.net/2015/02/28/plugin-premium-slider-revolution-traducido-al-espanol.md ** Actualizado para la versión 5.4. 29/03/2019 De un tiempo a esta parte, los ***sliders**** se han convertido en una de las herramientas más utilizadas en los sitios web. El cliente final tiene tendencia a pedirlos, ya que le dan a la página cierto dinamismo, a la vez que presentan un aspecto moderno pero elegante, y funcionan como un resumen de las distintas características o servicios que ofrece un profesional o empresa. La discusión “Usar sliders vs. No usar sliders” lleva ya varios años y aún hoy los defensores y detractores continúan empecinados en demostrar cuáles son los pros y cuáles los contras. Esta entrada no tiene por objeto tomar una u otra posición. Tan sólo afirmamos que dependerá del mensaje que se quiera dar y de la intención de llegada de los contenidos del sitio web al usuario: para algunos casos son buenos los sliders, para otros casos no. Volviendo al tema que nos ocupa hoy, como hemos decidido para el último día de cada mes, vamos a dedicarnos a los **plugins y temas premium** más populares, ya sea aportando las traducciones al español, o compartiendo documentación y tutoriales en nuestro idioma: el adiós a febrero le corresponde al archiconocido [**Slider Revolution**](https://revolution.themepunch.com).  **RevSlider** es, de hecho, el segundo plugin más vendido de CodeCanyon. Con él se pueden crear sliders adaptables a dispositivos móviles, y sliders de ancho completo con efectos de animación sorprendentes. El uso de este slider no afecta a la SEO (optimización para motores de búsqueda), ya que todo el contenido de texto es leído por los buscadores. Entre sus principales características podemos encontrar: - Sliders en varios tamaños: personalizado, adaptable automático o en pantalla completa - Altura de imágenes fija o variable - Imágenes de fondo ajustables, en mosaico, alineadas, etc. - Etiquetas alt de la imagen personalizables (ideal para SEO) - Editor visual con la herramienta “Arrastrar y soltar” - Alineación de las leyendas de imagen - Carga diferida (acelera la carga del slider completo) - Posibilidad de incrustar vídeos de YouTube o Vimeo en los pases de diapositiva - Reproducción automática - Controles de navegación de varios tipos (viñetas, botones, flechas, miniaturas, o navegación con teclas) - Capacidad para importar y exportar sliders - Soporte multi-idioma - Elección entre múltiples transiciones e iconos de carga Descargar archivos de traducción [aquí](https://caribdis.link/SRES). * Decidimos dejar el término en su idioma original, debido a que ya se encuentra adoptado en el lenguaje informático, y para marcar la diferencia entre un carrusel de fotos y un “deslizador” o “pasador” de imágenes/diapositivas. --- # Hestia: Mini tutoriales Vol. II Source: https://caribdis.net/2020/06/07/hestia-mini-tutoriales-vol-ii.md Esta es la segunda parte de la colección de tutoriales cortos de la [documentación oficial](https://docs.themeisle.com/category/563-hestia/) de [**ThemeIsle**](https://caribdis.link/ThemeIsle) para su tema gratuito **Hestia**. Los códigos CSS deben agregarse en *Apariencia > Personalizar > CSS adicional*, y en el caso de que estemos usando un tema hijo, en el respectivo archivo `style.css` (*Apariencia > Editor de temas*). Los códigos PHP se pegarán en el archivo `functions.php` del tema hijo. ### ¿Cómo eliminar la imagen destacada de las entradas del blog?  En el caso de que no deseemos mostrar la imagen destacada de las entradas del blog, este es el código que debemos añadir: .single-post .header-filter { background-image: none !important; background-color: #1990A4; } Podemos cambiar el color de fondo, reemplazando el código HEX con el de nuestra preferencia. Para acceder a una herramienta de generación de códigos de color HEX, está disponible un selector en [este enlace](https://www.google.com/search?q=color+picker). ### ¿Cómo aumentar el tamaño del logo? Usar el siguiente código: .navbar .navbar-header .navbar-brand img { max-height: unset; width: auto; height: auto; } .navbar .title-logo-wrapper { max-width: 350px; } Esto se encargará de incrementar el tamaño del logo a 350 píxeles; bastará con ajustar ese valor para llevarlo al tamaño deseado. ### ¿Cómo eliminar la barra lateral en dispositivos móviles? En determinados casos, podemos optar por no mostrar una barra lateral en la vista de teléfonos celulares. Este es el código para lograrlo: @media (max-width: 380px) { .blog-sidebar-wrapper { display: none; } } ### ¿Cómo eliminar los productos relacionados en la tienda? Para eliminar la sección de productos relacionados es necesario aplicar el siguiente código en el archivo `functions.php` del tema hijo. function remove_parent_theme_actions() { remove_action( 'woocommerce_after_single_product', 'woocommerce_output_related_products', 20 ); } add_action( 'after_setup_theme', 'remove_parent_theme_actions' ); ### ¿Cómo ocultar el título de las categorías en los productos y en el blog?  Para ocultar el título de las categorías en la sección de productos, usar el siguiente código CSS: .card-product .category { display: none; }  Para ocultar el título de las categorías en la página del blog, usar el siguiente código CSS: .hestia-blogs h6.category { display: none; } ### ¿Cómo cambiar el color de las categorías de los productos?  En la página de la tienda y en la sección de productos de la página de inicio, de manera predeterminada se muestran algunos colores aleatorios para las categorías. Si queremos usar el mismo color para todas, añadiremos el siguiente código CSS: .woocommerce .products li:nth-of-type(6n+1) .category a, .woocommerce.archive .blog-post .products li:nth-of-type(6n+1) .category a, .shop-item:nth-of-type(6n+1) .category a, .woocommerce .products li:nth-of-type(6n+2) .category a, .woocommerce.archive .blog-post .products li:nth-of-type(6n+2) .category a, .shop-item:nth-of-type(6n+2) .category a, .woocommerce .products li:nth-of-type(6n+3) .category a, .woocommerce.archive .blog-post .products li:nth-of-type(6n+3) .category a, .shop-item:nth-of-type(6n+3) .category a, .woocommerce .products li:nth-of-type(6n+4) .category a, .woocommerce.archive .blog-post .products li:nth-of-type(6n+4) .category a, .shop-item:nth-of-type(6n+4) .category a, .woocommerce .products li:nth-of-type(6n+5) .category a, .woocommerce.archive .blog-post .products li:nth-of-type(6n+5) .category a, .shop-item:nth-of-type(6n+5) .category a, .woocommerce .products li:nth-of-type(6n+6) .category a, .woocommerce.archive .blog-post .products li:nth-of-type(6n+6) .category a, .shop-item:nth-of-type(6n+6) .category a { color: #1990a4; } Reemplazaremos el código HEX por el de nuestra preferencia. ### ¿Cómo cambiar el color de las categorías de las entradas?  Para hacer lo mismo con las categorías de las entradas, añadiremos los siguientes códigos CSS: .hestia-blogs article:nth-child(6n+1) .category a { color: #1990a4; } .hestia-blogs article:nth-child(6n+2) .category a { color: #1990a4; } .hestia-blogs article:nth-child(6n+3) .category a { color: #1990a4; } .hestia-blogs article:nth-child(6n+4) .category a { color: #1990a4; } .hestia-blogs article:nth-child(6n+5) .category a { color: #1990a4; } .hestia-blogs article:nth-child(6n) .category a { color: #1990a4; } El primer bloque de código corresponde a la primera entrada; el segundo bloque a la segunda, y así sucesivamente hasta la sexta. Se puede usar colores distintos para cada una, o el mismo color para todas, con el siguiente código simplificado: .hestia-blogs article:nth-child(6n+1) .category a, .hestia-blogs article:nth-child(6n+2) .category a, .hestia-blogs article:nth-child(6n+3) .category a, .hestia-blogs article:nth-child(6n+4) .category a, .hestia-blogs article:nth-child(6n+5) .category a, .hestia-blogs article:nth-child(6n) .category a { color: #1990a4; } Para cambiarlo también en el bloque de las entradas relacionadas, usar el siguiente código: .related-posts div:nth-of-type(6n+1) .category a { color: #1990a4; } .related-posts div:nth-of-type(6n+2) .category a { color: #1990a4; } .related-posts div:nth-of-type(6n+3) .category a { color: #1990a4; } ### ¿Cómo eliminar el efecto zoom en las imágenes de producto individual? La imagen principal de los productos se amplía con un efecto zoom al pasar el cursor. Este comportamiento se puede desactivar, añadiendo el siguiente código en el archivo `functions.php` del tema hijo: function remove_zoom_effect_from_products() { remove_theme_support( 'wc-product-gallery-zoom' ); } add_action( 'after_setup_theme', 'remove_zoom_effect_from_products', 20 ); ### ¿Cómo desactivar las animaciones? Es posible que no necesitemos los efectos de animación que son predeterminados de **Hestia**, así que si queremos desactivarlos, tendremos que pegar el siguiente código en el archivo `functions.php` del tema hijo: function hestia_maybe_enable_animations() { return false; } add_filter( 'hestia_enable_animations', 'hestia_maybe_enable_animations' ); También es posible agregarlo como plugin, sin necesidad de usar un tema hijo. Tan solo descargar el siguiente archivo y subirlo desde *Plugins > Añadir nuevo > Subir plugin*: [disable_hestia_animations.zip](https://s3.amazonaws.com/helpscout.net/docs/assets/55192029e4b0221aadf23f55/attachments/5aa460a004286374f708c4f2/disable_hestia_animations.zip) ### ¿Cómo aumentar la altura de la cabecera de las entradas y páginas?  Para añadir más altura al área de cabecera de las entradas y páginas, usaremos el siguiente código: .page-header .container { height: 600px !important; padding-top: 320px !important; } Ajustaremos el valor en píxeles de la propiedad `height` para lograr la altura deseada, y el valor de `padding-top` para centrar el texto en la cabecera. ### ¿Cómo personalizar los enlaces “Leer más”?  Ya hemos visto cómo cambiar el texto del enlace *“Leer más”* en el diseño de blog clásico, y ahora aprenderemos a hacerlo en el diseño de las categorías destacadas. Para esto es necesario usar un tema hijo, y pegar en el correspondiente archivo `functions.php` el siguiente código: Para las entradas destacadas: function change_read_more_button_featured_posts() { return "CAMBIAR EL TEXTO AQUÍ 1"; } add_filter( 'hestia_features_blog_posts_button_text', 'change_read_more_button_featured_posts', 25 ); Para las entradas en modo *Cuadrícula* (solo [**Hestia Pro**](https://caribdis.link/HestiaPro)): function change_read_more_button_grid_layout() { return "CAMBIAR EL TEXTO AQUÍ 2"; } add_filter( 'hestia_blog_posts_button_text', 'change_read_more_button_grid_layout', 25 ); Asimismo, podemos cambiar el color de los botones *“Leer más”* en este tipo de diseño. Para eso, necesitamos usar el siguiente código CSS: .blog .btn.colored-button { background-color: #1990A4 !important; } En caso de que queramos ocultar esos botones, el código será el siguiente: .blog .btn.colored-button { display:none; } ### ¿Cómo ocultar / mostrar el menú fijo al desplazar? En este tutorial aprenderemos a ocultar la barra de navegación cuando se desplaza la página hacia abajo, y mostrarla otra vez al desplazarnos hacia arriba. De manera predeterminada, la barra de navegación es transparente si nos encontramos en la parte superior de la página, y se transforma en blanca al desplazarnos hacia abajo. Además, esta barra permanece visible durante todo el proceso. Para poder obtener un comportamiento “ocultar / mostrar” basado en la dirección de desplazamiento, será necesario usar una porción de código jQuery. En primer lugar, tenemos que activar el módulo *Scripts de cabecera y pie de página* de **Orbit Fox**. Luego ir a *Apariencia > Personalizar > Scripts de la cabecera y pie de página* y pegar en el recuadro *Scripts del pie de página* el siguiente código: ### ¿Cómo cambiar el título de la sección de entradas relacionadas?  Para poder modificar el título predeterminado *Entradas relacionadas* es necesario usar un tema hijo. En el archivo `functions.php` pegaremos el siguiente código: function change_related_posts_title() { return 'También te puede interesar...'; } add_filter( 'hestia_related_posts_title', 'change_related_posts_title' ); Cambiaremos `También te puede interesar...` de la segunda línea por el texto de nuestra preferencia. ### ¿Cómo usar imágenes destacadas en las categorías del blog? Dado que **WordPress** no ofrece de manera predeterminada opciones para establecer una imagen destacada para las categorías, **Hestia** usa la imagen de cabecera (*Apariencia > Personalizar > Opciones de cabecera > Ajustes de la cabecera > Cabecera actual*) o un color degradado si la imagen no está asignada (*Apariencia > Personalizar > Opciones de cabecera > Ajustes de la cabecera > Degradado de la cabecera*). Si queremos tener una imagen distinta por categoría, tenemos que seguir estos pasos: - Instalar y activar el plugin [Categories Images](https://es.wordpress.org/plugins/categories-images/). - Añadir las imágenes destacadas para cada categoría, de acuerdo con las instrucciones del plugin. - Usar un tema hijo y añadir el siguiente código en el archivo `functions.php`: add_filter( 'hestia_header_wrapper_background_filter','your_child_theme_header_wrapper' ); function your_child_theme_header_wrapper( $args ) { if( is_category() ) { if ( function_exists('z_taxonomy_image_url') ) { $z_taxonomy_image_url = z_taxonomy_image_url(); if ( ! empty($z_taxonomy_image_url) ) { return ''; } } } return $args; } ### ¿Cómo añadir un enlace “Leer más” a los extractos? Cuando completamos el recuadro *Extracto* con algún texto de resumen en la página de edición de una entrada, la función `the_excerpt()` no añade ningún enlace *“Leer más”* al final de esa descripción. Si de todas maneras queremos que aparezca, podemos usar el siguiente código en el archivo `functions.php` del tema hijo: function new_excerpt_more($more) { return ''; } add_filter('excerpt_more', 'new_excerpt_more', 21 ); function the_excerpt_more_link( $excerpt ){ $post = get_post(); $excerpt .= '... Leer más.'; return $excerpt; } add_filter( 'get_the_excerpt', 'the_excerpt_more_link', 21 ); Si solo queremos que aparezca en la sección *Blog* de la página de inicio, este es el código que debemos usar: function new_excerpt_more($more) { return ''; } add_filter('excerpt_more', 'new_excerpt_more', 21 ); function the_excerpt_more_link( $excerpt ) { $post = get_post(); if(is_front_page()) { $excerpt .= '... Leeer más.'; } return $excerpt; } add_filter( 'get_the_excerpt', 'the_excerpt_more_link', 21 ); ### ¿Cómo añadir las migas de pan de Yoast SEO? Para poder usar la opción de migas de pan que proporciona el plugin [**Yoast SEO**](https://es.wordpress.org/plugins/wordpress-seo/), seguiremos estos pasos: - Configurar las migas de pan de Yoast desde el menú *SEO > Apariencia en el buscador > Migas de pan > Activo*. Más información sobre la implementación [aquí](https://yoast.com/help/implement-wordpress-seo-breadcrumbs/). - Usar un tema hijo. - Abrir el archivo `functions.php` del tema hijo y pegar el siguiente código: add_theme_support( 'yoast-seo-breadcrumbs' ); // Entrada add_action( 'hestia_before_single_post_wrap', 'hestia_child_add_yoast_seo_breadcrumbs', 100 ); // Página add_action( 'hestia_before_page_content', 'hestia_child_add_yoast_seo_breadcrumbs', 100 ); // Índice add_action( 'hestia_index_page_before_content', 'hestia_child_add_yoast_seo_breadcrumbs', 100 ); function hestia_child_add_yoast_seo_breadcrumbs() { if ( function_exists( 'yoast_breadcrumb' ) ) { yoast_breadcrumb( '', '
' ); } } ### ¿Cómo hacer que la cabecera ocupe la altura de la pantalla? Si queremos que la imagen de cabecera tome toda la altura del navegador, podemos usar el siguiente código CSS: .page-header{ height: 100vh !important; } Esto hará que el tamaño de la cabecera tome la altura completa en todas las páginas, pero si solo necesitamos que la imagen de la sección de título grande en la página de inicio adopte este estilo, usaremos este código CSS en su lugar: .home .page-header { height: 100vh !important; } ### ¿Cómo hacer que el menú de navegación no quede fijo al desplazar En algunas ocasiones, es preferible que la barra del menú no quede fija en la pantalla cuando el visitante se desplaza hacia abajo. Si este es nuestro caso, podemos usar el siguiente código CSS para “despegar” la barra: .navbar-fixed-bottom, .navbar-fixed-top { position: absolute !important; } De este modo, la barra de navegación quedará en la parte superior y se desplazará junto con la página. Hasta aquí, la segunda entrega de tutoriales cortos para **Hestia**. Todas las dudas y consultas al respecto serán bienvenidas en la sección de comentarios. 👍 --- # Hestia: otro tema de una sola página por ThemeIsle + tutorial Source: https://caribdis.net/2017/02/05/hestia-otro-tema-de-una-sola-pagina-por-themeisle-tutorial.md ** **Actualizado para la versión 3.0.1 - 19/05/2020** A mediados de diciembre último, **[ThemeIsle](https://caribdis.link/ThemeIsle)** presentó el tema número 22 de su colección. Anunciado como uno de sus temas más elegantes hasta el momento, **Hestia** tiene todo lo que un buen tema de **WordPress** debe tener: la interfaz es moderna, flexible, bien ordenada y con tipografías claras. Aquellos que ya estén familiarizados con el uso de **Zerif Lite**, encontrarán muchas similitudes en la manera de configurar y trabajar con **Hestia**. Ideal para empresas que recién se inician o profesionales independientes, es totalmente adaptable a los distintos dispositivos, y hasta incluye soporte para **WooCommerce**, con la posibilidad de mostrar los últimos productos en portada. **Hestia** también es compatible con los constructores de páginas de [**SiteOrigin**](https://wordpress.org/plugins/siteorigin-panels/), **[Beaver Builder](https://es.wordpress.org/plugins/beaver-builder-lite-version/)**, [**Elementor**](https://caribdis.link/Elementor) y [**Divi Builder**](https://caribdis.link/DiviPlug), que nos dan la posibilidad de crear contenido fácilmente y con muchas opciones de diseño. ### Ver demo de Hestia ### Instalar y configurar el tema Este tema se descarga de la página de [**ThemeIsle**](https://caribdis.link/HestiaWP) (botón *Download now for free*), o desde el repositorio de [**WordPress.org**](https://wordpress.org/themes/hestia/). La manera más sencilla de instalar **Hestia** es desde *Apariencia > Temas > Añadir nuevo*, dentro del escritorio de **WordPress**. Escribimos *Hestia* en el campo de búsqueda y veremos la miniatura con los enlaces *Instalar* y* Vista previa*. Le damos clic a *Instalar* y aguardaremos el proceso de descarga e instalación.  Por último le damos clic al botón *Activar* y ya estaremos listos para trabajar con **Hestia**.  Se agregará un nuevo elemento en el menú *Apariencia,* denominado *Hestia Options*, que es una página de bienvenida con siete pestañas que revelarán información importante sobre el tema y su desarrollo:  **Primeros pasos** – En esta pestaña encontrará un enlace a las acciones recomendadas (por ejemplo, si aún no se han instalado y/o activado los plugins necesarios), el enlace a la documentación oficial de [**ThemeIsle**](https://caribdis.link/ThemeIsle), y un botón para abrir el Personalizador de **WordPress** para comenzar a configurar la apariencia del tema.  **Acciones recomendadas** – En esta pestaña se marcarán los pasos necesarios para el correcto funcionamiento del tema. Se recomienda la instalación y activación del plugin **Orbit Fox** (ex **ThemeIsle Companion**) para tener acceso a los widgets de las secciones. Esta pestaña no se mostrará si el plugin ya se encuentra instalado y activado. **Plugins útiles** – En esta pestaña se muestra una lista de plugins útiles que son totalmente compatibles con **Hestia** y enriquecerán su funcionalidad. La instalación es opcional. **Soporte** – En esta pestaña encontraremos enlaces al soporte de [**ThemeIsle**](https://caribdis.link/ThemeIsle), a la documentación del tema, y a varios tutoriales para potenciar el rendimiento y ampliar funcionalidades de **Hestia**. **Registro de cambios** – En esta pestaña se muestra el contenido completo del archivo `CHANGELOG.md`, que detalla las correcciones y nuevas características de cada actualización de versión del tema. **Gratis vs. PRO** – En esta pestaña hay un cuadro comparativo de las características de la versión gratuita frente a la [versión PRO](https://caribdis.link/HestiaPRO). **Biblioteca de sitios** – En esta pestaña se muestran varios diseños listos para importar en un clic. Una vez instalado **Orbit Fox**, estaremos listos para comenzar a personalizar** Hestia**. ### Configurar la página de inicio y el blog Para configurar la página de inicio y el blog, bastará con crear dos páginas por separado (sin necesidad de que tengan contenido alguno). La primera podrá llamarse ***Home*** y la segunda ***Blog.*** Luego iremos a *Ajustes > Lectura* y seleccionaremos las páginas de la siguiente manera:  Luego de guardar estos cambios podremos comenzar a añadir contenido a la portada, desde el *Personalizador*. ### Identidad del sitio Aquí podemos añadir un logo para que aparezca en la cabecera de la página, del lado izquierdo. Le damos clic al botón *Seleccionar el logotipo*, buscamos la imagen en la *Biblioteca multimedia* (o subimos una nueva) y por último hacemos clic en *Elegir*. Como opción, podemos elegir un logo distinto que se mostrará en la cabecera transparente, con un clic en el botón *Selecciona una imagen* en la sección *Logotipo transparente de la cabecera*.  Además, podremos configurar el título del sitio, la descripción y el icono del sitio *(favicon)* tal como lo haríamos con cualquier otro tema de **WordPress**. Si no seleccionamos una imagen para usar como logo, la cabecera mostrará el título del sitio en formato texto. ### Ajustes de apariencia > Ajustes generales - **Diseño de la barra lateral de páginas** – Se puede elegir entre tres tipos de diseño de página: ancho completo, barra lateral izquierda y barra lateral derecha. - **Diseño de barra lateral Blog** – También se puede elegir entre tres tipos de diseño de las páginas del blog (archivos y entradas): ancho completo, barra lateral izquierda y barra lateral derecha. - **Diseño de la barra lateral de la tienda** – Y por último, se puede elegir entre tres tipos de diseño de las páginas de la tienda (categorías y productos): ancho completo, barra lateral izquierda y barra lateral derecha. - **Activar iconos de para compartir** – Si se selecciona esta casilla, se mostrarán los iconos para compartir en *Facebook, Twitter* y *Google+* en las entradas del blog. - **Activar hacer scroll al inicio** – Si se selecciona esta casilla, se mostrará un botón en la esquina inferior derecha de la página, que será un enlace para desplazar la página directamente hacia la cabecera. - **Diseño en caja** – Esta opción está activada de manera predeterminada. Si se desactiva, el tema se mostrará en todo el ancho de la pantalla (sin recuadro). - **Desactivar Secciones de página de inicio** – Esta opción sirve para usar únicamente constructores de página para armar la portada.  ### Ajustes de apariencia > Tipografía **Hestia** nos permite elegir la fuente del tema, tanto para los títulos como para los textos. Están disponibles las fuentes seguras (estándar) y más de 800 fuentes de Google, así como también es posible seleccionar el subconjunto de fuentes (necesario si se usan idiomas con una configuración de caracteres distinta). La pestaña *Tamaño de fuentes* incluye controles para asignar el tamaño de textos y encabezados en entradas y páginas, así como también en las secciones de la página de inicio.  ### Ajustes de apariencia > Colores **Hestia** nos permite cambiar los colores del tema, que son el color de fondo y el color principal. El color de fondo se mostrará si está activado el diseño con recuadro. Y el color principal el de los enlaces, y otros elementos tales como los botones.  ### Ajustes de apariencia > Imagen de fondo Aquí podemos seleccionar el fondo para todo el sitio. Solo aparecerá en la página de inicio si está activado el diseño en recuadro. Una vez que seleccione la imagen de fondo, aparecerán ajustes adicionales, como la posición y el tamaño. El botón *Fondo de la cabecera* es un enlace directo al panel *Ajustes de cabecera*.  ### Ajustes de apariencia > Botón Aquí podemos probar con distintos valores de relleno para los botones (en píxeles; el icono de enlace sirve para aplicar el mismo valor a los cuatro lados), y cambiar el radio del borde.  ### Secciones de página de inicio > Sección de título grande Esta es la sección correspondiente a la cabecera de la página de inicio. - **Deshabilitar sección** – Si se marca esta casilla, se desactivará por completo la sección de título grande. - **Fondo de título grande** – Aquí podemos elegir entre mostrar una imagen de fondo en el encabezado, o un efecto Parallax de dos imágenes (la primera capa será la imagen de fondo, y la segunda capa preferentemente un PNG transparente que contará con un efecto de movimiento sobre el fondo). - **Título** – Escribir aquí un título para el encabezado. - **Texto** – Escribir aquí el texto que se mostrará debajo del título. - **Texto del botón** – Escribir aquí el texto para el botón que aparecerá debajo del texto. - **Enlace del botón** – Escribir aquí el enlace donde apunta el botón. - **Extra **- Aquí podremos seleccionar la alineación de los textos: derecha con widget opcional a la izquierda, centrada (predeterminada) e izquierda con widget opcional a la derecha. Podemos elegir no mostrar el título, el texto o el botón, dejando los campos en blanco.  Si elegimos alguno de los dos diseños con el texto alineado a la derecha o izquierda, veremos el botón *Añadir un widget* para seleccionarlo de los widgets disponibles. Esto es útil si queremos mostrar un formulario en esta sección, o cualquier otro contenido dinámico generado por un plugin o los widgets de WordPress.  ### Secciones de la página de inicio > Características En esta sección podremos mostrar todos los servicios destacados que necesitemos (tres por fila), a modo de anuncio breve, con un icono, un título y una descripción. El icono (de **[Font Awesome](http://fontawesome.io/icons/)**) y el color son personalizables. - **Desactivar sección** – Marcando esta casilla, podremos ocultarla. - **Título de sección** – Aquí podemos darle un título personalizado. Si se deja el campo en blanco, no se mostrará un título. - **Subtítulo de sección** – Aquí podemos escribir una descripción que se mostrará bajo el título. Si se deja el campo en blanco, no se mostrará ninguna descripción. - **Contenido de características** – Aquí podemos editar cada bloque, o agregar uno nuevo con un clic en el botón *Añadir característica*.  ### Secciones de la página de inicio > Acerca de Esta sección incluye un editor para añadir contenido y nos da la posibilidad de usar una imagen de fondo, para darle una apariencia única a esta sección. - **Deshabilitar sección** – Marcando esta casilla, podremos ocultarla. - **Contenido acerca de** – Aquí tendremos un botón *(Editar)*, que es un enlace directo para editar la página marcada como página de inicio. - **Imagen de fondo de acerca de** – Aquí podemos seleccionar una imagen de fondo que quedará fija al desplazar la página.  ### Secciones de la página de inicio > Tienda La sección *Tienda* fue diseñada para mostrar los últimos productos. Para que funcione, deberá estar instalado y activado el plugin **[WooCommerce](https://es.wordpress.org/plugins/woocommerce/)**. - **Deshabilitar sección** – Marcando esta casilla, podremos ocultarla. - **Título de la sección** – Aquí podemos darle un título personalizado. Si se deja el campo en blanco, no se mostrará un título. - **Subtítulo de la sección** – Aquí podemos escribir una descripción que se mostrará bajo el título. Si se deja el campo en blanco, no se mostrará ninguna descripción. - **Número de elementos** – Aquí podemos seleccionar cuántos productos se muestran (cuatro por fila).  ### Secciones de la página de inicio > Equipo Con **Hestia** podemos mostrar los miembros de nuestro equipo en la página de inicio, con cada detalle que los describa, desde la imagen hasta los perfiles en redes sociales. - **Desactivar sección** – Marcando esta casilla, podremos ocultarla. - **Título de sección** – Aquí podemos darle un título personalizado. Si se deja el campo en blanco, no se mostrará un título. - **Subtítulo de sección** – Aquí podemos escribir una descripción que se mostrará bajo el título. Si se deja el campo en blanco, no se mostrará ninguna descripción. - **Contenido de Equipo** – Aquí podemos editar cada bloque, o agregar uno nuevo con un clic en el botón *Añadir miembro del equipo*. Los campos disponibles son: **Imagen** – Para la foto del miembro del equipo (tamaño mínimo recomendado: 200x200px) - **Título** – Para el nombre del miembro del equipo - **Subtítulo** – Para el puesto del miembro del equipo - **Texto** – Para la descripción del miembro del equipo - **Enlace** – Para añadir un vínculo a la foto del miembro del equipo - **Iconos de redes sociales** – Para añadir los enlaces a los perfiles en redes sociales (se pueden agregar los que sean necesarios, con un clic en el botón *Añadir icono*, o eliminarlos con un clic en el enlace *Eliminar icono*) Ningún campo es obligatorio, por lo cual se mostrará únicamente si tiene contenido.   ### Secciones de la página de inicio > Cinta Esta es una sección de llamado a la acción con el texto a la izquierda y un botón a la derecha. - **Desactivar sección** – Marcando esta casilla, podremos ocultarla. - **Imagen de fondo** – Aquí podemos seleccionar una imagen de fondo que quedará fija al desplazar la página. - **Texto** – Aquí podemos escribir el texto de llamado a la acción. - **Texto del botón** – Aquí escribiremos el texto del botón. - **Enlace** – Aquí insertaremos el enlace del botón, que puede ser una página del sitio, un anclaje en la portada o un sitio externo.  ### Secciones de la página de inicio > Testimonios - **Desactivar sección** – Marcando esta casilla, podremos ocultarla. - **Título de sección** – Aquí podemos darle un título personalizado. Si se deja el campo en blanco, no se mostrará un título. - **Subtítulo de sección** – Aquí podemos escribir una descripción que se mostrará bajo el título. Si se deja el campo en blanco, no se mostrará ninguna descripción. - **Contenido de testimonios** – Aquí podemos editar cada bloque, o agregar uno nuevo con un clic en el botón *Añadir testimonio*. Los campos disponibles son: **Imagen** – Para la foto de la persona que deja el testimonio (tamaño mínimo recomendado: 100x100px) - **Título** – Para el nombre de la persona que deja el testimonio - **Subtítulo** – Para el puesto de la persona que deja el testimonio - **Texto** – Para el contenido del testimonio - **Enlace** – Para añadir un vínculo a la foto de la persona que deja el testimonio Ningún campo es obligatorio, por lo cual se mostrará únicamente si tiene contenido.  ### Secciones de la página de inicio > Barra de clientes - **Desactivar sección** – Marcando esta casilla, podremos ocultarla. - **Contenido de la barra de clientes** – Aquí podemos editar cada bloque, o agregar uno nuevo con un clic en el botón *Añadir cliente nuevo*. Los campos disponibles son: **Imagen** – Para la foto de la persona que deja el testimonio (tamaño mínimo recomendado: 100x100px) - **Enlace** – Para añadir un vínculo al sitio del cliente  ### Secciones de la página de inicio > Suscríbete **Hestia** incluye una sección de suscripción a lista de correos. Para que funcione deberá estar instalado el plugin **[SendinBlue](https://wordpress.org/plugins/mailin/)**, además de tener registrada una cuenta en el servicio. Luego de instalar y activar el plugin, iremos a *SendinBlue > Home* para configurarlo. Luego, en *Forms* agregaremos el siguiente formulario de suscripción: