Page Builder Sandwich

Obtener PBS Pro

Autor: Neil Lock

  • Páginas y plugins: maximiza tu experiencia en WordPress

    pages-and-plugins-maximizing-your-wordpress-experience

    Algunas de las funciones de WordPress (especialmente las más complejas) pueden requerir cierto tiempo para que los usuarios más nuevos se familiaricen con ellas. Y si eres uno de estos nuevos usuarios, la intrincada jerga de WordPress podría tener tendencia a sumergirte en una espiral de intimidación, especialmente al experimentar esa sensación casi inevitable de sobrecarga de información. ¡Uf!

    Ahora bien, si formas parte de este porcentaje concreto de usuarios de WordPress, te rogamos que no te preocupes; la buena noticia es que no es más que una idea equivocada que ser un novato en WordPress equivalga automáticamente a una experiencia limitada con WordPress. Esta forma de pensar es un error común que comete casi todo el mundo, y te instamos a no cometer ese mismo fallo.

    La verdad es que no necesitas tener un conocimiento tan profundo del funcionamiento interno del software y el código para empezar a crear un sitio web, o para conseguir que funcione de la forma deseada, ya puestos. «¿Cómo es posible?», te preguntarás. Bueno, una de las formas de lograrlo es creando páginas en tu sitio y añadiendo plugins.

    WordPress es a la vez complejo y práctico, y a través de varios de nuestros artículos para principiantes, lo tenemos bastante cubierto. Anteriormente, también hemos tratado cómo los plugins contribuyen a la personalización y flexibilidad de WordPress, y cómo permiten a sus usuarios sacar el máximo partido a su experiencia con WordPress. Y aunque familiarizarse con la importancia de los plugins es fundamental en tu andadura de creación de sitios web, los elementos básicos de WordPress, como la existencia de páginas, también pueden darte un muy buen comienzo.

    20160824_Una_PBS_Article_2

    Definición de páginas frente a entradas

    En el ámbito de WordPress, el término «página» casi siempre se asocia con el término «entrada» (o «post») —como en «páginas y entradas»—, y hay ocasiones en las que la gente los confunde pensando que son términos intercambiables. Es comprensible que sea fácil confundirse entre ambos (especialmente si todavía estás en la parte poco profunda de la piscina de principiantes de WordPress). Así pues, ten en cuenta que, aunque estas cosas puedan parecer triviales, siempre es una buena idea familiarizarse con los pequeños detalles de WordPress, sobre todo si estás empezando.

    Un indicador sencillo para diferenciar entre entradas y páginas es que las entradas son las publicaciones individuales que creas en tu sitio (este artículo que estás leyendo ahora mismo, por ejemplo, es una entrada). Estas publicaciones no son exactamente una necesidad para los sitios web, a menos que el tuyo cuente con un blog activo como el nuestro. Sin embargo, lo que sí puede ser un elemento crucial de tu sitio es la creación de páginas, en lo cual se centrará un poco más este artículo.

    Las páginas son bloques de construcción

    A menos que nunca hayas tocado un ordenador (lo cual suponemos poco probable), es muy probable que ya hayas visto u oído hablar antes de páginas web, o al menos tengas una idea aproximada de lo que pueden ser. Si no te resulta familiar, no te preocupes; también es probable que ya te hayas topado con páginas en tus visitas a otros sitios web: secciones de preguntas frecuentes o de «Quiénes somos», formularios de contacto y galerías de imágenes. Para los principiantes y los sitios web recién creados, pueden ser similares a bloques de construcción, en cierto sentido. Al combinarse, conforman lo esencial de lo que trata tu sitio y lo que tiene para ofrecer.

    Así que está muy bien ser consciente de estas diferencias básicas, sí. Pero al combinarlo con tus conocimientos básicos sobre plugins, en realidad estás en una posición idónea para sacar provecho de tus nuevos conocimientos sobre las páginas de WordPress, incluso si eres un principiante. No obstante, la pregunta ahora es cómo.

    20160824_Una_PBS_Article_1

    Aprovechar la ventaja: plugins básicos que puedes instalar

    En un sitio básico de WordPress, crear páginas es fácil, sin duda. Solo tendrías que ir descubriendo el proceso, leer unas cuantas instrucciones, hacer clic en un par de botones y listo. Sin embargo, si quieres algo más que eso, vas a tener que instalar un par de plugins.

    1. Plugins de SEO (Search Engine Optimization)

    Dar a conocer tu sitio web al público ya es bastante difícil, y la tarea de hacer correr la voz sobre él lo es mucho más. Créeme. Por eso, un poco de ayuda de los plugins de SEO resulta crucial para que tu sitio consiga ese impulso en el posicionamiento.

    Aquí en Sandwich usamos Yoast, al que a menudo se le considera el plugin de SEO líder en el mercado hoy en día. Sin embargo, hay muchos otros plugins de SEO entre los que elegir, y existen numerosos sitios, como SitePoint, que comparan y contrastan los diferentes plugins de SEO si deseas sopesar tus opciones.

    1. Plugins de copias de seguridad

    Hacer copias de seguridad es una de las precauciones más importantes que debes tomar cuando configuras tu sitio; nunca se es demasiado precavido. Al fin y al cabo, es mejor dedicar unos minutos (u horas, según tu experiencia) a configurar un buen plugin de copias de seguridad que pasarse una eternidad configurando tu sitio desde cero si tus datos se borran por accidente.

    1. Plugins de seguridad

    Hay un mundo muy cruel ahí fuera, incluso en las profundidades de internet. Habrá atacantes que querrán robar tus datos e incluso hackear tu sitio, entre otras cosas. Así pues, siempre es una buena idea instalar un plugin de seguridad junto con el de copias de seguridad por si acaso. Nosotros usamos VaultPress tanto para copias de seguridad como para seguridad.

    1. Plugins antispam

    Nadie quiere spam, a menos que sea la carne enlatada. Deliciosa.

    Bueno, dejando a un lado la popular comida en lata, hay muchas formas en que el spam no deseado puede colarse en tu sitio de WordPress. Según WPExplorer, aunque es posible realizar ajustes manuales en WordPress para evitar el spam, también puedes optar por una solución más rápida: instalar un plugin antispam en tu sitio.

    1. Caché

    Instalar un plugin de caché es una forma infalible de acelerar el rendimiento de tu sitio y de tu servidor. Llevamos algún tiempo usando WP Fastest Cache, pero también hay muchos otros plugins de caché fiables y muy bien valorados —como W3 Total Cache— a los que también podrías dar una oportunidad.

    Puedes aprender más sobre el almacenamiento en caché en el sitio del Codex de WordPress.

    DATO CURIOSO: En inglés, cache se pronuncia ˈkash, no kashè

    Plugins adicionales para tus páginas

    1. Plugin de formulario de contacto

    Como propietario del sitio, eres responsable de resolver las dudas de tu audiencia y responder a sus sugerencias. Por tanto, en algún momento tras el proceso de creación de tu sitio, es posible que quieran —o incluso necesiten— ponerse en contacto contigo; y para esto sirven los plugins de formularios de contacto. Si bien es posible crear un formulario de contacto para tu sitio desde cero, tenemos que admitir que hay ocasiones en las que hacerlo no sería muy práctico, teniendo en cuenta que sin duda te llevará algo de tiempo, especialmente si eres principiante.

    WPBeginner cuenta con una lista de los que califican como los mejores plugins de formularios de contacto del mercado, mientras que SitePoint tiene un artículo similar sobre aquellos que están disponibles de forma gratuita.

    2. Plugin de redes sociales

    A menos que seas un sitio web al que la gente acuda en masa con frecuencia, es indudable que resulta un poco complicado conseguir que los contenidos de tu sitio (como los artículos) tengan difusión. Es por esto por lo que a veces surge la necesidad de un plugin de redes sociales. Lo más probable es que, si tu público encuentra tu contenido lo suficientemente interesante, quiera compartirlo con sus amigos en sus perfiles sociales.

    3. Herramientas de comentarios / Disqus

    Como ya hemos mencionado, comunicarse con tu audiencia es algo imprescindible, sobre todo si el contenido de tu sitio gira en torno a artículos monográficos. Conocer a tu público también te da ventaja; puedes utilizar las opiniones que tengan para mejorar tu sitio y tus productos.

    Disqus es una herramienta de comentarios muy popular, y una de las más conocidas del mercado. Kikolani también dispone de un artículo muy práctico que podría ayudarte a decidir qué herramienta de comentarios funcionará mejor para tu sitio.

    Hay más plugins de los que crees

    La lista de plugins disponibles para sitios de WordPress no acaba con este artículo. Estos no son más que unos pocos de los que consideramos muy útiles; el mundo de los plugins de WordPress alberga sin duda muchos más que los ocho que hemos enumerado anteriormente.

    Dicho esto, es muy probable que no hayamos podido abarcarlo todo. ¿Tienes en mente algún plugin que creas que debería figurar en la lista? ¡Cuéntanoslo en la sección de comentarios abajo y puede que incluyamos tus sugerencias en alguno de nuestros futuros artículos!

    ¡Feliz creación del sitio!

  • Cómo personalizar por tu cuenta las secciones prediseñadas de Page Builder Sandwich

    We’ve been getting quite a few inquiries the past week about Pre-Design Sections (and by extension, the PBS Templates), what they are, and how they can be accessed.

    So in this article, we’ll be teaching you how to not only access them, but also how to maximize these features of Page Builder Sandwich: By customizing them and making them your own.

    Accessing the Pre-Designed Sections

    If you aren’t familiar yet, all you have to do to access the Pre-Designed sections is to hover your mouse onto the left side of your screen, and access the Elements Inspector. This is the sidebar that lets you drag and drop elements directly onto your content area.

    Say hello to the Elements Inspector!

    Once it’s accessed, simply scroll down to the bottom and select Pre-Designed Sections. A library of the sections will pop up. Select one from the collection, drag and drop, and it’ll show up on your content area, like so:

    From here, you can move the elements within the section around, or move the entire thing and adjust its position. And there you have it! You’ve selected a Pre-Designed Section from Page Builder Sandwich.

    Now it’s time to add in your own twist: By customizing and tweaking with the elements’ settings within the selected section.

    Customizing the Pre-Designed Sections

    Each element’s setting within any one Pre-Designed section can be edited and customized according to your website’s needs and your personal taste.

    This means everything included in your selected Pre-Designed section – like text, colors, images, buttons, everything – can be edited and tinkered with by you.

    Por ejemplo, si no estás satisfecho con el tono azul verdoso predeterminado y la imagen del campo de trigo en la sección prediseñada por defecto que aparece a continuación…

    You can adjust it. For instance, if I wanted a different background tint on the left:

    Or if you wanted to replace the image of the wheat field on the right:

    Or even change the button style, margin, padding, and font:

    …You can.

    Para comparar:

    Default PBS Pre-Designed Section

    The same Pre-Designed Section, completely tweaked and customized. Notice the different font, color scheme, button style, photo, and margin width. You can actually take this further, and let your imagination run wild.

    Here are a few more examples on how you can spice up our Pre-Designed Sections

    Default Pre-Designed Section from Sandwich

    The same Pre-Designed Section, customized

    You can do it with our Full-Page Templates, too:

    Default Template from Sandwich

    The same Template, customized

    Conclusion

    Las secciones prediseñadas de Page Builder Sandwich ofrecen mucho más de lo que crees.

    Tweak and customize them to make them completely your own, or even use them as a starting point for when you don’t want to design your page from the ground up.

    Recuerda, Page Builder Sandwich está aquí para ayudarte a diseñar en menos tiempo. Aprovechar al máximo nuestras secciones prediseñadas y plantillas de página completa te ayudará a lograrlo.

    Design in less time!

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

    Try Live Preview

  • #PBSUpdate: 200 % de aumento de rendimiento y nuevos elementos

    Only a few weeks ago, we released PBS Version 4.1. This update included tweaks on the formatting bar and some text formatting updates, among others. For Version 2.0 though, while we made additional features, we decided to focus more on PBS’ overall performance.

    200% Performance Increase & A Little Help from CodeInWP

    Lo que impulsó este cambio fue un artículo sobre las expectativas de los maquetadores visuales de CodeInWP. Incluía una breve lista de sus favoritos, analizando cada uno según criterios específicos. Aunque Page Builder Sandwich no llegó a entrar en la lista en sí, también se nos mencionó brevemente en el artículo:

    With Page Builder Sandwich you won’t also lose your content and will be able to continue updating the page easily via a default WordPress editor.

    Leer esto fue lo que impulsó a nuestro equipo a mejorar PBS aún más. Y, al ver que no estábamos incluidos en la lista, también tuvimos curiosidad al mismo tiempo por saber cuáles eran nuestras deficiencias concretas. Poco después contactamos con CodeInWP para pedir una breve reseña de PBS, y la autora invitada Ann Taylor nos dio una respuesta muy constructiva y útil:

    “…I played around with a free version a bit. It shows a lot of promise: lots of modules, pretty intuitive UI, great WYSIWYG experience, everything is dragged around easily. However, when I had around 10 modules on the page, it became hard to continue working with it because of low editing speed…”

    Estos excelentes comentarios nos motivaron aún más a investigar la velocidad y el rendimiento de PBS. Probamos muchos escenarios diferentes y encontramos enormes cuellos de botella en la velocidad. La causa principal de los problemas de rendimiento fueron los diversos cálculos que realizaba el plugin para mostrar contornos, barras de herramientas y otras referencias visuales de edición. A continuación se muestra un gráfico del rendimiento de la versión 4.1 de PBS en Chrome:

    Here are the important points of the graph in a nutshell:

    • Las áreas moradas altas son malas
    • Las áreas moradas anchas son peores
    • Hemos acelerado mucho las cosas, y ahora nuestro gráfico para la versión 4.2 tiene este aspecto:

    If you compare the tall and wide purple areas from the two graphs, that means that we have achieved a 200% performance increase!

    4 New Elements

    Lo que más nos gusta de estos 4 nuevos elementos es que permiten crear secciones completas de páginas web de forma rápida y eficiente, sin necesidad de arrastrar elementos al espacio de trabajo de PBS uno a uno. También te daremos la oportunidad de elegir entre diferentes estilos para que tengas más margen a la hora de personalizar estos tres nuevos elementos según tus necesidades de diseño.

    Spacer Element

    Es fácil ajustar los márgenes de los elementos para conseguir el espacio que necesitas. El elemento espaciador se puede utilizar como alternativa a esto. Resulta especialmente útil si quieres que ciertas filas no se reduzcan demasiado en pantallas móviles.

    Featurette Element

    El elemento featurette se puede utilizar para crear secciones de tu página con mayor rapidez. Estas secciones pueden incluir cabeceras hero, carruseles de testimonios y otros elementos que puedes utilizar para mejorar la funcionalidad de tu página.

    Since all of the Featurette Elements are pre-designed, all you’ll have to do is simply drag the “Featurette” button from the Elements Tab, and choose what you want to add on your workspace from there.

    Team Members Element

    El elemento de miembros del equipo es perfecto para presentar a los integrantes de tu equipo a los visitantes de tu sitio. Por lo general, una sección como esta incluye una foto de un miembro del equipo, así como una breve descripción en la parte inferior.

    Gallery Element

    Este elemento se utiliza para crear galerías de fotos. Anteriormente, tenías que arrastrar elementos independientes (como botones, marcos, etc.) al espacio de trabajo de PBS uno a uno para crear una galería. Sin embargo, este nuevo elemento lo hace por ti, haciendo que el proceso sea sencillo y sin complicaciones.

    A Huge Thank You

    La versión 4.2 es una de nuestras actualizaciones más importantes hasta la fecha. Al fin y al cabo, el rendimiento y la funcionalidad son cruciales para cualquier gran plugin. Nos gustaría dar las gracias a @Ann Taylor y a CodeInWP por ofrecernos comentarios constructivos y desearnos suerte en nuestro camino. Y a todos los usuarios de PBS, un enorme agradecimiento también de nuestra parte por vuestro continuo apoyo.

    Pronto lanzaremos aún más actualizaciones (incluida nuestra prometida función de Google Fonts, entre otras), ¡así que estad atentos!

    Hasta entonces, ¡feliz creación de sitios web de parte del equipo de PBS!

  • ¡Feliz Cuatro de Julio! ¡20 % de descuento en TODAS las licencias hasta el 6 de julio!

    ¡Consigue un 20% DE DESCUENTO en todas las licencias de Page Builder Sandwich del 4 de julio al 6 de julio de 2017! ¡Solo introduce el código promocional 4JULY2017 para obtener tu descuento hoy!

  • 10 formas en que tu sitio puede destacar en la generación de clientes potenciales y cómo PBS puede ayudarte a lograrlo

    Page Builder Sandwich helps you, well… build websites.

    Keeping your audience reeled into your page (and successfully generating leads) is a different story altogether, though.

    Don’t get us wrong. Lots of sites can achieve this without a worry, but that’s usually because they spend a significant amount of time and research doing just that.

    In contrast, some sites admittedly have a little trouble pulling it off, and more often than not, some of them don’t know where to begin. But don’t worry – Page Builder Sandwich will try to lend you a hand with that very same thing.

    Why is it Important to Generate Leads?

    One crucial thing to remember is that generating leads takes more than just buying a domain and setting a website up.

    Now, before we get too into it, take note that Page Builder Sandwich isn’t a marketing website.

    Pero en cualquier caso, es importante saber que hay una ciencia detrás de la generación de clientes potenciales y, aunque nosotros mismos no seamos especialistas en marketing digital, es fundamental señalar que una conversión exitosa de clientes potenciales también tiene que ver con la ejecución adecuada del diseño y el contenido. Ahí es donde entramos nosotros.

    «Pero ¿cómo podéis ayudarnos con el aspecto de marketing de todo esto?»

    Great question! A few weeks ago we began corresponding with Straight North, a blog that specializes in digital marketing and lead conversion. They’ve given us some really tips which we hope you guys find helpful in your site-building journey.

    Now, remember that there could be lots of factors as to why your website isn’t generating the amount of leads you’d like. The first step is to identify what these factors are, and hopefully, this list can help you out with doing just that.

    TIP #1: Create Content that Stimulates Action

    According to Straight North, 84% of website conversions occur on the first visit, and only 11% convert in the second.

    En otras palabras, las primeras impresiones importan.

    Al igual que una mala audición no hace que los actores consigan papeles protagonistas, la primera visita de alguien a tu sitio web podría ser decisiva para tu éxito o tu fracaso.

    That’s why it’s you and your team’s job to try and convince people to stay glued to your page.

    Straight North suggests that posting copy and content (both text and images) is a great way to catch your visitors’ attention. Remember to always allot sufficient time to research on what makes good copy and good content, and never underestimate either.

    Aquí tienes un par de sitios web que podrían ayudarte en tu camino hacia la generación de clientes potenciales con éxito:

    How PBS Can Help:

    Wow your site visitors by using interactive PBS elements like the Carousel, or use Parallax Scrolling, and Video Backgrounds to catch their attention. Remember to execute their placement in a balanced way though, as to not overwhelm your audience.

    TIP #2: Intuitive Navigation

    In the realm of web development and site-building, intuitiveness in the user interface (or UI) is key.

    This means that when your visitors or users find their way around your site by intuition (i.e. easy site-navigation and straightforward instructions), they’re more likely to stay glued on your site.

    Ahora bien, si navegar por tu sitio web resulta ser una experiencia frustrante, es muy probable que tus visitantes no se queden el tiempo suficiente para escuchar lo que tienes que decir y lo que tienes para ofrecerles.

    Straight North adds that getting too “clever and creative” with navigation labels is a bad idea, and suggest that you use terms like “Contact Us” for call-to-action buttons, rather than using vague labels like “Interact!” or “Dialog.” Remember that bombarding your site with too much jargon can cause frustration to your audience as well.

    So as long as navigating through your website comes to the user as second nature, then you have one less thing to worry about when trying to convert leads.

    How PBS Can Help:

    Page Builder Sandwich’s UI is highly intuitive, and is akin to using a Word processor (like Google Docs and Microsoft Word). Check out our demo to get some inspiration on how you can apply intuitive changes to your site, too!

    OTHER PAGE BUILDERS …have too much stuff going on.

    PAGE BUILDER SANDWICH …gets straight to the point.

    TIP #3: Use Relevant, Custom Imagery

    Your images and how they’re presented also matter, and they matter a lot.

    While it may seem trivial to some, uploading boring stock images, stretched out/pixelzed photos, or badly-presented typography is a huge factor that dictates whether your visitors stay on your site, or move to a better, more credible-looking alternative.

    How PBS Can Help:

    Because it’s WordPress-run, PBS lets you post high-quality photos in your website. As long as you have the right image dimensions, you shouldn’t have a problem with posting photos.

    Additional lifehack: You can also check out Pexels.com and Unsplash.com to get awesome, high-quality stock photos!

    TIP #4: Persuasive Credibility Elements

    Skepticism is a huge conversion killer.

    That’s why more often than not, it’s always a good idea to add in elements that back up your credibility as a website (or business), like testimonials from credible sources, and logos of reputable companies or groups that you’ve worked with. So use customer testimonials, show logos of well-known customers, and include third-party mentions in your content.

    How PBS Can Help:

    Use PBS features to vouch for you. Display your customers’ testimonials in a Carousel, or use the Featurette element to showcase third-party mentions, or make use of the column element to effectively display logos of your well-known customers (like in the graphic above).

    TIP #5: Get Personal!

    Straight North says that using a lighter, casual tone makes all the difference when writing content (such as articles and bio’s) on your site. This lets your users know that you’re human too, and not just some bot trying to get a run for their money (which we hope you aren’t).

    How PBS Can Help:

    While this part is entirely up to you and your team, it wouldn’t hurt to use elements such as the Featurette, Gallery, and Image Box to liven up your bio’s as well. Adding in other PBS elements like Social Media Icons can help put a personal touch to your pages, too.

    PBS’ Industry Template makes full use of the Image Box Elements for its About Us and Feature Sections.

    TIP #6: Irresistible Calls-to-Action

    Calls-to-Action (CTA) are a crucial part of generating leads.

    You will FAIL to capture first-visit conversions unless you ASK. – Straight North

    Just asking isn’t enough, though. According to Straight North, your calls-to-action should be executed both “skillfully and persuasively”.

    The trick is to have effective Calls-to-Actions plus a good combination of smart consistent placement, offers that give off substance, time-sensitive offers (giving them offers for a set, limited time will give them a sense of urgency), and most importantly, guaranteed offers.

    You want your site to trust you. “Take away all arguments for delay, and conversions will increase”, Straight North says.

    How PBS Can Help:

    PBS’ Call-to-Action Button – as well as other elements such as the Countdown and Page Heading element – can help ease your burden regarding this task.

    Executing them correctly is up to you and your team though, so make sure to give time to research about CTA placements and other marketing tips.

    Aquí tienes algunos recursos que pueden ayudarte a mejorar el rendimiento de tus llamadas a la acción (CTA):

    TIP #7: User-Friendly Forms

    El hecho de que una persona te envíe su información a través de un formulario en tu sitio web es, en última instancia, lo que determina el éxito en la conversión de un cliente potencial.

    This is why placing user-friendly contact forms on your site is of the utmost importance. They’re the ultimate “make-or-break stage of a great conversion opportunity”, says Straight North.

    A couple of PBS’ third-party plugins available for shortcode mapping

    So don’t intimidate your site visitors by overwhelming them with too many question forms, or have them exhaust too much energy, like having them type long sentences instead of choosing their answers from a drop-down list.

    Letting them know that you value their privacy is also a must. Be sure to place clean, good-looking forms on your site so as to boost credibility.

    How PBS Can Help:

    With PBS’ Shortcode Mapper feature, you can place awesome, reputable contact forms like Advanced Custom Fields (ACF) and Contact Form 7 on your site.

    TIP #8: Prominently Displayed Phone Numbers (or Contact Details)

    Contact number and social media buttons displayed prominently in PBS’ Restaurant Template

    Mostrar los números de teléfono de forma coherente y destacada es imprescindible si eres el tipo de negocio que ofrece asistencia telefónica. Straight North añade que invertir en números gratuitos también puede dar un buen impulso a tu conversión.

    Si eres una empresa tecnológica como nosotros, también es una buena idea mostrar tu dirección de correo electrónico (u otras formas en que tus visitantes puedan ponerse en contacto contigo) en tu sitio web.

    How PBS Can Help:

    PBS’ Full Page Niche-Based Templates have fields that let you feature phone numbers and other contact information more prominently, so that your visitors can reach you right away.

    TIP #9: Continuous Testing

    Straight North attests to the importance of site maintenance and testing: “No matter how good your website is in converting leads, it can always be better.”

    Esto se aplica a cualquier sitio web, y no solo a uno que intente convertir clientes potenciales. Asegurarte de que tu sitio esté en óptimas condiciones y de que tus clientes estén siempre satisfechos ayudará a que tu negocio llegue muy lejos.

    How PBS Can Help:

    This one is up to you, but if you’d like a tip: the PBS Team continuously tests the site and page builder for any bugs, and always work to make sure you guys are satisfied. We don’t exactly have a feature for making sure you do regular tests on your site, so this one’s entirely up to you and your team. Do it, and do it well!

    TIP #10: Mobile-Friendly Design

    Almost everyone has a cellphone or tablet; but while only 23 percent of lead conversion rates come from mobile devices, it absolutely will not do to ignore any sort of potential conversions, no matter the percentage (leads are still leads, after all).

    “Users converting from desktop view may have seen the site initially on a mobile device,” Straight North says. “Mobile conversions are (also) likely to grow as mobile Internet access continues to soar at the expense of desktops.”

    You can preview your site on mobile view directly on desktop

    How PBS Can Help:

    Page Builder Sandwich is Mobile Responsive. You can view PBS-built sites on mobile, as well as check previews of your mobile site directly through desktop while editing. This way, you won’t have to keep switching to your phone in order to check if your site looks good on mobile.

    Everything Matters in Site-Building

    At the root of it all, it’s very, very important to understand that everything on your website – down to the smallest of details – has an impact on your audience.

    The quality of your copy, images, your layout – all of it matters, and it matters a lot.

    Y uno de los mayores errores que comete la gente al intentar generar clientes potenciales es precisamente este: dar por sentados pequeños aspectos que conforman el sitio web (como el diseño, el texto y otros contenidos).

    Hopefully your website garners the success it very well deserves; it’s been built with PBS, after all. ?

    ¡Mucha suerte en todos tus proyectos y gracias, como siempre, por usar Page Builder Sandwich!

    ¡Feliz creación de sitios web!

  • ACTUALIZACIÓN DE PBS: Versión 4.1 y Usabilidad

    Tras el lanzamiento de la versión 4.0 el pasado mes de enero, hemos seguido trabajando en el desarrollo de PBS, añadiendo tanto correcciones como mejoras. Nos hace mucha ilusión compartirlas con vosotros, así que esto es lo que tenemos preparado para la actualización de la versión 4.1.

    Mejoras en la barra de formato

    La última actualización 4.1 gira en torno a la barra de formato de texto. Aparte de resolver una gran cantidad de errores, también hemos mejorado algunos aspectos de la barra que deberían hacer que vuestra experiencia con PBS sea más fluida y eficiente.

    Actualizaciones del selector de color

    En las versiones anteriores de PBS, el selector de color presentaba algunos problemas que resultaban un tanto incómodos para el proceso de edición, en concreto a la hora de editar texto y color de texto. Sin embargo, para la v4.1, hemos solucionado el problema y realizado nuevos ajustes para que la edición de texto sea sencilla y sin complicaciones.

    • Más muestras de color para facilitar la selección del color
    • El selector de color ahora muestra la transparencia
    • Corrección de errores relacionados con la edición del color del texto

    Actualizaciones del formato de texto

    Anteriormente, teníamos algunos botones en los que había que hacer clic repetidamente para aumentar un valor y, a continuación, mantener pulsado CTRL/CMD y hacer clic para reducirlo. Al principio pensábamos que esto era intuitivo, pero los usuarios nos han comentado que no resultaba evidente. Hemos solucionado esas incoherencias en esta actualización.

    • Ahora la altura de línea es más fácil de acceder: arrastra el control deslizante para ajustarla al tamaño deseado o simplemente introduce el tamaño que quieras en el espacio indicado
    • El botón de tamaño de fuente se ha dividido en dos botones: reducir y aumentar para facilitar su uso
    • Aumentar/reducir el tamaño de fuente también es más accesible, ahora con px como unidad de medida para facilitar la edición. Anteriormente mostraba una unidad «x» que en realidad no significaba nada
    • Los botones de alineación izquierda/centro/derecha/justificado ahora están agrupados para reducir los botones mostrados
    • El botón «Borrar formato» ahora elimina los otros estilos (como line-height), cosa que antes no hacía

    Mejoras en la línea horizontal

    Anteriormente, la línea horizontal daba algunos problemas. Con algunos temas, las líneas horizontales eran tan diminutas que resultaba difícil hacer clic en ellas. Para solucionar esto, hemos quitado la línea horizontal de la barra de formato y la hemos convertido en su propio elemento. Además de eso, ahora también puedes cambiar los colores de la línea a través del selector de color.

    Próximas actualizaciones: ¿qué nos depara el futuro de PBS?

    Como decíamos, todavía tenemos novedades (y más actualizaciones) en camino. Aquí tenéis un pequeño adelanto de lo que os espera en el futuro:

    • Google Fonts (¡por fin!)
    • Estamos sopesando la idea de que la barra de formato de texto sea algo más que un simple lugar para dar formato al texto. ¿Y si los botones cambiaran según el contexto actual? Por ejemplo, estaría genial que apareciera un botón de alineación vertical al editar texto dentro de una columna.

    ¿Qué os gustaría ver en futuras actualizaciones de PBS?

    Siempre estamos dispuestos a mejorar PBS, así que si tenéis alguna sugerencia, ¡hacédnosla llegar! ¿Tenéis alguna petición de funcionalidad que os gustaría añadir a nuestra creciente lista? ¿Alguna otra cosa que creáis que necesita ajustes en la versión actual? ¡Contádnoslo en los comentarios de abajo!

    ¡Feliz creación de sitios web!

  • Añade fácilmente formularios de suscripción a la newsletter por correo electrónico

    Easily-Add-Email-Newsletter-Signup-FormsAdding an email newsletter sign up form to your site is a great way to grow your website’s following and to keep your website visitors interested in your site or product. And now you can easily add and customize newsletter sign up forms directly in your designs.

    preview-newsletterNew in Page Builder Sandwich is the Newsletter Element (check the short gif above). Now you can add a newsletter sign up form for your MailChimp, AWeber or MailPoet newsletter lists directly into your designs.

    Normalmente, tendrías que instalar otro plugin, luego quizás añadir un shortcode en algún sitio, o tendrías que pasar por una ventana emergente y rellenar algunos campos, o tal vez tendrías que configurar un widget para que funcione tu formulario de suscripción al boletín. Ahora, todas las complejidades de añadir formularios de suscripción al boletín han desaparecido. Solo tienes que añadir el elemento Newsletter en tu página, introducir las claves API de tu lista y debería funcionar de inmediato.

    Puedes personalizar aún más tu formulario de registro haciendo clic simplemente en el campo de correo electrónico (donde puedes cambiar sus colores, tamaño, borde y mucho más) o en el botón (para luego añadir iconos, cambiar el tamaño de tu botón o incluso hacer que solo aparezca cuando el visitante empiece a escribir su dirección de correo electrónico). Puedes personalizar totalmente el aspecto para adaptarlo a tu diseño. ¿Quieres que el campo cambie de color cuando el usuario esté escribiendo? Puedes hacerlo fácilmente con un selector de color. ¿Necesitas un diseño minimalista y que el campo sea solo un borde? ¡No hay problema!

    Una ventaja genial es que el elemento del boletín no interrumpe la navegación del usuario en tu sitio. Una vez que se suscriba, la página no se recargará y el formulario de registro simplemente se sustituirá por un mensaje de «gracias». Este mensaje y sus colores también son personalizables.

    Al igual que con el resto de Page Builder Sandwich, puedes colocar tu nuevo formulario de suscripción al boletín donde quieras; solo tienes que arrastrarlo dentro de tus filas o a otra ubicación.

    ¿Son importantes las listas de correo?

    La respuesta corta es sí. Ya sabes que si tienes una cuenta de Twitter, otros usuarios de Twitter pueden literalmente «seguirte» y verán tus Tweets; una lista de correo es la forma en que tus visitantes pueden seguir tu sitio a través del correo electrónico.

    ¿Aún no tienes una lista de correo?

    If you don’t have a mailing list yet, now is a good time to get started. Getting a newsletter service like MailChimp or AWeber is good since they do the heavy lifting of managing your subscribers and blasting an email to your subscribers easily. They also have newsletter builders that will let you create a newsletter campaign easily. The good thing is they have free plans, so you won’t need to shell out cash in order to try it out.

    If you’re more of a I-like-to-handle-it-myself guy or gal, then you might consider using MailPoet. It’s downloadable free from wordpress.org and they have a paid model as well. With MailPoet, you’ll be able to see your subscribers within your dashboard and you can also send out emails from there. It’s easy to use as well and just takes literally less than 5 minutes to fully set up in your site (Yes, I’ve tried).

    Más información sobre Page Builder Sandwich

  • Versión 3.0: Replantear cómo debería funcionar un creador de páginas

    version-3-0-rethinking-how-a-page-builder-should-workHan pasado 10 meses desde que lanzamos Page Builder Sandwich al público. Ahora contamos con alrededor de 6000 instalaciones activas, y eso es todo un logro para nosotros. También hemos recibido una gran cantidad de comentarios al respecto, tanto buenos como malos. El consenso, sin embargo, es que a la gente le gusta lo fácil que es crear composiciones y su contenido en comparación con otros constructores de páginas del mercado.

    Gran parte de los comentarios que recibimos fueron solicitudes de funciones, y hemos añadido muchas de ellas a lo largo de los últimos meses. Pero, a medida que lo hacíamos, también comenzamos a cambiar lentamente la interfaz de usuario en el proceso. Y, en consecuencia, también estábamos cambiando la experiencia de usuario… a peor. Se llegó a un punto, no obstante, en el que necesitábamos repensar la interfaz, porque sencillamente ya no funcionaba con fluidez y las distintas funciones tampoco encajaban bien con ella.

    La interfaz obsoleta

    En las versiones anteriores de PBS, queríamos que todo tuviera forma de botones. ¿Por qué? Porque los botones son fáciles de usar. Solo tienes que… hacer clic en ellos. En las versiones más antiguas del inspector (la barra lateral de la imagen superior), hacer clic en un botón aumentaba un valor, y hacer Mayús+clic en un botón lo disminuía. Parece bastante fácil. Pero con la incorporación de carruseles, pestañas, mapas y otros nuevos elementos y funciones, todos esos botones se convirtieron en una mezcolanza de diferentes iconos con distintos diseños, y empezaron a parecerse más a jeroglíficos que a una interfaz atractiva. Esto no era un problema para los usuarios experimentados, pero resulta bastante intimidante a la vista si acabas de llegar a PBS.

    Por otra parte, empezaron a surgir un par de problemas en el inspector. La idea original era hacer que todo fuera sencillo y estuviera disponible dentro del inspector. Y por todo, me refería a todo: desde convertir texto en encabezados hasta cambiar colores de fondo, colores de fuente, lo que se te ocurra. En su estado actual, sin embargo, el inspector ahora contiene un montón de opciones que te obligan a usar la rueda del ratón para desplazarte hacia arriba y hacia abajo constantemente. Algo bastante diferente del inspector que esperaba crear en su momento para los usuarios.

    Por último, hace poco introdujimos el mapeo de shortcodes para tus plugins favoritos. Esta función nos obligó a crear campos de texto, controles deslizantes de números, casillas de verificación y nuevos tipos de opciones adicionales necesarios para que tu experiencia de edición de shortcodes fuera más agradable. Al principio fue una buena idea y, sí, facilitó la manipulación de shortcodes. Pero, una vez más, esta función se desviaba de nuestra interfaz de «solo botones». En retrospectiva, era realmente imposible utilizar únicamente botones para modificar los atributos de los shortcodes. Ahora, en la última versión, nos encontramos con dos tipos de controles: los botones y los campos de shortcode.

    Hay algunas razones más que nos hicieron decidir que nuestra interfaz ya no era eficaz (o adecuada para nuestras necesidades), pero los puntos anteriores son los principales. Sin embargo, siempre tuvimos una cosa clara: sabíamos que teníamos que actualizar la interfaz.

    Definir cómo debería funcionar idealmente un constructor de páginas

    En lugar de lanzarnos a cambiar las cosas de inmediato, dimos cien pasos atrás para observar toda la experiencia del constructor de páginas en su conjunto. Queríamos insuflar nueva vida a la interfaz. A decir verdad, no queríamos tener que reconstruirla año tras año. Es  agotador y definitivamente no aporta una ayuda significativa a la comunidad de WordPress. Esta vez, decidimos hacer las cosas despacio y con cuidado. Hemos estudiado cada rincón de Page Builder Sandwich y qué es lo que lo convierte en un buen maquetador, y finalmente hemos  plasmado toda la experiencia de edición en unos pocos conceptos esenciales.

    Concepto esencial n.º 1: Escribir directamente en tu contenido para editar elementos

    Uno de los motivos principales para instalar un constructor de páginas es librarse de las limitaciones del editor de texto del backend de WordPress. No es que el editor del backend no sea bueno, pero al crear tus páginas web, no te muestra de inmediato cómo se vería tu página para los visitantes de tu sitio, ni te permite maquetar tu contenido más allá de un diseño de una sola columna. Solo puedes ver tu texto allí y algunas imágenes, pero nada de los elementos más elaborados (p. ej., formularios de contacto). Puedes añadir shortcodes, sí, pero no se mostrarán en su forma renderizada*.

    * Hay plugins creados por terceros para solucionar esto, como Shortcake UI, pero esa no es la cuestión.

    Ahí es donde entran en juego los constructores de páginas frontend. Llevan la experiencia de edición fuera del backend y la trasladan al frontend, permitiéndote editar tu sitio tal y como lo verían realmente tus visitantes. Como diría Pippin: lo que ves es lo que obtienes (WYSIWYG).

    Otra ventaja de ser un editor frontend es que te permite editar el texto directamente. Escribir en los encabezados y párrafos aporta la sencillez habitual de un procesador de textos a la creación de sitios web. Los botones y las etiquetas de las pestañas también deberían poder modificarse simplemente haciendo clic sobre ellos y escribiendo.

    Este es un aspecto en el que la mayoría de los demás constructores de páginas no dan la talla. La mayoría te obligan a escribir dentro de un campo de texto para editarlo todo. Una vez más, este no debería ser el caso en auténticos maquetadores frontend. Escribir y editar texto directamente ha sido un punto fuerte de Page Builder Sandwich desde la versión 2, y nos hemos asegurado de que esto se mantenga en la versión 3.

    Concepto esencial n.º 2: Utilizar el ratón para realizar ajustes rápidos

    El ratón es una herramienta potente que a menudo se descuida en los maquetadores de páginas. Muchas veces, los constructores de páginas lo utilizan solo para permitir a los usuarios arrastrar elementos y soltarlos en diferentes ubicaciones, o para hacer clic en botones o campos de entrada. Aunque esto está bien, se puede hacer mucho más con el ratón en la maquetación de páginas.

    Por un lado, existe una fantástica respuesta visual al utilizar el ratón como herramienta de edición en la página, especialmente al ajustar propiedades visuales como márgenes, rellenos y tamaños. Ahora, retocar tus elementos se convierte en una experiencia natural.

    En la versión 3 de PBS, podrás ajustar varias cosas utilizando el ratón. Podrás ajustar márgenes/espaciados entre elementos individuales, los rellenos dentro de tus columnas, así como los tamaños de imágenes, iconos y mapas. También hemos sustituido por controles deslizantes aquellos botones que te permitían cambiar valores numéricos.

    Concepto esencial n.º 3: El texto debe ser fácil de estilizar

    Si te alejas un poco de la pantalla, notarás que la mayor parte de lo que añades en tus páginas web es contenido textual. Sí, incluimos imágenes e iconos para acompañarlo, y últimamente solemos añadir imágenes más grandes en nuestros sitios. Pero la mayor parte del contenido importante es texto: encabezados, listas con viñetas, párrafos, citas, etc. Junto a esto está cómo damos estilo a nuestro texto para adaptarlo a nuestros diseños: cambiamos sus tamaños y colores, o lo ponemos en negrita o cursiva. Esto sirve para que nuestro contenido sea más legible, relevante y atractivo para nuestros lectores.

    Dado que aplicamos estilos al texto con frecuencia, los botones que nos permiten cambiarlos deberían ser muy accesibles. No deberían estar escondidos dentro de una ventana emergente que tengamos que abrir previamente. La mayoría de los constructores de páginas sufren este mal. Con tal de que su interfaz de usuario se considere «despejada», ocultan a la vista incluso las opciones más utilizadas.

    Para solucionar esto, nos fijamos en los procesadores de texto más habituales. Observamos que suelen tener una fila con un gran número de botones cerca de la parte superior de la pantalla para dar formato al texto, y copiamos esa misma disposición para la versión 3. Ahora disponemos de una fila con todos los botones de estilo de texto siempre visible en la parte superior de la pantalla. Esto hace que dar estilo sea realmente rápido y se convierta en algo prácticamente instintivo al editar texto.

    Concepto esencial n.º 4: Las opciones avanzadas de estilo deben ser flexibles pero fáciles de entender

    La clave de un constructor de páginas es que debe permitir a las personas crear diseños impresionantes fácilmente. Esto significa que debemos ofrecer una gran variedad de ajustes y opciones sin que ello implique una curva de aprendizaje compleja. Poder ajustar márgenes, rellenos y dar estilo al texto está muy bien, pero esas opciones tienen sus límites. Necesitarás funciones mucho más elaboradas para completar el trabajo, tales como imágenes de fondo, patrones, bordes, fondos fijos y más. Amontonar todos esos ajustes puede resultar abrumador, por lo que hemos simplificado algunos de ellos y los hemos organizado por categorías para hacer las cosas más intuitivas en la versión 3.

    Concepto esencial n.º 5: Compatibilidad con shortcodes

    Por último, no olvidemos que nuestro maquetador de páginas se apoya sobre WordPress. Debemos adaptarnos a la plataforma y a sus características, y no limitarlas ni alejarnos de ellas. Una funcionalidad enorme que ofrece WordPress son los shortcodes. Esto no significa que todo el contenido deba estar compuesto por shortcodes —eso sería un caos—, sino que simplemente debemos ser compatibles con ellos. Muchos plugins y temas utilizan shortcodes, y sería una gran pérdida si los ignoráramos por completo. De hecho, los shortcodes brindan a los usuarios la máxima flexibilidad a la hora de crear páginas.

    Hace unas semanas introdujimos nuestro sistema de mapeo de shortcodes y, gracias a él, hemos mapeado cientos de shortcodes de cientos de plugins. Hemos dado prioridad a los plugins más populares del directorio de plugins de WordPress, por lo que es muy probable que los encuentres en tus propios sitios. Esto no ha hecho más que consolidarse en la versión 3, y continuaremos mejorándolo de cara al futuro.

    Conclusión

    Hemos reunido todas las propiedades esenciales descritas arriba y las hemos incorporado en la versión 3 de Page Builder Sandwich. Es el mejor constructor de páginas que hemos creado para WordPress hasta la fecha. Es más intuitivo y natural de usar, ofrece un rendimiento más rápido, es más fácil de utilizar y resulta más accesible que nunca.

    Si tienes alguna sugerencia sobre alguna función que consideres imprescindible en un constructor de páginas, háznoslo saber dejándonos un comentario a continuación.

  • Donde las cosas se ponen un poco técnicas: cómo hicimos realidad nuestra versión del mapeo de shortcodes

    How-We-Made-Our-Version-Of-Shortcode-Mapping-Happen-2En el artículo anterior, hablamos sobre los conceptos básicos del mapeo de shortcodes y de cómo puedes acceder a sus fantásticas ventajas. Hemos decidido dividir el artículo dedicado a la versión de Page Builder Sandwich del mapeo de shortcodes, ya que el siguiente texto puede volverse un poco más técnico.

    A continuación, se ofrecen descripciones más detalladas del funcionamiento interno de nuestra función de mapeo de shortcodes y de cómo logramos que funcionara.

    Un proceso automatizado

    Para decidir qué plugins incluir en el mapeador de shortcodes, creamos un script automatizado que recopila los plugins más destacados del directorio de plugins de WordPress según los siguientes criterios:

    • Dentro de los 1000 plugins más populares, mejor valorados y actualizados, con al menos 4000 instalaciones activas,
    • Con al menos 4000 instalaciones activas,
    • Con al menos 20 valoraciones, y;
    • Con una valoración media de al menos 3 estrellas

    Ejecutamos esta consulta a diario en el directorio de plugins de WordPress. Estos filtros garantizan que obtengamos una lista de plugins de buena calidad que utiliza mucha gente. En el momento en que se escribió esto, este criterio dio como resultado 800 plugins. Eso es un montón. De verdad, un montón.

    Algunos de los plugins más populares detectados para el mapeo de shortcodes.
    Algunos de los plugins más populares detectados para el mapeo de shortcodes.

    Luego ejecutamos una serie de comprobaciones automatizadas en el código fuente de cada plugin para averiguar si contiene algún shortcode y, a continuación, intentamos encontrar todos esos shortcodes, incluidos todos sus atributos. Al procesar los datos, esto dio como resultado más de 2000 shortcodes. ¡Doble sorpresa! Los shortcodes detectados se introducen después en la base de datos de mapeo de shortcodes para su inspección manual.

    Al final de este proceso, nos queda una lista enorme de plugins y cuáles son sus posibles shortcodes. Ahora es cuestión de depurar estos datos para asegurarse de que todo esté correcto.

    Un proceso manual

    Esta es probablemente la parte más difícil de todo el sistema de mapeo. El código de los plugins viene en diferentes formas y tamaños; nuestros scripts no detectan automáticamente todos los shortcodes. Aunque el Codex de WordPress indica que se use la función `shortcode_atts` para filtrar los atributos de un shortcode, esto es solo una recomendación y no todo el mundo lo hace. Tampoco hay una forma infalible de comprobar el interior de un shortcode cuando se instala un plugin.

    Para asegurarnos de obtener correctamente todos los shortcodes y sus atributos, creamos un área en el front-end dedicada a editar shortcodes y atributos, construida con AngularJS y Bootstrap.

    Interfaz de Bootstrap & AngularJS para corregir todos los shortcodes mapeados.
    Interfaz de Bootstrap & AngularJS para corregir todos los shortcodes mapeados.

    Tendremos que revisar manualmente todos y cada uno de los plugins y consultar la documentación de sus shortcodes para asegurarnos de que todos los datos que tenemos sean correctos.

    Aunque esto es sumamente tedioso, tener un proceso automatizado tiene su lado positivo:

    • Según nuestras primeras estadísticas, solo alrededor de 1 de cada 2 plugins tiene shortcodes.
    • La mitad de los shortcodes detectados no tienen atributos (aunque una parte de esto pueden ser falsos positivos)
    • Al obtener solo plugins de buena calidad, lo más probable es que cuenten con documentación sobre sus shortcodes

    Cuando se hayan comprobado todos los shortcodes de un plugin, solo entonces el servidor comenzará a distribuir a los usuarios los mapeos de shortcodes de ese plugin.

    Una llamada a la API REST

    La última pieza del puzle es el propio plugin. El concepto aquí es simple: averiguar qué plugins están activos, qué tema está utilizando el sitio y qué shortcodes están disponibles, y luego consultar a la base de datos de mapeo de shortcodes si tiene mapeos disponibles. Para ello, creamos un endpoint personalizado de la WP REST API al que hacen ping todos los clientes para obtener sus mapeos de shortcodes más recientes.

    El futuro: Crowdsourcing

    Revisar manualmente cada plugin requiere mucho tiempo y esfuerzo. Una vez que la plataforma de mapeo de shortcodes sea estable, planeamos abrir el mapeo de shortcodes a todo el mundo. Esto significa que cualquiera podrá colaborar añadiendo shortcodes.

    Quizás te estés preguntando: «¿por qué iba a ayudar a mapear shortcodes? ¿Qué gano yo con esto?». Bueno, se nos ocurren varias razones por las que la gente querría colaborar:

    1. Si has creado un plugin y aún no lo hemos detectado debido a los criterios anteriores (y está en el directorio de plugins de WordPress), puedes añadir los mapeos tú mismo. ¡Tu plugin pasaría a ser totalmente compatible con PBS!
    2. Dado que en el proceso automatizado solo trataremos con aquellos en el directorio de plugins de WordPress, los autores de plugins y temas prémium no estarán incluidos. Así que, si tienes uno, también puedes añadir tus mapeos de shortcodes para ellos.
    3. Y para quienes no sean creadores de plugins, podemos recompensar a los que ayuden. Para hacer que el mapeo de shortcodes sea una iniciativa atractiva, ¡podemos premiar a los colaboradores satisfechos con una licencia personal o una mejora a una licencia prémium de PBS!

    Suscríbete a nuestra newsletter

    La funcionalidad de mapeo de shortcodes estará disponible provisionalmente para nuestros clientes el 12 de agosto  15 de agosto  16 de agosto de 2016. No todos los shortcodes estarán mapeados para esa fecha (nuestra estimación es de quizás unos 100 plugins), pero el mapeo se realizará de forma continua y los clientes los recibirán tan pronto como se lancen los nuevos.

    ¡Suscríbete a nuestra newsletter para recibir novedades sobre el mapeo de shortcodes, cuándo lo lanzaremos y cuándo lo abriremos al público!

  • Por qué deberías incluir URLs en la lista blanca del cortafuegos de WordFence (y cómo hacerlo)

    If you’re using Page Builder Sandwich along with Wordfence Security, there’s a chance you might have encountered something called a 403 error.

    Now, according to WordPress resource site WPBeginner, 403 errors occur when server permissions don’t allow access to a specific page.

    Pero ¿qué significa un error 403 y por qué ocurre en Page Builder Sandwich en primer lugar?

    The 403 Error Explained

    La causa más común del error 403 es cuando los plugins de seguridad no están configurados de una manera o según un estándar concreto.

    Like WordFence, most security plugins from WordPress restrict some actions if they’re suspected or proven to be malicious. These scenarios usually occur on your WP Admin or WP Login page, or show up as pop-ups alerting you that you don’t have authorization to view your page.

    Así es como se verá la ventana emergente si alguna vez te la encuentras en Sandwich:

    So what does this mean? Is Sandwich safe to use? Is WordFence bad? And does the 403 error warrant bad points for both Wordfence and Page Builder Sandwich?

    Pues no.

    All of this just means that Wordfence is extra careful when scanning your external plugins.

    And that’s actually a really good thing, especially since they’re a security plugin.

    WordFence is Legit…

    WordFence es uno de los plugins de seguridad más populares para WordPress. Cuenta con más de un millón de instalaciones activas, por lo que es muy probable que también esté instalado en tu sitio web de WP. Existen por una gran causa: no solo para mantener tu sitio web a salvo, sino también para reducir los riesgos de seguridad y mejorar la seguridad general de tu sitio web.

    tl;dr WordFence es legítimo.

    …And So is Sandwich. But Why Does It Need Whitelisting?

    Sandwich no es lo único que bloquea WordFence.

    Otros plugins y URL también requieren ser incluidos en la lista blanca (lo opuesto a la lista negra) en WordFence. Es posible que Wordfence ya haya permitido algunos plugins más populares.

    Entonces, ¿qué ocurre entre bastidores y de dónde procede el error 403?

    Ajax Functions and Page Builder Sandwich

    Page Builder Sandwich ejecuta funciones ajax a lo largo de tu experiencia de edición. Algunos plugins también lo hacen.

    W3Schools explica ajax con un poco más de detalle:

    AJAX is a technique for creating fast and dynamic web pages. It allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

    Chart taken from W3Schools

    En Page Builder Sandwich, las llamadas ajax abarcan desde obtener el mapeo de shortcodes y renderizar shortcodes hasta guardar tus cambios. Esto podría hacer que experimentes problemas, como el error 403, problemas al guardar los cambios o shortcodes sin renderizar. En este momento es posible que necesites incluir en la lista blanca las llamadas ajax específicas de Page Builder Sandwich.

    Whitelisting Page Builder Sandwich on WordFence

    Para incluir a PBS en la lista blanca del Firewall de Wordfence, añade una entrada en el área Whitelisted URLs con estos parámetros:

    URL: /wp-admin/admin-ajax.php

    Param Name: main-content

    Param: POST Body

    Para instalaciones multisitio de WordPress, es una buena idea incluir el nombre de la carpeta de tu sitio en la URL anterior. Por ejemplo: /my-multisite/wp-admin/admin-ajax.php

    Tras añadir estos valores, el error 403 debería estar solucionado adecuadamente y deberías poder guardar tu contenido y volver a generar shortcodes renderizados.

    Así es como debería verse en los ajustes del Firewall de WordFence:

    Ta-da!

    Conclusion

    Sí, Page Builder Sandwich es seguro de usar.

    Es más, solo realiza acciones ajax cuando está en modo de edición y es compatible con plugins y temas externos (siempre que cumplan con los estándares de codificación de WordPress).

    WordFence Security no es diferente.

    Pero lo bueno de ellos es que brindan a los usuarios de WordPress la oportunidad de mantener sus sitios protegidos y seguros, con la opción adicional de permitirte decidir qué plugins lo son y cuáles no.