Page Builder Sandwich debería ser compatible con los diferentes módulos de Jetpack.
El módulo Markdown hace algo especial al guardar el contenido, lo que provoca que los cambios se pierdan durante la conversión de markdown. Para solucionar esto, el texto en markdown del editor del backend se convierte en etiquetas html al guardar los cambios desde el frontend. (Gracias a Jake Jackson por la ayuda)
Hemos probado Page Builder Sandwich con PHP 7 y todo debería funcionar correctamente sin ningún problema.
Ten cuidado al actualizar tu sitio desde una versión anterior a PHP 7, ya que hay muchas incompatibilidades con versiones anteriores que deberían abordarse en todos tus temas y plugins.
Se produce un error de Javascript cuando Page Builder Sandwich & Materialize están juntos. Hay un conflicto entre materialize.js y el selector de color del núcleo de WordPress.
Hay una incidencia abierta en el repositorio de GitHub de Materialize sobre esto: https://github.com/Dogfalo/materialize/issues/2821
El plugin seguirá funcionando correctamente siempre que no desactives la licencia en tu sitio. Una vez que la desactives, no podrás volver a activarla.
No podrás recibir actualizaciones desde el panel de control de WordPress ni tener acceso a versiones más recientes. Tampoco podremos ofrecerte nuestro increíble soporte personalizado.
Para añadir widgets, haga clic en el botón Elemento Widget de la sección Elementos en el inspector. Al hacer clic, debería aparecer una ventana emergente que enumera todos los widgets que Page Builder Sandwich ha encontrado en su sitio.
Se pueden añadir todos los widgets encontrados en su sitio de WordPress; sin embargo, algunos widgets que utilizan código Javascript personalizado/especializado dentro de su configuración podrían no funcionar correctamente. Los widgets que utilizan lo siguiente podrían no funcionar:
Los widgets predeterminados de WordPress y los widgets creados de forma similar no deberían tener ningún problema.
Si realmente necesita que ese widget específico funcione, existe una solución alternativa.
Puede utilizar el plugin Custom Sidebars de WPMU Dev para crear una nueva barra lateral/área de widgets, añadir su widget allí utilizando el método habitual en Apariencia > Widgets. Luego, en Page Builder Sandwich, añada un Elemento Barra lateral y seleccione la barra lateral que contiene el widget que necesita.
Otra alternativa es recrear el efecto que desea utilizando los diversos elementos y estilos disponibles en Page Builder Sandwich.
Cuando compras Page Builder Sandwich por primera vez, se descarga automáticamente en tu ordenador un archivo .zip que contiene el plugin.
En caso de que lo pierdas, puedes volver a descargar tu archivo .zip accediendo a este enlace: https://dashboard.freemius.com/license-recovery/203/page-builder-sandwich/
Introducir tu licencia en este enlace te permitirá recuperar tu archivo .zip de Page Builder Sandwich, junto con tu licencia y los datos de tu cuenta.
Técnicamente esto debería funcionar con todos y cada uno de los temas.
Junto con nuestros usuarios y clientes, hemos utilizado con éxito Page Builder Sandwich con una gran cantidad de temas, incluidos temas del repositorio de temas de WordPress.org, temas de Genesis, temas de StudioPress, Elegant Themes y temas de ThemeForest.
Sin embargo, puede haber ocasiones en las que tu tema haga algo poco convencional y pueda impedir que Page Builder Sandwich funcione correctamente. Cuando eso suceda, envíanos una solicitud de soporte e intentaremos solucionarlo.
Eliminar contenido en Page Builder Sandwich normalmente se hace simplemente seleccionando el texto o elemento y luego pulsando la tecla de suprimir o retroceso.
Otra alternativa es hacer clic en el botón de eliminar / quitar en el inspector:
Hay algunos casos en los que esto no funciona. Los elementos con los que no funciona suelen ser contenedores como filas, columnas o carruseles. Esto es para evitar eliminaciones accidentales al borrar contenido.
Para eliminar esos elementos, haz clic en el botón de eliminar / quitar en las propiedades del elemento en el inspector. Por ejemplo, para eliminar una fila, tendrás que usar esta área:
Page Builder Sandwich ya está disponible en:
Si te gustaría colaborar con Page Builder Sandwich traduciéndolo a tu idioma, ¡dirígete a nuestra página de Transifex!
Añadir imágenes es muy sencillo. Puedes:
Nos hemos asegurado de que Page Builder Sandwich tenga un impacto prácticamente nulo en el rendimiento de su sitio web. Cuando no haya iniciado sesión, como mínimo, solo se ponen en cola los estilos CSS de filas y columnas, junto con los scripts JS y CSS necesarios para los shortcodes que haya utilizado.
Anteriormente hubo un problema relacionado con NextGen y Page Builder Sandwich.
Antes de la versión 2.12, PBS provocaba de algún modo que NextGen mostrase un mensaje de error que hacía que su sitio web se quedara con una pantalla blanca. Esto se ha solucionado a partir de la versión 2.12, por lo que si está utilizando una versión anterior, por favor actualice.
Hay miles de temas y otros plugins disponibles. Por eso, aunque intentamos ser cuidadosos y desarrollarlo todo conforme a los estándares, a veces las cosas pueden fallar.
Si notas que Page Builder Sandwich no funciona correctamente en tu configuración, aquí tienes algunos pasos que puedes seguir para solucionar el problema.
Echa un vistazo al artículo aquí: El botón «Edit with Page Builder Sandwich» no aparece. Si no soluciona el problema, sigue leyendo.
Explora los diferentes artículos de la categoría de solución de problemas en la documentación.
WordPress, tus plugins, tu tema e incluso Page Builder Sandwich. Siempre es recomendable tener todo al día. Asegurarte de que tus componentes estén actualizados significa que dispondrás de las últimas correcciones de errores y vulnerabilidades para tu sitio.
Si no puedes editar tu contenido con Page Builder Sandwich (y probablemente haya aparecido una ventana emergente de error), puede ser que el contenido de la página actual en la que te encuentras esté totalmente generado por tu tema o por un plugin. Para comprobarlo, edita tu página/entrada en el backend normalmente mediante WordPress y luego verifica si el contenido guardado aparece en el frontend. Si no aparece, significa que el contenido de la página/entrada está totalmente generado de forma automática y no se puede editar con PBS.
A veces, un plugin puede entrar en conflicto con Page Builder Sandwich. Para comprobar qué plugin podría estar causando el conflicto, desactiva un plugin y verifica si PBS vuelve a funcionar. Haz esto con cada uno de tus plugins activados. Si PBS vuelve a funcionar y puedes editar tus páginas, entonces el plugin que acabas de desactivar no es compatible con PBS. En esos casos, contáctanos por correo electrónico a [email protected] e infórmanos para que podamos solucionarlo.
Si desactivar los plugins no sirvió de nada, prueba a cambiar tu tema por el tema predeterminado de WordPress (los temas Twenty-Something). Si puedes volver a editar tu contenido con Page Builder Sandwich, entonces el tema que estás utilizando no es compatible con PBS. Envíanos esta información por correo electrónico a [email protected] para avisarnos y poder solucionarlo.
En raras ocasiones, una extensión del navegador puede impedir que el código Javascript de un sitio web funcione correctamente. Para comprobar si una extensión del navegador está causando problemas, abre tu navegador en modo de incógnito (Chrome) o en modo privado e intenta acceder a PBS; esto abrirá una nueva pestaña sin extensiones. Si funciona, entonces tienes una extensión en conflicto.
Se ha detectado que la extensión de navegador PageXray causa problemas.
Puedes incrustar contenido de varios sitios como vídeos de YouTube, vídeos de Vimeo, tuits e incluso comentarios de Reddit pegando sus URL de enlace permanente en Page Builder Sandwich.
Ten en cuenta que una línea completa de texto solo debe contener la URL
Page Builder Sandwich funciona junto con la función oEmbed de WordPress. Por lo tanto, las URL que puedes incrustar en el backend deberían ser compatibles. Los plugins que añaden compatibilidad con proveedores de oEmbed adicionales también deberían funcionar.
Puedes encontrar una lista de proveedores de oEmbed en el codex: https://codex.wordpress.org/Embeds
Los shortcodes se pueden pegar o escribir directamente durante la edición. Después de escribir tu shortcode, presiona Intro o sal del shortcode y debería mostrarse en su forma renderizada de inmediato.
Otra forma de añadir shortcodes es hacer clic en el Elemento Shortcode en tu inspector. Esto abrirá una ventana emergente que enumera todos los shortcodes disponibles en tu sitio. Selecciona uno o haz doble clic en cualquiera de ellos para insertarlo.
Puedes editar shortcodes de 2 formas:
Page Builder Sandwich no puede detectar los atributos de los shortcodes. Por lo tanto, tendrás que escribirlos manualmente. Estamos trabajando en una forma de mapear los shortcodes en el sistema para que sea fácil para todos. Mantente al tanto de las novedades.
Solo puede editar el contenido de páginas, entradas y tipos de contenido personalizados utilizando Page Builder Sandwich.
Sin embargo, no puede editar archivos de plantilla de temas como:
Piénselo de esta manera: si aparece «Editar entrada» o «Editar página» en su barra de administración en el frontend, entonces la página debería poder editarse.
Puedes incrustar contenido de varios sitios como vídeos de YouTube, vídeos de Vimeo, fotos de Instagram, fotos de Flickr, tuits e incluso comentarios de Reddit pegando directamente sus URL de enlace permanente.
https://www.youtube.com/watch?v=dQw4w9WgXcQ
Puedes encontrar una lista de URL incrustables en el codex de WordPress: https://codex.wordpress.org/Embeds
También puedes instalar otros plugins que añadan compatibilidad con URL de incrustación adicionales. Por ejemplo, las URL de Wistia no son compatibles de forma nativa con WordPress; puedes instalar su plugin para habilitar la incrustación y, después, PB Sandwich también debería poder gestionarlas.
Ten en cuenta que una línea entera de texto debe contener únicamente la URL para que esto funcione.
También puedes pegar directamente códigos de incrustación.
Los códigos de incrustación tienen este aspecto:
<iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
Ten en cuenta que una línea entera de texto debe contener únicamente el código de incrustación para que esto funcione.
Haz clic en la herramienta «Añadir medios» y, a continuación, pega tu URL en la pestaña «Insertar desde URL».
Markdown es básicamente una sintaxis que escribes mientras editas para añadir o cambiar el formato de tu texto. Son como atajos de teclado, pero en lugar de presionar la combinación, los escribes.
A continuación se muestra una lista de todas las sintaxis de Markdown compatibles en Page Builder Sandwich.
## Encabezado2
### Encabezado3
hasta:
###### Encabezado6
> Cita en bloque
(4 espacios)Texto preformateado/Código
* Lista con viñetas - Lista con viñetas
1. Lista numerada 1) Lista numerada
- ------------------------------(o varios guiones)
Al escribir URLs se convertirán automáticamente en un enlace:
Dirígete a https://pagebuildersandwich.com
Dirígete a [Page Builder Sandwich](https://pagebuildersandwich.com
Page Builder Sandwich se creó para ser lo menos invasivo posible, de modo que otros plugins no deberían tener problemas para coexistir con el nuestro.
A veces, sin embargo, hay excepciones a esto. A continuación se muestra una lista de plugins que presentan algunas peculiaridades al trabajar junto a Page Builder Sandwich. Esto no significa necesariamente que no funcionen o que sean incompatibles, sino solo que ciertos comportamientos pueden ser diferentes.
Continuaremos actualizando esta lista. Si ha encontrado algo, no dude en enviar un ticket de soporte a [email protected]
En la versión premium de Page Builder Sandwich, puedes usar tus propios iconos vectoriales / SVG. Aquí te explicamos cómo:
Los iconos subidos también se pueden usar como viñetas en listas de viñetas e iconos de botones.
Nota: Si tu icono no aparece en tus búsquedas, es posible que PBS no haya procesado correctamente el nombre de archivo. En esos casos, puedes usar los términos «custom» o «upload» para encontrar tus iconos subidos.
Comprueba si PBS está activado y en modo de edición.
if ( PBSEditor.isEditing() ) {
// Hacer algo al editar.
}
Ninguno.
Boolean. True cuando se está editando actualmente, false cuando no se está editando.
Se utiliza dentro del iframe que usa PBS para renderizar su vista adaptativa durante la edición. Se llama justo antes de que se cierre la etiqueta <head> y se puede usar para añadir scripts y estilos.
Ninguno.
add_action( 'pbs_iframe_header', 'change_bg_color' );
function change_bg_color() {
?>
<style>
body {
background-color: hotpink;
}
</style>
<?php
}
Si tienes problemas, ¡estamos aquí para ayudarte! Pero antes, por favor, consulta las páginas de documentación, podrías encontrar la respuesta aquí y ahorrarás tiempo.
Envíanos tus consultas de soporte por correo electrónico a [email protected]
Se activa cuando el usuario cambia entre las diferentes vistas adaptables.
Ninguno.
Puede evitar que PB Sandwich aparezca en el front-end utilizando el filtro pbs_is_editable_by_user.
Por ejemplo, para evitar que PB Sandwich aparezca en un tipo de contenido personalizado (Custom Post Type) identificado por el slug slider, puede añadir este fragmento de código en su functions.php
add_filter( 'pbs_is_editable_by_user', 'stop_pbs_in_sliders' );
function stop_pbs_in_sliders( $editable ) {
if ( is_singular( 'slider' ) ) {
return false;
}
return $editable;
}
Para desactivar PB Sandwich en una página o entrada específica, puede utilizar el ID de la publicación para comprobarlo:
add_filter( 'pbs_is_editable_by_user', 'stop_pbs_for_123' );
function stop_pbs_for_123( $editable ) {
global $post;
if ( is_singular() && ! empty( $post ) ) {
if ( '123' === $post->ID ) {
return false;
}
}
return $editable;
}
PBS envía estadísticas de uso de los usuarios que han aceptado participar cada vez que guardan en el editor de PBS. Este filtro se puede usar para dejar de enviar datos.
$true
Booleano. Esto siempre es true.
Si tienes problemas, ¡estamos aquí para ayudarte! Pero primero consulta las páginas de documentación; es posible que encuentres la respuesta aquí y ahorrarás tiempo.
Envíanos tus consultas de soporte por correo electrónico a [email protected]
PBS >= 4.3
PBS añade un contenedor para identificar el área de contenido de una entrada. Esto se llama antes de colocar el contenedor.
$content
Cadena. El contenido de la entrada con el contenedor aplicado.
$all_shortcodes = PageBuilderSandwich::get_all_shortcodes()
Ninguno.
Array. Un array de todas las etiquetas de shortcode detectadas.
PBS >= 4.3
Anula la decisión de si cargar o no PBS en el front-end y permite al usuario utilizar PBS para editar la entrada.
$is_editable
Booleano. True si la entrada se debe poder editar con PBS. False en caso contrario
No permitir que los post_types de portfolio sean editables con PBS
add_filter( 'pbs_is_editable_by_user', 'disallow_portfolios' );
function disallow_portfolios( $is_editable ) {
global $post;
if ( $post ) {
if ( 'portfolio' === get_post_type( $post ) ) {
return false;
}
}
return $is_editable;
}
Se utiliza dentro del iframe utilizado por PBS para renderizar su vista adaptable durante la edición. Se llama justo antes de que se cierre la etiqueta <body> y se puede usar para añadir scripts y estilos.
Ninguno.
PBS añade un wrapper para identificar el área de contenido de una entrada. Esto se llama después de colocar el wrapper.
$content
String. El contenido de la entrada con el wrapper aplicado.
PBS >= 4.3
Obtiene la instancia de PageBuilderSandwich
$pbs = PageBuilderSandwich::instance()
Ninguno.
Objeto PageBuilderSandwich. La instancia actual de la clase PBS.
PageBuilderSandwich::is_editable_by_user()
Ninguno.
Booleano. True si PBS puede editar la entrada, false en caso contrario.
Un filtro para modificar los estilos CSS que se guardan para una entrada. Se llama cuando se inicia un guardado desde el editor de PBS.
$style
String. Los estilos CSS enviados para guardar.
$post_id
Int. El ID de la entrada que estamos guardando.
Se llama cuando el editor de PBS termina de cargar (no se llama cuando el usuario hace clic en el botón de comenzar a editar)
Hacer algo después de que cargue PBS
wp.hooks.addAction( 'pbs.init', function() {
console.log( '¡PBS está listo!' );
}
Una lista de etiquetas de shortcode que ocultar en el selector de shortcodes de PBS. Utilice esto si tiene shortcodes que aparecen en la ventana emergente del selector que ya ha dejado obsoletos o que simplemente desea ocultar a los usuarios.
$shortcodes
Array. Un array de etiquetas de shortcode.
Ocultar el shortcode del selector.
add_filter( 'pbs_shortcodes_to_hide_in_picker, 'hide_embed_shortcode' );
function hide_embed_shortcode( $shortcodes ) {
$shortcodes[] = 'embed';
return $shortcodes;
}
Añade propiedades de Javascript al objeto pbsFrontendParams en el front-end. El objeto pbsFrontendParams está disponible en el front-end independientemente de si el usuario ha iniciado sesión y está editando.
$params
Array. Un array de claves y valores que estarán disponibles en la variable de Javascript a nivel de ventana pbsFrontendParams
Hacer que una variable sea accesible en el front-end
add_filter( 'pbs_localize_frontend_scripts, 'add_my_property' );
function add_my_property( $params ) {
// Esto estará disponible en Javascript en pbsFrontendParams.myProperty
$params['myProperty'] = 'My Property';
return $params;
}
La mayor parte de Page Builder Sandwich es Javascript, y hemos añadido un montón de métodos para que los desarrolladores puedan extender y añadir más funcionalidad a nuestro maquetador de páginas.
Para ponérselo más fácil a los desarrolladores, hemos seguido el modelo de cómo hace las cosas WordPress: ¡a través de hooks!
En WordPress, normalmente se usan las funciones add_filter() y add_action() para modificar o ampliar el comportamiento de WP. De manera similar en PBS, puedes usar wp.hooks.addFilter() y wp.hooks.addAction().
La forma de usarlos también es la misma: usa filtros para modificar cosas y usa acciones para realizar cosas adicionales. Esas dos llamadas a funciones son esencialmente iguales a sus contrapartes de PHP, salvo que se ejecutan en Javascript.
Para no confundir los hooks de PHP y los hooks de Javascript, hemos nombrado los hooks de Javascript con «period-case» (palabra inventada). Todos los hooks de PHP usan snake case:
Consulta las categorías Javascript Actions y Javascript Filters en el menú de la izquierda para explorar todos los hooks.
Para los curiosos, estamos usando https://github.com/carldanley/WP-JS-Hooks para añadir esas ingeniosas llamadas de hooks en Javascript
Se llama justo antes de que el editor guarde el contenido. Puedes usar esto para incluir datos adicionales que enviar durante el guardado (esto no guarda los datos, solo los envía mediante Ajax al backend)
payload
Objeto FormData. Los datos enviados mediante Ajax para guardar.
wp.hooks.addAction( 'pbs.save.payload', function( payload ) {
// Añadir datos para enviar durante el guardado.
payload.append( 'my_data', 'My Data' );
}
Si no encuentras dónde guardaste tu copia del plugin premium, puedes ir aquí e introducir tu dirección de correo electrónico para recuperarlo. El plugin te será enviado por correo electrónico.
https://dashboard.freemius.com/license-recovery/203/page-builder-sandwich/
Añade propiedades de Javascript al objeto pbsParams en el front-end. El objeto pbsParams está disponible en el front-end cuando el usuario ha iniciado sesión y puede editar la página.
Esta variable también contiene muchas de las propiedades utilizadas por PBS durante la edición, como nonces, una lista de todos los shortcodes cargados y cadenas de traducción.
$params
Array. Un array de claves y valores que estarán disponibles en la variable de Javascript a nivel de ventana pbsParams
Añadir un shortcode no detectado en el editor
add_filter( 'pbs_frontend_scripts, 'add_my_shortcode' );
function add_my_shortcode( $params ) {
$params['shortcodes'][] = 'my_shortcode';
return $params;
}
Pone en cola un script o estilo junto a PBS. Esto se llama solo cuando la entrada se puede editar con PBS. Cuando la página no se puede editar con PBS, esto no se utiliza en absoluto.
Ninguno.
Cuando se cargue PBS, poner en cola también my-script.js
add_action( 'pbs_enqueue_scripts, 'add_my_script' );
function add_my_script() {
wp_enqueue_script( 'my-script' , plugins_url( 'js/my-script.js', __FILE__ ) );
}
Esta es una función premium y está disponible en la versión 4.0.1+
Los enlaces de anclaje con desplazamiento en la misma página son enlaces que apuntan a una ubicación específica en la misma página. Al hacer clic en un enlace a la misma página, su navegador se desplazará hacia el área indicada.
Necesita dos cosas para crear un enlace de anclaje en la misma página:
Elija cualquier elemento cerca de la parte inferior de su página y abra sus propiedades. En el área avanzada, añada una clase personalizada o un ID personalizado llamado » go_here«
Ahora cree un enlace o añada un elemento de botón cerca de la parte superior de su página. En lugar de añadir una URL como enlace, utilice » .go_here» (con el punto) si añadió «go_here» como clase personalizada; o utilice «#go_here» (con la almohadilla) si lo añadió como ID personalizado.
Después de guardar su página, al hacer clic en su enlace/botón, ahora debería desplazarse suavemente hacia el elemento en la parte inferior de su página.
Los anclajes con nombre como
<a name="go_here"></a>
también se pueden seleccionar añadiendo un enlace a «#go_here» (con la almohadilla)
También puede apuntar a cualquier otra área de su página, incluso fuera del área del editor, siempre que las seleccione utilizando sus nombres de clase o IDs.
Se llama después de que se guarde el contenido. Esto se llama cuando se inició un guardado desde el editor de PBS.
Ninguno
Un filtro para modificar los datos de la entrada que se van a guardar. Se llama cuando se inicia un guardado desde el editor de PBS.
$post_data
Array. Los datos finales de la entrada que se van a guardar; esto se pasa directamente a wp_update_post() después.
$_POST
Array. Los datos sin procesar de la entrada enviados desde el editor para guardar. El nonce de estos ya ha sido verificado.
$post_id
Int. El id de la entrada que estamos guardando.
add_filter( 'pbs_save_content_data', 'save_always_as_draft', 10, 3 );
function save_always_as_draft( $post_data, $_post, $post_id ) {
// Por alguna razón, siempre queremos que la entrada sea un borrador.
$post_data['post_status'] = 'draft';
return $post_data;
}
Se llama justo antes de guardar el contenido. Esto se llama cuando se inició un guardado desde el editor PBS.
Ninguno
Si eres desarrollador de temas, incluir PBS en tu tema puede aumentar en gran medida el valor de tu producto.
Ponte en contacto con nosotros en [email protected], ¡colaboremos!
CloudFlare es una CDN DNS gratuita muy utilizada. Es excelente, pero actualmente PBS tiene problemas con la función Rocket Loader. Rocket Loader mejora el tiempo de carga de los archivos Javascript, pero altera las dependencias y el orden de llamada de los scripts de PBS. Si tiene Rocket Loader activado, el botón de edición de Page Builder Sandwich no aparecerá (y no se mostrará ningún error en la consola de Javascript).
Para desactivar Rocket Loader, inicie sesión en su cuenta de CloudFlare y acceda a la configuración de su dominio. Vaya a los ajustes de Speed:
Luego, desplácese hacia abajo hasta los ajustes de Rocket Loader y asegúrese de que la opción esté desactivada (off):
Después de desactivarla, asegúrese de purgar toda la caché de su sitio desde los ajustes de Cache:
Después de purgar toda la caché, puede actualizar la página y el botón de edición de Page Builder Sandwich ya debería aparecer.
Un filtro para modificar el contenido de la entrada que se va a guardar. Esto se llama cuando se inició un guardado desde el editor PBS.
$content
String. El contenido final de la entrada que se va a guardar.
$post_id
Int. El ID de la entrada que estamos guardando.
A partir de la versión 4.0, ¡ahora puedes alternar entre las vistas de escritorio, tableta y teléfono móvil mientras editas! A esto lo llamamos modo adaptable. En el modo adaptable, tu sitio se redimensionará a un tamaño más pequeño para simular cómo se vería en pantallas más pequeñas.
Mientras visualizas tu sitio en las vistas de tableta o teléfono móvil, dispondrás de capacidades de edición limitadas. Con esto, SOLO podrás hacer lo siguiente:
* PBS aplica algunos estilos adaptables a tus elementos y filas, por lo que algunos márgenes no se podrán ajustar.
Estas son algunas de las cosas que no puedes hacer:
Si estás viendo tu sitio en las vistas de tableta o teléfono móvil, cualquier ajuste de margen que realices solo se aplicará a la vista actual y a la vista más pequeña. Esto te permite retocar tus diseños para que se vean mejor en pantallas más pequeñas, de forma independiente de la versión completa de escritorio.
Aquí tienes un ejemplo para que quede más claro.
Esto solo se aplica a los ajustes de márgenes; los cambios en el texto o en el estilo del texto se aplican en todos los tamaños de pantalla.
Al visualizar en las vistas de tableta o teléfono móvil, tus filas tendrán un nuevo botón de «ojo» en la barra de herramientas que se mostrará cuando pases el cursor sobre ellas. Al hacer clic en él, podrás mostrar u ocultar la fila para el tamaño de pantalla actual.
Las filas ocultas se volverán un poco transparentes al editar para indicar que estarán ocultas cuando termines la edición.
Ten en cuenta que esta función solo está disponible para filas.
Si al utilizar Varnish Cache y tras guardar sus cambios aún puede ver su contenido antiguo, es posible que Varnish Cache no se haya vaciado automáticamente.
Hay algunos plugins de WordPress que le permiten vaciar la caché: https://wordpress.org/plugins/search/varnish+cache/
Si eso no funciona, también puede purgar Varnish Cache manualmente ejecutando este comando en un terminal:
curl -X PURGE http://mysite.com/my-page/
Markdown es básicamente una sintaxis que escribes mientras editas con el fin de añadir o cambiar el formato de tu texto. Son como atajos de teclado, pero en lugar de pulsar la combinación, los escribes directamente.
A continuación se muestra una lista de todas las sintaxis de Markdown admitidas en Page Builder Sandwich.
(Ten en cuenta los espacios)
# Encabezado1
## Encabezado2
hasta:
###### Encabezado6
> Cita en bloque
(4 espacios)Texto preformateado/Código
* Lista de viñetas - Lista de viñetas
1. Lista numerada 1) Lista numerada
- ------------------------------(o múltiples guiones)
Escribir URLs se convertirá automáticamente en un enlace:
Visita https://pagebuildersandwich.com
Escribe «lorem» y luego pulsa tabulador para crear contenido de texto de relleno.
Para desactivar PBS, primero inicia sesión en tu Escritorio / panel de administración y, a continuación, dirígete a Plugins > Plugins instalados:
Una vez en la página de Plugins, desplázate hacia abajo por la lista de plugins y busca el de Page Builder Sandwich. Justo debajo del nombre, deberías ver un enlace de Desactivar junto con otros enlaces como Editar o Cambiar licencia (esto puede variar en tu sitio). Haz clic en el enlace de desactivar para inhabilitar el plugin.
En la mayoría de los elementos (aunque no en los shortcodes), puedes especificar una animación de entrada que se reproduce cuando el elemento se hace visible en tu pantalla.
Para hacer esto, pasa el cursor sobre un elemento para que aparezca la barra de herramientas y luego haz clic en el botón de engranaje.
Esto debería abrir el inspector. Ve a la sección Animaciones, ábrela y selecciona una animación.
Después de elegir una animación, se reproducirá para mostrarte una vista previa. Puedes ajustar aún más la animación con las otras opciones disponibles.
Las animaciones solo se reproducen cuando el usuario se desplaza y el elemento entra en el campo de visión. Si el elemento ya está visible cuando accedes a tu página, no se animará.
¡No, no las perderá! Todas sus páginas y contenidos deberían permanecer en su sitio. Esto significa que puede desactivar PBS de forma segura al actualizar de la versión gratuita a la versión premium, o cuando simplemente esté haciendo pruebas.
Sin embargo, no todo se verá igual. Notará que algunos elementos de su página cambiarán porque PBS contiene estilos y scripts adicionales necesarios para algunos de los elementos más elaborados.
Aquí tiene algunas cosas que permanecerán cuando desactive PBS:
Aquí tiene algunas cosas que desaparecerán cuando desactive PBS:
Si ha guardado los cambios en su página y…
esto podría significar que al guardar no se activó la limpieza de los datos almacenados en su solución de caché.
Si está utilizando algún tipo de solución de caché (como un plugin de caché tipo W3 Total Cache, un software de caché del lado del servidor como Memcached o Redis, o caché de DNS como CloudFlare), es posible que no haya borrado el contenido guardado.
Una forma de comprobar si este es el caso es editar su página en el backend (de la forma habitual) y luego ver su página en el frontend. Si el contenido no ha cambiado, tal vez la caché no se haya borrado automáticamente.
Algunas soluciones de caché externas a WordPress disponen de un plugin de WordPress complementario que puede ayudar a purgar o borrar la caché actual; las soluciones de WordPress suelen tener botones u opciones para esto.
También es posible que se haya producido algún tipo de error de PHP al guardar.
Para comprobar si esto está ocurriendo, abra la consola de desarrollador (preferiblemente en Chrome) y vaya a la pestaña Red (Network). Una vez allí, guarde los cambios en PBS; debería ver varias entradas hacia admin-ajax.php. Si ve esto en rojo, significa que se ha producido un error. Compruebe si ve algo como esto:
Si este es el caso, envíenos un correo electrónico a [email protected] junto con las credenciales de inicio de sesión necesarias para que podamos revisarlo y solucionarlo por usted.
Lea el artículo sobre la compatibilidad con Wordfence aquí: http://docs.pagebuildersandwich.com/article/214-wordfence-firewall-setup-compatibility
Nota: Esto no se aplica a los clientes de Envato
Si tienes errores al activar tu licencia, aquí tienes algunas cosas que puedes probar…
Esto les ocurre principalmente a las personas que actualizan a una versión superior. Si actualizaste directamente los archivos del plugin de forma manual y te saltaste los pasos de actualización o de desactivación-activación, es posible que algunos procesos no se hayan ejecutado correctamente. Por favor, desactiva el plugin, vuelve a activarlo e intenta introducir tu licencia de nuevo.
A partir de la v3.2, Page Builder Sandwich se ha integrado con Freemius. Ha habido casos en los que borrar los datos de Freemius soluciona los errores de activación de la licencia. A continuación te explicamos cómo solucionarlo.
Ve a tu panel de administración y cambia tu URL a http://yoursite.com/wp-admin/admin.php?page=freemius (no olvides cambiar la URL para que se corresponda con la de tu sitio). Si llegas a la pantalla de abajo, estás en el lugar correcto.
Haz clic en el botón Delete All Accounts y luego haz clic también en el botón Clear API Cache. Después de hacer esto, intenta introducir tu clave de licencia de nuevo.
Si no funciona, ponte en contacto con nosotros en [email protected] e indícanos los detalles del problema y de tu sitio web.
Para añadir texto simulado rápidamente, escribe la palabra «lorem» y luego pulsa tabulador o Intro para añadir rápidamente texto de marcador de posición lorem ipsum:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dolor sed numquam? Sapiente autem adipisci, minus expedita enim, suscipit laboriosam deleniti possimus sequi pariatur explicabo numquam alias atque officia sit.
Aquí he añadido una fila con un color de fondo y luego he añadido una imagen dentro. Aquí está:
Para hacer que sobresalga por encima del contenedor, pasa el cursor sobre el elemento que quieras mover. Luego, cuando aparezcan los contornos, mueve el cursor más allá de la parte superior del contorno. Debería mostrar el valor actual del margen superior:
Haz clic y arrastra el margen superior hacia arriba para disminuir el margen, convirtiéndolo en un valor negativo:
¡Ahora la imagen sobresale de la fila!
Si el elemento se corta cuando sobrepasa la fila, abre el inspector de propiedades de la fila y desactiva la opción overflow hidden en las opciones Avanzado:
Para incrustar contenido de sitios web externos, simplemente pega la URL y presiona Intro. Por ejemplo, puedes copiar y pegar esta URL de YouTube:
https://www.youtube.com/watch?v=dQw4w9WgXcQ
La incrustación mediante iframe también es posible pegando códigos de incrustación <iframe>. Por ejemplo, copia y pega esta cadena de incrustación:
<iframe width=»560″ height=»315″ src=»https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0″ frameborder=»0″ allowfullscreen></iframe>
Puedes incrustar URLs de los sitios enumerados en el Codex de WordPress: https://codex.wordpress.org/Embeds y de cualquier sitio habilitado para oEmbed.
Page Builder Sandwich funciona con todos los plugins de caché. Sin embargo, es posible que experimente algunos problemas si activa su funcionalidad de minificación o caché.
Solo asegúrese de que la minificación esté desactivada para usuarios conectados y debería funcionar correctamente.
Aquí solo mostramos la configuración de W3 Total Cache, pero otros plugins de caché y minificación también deberían tener ajustes similares.
Asegúrese de que la opción Don’t cache pages for logged in users esté marcada en Performance > Page Cache
Si utiliza la minificación, asegúrese de que la opción Disable minify for logged in users esté marcada en Performance > Minify
Si estás intentando arrastrar los controladores de margen o relleno superior e inferior y los márgenes/rellenos del elemento no cambian, es posible que haya otros estilos que estén anulando forzosamente cualquier cambio de estilo. Esto también puede ocurrir cuando no puedes cambiar fondos, bordes o cuando las imágenes transparentes siempre obtienen un color de fondo.
Para encontrar el problema, abre el inspector de tu navegador e inspecciona el elemento. Examina los estilos de ese elemento. Si ves algo como esto:
Entonces puedes tener la seguridad de que tu tema o un plugin está impidiendo que se aplique cualquier otro estilo al elemento. Pasa el cursor sobre la hoja de estilos para averiguar de qué tema/plugin proviene.
Para solucionar esto, elimina la parte «! important» del estilo y deberías poder aplicar estilos de nuevo. Es posible que tengas que ponerte en contacto con el autor del tema o plugin para solucionar esto.
Nota: De forma predeterminada, la cabecera solo se elimina de la página principal.
Para eliminar la cabecera o el menú de cualquiera de sus páginas, necesitará un plugin que le permita añadir CSS personalizado, algo como Jetpack.
Para eliminar la cabecera, necesitará el ID de la entrada de su publicación, y luego añadir este CSS personalizado (reemplace el 9999 aquí con el ID de su entrada):
body.page-id-9999 #masthead {
display: none;
}
Para eliminar los menús de una página (reemplace el 9999 aquí con el ID de su entrada):
body.page-id-9999 #header-wrapper {
display: none;
}
o al eliminar el menú solo de su página de inicio:
body.page-id-9999 #header-wrapper {
display: none;
}
Puede añadir imágenes de fondo a sus filas y fondos. Además, también puede teñir la imagen de fondo con un color para que se adapte mejor a su diseño.
Por ejemplo, aquí tengo una fila con una imagen de fondo y un texto superpuesto en color blanco. Ahora mismo resulta bastante difícil ver el texto debido a la imagen de fondo que he elegido.
Para mejorar el aspecto, podemos añadir algo de color a nuestra imagen de fondo. Para ello, pase el cursor del ratón sobre la fila y haga clic en el icono de engranaje de la fila para abrir sus propiedades. Vaya a las opciones de Fondo y active Tinte de imagen de fondo.
Una vez activado, cambie el color de fondo y ahora se añadirá un tinte de color a su imagen de fondo. También puede cambiar la intensidad o la opacidad del tinte. Así queda mi fondo teñido de verde para que el texto sea más visible:
Page Builder Sandwich comprueba periódicamente si sigues conectado a WordPress. Esto se hace para garantizar que los cambios se guarden realmente cuando pulses el botón de guardar. También se utiliza para el bloqueo de entradas y el guardado automático.
Nos basamos en la API Heartbeat de WordPress para realizar nuestras comprobaciones y esta, a su vez, depende de las cookies y sesiones del navegador. Por lo tanto, si sigues recibiendo esas ventanas emergentes de «sesión caducada» al editar, es posible que algo impida a WordPress realizar tu seguimiento correctamente. Esto es lo que puedes hacer para solucionarlo:
Si tienes instalados plugins de caché, o caché de DNS, o cualquier forma de almacenamiento en caché, vacíalos. Borra también la caché de tu navegador. Es posible que no se te estén sirviendo los scripts más recientes para tu sitio.
También es posible que tus cookies se hayan dañado; esto se puede solucionar fácilmente borrando las cookies del navegador desde los ajustes de tu navegador. Suele encontrarse cerca de la opción para borrar la caché del navegador.
Ve a Ajustes > Generales y comprueba tu configuración. Busca los ajustes de Dirección de WordPress (URL) y Dirección del sitio (URL). Sus dominios y protocolos deben coincidir con tu dominio real. Por ejemplo, si uno tiene «http://» pero accedes a tu sitio usando «https://», los ajustes deberían indicar «https://». Otro problema común es que una de esas URL tenga «www» y la otra no.
Estos deberían coincidir:
o:
Para solucionar esto, puedes cambiar los ajustes desde Ajustes > Generales. Si no puedes editar esos ajustes, puedes abrir tu FTP, editar el archivo wp-config.php y añadir las siguientes líneas:
define( 'WP_HOME', 'http://example.com' ); define( 'WP_SITEURL', 'http://example.com' );
| Versión Lite | No disponible |
| Versión Premium | Todas las funciones disponibles
|
Los carruseles son una forma novedosa de añadir contenido que se muestra en bucle de manera continua. Page Builder Sandwich cuenta con un elemento de carrusel nativo que se puede utilizar, eliminando la necesidad de plugins de carrusel externos.
Hacer clic en el botón de engranaje del elemento carrusel le permite configurar el comportamiento del carrusel, como la animación de las diapositivas, el retardo y más. Al crearlo, dispondrá de tres diapositivas de carrusel para trabajar, con la opción de añadir o eliminar diapositivas. Todas estas diapositivas admiten los elementos habituales utilizados, como texto, imágenes y determinados shortcodes.
Cambiar de diapositiva es tan fácil como seleccionar los propios botones de navegación. El orden de las diapositivas también se puede modificar a través de las propiedades (icono de engranaje).
Para cambiar el estado de tu publicación, pasa el ratón sobre el indicador desplegable en el botón de guardar en la parte superior izquierda de la pantalla. Esto mostrará más opciones de guardado.
Si estás utilizando la versión lite, es posible que hayas notado los distintivos triangulares amarillos. Estos indican si un determinado botón/elemento/opción es una función premium.
Si deseas ocultarlos, puedes ir a tu Escritorio, navegar a la página de ajustes en PBSandwich > Settings y marcar la opción Hide Premium Feature Flags
| Versión Lite | Todas las funciones disponibles |
| Versión Premium | Todas las funciones disponibles |
Haz clic en el elemento HTML en el Inspector para añadir un nuevo elemento HTML; debería aparecer una ventana modal. Escribe o pega allí tu código HTML y, a continuación, haz clic en guardar HTML. Tu HTML debería aparecer ahora dentro del editor.
Pasa el ratón sobre el elemento HTML para mostrar la barra de herramientas. Puedes editar tu HTML haciendo clic en el icono del lápiz en la barra de herramientas o haciendo doble clic en el propio elemento.
No queremos una interfaz recargada y queríamos que todo fuera intuitivo y fácil de descubrir. Así que, aunque la interfaz de usuario de Page Builder Sandwich parezca sencilla, es bastante potente y puedes hacer muchas cosas mientras editas.
También puedes hacer muchas cosas interesantes con el cursor del ratón. Aparecen superposiciones interactivas y barras de herramientas al pasar el ratón sobre diferentes elementos. Cada una de ellas hace cosas diferentes, como:
Una vez que empiece a editar con PBS, pase el ratón sobre el título de su página/entrada; debería aparecer un contorno sobre él. Haga clic en el título para colocar el cursor en él y modificarlo.
Las herramientas de formato no están disponibles en el área del título; no puede modificar sus estilos ni añadir elementos al título.
Las filas y columnas son herramientas que puedes utilizar para crear contenido dividido en secciones.
Al editar con Page Builder Sandwich desde una página/entrada recién creada, todo el contenido que escribas se colocará en una sola columna. Esto es adecuado para escribir entradas de blog, pero si deseas contar con diseños especiales para páginas de aterrizaje o páginas de contacto, es probable que quieras un diseño de 2 columnas o incluso una combinación de diferentes columnas a lo largo de tu página.
Puedes añadir filas y columnas utilizando estos botones en el inspector:
Una vez añadida, tu nueva fila se mostrará delimitada:
Puedes colocar cualquier cosa dentro de tus filas y columnas: texto, shortcodes, widgets e incluso añadir más filas y columnas.
Cuando se selecciona una fila (o el contenido dentro de tu fila), habrá más opciones disponibles en el inspector. Puedes utilizar estos botones para dar más estilo a tu sección:
También hay opciones adicionales para dar estilo a tus columnas debajo de esto en el inspector.
Puedes mover filas a diferentes ubicaciones haciendo clic y manteniendo pulsado sobre la fila en sí (si haces clic y mantienes pulsado sobre un elemento dentro de ella, se arrastrará el elemento y no la fila).
| Versión Lite | No disponible |
| Versión Premium | Todas las funciones disponibles
|
Opcionalmente, resalte texto y luego haga clic en el elemento de botón en el inspector. Esto debería abrir una ventana modal donde puede escribir la URL a la que enlazar su botón. También puede buscar desde allí cualquier página web existente que tenga en su sitio web.
A diferencia de otros elementos, los botones se colocan en línea, lo que significa que se ubicarán junto a otro texto (u otros botones). No puede arrastrar y soltar botones individuales a otras ubicaciones, sino arrastrar el botón junto con el texto que lo rodea.
Al editar, cuando hace clic en un botón, podrá ver opciones de estilo adicionales en el inspector. También puede pasar el cursor del ratón sobre los botones para ver la URL a la que enlazan y otros comandos.
Nota: Haz esto cuando ya tengas PBS instalado y activado, y quieras actualizarlo con un archivo zip descargado del sitio web o desde un archivo adjunto que te hayamos enviado por correo electrónico.
Nota: Estamos utilizando otro plugin para realizar actualizaciones, esto nos permite actualizar PBS de inmediato sin necesidad de desinstalarlo primero.
Ve a Plugins > Añadir nuevo, luego en el cuadro de búsqueda, busca el plugin «Easy Theme and Plugin Upgrades»
Una vez que encuentres el plugin, instálalo y actívalo.
Tras activar el plugin Easy Theme and Plugin Upgrades, ve de nuevo a Plugins > Añadir nuevo, luego haz clic en el botón Subir plugin situado cerca de la parte superior:
Elige e instala el archivo zip de Page Builder Sandwich,
Eso es todo. Ahora deberías tener la nueva versión de PBS.
| Versión Lite | Disponible con opciones de estilo limitadas |
| Versión Premium | Todas las funciones disponibles
|
Haga clic en el elemento de mapa para añadir un mapa a su página. Siempre que el elemento de mapa esté seleccionado, el inspector debería mostrar los ajustes del mapa. Puede introducir coordenadas de latitud y longitud o una dirección en el campo de ubicación en el inspector para centrar su mapa en esa zona. También hay disponibles otras opciones de estilo allí.
Puede manipular aún más el elemento de mapa desplazándose o acercando/alejando el zoom en el mapa. Tenga en cuenta que los cambios que realice en el mapa se aplicarán en el elemento.
Para los usuarios premium, puede personalizar el estilo de su mapa eligiendo un color para teñirlo; otra opción es utilizar snazzymaps.com para generar algunos esquemas de color y luego utilizarlos. SnazzyMaps se puede utilizar para crear esquemas de color similares a este: https://snazzymaps.com/style/20053/papuportal-dark Para utilizar estos esquemas de color, copie el array de estilos de Javascript en el inspector.
La altura del mapa se puede ajustar, sin embargo, el ancho del mapa no y siempre se redimensionará al ancho máximo disponible. Para redimensionarlo, coloque sus mapas dentro de filas y columnas. También puede configurar los mapas para que ocupen todo el ancho del navegador.
Puede utilizar su ratón para situar rápidamente el cursor en diferentes zonas de su contenido o seleccionar distintos elementos.
También puede utilizar las teclas de flecha de su teclado para desplazar el cursor por el contenido. Puede usar esto para ir por encima o por debajo de las filas.
Al trabajar con filas y columnas, puede hacer clic en los bordes de las filas para añadir contenido justo después o antes de su fila. Esto resulta especialmente útil si tiene varias filas unas dentro de otras y desea añadir algo de contenido entre ellas.
Si no puedes ver el botón «Editar con Page Builder Sandwich» en el frontend de tu sitio, aquí tienes algunas cosas que puedes probar:
El botón de edición de PB Sandwich está disponible en la barra de administración en el frontend. Asegúrate de que la barra de administración esté visible accediendo a tu administración y navegando a Usuarios > Tu perfil y verificando que la casilla de Mostrar la barra de herramientas al ver el sitio esté marcada.
Solo las entradas, páginas y tipos de contenido personalizado son editables en el frontend. Únicamente puedes editar elementos en el frontend si puedes editarlos utilizando el editor de contenido de WordPress en el backend. Las demás áreas de tu sitio (p. ej., el listado de entradas del blog en la portada, la lista de todas las entradas del blog, listados de categorías, páginas 404, páginas de búsqueda) son páginas dinámicas creadas por WordPress junto con el tema que estés utilizando y no se pueden editar con PB Sandwich.
Un indicador de si la página web actual es editable es si puedes ver «Editar entrada» o «Editar página» en tu barra de administración.
Si tu página/entrada se genera dinámicamente mediante un tema o plugin, no se podrá editar con Page Builder Sandwich (y muy probablemente tampoco con otros maquetadores visuales). Si observas que tu editor de contenido en el backend está vacío, pero al ver la página en el frontend está llena de contenido, es un buen indicio de que tu página se genera dinámicamente.
Para comprobar si tu página se genera dinámicamente, visualiza el código fuente de tu página web (haz clic derecho y luego elige «Ver código fuente de la página»). Busca el texto «pbs-main-wrapper»; si no ves ese texto por ninguna parte, tu página se genera dinámicamente.
Aquí tienes algunos ejemplos de contenido generado dinámicamente:
Ha habido casos en los que el tema no mostraba el contenido en absoluto si estaba en blanco, y esto hacía que PBS creyera erróneamente que la página no se podía editar. Para comprobar si este es el caso, edita tu página/entrada en el editor del backend, prueba a añadir cualquier texto en tu contenido (por ejemplo, «hola») y luego haz clic en el botón «Editar con Page Builder Sandwich» desde allí.
¡Gracias a Mathias Hellquist por este consejo!
Algunos maquetadores de páginas te obligan a elegir entre usar el editor de contenido predeterminado de WordPress o el propio editor del maquetador. Si ya has editado tu página usando otro maquetador, es posible que ese maquetador ya haya «reclamado» el contenido y otros ganchos/filtros de contenido ya no puedan ejecutarse. Debido a esto, a veces Page Builder Sandwich no podrá detectar dónde está tu contenido y no mostrará el botón de edición porque no hay nada que editar.
Para solucionar esto, simplemente opta por no utilizar ese maquetador para esa página/entrada específica y elige usar únicamente el editor de contenido predeterminado de WordPress.
Asegúrate de tener permisos de edición en la página
El botón de edición no aparecerá si no puedes editar la página. Por ejemplo, si eres editor o colaborador y puedes escribir entradas de blog y artículos en el sitio, eso no significa necesariamente que puedas editar la página de inicio o tu página de contacto. Si puedes ver el botón «Editar entrada» en tu barra de administración, también deberías poder editarla usando PB Sandwich. Pide permisos de edición al administrador de tu sitio si los necesitas.
PB Sandwich utiliza JavaScript de forma exhaustiva. Si hay errores de JavaScript procedentes de otros scripts que tengas en tu sitio, esto podría impedir que PB Sandwich funcione. Para comprobar si este es el caso, puedes abrir la consola de desarrolladores en tu navegador para buscar errores.
Recomendaría usar Chrome para esto. Haz clic derecho en cualquier parte de la página y luego haz clic en la opción «Inspeccionar». Esto abrirá una nueva área en la parte inferior de tu navegador; haz clic en la pestaña «Consola». Si tienes errores, deberías ver algo como esto:
Si tienes algún error, también puedes obtener una pista de su procedencia haciendo clic o pasando el cursor sobre el nombre del script:
Estos errores pueden proceder de tu tema o de otros plugins que tengas instalados. Solucionar esos errores puede hacer que PB Sandwich vuelva a funcionar.
Si tu tema o uno de tus plugins está causando el error de JavaScript, infórmanos por correo electrónico a [email protected] y haremos todo lo posible para solucionar el problema 🙂
CloudFlare es una CDN de DNS gratuita muy extendida. Es fantástica, pero actualmente PBS tiene problemas con la función Rocket Loader. Rocket Loader mejora el tiempo de carga de los archivos JavaScript, pero altera el orden de llamadas y dependencias de los scripts de PBS. Si tienes Rocket Loader activado, el botón de edición de Page Builder Sandwich no aparecerá (y no se mostrarán errores en la consola de JavaScript).
Para comprobar si tu sitio está utilizando Rocket Loader de CloudFlare, visualiza el código fuente de tu página web (haz clic derecho y elige «Ver código fuente de la página»), y luego busca el texto «rocketscript»; si encuentras ese texto, significa que tienes Rocket Loader activado.
Lee el artículo sobre Compatibilidad con CloudFlare y Rocket Loader para obtener instrucciones completas sobre cómo desactivarlo.
Muy bien, llegados a este punto, si ninguna de las soluciones anteriores funciona, puede que sea el momento de explicar por qué no aparece y qué hacer al respecto. ¿Todo listo? ¡Vamos allá!
Page Builder Sandwich necesita saber dónde se encuentra el contenido de tu página/entrada. Hacemos esto detectando cuándo carga WordPress el contenido de la entrada y «marcando» esa zona, de modo que cuando todo esté cargado podamos localizar dónde está el contenido importante.
A veces, algunos plugins anulan o eluden este proceso y, en su lugar, intentan cargar el contenido a su manera. En ocasiones esto no supone un problema, pero en ciertos casos, especialmente cuando afecta a la carga del contenido principal de la entrada, puede hacer que algunos plugins dejen de funcionar. Cuando otro plugin se salta este proceso de carga, las «marcas» que hemos colocado pueden perderse y, cuando llega el momento de que el editor actúe, ya no puede encontrar dónde está tu contenido. Por tanto, ¡el botón de edición no aparece! También es posible que algunos plugins que añaden contenido a tu página, como ciertos plugins para compartir en redes sociales, dejen de funcionar exactamente por el mismo motivo.
Page Builder Sandwich necesita saber dónde se encuentra el contenido de tu página/entrada, y lo hace enganchándose al filtro the_content y añadiendo un contenedor alrededor de tu contenido principal. Algunos plugins pueden anular esto y, en su lugar, sobrescribir el contenido con una función get_the_content() más adelante en el proceso. Lamentablemente, hacer esto impide que se ejecuten TODOS los filtros de the_content y, por tanto, el contenedor de PBS se pierde. Los cambios de cualquier otro plugin también se perderían.
No hay nada malo en usar get_the_content() de por sí, pero puede tener efectos adversos si se usa en la consulta principal y dentro de la página de plantilla de una sola entrada en lugar de la llamada normal a the_content() donde se ejecutan todos los filtros de the_content.
Puedes comprobar si las «marcas» de Page Builder Sandwich no están presentes visitando tu página/entrada en el frontend y viendo el código fuente de la página con la sesión iniciada. Busca entre el código si puedes encontrar la cadena:
data-name="main-content"
Si la encuentras, puede que solo haya un problema de JavaScript en algún lugar; indícanos el tema y los plugins que estás usando y podremos solucionarlo.
Pero si no la encuentras, puede que simplemente tu tema (o un plugin, aunque lo más probable es que sea el tema si es una página o una entrada de blog) esté alterando el contenido de la entrada. Si este es el caso, ¡deberías ponerte en contacto con el autor del tema e informarle del problema! También puedes mostrarle la explicación técnica del «porqué» anterior; esto puede ayudar con la depuración 🙂
Si te sientes cómodo modificando código PHP, puedes intentar solucionarlo localizando el archivo de plantilla que gestiona el contenido de la entrada. Una solución con la que nos hemos encontrado consiste en reemplazar las llamadas a:
$content = get_the_content();
por:
ob_start(); the_content(); $content = ob_get_clean();<br>
Nota: La variable de PHP puede variar en tu caso, pero el concepto debería ser el mismo. Si funciona, también sería mejor que crearas un tema hijo (child theme) en lugar de aplicar este cambio directamente en tu tema. También pueden surgir efectos secundarios debido al cambio, por lo que es preferible que consultes con el autor de tu tema al respecto.
Page Builder Sandwich no es como el típico maquetador de páginas, no tiene complicaciones y es muy fácil de usar.
Puede ver el vídeo a continuación para hacer un recorrido rápido.
Primero, cree una nueva página, entrada o CPT. Luego, visite su nueva entrada o cualquiera existente en su frontend. PBS es 100% frontend, por lo que no tendrá que trastear en el backend.
Debería haber un botón «Page Builder Sandwich» en la parte superior de su página (en su barra de administración); haga clic en él para comenzar a editar. Debería ver aparecer el área de formato de texto en la parte superior y el panel para agregar elementos en el lateral. ¡El área de contenido de su tema es ahora su editor!
Solo puede editar páginas individuales con PBS. No puede editar un listado de entradas del blog ni una página 404, ya que son creadas por su tema. Las entradas, páginas y tipos de contenido personalizados (CPT) se pueden editar sin problema.
Ahora viene la mejor parte… una vez que esté en el frontend y dentro del editor, haga clic en cualquier texto de su contenido o dentro de su área de contenido y ¡comience a escribir! A diferencia de otros maquetadores de páginas, PBS le permite editar contenido directamente sin necesidad de pasar por cuadros de diálogo emergentes.
Mientras edita, el área superior se llama Barra de formato de texto. Esta barra contiene todas las herramientas de formato que utilizará para dar estilo al texto, como: colores, negrita, cursiva, alineaciones, añadir enlaces, viñetas y más. Pase el cursor sobre cada botón para descubrir qué hace la herramienta.
Pase el ratón sobre el botón Añadir elementos en la parte superior izquierda de la pantalla para mostrar el Panel de añadir elementos. También puede simplemente mover el ratón hacia el lado izquierdo de la pantalla para que aparezca.
Para insertar cualquier elemento, mantenga pulsado el ratón sobre uno y arrástrelo hacia su área de contenido. El área donde se colocaría el elemento quedará resaltada. Suelte el botón del ratón para colocar el elemento.
Pase el ratón sobre cualquier elemento que tenga en su contenido y aparecerán contornos y barras de herramientas sobre ellos.
Puede pasar el ratón sobre los bordes de los contornos para aumentar o disminuir los márgenes entre los elementos.
También puede hacer clic en un botón de la barra de herramientas para realizar acciones rápidas en el elemento. Al hacer clic en el icono del engranaje de la barra de herramientas, se abrirá el Inspector de propiedades, que contiene más opciones.
El inspector de propiedades le brinda un mayor control sobre el aspecto de sus elementos. Puede añadir muchas cosas como sombras, animaciones, cambiar los colores del mapa, el radio del borde y mucho más.
También puede acceder a las propiedades de los elementos contenedores o superiores. Por ejemplo, si colocó una imagen dentro de una columna y abrió el inspector de propiedades, podrá acceder a las propiedades de la imagen, de la columna en la que está contenida y de la fila en la que está contenida la columna.
El inspector de propiedades contiene muchos ajustes diferentes para los distintos elementos, así que asegúrese de explorarlos todos.
Page Builder Sandwich le muestra los shortcodes reales en el frontend, ¡y también puede editarlos fácilmente!
Si se sabe sus shortcodes de memoria, puede insertarlos escribiéndolos directamente en su contenido. Pero si no se los sabe todos de memoria (¿quién lo hace?), el inspector enumera todos los shortcodes disponibles en su sitio. Arrastre un botón de Shortcode desde el inspector a su área de contenido, busque el que desea insertar y haga clic en él para insertarlo.
Los shortcodes se renderizan como contenido real en el frontend; para editarlos, puede seleccionarlos y revisar sus atributos en el inspector. O, para un mayor control, puede hacer doble clic en el shortcode para editarlo en su formato sin procesar. Tras realizar sus modificaciones, el shortcode se actualizará para reflejar los cambios.
Con PBS puede hacer clic y arrastrar cualquier cosa para moverla a cualquier lugar. Cuando arrastre algo, muévalo encima de otro elemento en la página; puede moverlo ya sea arriba o abajo de cualquier otro contenido.
Guardar su trabajo
Una vez que esté satisfecho con su diseño, simplemente haga clic en el botón de guardar en la parte superior izquierda de su página. ¡Eso es todo!
Page Builder Sandwich no es como el típico constructor de páginas, no tiene complicaciones y es fácil de usar.
Puede ver el vídeo a continuación para un recorrido rápido.
Primero, cree una nueva página, entrada o CPT. Luego visite su nueva entrada o cualquier otra existente en el frontend. PBS funciona al 100% en el frontend, no tendrá que complicarse en el backend.
Debería haber un botón «Page Builder Sandwich» en la parte superior de su página (en la barra de administración), haga clic en él para empezar a editar. Debería ver aparecer el área de formato de texto desde la parte superior y el panel de añadir elementos desplegándose desde el lateral. ¡El área de contenido de su tema es ahora su editor!
Solo puede editar páginas individuales con PBS. No puede editar una lista de entradas de blog ni una página 404, ya que son creadas por su tema. Las entradas, páginas y tipos de entrada personalizados funcionan bien.
Ahora viene la mejor parte… una vez que esté en el frontend y dentro del editor, ¡haga clic en cualquier texto de su contenido o dentro de su área de contenido y empiece a escribir! A diferencia de otros constructores de páginas, PBS le permite editar contenido directamente sin necesidad de pasar por cuadros de diálogo emergentes.
Al editar, el área superior se llama la Barra de formato de texto. Esta barra contiene todas las herramientas de formato que utilizará para dar estilo al texto, como: colores, negrita, cursiva, alineaciones, añadir enlaces, viñetas y más. Pase el cursor sobre cada botón para descubrir qué hace la herramienta.
Pase el cursor sobre el botón Añadir elementos en la parte superior izquierda de la pantalla para mostrar el Panel de añadir elementos. También puede simplemente mover el ratón hacia el lado izquierdo de la pantalla para que aparezca.
Para insertar cualquier elemento, mantenga pulsado el ratón sobre uno de ellos y arrástrelo hacia su área de contenido. El área donde se colocará el elemento se iluminará. Suelte el botón del ratón para colocar el elemento.
Pase el cursor sobre cualquier elemento que tenga en su contenido y aparecerán contornos y barras de herramientas sobre ellos.
Puede pasar el cursor sobre los bordes de los contornos para aumentar o disminuir los márgenes entre elementos.
También puede hacer clic en un botón de la barra de herramientas para realizar acciones rápidas en el elemento. Al hacer clic en el icono de engranaje de la barra de herramientas se abrirá el Inspector de propiedades, que contiene más opciones.
El inspector de propiedades le ofrece más control sobre el aspecto de sus elementos. Puede añadir muchas cosas como sombras, animaciones, cambiar los colores del mapa, radio del borde y mucho más.
También puede acceder a las propiedades de los elementos superiores (padres). Por ejemplo, si colocó una imagen dentro de una columna y abrió el inspector de propiedades, puede acceder a las propiedades de la imagen, de la columna en la que está contenida y de la fila en la que se encuentra la columna.
El inspector de propiedades contiene muchos ajustes diferentes para distintos elementos, así que asegúrese de revisarlos todos.
Page Builder Sandwich le muestra los shortcodes reales en el frontend, ¡y también puede editarlos fácilmente!
Si se ha memorizado sus shortcodes, puede insertarlos escribiéndolos directamente en su contenido. Pero si no los ha memorizado todos (¿quién hace eso?), el inspector enumera todos los shortcodes disponibles en su sitio. Arrastre un botón de Shortcode desde el inspector hasta su área de contenido y busque el que desea insertar; haga clic en él para insertarlo.
Los shortcodes se renderizan en contenido real en el frontend; para editarlos, puede seleccionarlos y comprobar sus atributos en el inspector. O, para un mayor control, puede hacer doble clic en el shortcode para editarlo en su formato sin procesar. Tras realizar sus ediciones, el shortcode se actualizará para reflejar los cambios.
Puede hacer clic y arrastrar cualquier cosa y moverla a cualquier lugar con PBS. Al arrastrar algo, muévalo encima de otro elemento en la página; puede moverlo tanto por encima como por debajo de cualquier otro contenido.
Guardar su trabajo
Una vez que esté satisfecho con su diseño, solo haga clic en el botón de guardar en la parte superior izquierda de su página. ¡Eso es todo!
El plugin Lite y el plugin Premium son dos plugins diferentes. Para utilizar las funciones premium, tendrá que desactivar (o desinstalar) la versión Lite, luego instalar y activar el plugin Premium y, a continuación, introducir su clave de licencia.
Nota: Si activa los plugins lite y premium al mismo tiempo, el plugin le indicará que desactive primero el que ya tiene antes de continuar.
Nota para los clientes que compraron PBS en pagebuildersandwich.com: También puede descargar el plugin desde el sitio web; la clave de licencia actual que tiene aún debería funcionar. Si no es así, póngase en contacto con nosotros y podremos emitirle una nueva.
Después de comprar PBS, debería recibir un correo electrónico con dos cosas:
Instale y active el plugin premium, y entonces debería aparecerle esta pantalla:
Introduzca aquí su clave de licencia y haga clic en Agree & Activate License. Ahora las funciones premium ya deberían estar disponibles.
Como alternativa, también puede ir a su página de plugins y buscar el plugin Page Builder Sandwich en la lista:
Haga clic en el enlace Activate License , y debería poder introducir su licencia desde allí.
Solo puedes editar páginas o entradas individuales con Page Builder Sandwich. Piénsalo de esta manera: si hay un área de «Nueva entrada» con un editor de contenido en el panel de administración para ello, entonces puedes editarlo con Page Builder Sandwich.
Deberías poder editar el contenido de cualquier tipo de contenido personalizado.
Nos hemos asegurado de que Page Builder Sandwich tenga un impacto casi nulo en el rendimiento de tu sitio web. Cuando no se ha iniciado sesión, como mínimo, solo se ponen en cola los estilos CSS de filas y columnas, junto con los scripts JS y CSS necesarios para los shortcodes que hayas utilizado.
Para los visitantes de tu sitio web, como mínimo, solo se ponen en cola los estilos CSS de filas y columnas, junto con la inclusión de los scripts JS y CSS necesarios para los shortcodes que hayas utilizado.
Recientemente hemos añadido algunas correcciones relacionadas con el problema de compatibilidad al tener activados conjuntamente Page Builder Sandwich y el plugin IMPress for IDX Broker. Esto provocaba una caída en el frontend para los usuarios que habían iniciado sesión.
La corrección hizo que PBS volviera a ser funcional, pero hemos tenido que retirar del widget de IDX Broker la capacidad de insertarse dentro del editor. A pesar de ello, el widget de IDX Broker se puede seguir utilizando en su menú Apariencia > Widgets.
Para permitirle trabajar más rápido, puede utilizar diversos atajos de teclado disponibles con Page Builder Sandwich.
Estos son atajos para comandos que no son de formato/herramientas. Para los atajos de teclado de formato/herramientas, pase el ratón sobre cada botón de la barra de formato de texto para ver su combinación de teclas de atajo.
| Atajo de teclado | Descripción |
| CTRL+E (mientras no se edita) | Comenzar a editar |
| CTRL+SHIFT+R (mientras se edita) | Actualizar página (ya que CTRL+R se utiliza para alinear a la derecha) |
| CTRL+S | Guardar cambios |
| CTRL+ESC | Descartar cambios y detener la edición |
| CTRL+C | Copiar |
| CTRL+V | Pegar |
| CTRL+X | Cortar |
| CTRL+ENTER | Salto de línea / siguiente línea |
| CTRL+Z | Deshacer |
| CTRL+SHIFT+Z (Mac) CTRL+Y (PC) |
Rehacer |