Blog

  • Cómo añadir shortcodes personalizados en Page Builder Sandwich

    Cómo añadir shortcodes personalizados en Page Builder Sandwich

    From the word itself, the word shortcode means exactly that: A short code; a shortcut code.

    Los shortcodes te permiten añadir elementos a tu sitio web (como widgets, por ejemplo), sin tener que añadir enormes fragmentos de código como normalmente harían los desarrolladores.

    Por ejemplo, un fragmento de código normal, en cuanto a longitud, probablemente se vería más o menos así:

    <html>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    
    Etiam id aliquam turpis. Vivamus quis arcu tincidunt, finibus urna eget, placerat risus.
    
    Aliquam arcu massa, finibus et lacinia sed, scelerisque nec augue. Quisque eu viverra sapien, vel consequat lorem. Integer vel erat tortor.
    
    Phasellus condimentum magna eget congue venenatis. Suspendisse blandit vehicula consectetur.
    
    Nullam sodales eleifend massa, in bibendum purus fermentum id.
    
    Morbi et turpis feugiat, malesuada ipsum sit amet, interdum nulla. In non ante nec nisl mattis gravida sit amet id lectus.
    
    </html>​

    Para este ejemplo, imaginemos que el fragmento de código anterior te permitirá añadir un párrafo entero de texto de marcador de posición Lorem Ipsum.

    Now, a shortcode with the same exact function as the code above will look something like this, in contrast:

    [lorem ipsum dolor estat]Lorem Ipsum[/lorem]​

    You can see how they’re miles different from each other in terms of length.

    Ahora imagina que ambos fragmentos de código (el original y extenso frente al shortcode que contiene solo la palabra «lorem») hicieran exactamente lo mismo: añadir texto Lorem Ipsum.

    This is what shortcodes do. They make adding widgets, functions, and a bunch of other cool stuff easier for both ordinary WordPress users and developers alike.

    Where can I find shortcodes?

    Si tienes un plugin o widget favorito, lo más probable es que tengan un shortcode disponible para que lo utilices.

    Shortcodes Ultimate, for example, will let you choose from hundreds of shortcodes that you can use on Page Builder Sandwich (or anywhere, actually) by simply grabbing the shortcode of your choice from Shortcode Ultimate’s repository or documentation page.

    Adding Custom Shortcodes on PBS

    En Page Builder Sandwich, puedes añadir shortcodes directamente en tu página simplemente escribiéndolos o copiándolos y pegándolos en tu área de contenido.

    Hicimos esto a continuación con un shortcode de Shortcodes Ultimate, añadiendo una caja de contenido en la página de demostración de Page Builder Sandwich:

    Another thing you’ll find handy when using Page Builder Sandwich is our Shortcode Mapping feature.

    De uno de nuestros artículos anteriores sobre Shortcode Mapping, la definición es la siguiente:

    Shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

    Parte de esto significa que ya no tienes que buscar manualmente tus shortcodes en sus respectivas documentaciones o repositorios.

    Siempre que tengas instalado en tu sitio de WordPress el plugin que incluye el shortcode, estará fácilmente disponible para que lo uses en Page Builder Sandwich.

    So for example, if I wanted to add a WooCommerce shortcode on my page, all I have to do is make sure that it’s installed on my WordPress site, like so:

    And then, to actually add the shortcode, I’ll just go to my page, and drag and drop the Shortcode Element:

    Because we already have WooCommerce installed on our WordPress site, you can see that all of the shortcodes that are available on the WooCommerce plugin are already available on Page Builder Sandwich. This is what Shortcode Mapping is.

    You can also see on the upper left corner that the ACF (Advanced Custom Fields) and MailChimp shortcodes are available– because we have those instlled on our WordPress site, too.

    Así que, si quieres añadir shortcodes personalizados, o shortcodes que hayas creado por tu cuenta, puedes hacerlo, siempre que los tengas instalados en tu sitio de WordPress.

    Here are some other helpful plugins that you can use to create your own custom shortcodes:

  • Crea una web de WordPress increíble con estas ofertas del Black Friday 2017

    Create WordPress Website With Black Friday Sale 2017 Deals Black Friday and Cyber Monday are coming in a couple of days (5 to be exact), but you’ll find that a bunch of websites have already started announcing their discount deals every which way. WordPress tools and plugins are definitely no exception.

    Así que, mientras aún es (relativamente) temprano, hemos recopilado una lista de las mejores ofertas que pudimos encontrar para el Black Friday de WordPress 2017, con los elementos esenciales que necesitas para crear un sitio de WordPress, todo dentro de tu presupuesto.

    Sin más preámbulos, aquí tienes 5 herramientas y plugins con generosos descuentos que vas a necesitar para crear tu primer sitio web básico de WordPress.

    Cloudways

    Cloudways is a managed cloud hosting platform that’s quick to start, easy to manage, and made to scale. It’s feature-rich, plus it lets you choose your server resources, allowing you to get your site up and running within minutes.

    Enter the coupon code HOLIDAY25 upon checkout to get a 25% discount on Cloudways for 3 months, valid until 28th November 2017.

    Consigue tu cupón de Cloudways

    Yoast SEO

    Yoast SEO is one of the most popular (if not most trusted) search optimization plugin for WordPress, and for good reason too. With over 7 million installs, it’s probably the most comprehensive SEO tool in the digital market, and their millions of users (ourselves included) can attest: you simply can’t go wrong with a plugin as functional as Yoast.

    While they haven’t announced this year’s Black Friday coupons yet, they’ve made an announcement in one of their articles that they’ll definitely having a sale on November 24 and 25.

    ¡Echa un vistazo a Yoast SEO ahora!

    WP Rocket Cache

    WP Rocket offers a good range of caching functions, giving your site the performance boost that it needs. It’s a breeze to configure as well, so it’s great for beginners as it only requires minimal effort for setup.

    This year, they’re having their biggest sale yet: 35% off on ALL their licenses.

    Consigue el cupón de WP Rocket

    Theme Discounts from WeDevs.com

    WeDevs es una colección de ingeniosos plugins y extensiones de WordPress. Tienen una comunidad bastante sólida y llevan en activo desde 2008. Para el Black Friday 2017 (y las posteriores fiestas de este año), han preparado una lista de ofertas festivas de WordPress, que incluye un montón de descuentos y cupones para increíbles temas de WP.

    Consigue cupones para temas

    BONUS RESOURCE: First Site Guide

    First Site Guide is a resource site and tool that contains easily accessible knowledge on how to create your first website, both on WordPress and off of it. It also has great infographics that guide you through the basics of blogging, design, and marketing as well. And best of all, you get this good share of site-building knowledge for free.

    Pronto publicaremos también un artículo tutorial sobre páginas de aterrizaje, con fantásticos recursos de First Site Guide, ¡así que mantente atento en las próximas semanas!

    Ir a First Site Guide

    (And last but not least) Page Builder Sandwich!

    We definitely don’t want to miss out on all the fun. So this 2017, we’re giving you guys 33%-off on any license. Just use the promo code CYBERMONDAY33 upon checkout to start building your site today!

    Premium Single Site

    $39 $26.79

    Comprar ahora

    Apply CYBERMONDAY33 upon checkout to save $13.20

    Premium Unlimited Sites

    $89 $60.29

    Comprar ahora

    Apply CYBERMONDAY33 upon checkout to save $29.70

    So what are you waiting for? Grab these kick-ass WordPress deals now. After all, Black Friday only happens once a year. ?

  • Cómo utilizar el marketing por correo electrónico con Page Builder Sandwich

    Cómo utilizar el marketing por correo electrónico con Page Builder Sandwich

    Sí, puedes.

    The more important question, though, is how and why do you need to do it?

    My business is small. Can’t I just wing it?

    Email marketing has an average ROI of 3,800 percent. For every dollar invested, the average return is $38, according to Salesforce.

    In other words, it’s definitely something worth investing your time in.

    Because while there are tons of ways to market your products and capture leads– you can still try to make use of the less-popular cold call, for example– the most sure-fire way to connect and communicate with your target audience in the 21st century is through e-mail marketing.

    So if you’re running a business –any kind of business, whether small, big, online or otherwise– digital and e-mail marketing is an absolute must.

    Aside from cutting on costs (e-mail is free, after all), businesses rely on it not just because it’s been proven to be successful, but also because it yields results that are both measurable and flexible; you can track your audience’s responses to your e-mails, for example, or note how many clicks and opens your e-mail marketing campaigns get.

    How you can do it with Page Builder Sandwich

    There are lots of available software you can use to help you market your products and content digitally, like Hubspot’s E-mail Marketing Software, or Mailchimp, which gives you a management system that helps you create, organize, and analyze your newsletters.

    But did you know that using Sandwich, you can actually integrate some of the popular software mentioned via the Newsletter Element?

    The Newsletter Element (and how it works)

    You can find the Newsletter Element by hovering over to the Elements Inspector over to the left side of the screen, and selecting Newsletter from the bottom area.

    Using the Properties Inspector, you can also choose which newsletter integration you’d like to use with the Newsletter Element. For this exmple, we’re going to use MailChimp (highlighted in blue in the dropdown below).

    And, using the Input Field button, you can try to play around with the Newsletter Element’s settings as well, so you can change colors, customize success message options, and other settings, like so:

    By trying your hand at the different available settings for the Newsletter Element’s options, you can end up with something like this:

    Plus, with the help of our Pre-Designed Sections and other design tips, you can actually do a whole lot more.

    Other useful resources for e-mail marketing beginners

    • 11 Types of Marketing E-mails That Actually Generate a Response

    Conclusion

    While other noteworthy marketing trends still exist today, one thing’s for sure: E-mail marketing is definitely here to stay, and it’s important that you utilize it when you can. Who knows? Through e-mail marketing, your business could just get that big break it’s been looking for.

    Design in less time!

    Get access to Sandwich’s Pre-Designed Sections, Templates, and a whole lot more.

    Try Live Preview
  • API de Frontly: haciendo que Frontly Builder sea más fácil de usar para los desarrolladores

    Grandes noticias para los desarrolladores: en la próxima versión de Frontly, por fin lanzaremos la API de Frontly.

    Actualmente todavía está en desarrollo, pero por fin podrás crear complementos y extensiones para Frontly. Por supuesto, también lanzaremos la documentación de la API para acompañarla y ofrecer una experiencia más fluida y funcional.

    Estamos deseando ver todas las cosas geniales que vais a crear.

    Here’s a short list of some of the APIs we have so far:

    1. Text Formatting Bar API

    Con la API de la barra de formato de texto, los desarrolladores pueden ampliar la funcionalidad de la barra de formato de texto de Frontly. Con esto, puedes añadir nuevos botones/opciones a la barra de formato de texto.

    2. Add Element API

    Esta API te permitirá crear nuevos elementos, añadiéndolos a la lista de los ya existentes en la sección Elementos, en la parte izquierda del editor de contenido.

    3. Inspector API

    La API del Inspector te permitirá crear, añadir o eliminar ajustes en el Inspector de propiedades de cada elemento.

    4. Text API

    La API de texto te permitirá realizar modificaciones en los estilos de texto, en concreto, modificar formatos de texto, cambiar los colores de fondo del texto y más.

    Developers! It’d be great if you could send over some suggestions

    These are just some of the basic APIs we have in store for you. We’re in the middle of creating more, but if you have any other ideas of APIs we can add to our console, just leave a comment below, or hit us up at [email protected]. We might just feature your suggestions in the upcoming Frontly release ?

  • En qué se diferencia Page Builder Sandwich del resto

    How-Page-Builder-Sandwich-Is-Different-from-the-RestHay decenas y decenas de maquetadores de páginas por ahí, y seguro que te estás preguntando: ¿qué tiene de especial Page Builder Sandwich? ¿Por qué querrías molestarte en usarlo si ya tienes uno en tus manos?

    En este artículo, enumeraré un puñado de características clave de Page Builder Sandwich que lo hacen único y un imprescindible absoluto tanto para creadores de contenido como para diseñadores. Si no sabes qué es un maquetador de páginas y por qué lo necesitas, no te preocupes, tenemos contenido que puede ayudarte.

    1. No solo verás una representación visual de tu contenido, sino que verás y editarás tu contenido real

    En otros maquetadores de páginas, ves áreas que simplemente representan tu contenido. Principalmente maquetas tu contenido con bloques y formas rectangulares, y el resultado se parece más a una estructura de cómo se vería finalmente tu contenido en la página. Esto provoca que tengas que hacer clic constantemente en el botón de vista previa solo para ver cómo quedaría el resultado.

    Con Page Builder Sandwich, toda la edición se realiza en el front-end de tu sitio y editas tu contenido directamente para disfrutar de una verdadera experiencia de lo que ves es lo que obtienes.

    2. Edición directa rápida y sencilla sin todos esos molestos cuadros de diálogo emergentes

    Las ventanas emergentes han sido un elemento básico en los maquetadores de páginas. En la mayoría, si quieres editar cualquier cosa en tu diseño, ya sea un encabezado, la etiqueta de un botón o un pequeño texto de eslogan, primero tendrías que esperar a que se abra un cuadro de diálogo emergente y realizar tus cambios dentro de él.

    Nos hemos propuesto como objetivo minimizar el uso de ventanas emergentes en todos los aspectos de Page Builder Sandwich. Al eliminar las ventanas emergentes, editar cualquier contenido se vuelve más fácil y fluido que nunca.

    La edición se realiza de forma directa: haz clic en el texto para situar el cursor y empieza a escribir. Ya no tienes que esperar a que aparezca un cuadro de diálogo emergente con un editor TinyMCE para empezar a editar. Lo mejor de todo es que sigues pudiendo arrastrar y soltar tu contenido de un lado a otro.

    Otra innovación que facilita una edición sin complicaciones es el inspector, siempre presente. El inspector actúa como tu caja de herramientas y editor de propiedades. Las herramientas para dar formato a tu contenido: colores de texto, encabezados, ajustes del tamaño de fuente, márgenes, rellenos, bordes, citas en bloque y muchas más están a un simple clic de distancia.

    Reused functionality

    3. Funcionalidad de WordPress reutilizada

    Otra cosa que hemos notado en otros maquetadores de páginas es que a menudo reinventan la rueda. Algunos implementan sus propios selectores de color, cargadores de imágenes, creadores de galerías y otras herramientas diversas. No hay nada malo en esto de por sí, pero WordPress es un tesoro lleno de fragmentos de código, así que ¿por qué no utilizarlos?

    WordPress es una plataforma enorme y maravillosa, y contiene un montón de herramientas geniales creadas por muchísimos colaboradores increíbles. Page Builder Sandwich utiliza tanto como sea posible la funcionalidad que ya viene integrada en WordPress.

    En lugar de utilizar nuestro propio selector de color, utilizamos el selector de color Iris. En lugar de nuestro propio cargador de imágenes, utilizamos el gestor de medios. También están backbonejs, underscorejs, wp.hooks y wp.shortcode, por nombrar unos cuantos scripts prácticos más. Utilizamos todos ellos, lo que nos ha facilitado la vida y, además, da lugar a una base de código más estable.

    Reutilizar la funcionalidad de WordPress también nos ha deparado gratas sorpresas. Por ejemplo, al utilizar el gestor de medios para insertar imágenes, fue una grata sorpresa comprobar que ahora también podíamos gestionar galerías de WordPress, listas de reproducción de vídeo y audio y URL remotas desde el primer momento. También pudimos limitarnos a utilizar el gestor de medios para la edición de imágenes, lo que eliminó horas de dolores de cabeza innecesarios en el desarrollo.

    4. Navegación por teclado y atajos

    En otros maquetadores de páginas, el ratón es tu amigo. Arrastras y sueltas elementos con él y haces doble clic en ellos para editarlos. Pero el teclado se suele dejar de lado.

    Por ejemplo, en algunos maquetadores, no puedes editar fácilmente el texto de un párrafo o sección por encima de donde estás editando, porque tendrías que salir de un cuadro de diálogo emergente y hacer clic en uno nuevo. En Page Builder Sandwich, puedes navegar con el teclado. Pulsa las teclas de flecha para desplazarte por tu contenido; funciona incluso si tu otro contenido está dentro de otra fila o columna.

    Otra característica importante son los atajos de teclado para deshacer y rehacer. Puede que al principio no parezca gran cosa, pero piensa en esto: ¿qué pasa si arrastras y sueltas tu contenido por error en el lugar equivocado? En algunos maquetadores de páginas, tendrías que arrastrarlo de nuevo a su posición original. En Page Builder Sandwich, tanto deshacer como rehacer funcionan. Así que, tanto si quieres renovar lo que has escrito como si quieres revertir el contenido arrastrado (o múltiples contenidos arrastrados), basta con pulsar deshacer o rehacer. Deshacer y rehacer funcionan con el contenido arrastrado y soltado, e incluso con cambios de propiedades como los tamaños de fuente y los rellenos de fila. Esto los convierte en herramientas potentes en tu arsenal de edición.

    Relaxing experience

    5. Un verdadero maquetador de páginas frontend: una experiencia de edición más relajante y sin complicaciones

    Nuestra mentalidad durante el desarrollo es que editar en el front-end no debería hacerte sentir como si siguieras editando con herramientas del back-end. No debería sentirse como si el maquetador se hubiera creado inicialmente para el back-end y luego se hubiera adaptado al front-end.

    En resumen, para mí, el principal elemento diferenciador de Page Builder Sandwich es que lo hemos creado con el objetivo de ser un «verdadero» maquetador de páginas frontend: una nueva forma de concebir cómo debería ser la edición en el front-end.

  • Actualización n.º 1 del cambio de marca de Frontly: Copiar y pegar párrafos

    Over our past blog posts, we mentioned that PBS will be rebranding as Frontly, and that we’ll be changing and improving a lot of aspects for the better. One of these aspects is being able to use Frontly to experience a smoother, more intuitive page building experience that’s even better than PBS.

    Así que, mientras seguimos perfeccionando Frontly para vosotros, hemos decidido publicar una serie de artículos para que sepáis exactamente qué vais a recibir una vez que Frontly llegue al mercado.

    Copy-paste blocks of text on Frontly

    Diseñamos PBS de forma que cada párrafo fuera un elemento independiente. Al copiar y pegar textos largos, la selección se divide en bloques de texto separados.

    What do we mean by this? Here’s an example to illustrate.

    En la versión actual de PBS (la que estáis usando ahora), al copiar y pegar varias líneas, estas se dividen en múltiples elementos de texto, lo que dificulta mover secciones de texto. Esto hace que editar el texto resulte complicado.

    Por tanto, si quisiera mover el texto que acabo de copiar y pegar a otra columna, sería más difícil porque tendría que arrastrar las líneas una por una.

    This is something we’re definitely addressing with Frontly.

    This is a small test page Benjamin made for Frontly. Here, you’ll see that we copy-pasted the same paragraph we tried to copy-paste on PBS. Only this time, everything is retained in a single area that you can drag around and place wherever you want to.

    Esto significa que podréis añadir y editar texto de forma más fluida, ofreciéndoos una experiencia de escritura (y creación de páginas) sin complicaciones.

    Retain full text formatting with Frontly

    Otra cosa que nos entusiasma que probéis en Frontly es cómo se mantiene todo el formato: se conservan todos los encabezados, incluidas las viñetas e incluso los emojis.

    Copy-pasting with PBS vs copy-pasting with Frontly

    En Frontly (derecha), veréis que se ha mantenido todo el formato del texto de la fuente original. Todo lo que esté en negrita, cursiva, subrayado o editado con un tamaño de encabezado diferente permanece intacto al pegarlo en el área de Frontly (en comparación con PBS, donde lo único que se conservaba eran los emojis).

    What else do we have in store for you?

    Como hemos mencionado, este es solo el primero de una serie de artículos sobre cómo Frontly estará a años luz de PBS. ¡Estamos deseando mostraros todo lo demás, así que estad atentos a nuestra próxima publicación del blog!

    ¿Sugerencias o comentarios? ¡Poneos en contacto con nosotros y dejad una respuesta abajo!

  • Adaptabilidad móvil en la versión 4.0 de PBS

    Lograr un diseño adaptable a móviles (responsive) correcto puede ser realmente complicado, y cuando alguien mete la pata, los resultados suelen ser horribles. De hecho, por si aún no lo sabías, Google incluso empezó a penalizar a los sitios web no optimizados para móviles en abril de 2015. En resumen, el diseño adaptable para móviles es algo muy importante.

    Entonces, ¿qué es el diseño adaptable a móviles?

    Se considera que un sitio web es adaptable (responsive) cuando sus contenidos tienen la capacidad de adaptarse a diferentes tamaños de pantalla y orientaciones al visualizarse en dispositivos distintos al ordenador de sobremesa. En términos más sencillos, si has actualizado a PBS v4 y quieres diseñar o crear una página, no deberías tener problemas para verla, ya sea desde tu ordenador, teléfono móvil o tableta.

    Diseño adaptable en la versión 4.0

    En nuestra última actualización, nuestro equipo se ha asegurado de que la nueva función de visualización móvil de PBS se convierta en una experiencia más fluida y con mayor capacidad de respuesta en su conjunto: con texto, imágenes y todo el resto del contenido adaptándose automáticamente a la resolución de pantalla de tu dispositivo.

    Ahora todos los encabezados se ajustan automáticamente según el tamaño de la pantalla, para que no acabes con letras enormes al visualizar tu sitio o página creada con PBS en teléfonos móviles. Para demostrarlo de forma un poco más clara:

    Visualizar tu sitio en diferentes tamaños de pantalla

    Para ayudar también a garantizar que sepáis cómo se ve vuestra página en el móvil, también hemos habilitado la visualización móvil a través del ordenador de sobremesa. De este modo, si quieres comprobar si tu página se ve bien o no, no tienes que pasar por la molestia de cambiar físicamente del teléfono (o tableta) al ordenador. Ahora puedes simplemente alternar entre los diferentes tamaños de pantalla en cualquier momento mientras diseñas tu página.

    Además, ahora también puedes ajustar los espaciados de tus elementos específicamente para tabletas y teléfonos móviles.

    Entonces, ¿qué opináis? ¿A favor o en contra? ¿Hay alguna otra característica que podamos mejorar con respecto a los dispositivos móviles? ¡Hacédnoslo saber en la sección de comentarios a continuación!

  • ¡Promoción exclusiva de Cloudways para usuarios de PBS!

    Estamos colaborando con Cloudways, una de las plataformas de alojamiento gestionado en la nube más increíbles de la web. Si aún no has oído hablar de ellos, gozan de gran confianza en la comunidad de WordPress, demostrando ser uno de los servicios de alojamiento más fiables del mercado. También cuentan con características fantásticas, como múltiples infraestructuras en la nube, múltiples centros de datos y alojamiento SSD, además de clonación en 1 clic, copia de seguridad y restauración en 1 clic y asignación de dominios en 1 clic.

    ¡La buena noticia es que nos hemos asociado con Cloudways para crear una promoción exclusiva para los aficionados a Page Builder Sandwich que quieran probar Cloudways o como un regalo para los usuarios actuales de Cloudways! Solo introduce el código. Solo introduce el código:

    CWPBS15

    …para obtener $15 de descuento al actualizar tu cuenta de Cloudways. Esta oferta también te ofrece un servidor DigitalOcean de 1 GB en Cloudways durante 1 mes. Esta es una gran oferta para quienes buscan cambiar de proveedor de alojamiento o para quienes desean crear nuevos sitios web o aplicaciones web.

    ¡Esperamos que disfrutes de esta promoción tanto como nosotros disfrutamos trabajando con Cloudways!

  • Page Builder Sandwich 2017: resumen del año

    En 2017, comenzamos a ampliar las funciones de Page Builder Sandwich. Este año supuso un gran salto para nosotros y no podríamos estar más contentos.

    Hemos recibido muchísimos comentarios y apoyo de nuestros usuarios, así como de nuestros amigos de WordPress. Y gracias a esto, pudimos crear algo grande, algo que os permite crear cosas maravillosas con nosotros.

    So without further ado, let’s look back at Page Builder Sandwich’s 2017. Here are our favorite updates and releases from this year.

    Parallax Scrolling

    Parallax Scrolling is a background effect that gives your page a a 3D layered look while you scroll.  We made adding this effect easy for our users- simply select the Parallax Scrolling option in your row’s background to add the parallax effect.

    Video Backgrounds

    Al igual que con el desplazamiento Parallax, Page Builder Sandwich te permite añadir elegantes fondos de vídeo simplemente copiando y pegando enlaces de Vimeo o YouTube, o subiendo vídeos manualmente.

    Ken Burns Backgrounds

    ¿Te has fijado en cómo se muestran las imágenes de archivo en la mayoría de los documentales? ¿En cómo muestran una imagen en pantalla acercándola lentamente? Eso se llama el efecto Ken Burns. Y sí, Page Builder Sandwich también lo incorporó en 2017.

    Blank Page Template

    ¿Quieres empezar desde cero? Page Builder Sandwich te lo pone fácil. En 2017 también lanzamos la plantilla de página en blanco, que te permite diseñar tu sitio web sobre un lienzo completamente en blanco.

    Full Page Templates

    Page Builder Sandwich released its very first set of Page Templates in January 2017. Niche-based and professionally designed, these templates also allow for manual editing so you can customize them the way you’d like.

    Mobile Responsiveness

    2017 fue el año en que incorporamos la adaptabilidad móvil a nuestra lista de funciones. Ahora puedes ver tu sitio web desde el móvil sin problemas.

    All 800+ Google Fonts

    Te dimos la posibilidad de añadir dinamismo y flexibilidad a tu sitio web con más de 800 fuentes de Google Fonts.

    200% Performance Increase

    Bigger, better, faster. Page Builder Sandwich increased its performance by 200% in 2017.

    What’s in Store for 2018?

    Page Builder Sandwich ha sido el maquetador visual verdaderamente intuitivo, verdaderamente fácil de usar y verdaderamente front-end. Nuestra visión de ofrecerte la mejor experiencia de creación de páginas web crece a medida que compartís vuestras necesidades.

    ¡A partir de vuestras ideas construimos algo mejor para 2018!

    Frontly Builder is the next step in our evolution and we’re at the final stages of development!

    Leave us your email to get first dibs on updates!

    ‘til relaunch

    ¡No habríamos llegado tan lejos sin vuestro apoyo, así que un enorme, enorme agradecimiento a todos los que habéis estado a nuestro lado este 2017! Por crear aún más cosas increíbles en 2018. ¡Nos vemos allí!

    Saludos,
    El equipo de Page Builder Sandwich

  • Qué es un maquetador visual y por qué importa el front-end

    What-is-a-Page-Builder-and-Why-Front-End-MattersSi eres un bloguero empedernido en el que toda la creación de contenidos que realizas gira en torno a escribir artículos completos que contienen alguna que otra imagen complementaria, entonces tal vez el editor de contenidos TinyMCE existente sea suficiente para tus necesidades. El conjunto de herramientas actual ya contiene las herramientas necesarias para escribir artículos: dispones de las herramientas básicas de formato de texto, como negrita, cursiva, encabezados, etc. Pero eso es prácticamente todo.

    Sin funciones prácticas de maquetación

    Aunque puedes escribir artículos con el editor de contenido TinyMCE actual, no hay una forma decente de maquetar tu contenido más allá de tener una única columna de texto continuo. De forma predeterminada, no puedes distribuir el texto en dos o más columnas, ni puedes crear contenido dividido en secciones con un color de fondo diferente. Si quieres que otras secciones de tu sitio web, como las páginas de aterrizaje y las páginas de contacto, sean únicas, necesitarás algún tipo de capacidad básica de maquetación.

    Otros han intentado eludir este problema utilizando la función de shortcodes de WordPress. En pocas palabras, los shortcodes permiten insertar fragmentos de código mediante etiquetas especiales. Existen plugins de WordPress que introducen diferentes shortcodes que puedes utilizar para crear contenido en columnas. Por ejemplo, podrías envolver tu contenido con múltiples etiquetas de columna si quieres colocarlo en un diseño de dos columnas. Aunque este método «funciona», no es visualmente intuitivo, ya que con el tiempo, a medida que añades más contenido, todo parecería un enorme desastre.

    Para llenar este vacío en la maquetación, se crearon los maquetadores visuales (page builders).

    Page building blocks

    Los maquetadores de páginas facilitan la creación de contenido maquetado

    Los maquetadores visuales te ofrecen herramientas adicionales que facilitan la organización de tu contenido en diseños únicos. Por lo general, los page builders eliminan el editor de contenido TinyMCE del back-end y lo reemplazan (o agregan) por uno nuevo que te ayuda a visualizar tu contenido. Si no has utilizado un constructor de páginas back-end antes, imagina un conjunto de bloques donde cada bloque representaría un tipo de contenido: una imagen, texto o un shortcode. Luego te permitiría arrastrar y soltar esos elementos en diferentes disposiciones y columnas.

    Aparte de la maquetación, los maquetadores de páginas también facilitan la creación y colocación de shortcodes. Antes, podías ver los shortcodes en todo su esplendor en formato sin procesar. Veías los corchetes junto con todos los atributos y valores mezclados dentro de tu contenido. Los page builders suelen incorporar creadores de shortcodes: cuadros de diálogo emergentes que hacen que la selección de atributos de shortcodes sea mucho más fácil de usar que escribirlos a mano.

    Los constructores de páginas front-end son el futuro

    Si bien todo esto representa una mejor experiencia para los diseñadores y creadores de contenido, un maquetador de páginas de back-end tiene un gran problema inherente. Aunque puedes ver una representación visual de cómo se vería tu contenido, lo que estás viendo no es tu contenido real. Esto lleva a las personas a comprobar constantemente la vista previa de sus páginas para ver si lo que están haciendo es correcto. Al utilizar maquetadores de páginas de back-end, yo personalmente hago clic en el botón de vista previa al menos 20 veces con facilidad, solo para comprobar si mi contenido está alineado correctamente o si mis márgenes están espaciados de manera uniforme. Esto supone una molestia que consume muchísimo tiempo.

    Para solucionar este inconveniente, los maquetadores de páginas deberían trasladarse al front-end. Si esto se hace, se eliminaría la parte de adivinanza en la maquetación de páginas, ya que podrás ver tus resultados de inmediato.

    Por el momento, hay muchos maquetadores de páginas para el back-end y solo un puñado para el front-end. Entre ese reducido número se encuentra Page Builder Sandwich. Si quieres saber más sobre qué hace único a Page Builder Sandwich y por qué es la herramienta adecuada para ti, lee el artículo How Page Builder Sandwich Is Different from the Rest.