Si te has fijado, una de las reglas de oro de WordPress es hacer siempre, siempre las cosas un poco más fáciles para todos, tanto para principiantes como para desarrolladores experimentados. Una de las formas en que logran este objetivo es mediante el uso de shortcodes.
Suena bastante sencillo. Ahora bien, si no habías oído hablar de los shortcodes antes de este artículo y no sabes qué aspecto tienen, son esos arcaicos textos similares a código encerrados entre corchetes.
En comparación con el código normal, que suele tener este aspecto:
(Ejem… ¿Qué?)
shortcodes en general tienen un aspecto parecido a este:
(Pan comido.)
…y si eres desarrollador (o, qué demonios, incluso alguien que ha estado frente a un ordenador al menos un par de veces), probablemente estarás de acuerdo en que el mero hecho de teclear y hacer clic para realizar una mísera tarea puede consumir un montón de tiempo. Por la misma razón por la que tenemos atajos de teclado, los shortcodes existen para facilitarnos las cosas a todos, de modo que ahorremos tiempo para hacer y crear cosas mejores; se parecen mucho a las teclas de acceso rápido en el sentido de que tienen ese mismo propósito.
Ahora volvamos a este shortcode específico, el mismo de arriba:
Este en concreto se llama embed shortcode y viene integrado por defecto en WordPress. Incrusta el vídeo de la URL en tu contenido. Si estás en WordPress ahora mismo, puedes copiar y pegar el shortcode anterior en tu sitio si quieres probarlo.
Sin embargo, los shortcodes no son la solución perfecta para ahorrar tiempo. En nuestro artículo anterior, profundizamos más en por qué los shortcodes tienen sus propias desventajas y qué está preparando el equipo de Sandwich para solucionarlas.
Por ahora, no dudes en experimentar con los shortcodes y ver todo lo que pueden hacer por ti.
When I started getting further into software development and WordPress, I noticed that not a lot of page builders I come across with have that “page builder standard” I was looking for: fast, easy,convenient.
Page Builder Sandwich, then, was created with the goal of having a builder meet these same standards.
I wanted- and still want it– to be the best page builder out there, and the best way I could accomplish that, I figured, was to add in features in a way in which page building becomes helpful and accessible to everyone –developers and noobs alike.
I’d like to note though, that I didn’t simply create PBS with the intent of merely bombarding it with features just for the sake of it.
I want to add in features that people would want to work with; features that hopefully, would make the experience of page building feel a little bit more like magic.
Durante estas últimas semanas, el equipo de PBS ha añadido un elemento de mapa y también un elemento de pestañas.
Ahora bien, resultaría una rutina bastante fácil y sencilla para nosotros limitarnos a añadir un nuevo elemento cada dos días.
But I think it’d be better if we take it to the next level; to take a bigger leap, do something more drastic, something drizzled with a little more awesomesauce.
And so we came up with an idea: “How about we start supporting 800+ plugins along with their 2000+ shortcodes?!?!”
I know what you’re thinking: “How the heck can you supportthat much shortcodes? Is thatevenpossible?”
Well, the simple answer is yes.Yes it is.
And we’ve managed to achieve this feat through shortcode mapping.
What is Shortcode Mapping?
Shortcode mapping makes building shortcodes more friendly.
Put more simply, shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.
Los beneficios de un sistema como este son bastante considerables:
1.) Since PBS already knows what your shortcodes are, you get to spend less time going through the documentation of each plugin you use, and check how to use their shortcodes.
2. ) In other words: Say goodbye to the grueling task of manually typing in your shortcodes!
3.) With shortcode mapping, you can also say goodbye to manually checking post type ID’s. How? PBS can give you a list of all your contact forms through a drop-down list, so instead of looking for ID’s while on admin mode, you can pick from the list we made instead.
4.) You’ll get to use dropdowns, colorpickers, image uploaders, and even number sliders when adjusting shortcode attributes.
5.) Overall faster page building time!
Sin embargo, el mapeo de shortcodes no es algo nuevo, y un buen número de maquetadores visuales ya cuentan con él. No obstante, ¿qué hace que el nuestro sea diferente?
Cómo funciona el mapeo de shortcodes en otros maquetadores visuales
Each person/site does their own shortcode mapping.
Other page builders have a dedicated admin page for shortcode mapping. You go inside your admin page, and then their admin page. You put in your shortcode, edit a number of text fields, then hit save. Finally, when you go to your page builder editor, the shortcode is now there in element list.
En este escenario, la carga del mapeo de shortcodes recae sobre ti, el usuario. Si quieres que todos tus shortcodes estén completamente mapeados con todos los atributos (y con los atractivos selectores de color y demás cosas), tendrás que asegurarte de introducir cada detalle de todos y cada uno de los shortcodes.
What’s more, all your mappings only reside on your site. So when the times comes that you need to work on another site, you’ll have to copy your mappings all over again. Additionally, if and when you install a new plugin that has shortcodes, then you’re going to have to map those too.
Cómo funciona el mapeo de shortcodes en Page Builder Sandwich
Shortcode mappings are shared across all users.
Unlike the norm, shortcode mapping in Page Builder Sandwich is done on a global scale. The most used and popular plugins are gathered first, and all their shortcode mappings are created and updated in a central area. These will then spread out to all users depending on what they have installed. In other words, PBS studies and reviews all the shortcodes you have, including your activated plugins. Afterwards, it gives you the mapping of basically everything you need.
Esto nos aporta un montón de ventajas estupendas:
Maximum coverage. Since we’ll be mapping out the shortcodes of the popular plugins, PBS will be able to support a majority of the shortcodes available on your site.
Constant and frequent additions, updates and corrections. And since it’s in a central area, changes can be made quickly, and can be disseminated to all users.
It basically works like magic. Let’s say you just installed a new plugin. Then you activate it, all mappings for its shortcodes will automatically get sent to you right away.
Gone are the days when you have to personally map shortcodes yourself. PBS will do that for you.
Your site remains lean and fast, and will only contain shortcode mappings that are relevant to you.
Plugin zip size remains small. Even though PBS supports thousands of shortcodes, the plugin file size is still small. Your site and your backups remain small too!
In case you’re interested in reading into how we made all of this possible, we actually have a second part to this article in which things might start sounding a little more technical (if that’s your drift).
¡Suscríbete a nuestro boletín!
You can also opt to sign up to our mailing list, which will automatically notify you when we officially release this feature, (you can get future updates from us too, if you want). The shortcode mapping functionality will be out for our customers tentatively on August 12 August 15 2016. Not all shortcodes will be mapped by this time (our estimate is maybe 100 plugins), but mapping will be continuously done and customers will get them as soon as new ones roll out.
So sign up to our newsletter to get news on shortcode mapping, when we’ll release it, and when we open shortcode mapping to the public! Until then, we hope you enjoy this new feature of ours, and that you have fun exploring it!
In general, one thing that most people tend to overlook is today’s demand for functional design and aesthetics. While not all of us may be aware of the extent of just how much it matters, the fact remains that design is a very crucial factor towards success—any kind of success– including your website’s. Yes, your content is an important key towards reeling your audience in, but how your site looks will definitely be a determining factor as well.
Aquí tienes algunos consejos básicos sobre lo que puedes hacer para mejorar el diseño de tu sitio web.
You want to add the best quality images on your website that reflect your brand style, but if you don’t have a high-resolution camera or the money to pay a photographer, you can get free stock photos from sources like Pexels and Pixabay. Images should pertain directly to the content of your site. Including images is always better than no images at all.
Juicebox used this zesty combination for people to get that organic and fresh that the brand represents
La combinación de colores de un sitio web desempeña un papel fundamental a la hora de crear el tono y el ambiente adecuados para tu marca. Elegir un color bonito no significa necesariamente que sea el correcto. Cada color transmite un mensaje y una respuesta diferentes. El color es una de las primeras cosas que perciben los visitantes del sitio y realmente puede repercutir en el éxito de tu sitio web.
Elige dos o tres colores base como máximo para tu diseño. Si sientes la necesidad de añadir más color, puedes utilizar los tintes y las sombras de tus colores base. En la teoría del color, un tinte es la mezcla de un color con blanco, lo que aumenta la luminosidad, mientras que una sombra es la mezcla de un color con negro, lo que reduce la luminosidad.
Additional Tip: There are great tools such as Adobe Colour CC and Coolors to make picking colors easier.
Utiliza tipografías que contrasten
There are more fonts other than Arial, Georgia and Times New Roman. Google Web Fonts offer a variety of typefaces you can use for free on your site. Just like with choosing colors you can easily over do fonts, so I suggest you do not use more than two typefaces on your website. Most well-designed websites use two typefaces only, one for the headlines and one for the body text.
Combinar dos tipografías puede resultar difícil incluso para los diseñadores. Podrías optar por la sencillez jugando con dos fuentes diferentes de una misma familia tipográfica. Si es necesaria una segunda tipografía, elige una que contraste bien con la primera. Normalmente, combinar una fuente serif con una sans-serif funciona bien. Otro consejo importante es elegir tipografías que coincidan con el estilo de tu empresa. Podrías tener la fuente más bonita del mundo, pero si se utiliza en el contexto equivocado, aún podría verse terrible.
Mantén la limpieza usando espacios en blanco
Whitespace is one of the easiest and most effective ways to create a visually effective website. Your website should look well organized and clutter free, directing users exactly where they need to go. Make sure elements stand out and are grouped together by using whitespace properly.
Hazlo adaptable a dispositivos móviles
People are probably going to visit your site at different times using different devices and screen sizes. While content is important, consistency across devices provides a better user-experience for anyone who visits your site. It makes it easier for users to share and link contents on your website to social media platforms on mobile. On top of that, Google prioritizes responsive websites on search results.
Consejo adicional: El uso de Page Builder Sandwich en tu sitio web habilitará automáticamente la visualización móvil y la adaptará al tamaño de pantalla del móvil.
Conclusión
Recuerda: subestimar el poder del diseño es uno de los peores errores que puedes cometer al crear tu sitio web. Por supuesto, no tienes que esforzarte en exceso al diseñar tu sitio web, pero mientras tanto, el simple hecho de seguir estos consejos puede garantizar que tu sitio no despierte ningún sentimiento de desaprobación por parte de tu audiencia.
Los shortcodes son uno de los pilares de WordPress. Los shortcodes son el puente entre los desarrolladores y los creadores de sitios, lo que permite a las personas colocar fragmentos elaborados de contenido en casi cualquier lugar que deseen. A los creadores de plugins les encantan los shortcodes, ya que esto permite una mayor flexibilidad en la forma y el lugar en que sus usuarios muestran su contenido.
Si no sabes qué son los shortcodes ni qué aspecto tienen, son esos arcaicos textos similares a código encerrados entre corchetes. Tienen un aspecto similar a este:
Este en concreto se llama el shortcode embed y viene integrado por defecto en WordPress. Este en particular incrusta el vídeo de la URL en tu contenido. Simplemente copia y pega el shortcode anterior en tu sitio si quieres probarlo.
Entre bastidores, lo que ocurre es que cuando WordPress encuentra un shortcode en tu contenido, este se procesa y se convierte en otra cosa. En nuestro caso anterior, cada vez que un
shortcode es detectado, WordPress toma la URL del shortcode y la comprueba con una serie de proveedores de contenido que tiene. Cuando encuentra uno, obtiene el código de incrustación de iframe adecuado y muestra eso en su lugar.
¿Cuál es el problema entonces? Suena bastante fácil: simplemente introduces un texto corto con corchetes y listo.
Aquí entra en juego la API de Shortcodes…
Shortcodes a raudales
La API de Shortcodes abre la creación de shortcodes a los desarrolladores. Gracias a esto, los desarrolladores pueden añadir sus propios shortcodes dentro de sus plugins.
Esto es genial: ahora, con solo un fragmento corto similar a código (de ahí el nombre «shortcode»), tanto los principiantes como los usuarios avanzados pueden colocar prácticamente cualquier tipo de contenido que deseen en cualquier lugar.
Por defecto, WordPress solo cuenta con un puñado de shortcodes. Es fácil escribirlos de memoria porque son muy pocos. Pero si instalas unos cuantos plugins, el número de shortcodes se dispara rápidamente a una docena o más, y en algunos casos a más de un centenar. Cada shortcode tiene su propio conjunto de atributos e instrucciones sobre cómo utilizarlos. Lo más probable es que cada plugin tenga algún tipo de documentación sobre cómo funcionan todos sus shortcodes y enumere todos los parámetros disponibles en cada uno. Pero estarías loco si intentaras memorizar todos los shortcodes y sus atributos.
El problema es que no existe un área centralizada donde puedas consultar todos los shortcodes disponibles en tu sitio y cómo utilizarlos.
Algunos intentan resolver el problema
Algunos plugins intentan resolver este problema presentando todos sus propios shortcodes en un menú desplegable de fácil acceso. Al hacer clic en uno, se inserta el shortcode, junto con todos sus atributos posibles. Ya no hace falta memorizarlo, lo cual es algo bueno.
Algunos van más allá y añaden un formulario emergente de ajustes que tiene casillas de verificación y selectores de color para rellenar los atributos del shortcode.
Esta solución funciona en cierta medida. Sin embargo, cada plugin solo enumera sus propios shortcodes. Por lo tanto, si cada plugin crea su propia forma de selector de shortcodes, inevitablemente te encontrarás con ocasiones en las que tendrás múltiples selectores de shortcodes en tu pantalla (esto ya me ha ocurrido antes).
En otras palabras, cada plugin va a lo suyo e implementa su propia solución para sus propios shortcodes. Algunos plugins añaden un botón nuevo junto al botón «Añadir medios», o uno nuevo dentro de TinyMCE.
Así que ahora podrías estar pensando: «¿Por qué no recopilar también los shortcodes de otros plugins e incluirlos también en tu desplegable / selector de shortcodes?». Bueno, eso es exactamente lo que pensé yo. Pero esto es más fácil decirlo que hacerlo. Enseguida explicaré por qué, pero primero veamos cómo sería una solución ideal.
La solución ideal
El plan perfecto sería crear un plugin que recopile todos los shortcodes disponibles en tu sitio, te presente la lista y también te ayude a rellenar todos los atributos. Y cada vez que instales un nuevo plugin, también se te presentarán todos esos shortcodes recién incorporados.
Imagina un lugar centralizado donde estuvieran ubicados todos tus shortcodes para un fácil acceso. Cada shortcode describiría lo que hace y a qué plugin pertenece. Luego, para cada atributo disponible, imagina que cada uno de ellos tuviera una etiqueta, una forma adecuada de seleccionar un valor para él y una descripción. Se te mostrarían menús desplegables, selectores de color, botones de opción, interruptores y demás.
Algo así nos facilitaría la vida como creadores de sitios web y de contenidos. Se acabaría tener que consultar diferentes documentaciones o distintas partes de tu administración solo para copiar un shortcode generado para un carrusel que quieras utilizar.
La salvedad
Desafortunadamente, es bastante difícil hacer algo así en este momento. No hay una forma infalible de conocer todos los detalles de un shortcode. Puedes obtener una lista de todos los shortcodes, pero solo sus etiquetas/nombres reales; no puedes obtener ningún detalle adicional sobre ellos, como una lista de atributos, qué hacen y sus tipos (como una cadena, un color o un número). Tampoco puedes obtener nada parecido a una descripción de cada atributo.
Nota para los desarrolladores: sí, hay un tercer argumento recién añadido para la función shortcode_atts, pero no es un argumento obligatorio. Así que, a menos que todos los desarrolladores de plugins del mundo lo implementen, seguiremos sin tener una forma segura de determinar todos los atributos de un shortcode.
La API de Shortcodes no proporciona ninguna función para añadir descripciones de shortcodes, conversión de tipos de atributos o descripciones de atributos. Y a menos que el propio WordPress añada un área central para acceder a los shortcodes, dudo que se cree esta funcionalidad.
Conclusión
En este momento, la tarea de organizar los shortcodes queda en manos de cada desarrollador. A menos que se desarrolle un método centralizado dentro de WordPress, espera seguir viendo múltiples botones de «Añadir shortcode» en tu panel de administración. El hecho de si algo así debería añadirse o no al núcleo de WordPress es otra gran discusión en sí misma.
Una alternativa
Existen plugins de maquetación visual que abordan esto de manera diferente. En lugar de detectar los shortcodes de forma programática, cuentan con mapeadores de shortcodes donde los usuarios pueden introducir manualmente cada detalle de un shortcode. Una vez hecho esto, pasa a estar disponible dentro del maquetador visual. Aunque esto funciona, solo están disponibles en tu propio sitio.
Aquí en Page Builder Sandwich estamos creando algo que, con suerte, pueda resolver este dilema de los shortcodes. Suscríbete a nuestro boletín a continuación para recibir avisos sobre nuestros progresos.
¡Ahora puedes colocar mapas en los diseños de tus páginas utilizando Page Builder Sandwich!
Es algo extraño entusiasmarse por los mapas. Tomas la URL de Google Maps y la incrustas. O tal vez buscas un plugin de mapas en línea e insertas un shortcode. O tal vez tu otro maquetador de páginas ya tenga uno y puedas añadir uno cuando quieras. Pero la razón por la que estamos entusiasmados es que hemos llevado la adición de mapas a un nivel completamente nuevo.
Aquí tienes una vista previa:
La vieja y aburrida forma de añadir un mapa
Así es como se añade un mapa con el típico maquetador de páginas:
Arrastras un nuevo elemento de mapa,
Introduces la latitud y la longitud en los campos,
Introduces otros valores en los campos como la altura del mapa, la anchura del mapa, marcas la casilla del estilo de carretera, etc.,
Pulsas en vista previa, compruebas cómo queda y decides que necesitas cambiar algo para que se vea mejor,
Vuelves al maquetador de páginas y cambias los valores, luego repites el paso 4 anterior.
La forma de Page Builder Sandwich de añadir un mapa
Los mapas en los sitios web son interactivos: puedes desplazarte por ellos, acercar y alejar el zoom. Así que pensamos, ¿por qué no eliminar las suposiciones y permitir que la gente interactúe directamente con el mapa mientras crea su página?
Así es como se añade un mapa con Page Builder Sandwich:
Añades un elemento de mapa,
Escribes la latitud y la longitud o la dirección donde deseas centrar el mapa,
Mueves el mapa y acercas o alejas el zoom para conseguir el aspecto deseado,
Añades colores atractivos a tus mapas para que se adapten a tu estilo,
Pulsas guardar.
Nuestra forma es mucho más divertida e intuitiva. Básicamente interactúas con el mapa de la misma manera que lo harías con un Google Map normal.
Mapas a color o personalizados con SnazzyMaps
Una función fantástica que hemos incluido es la posibilidad de tintar y dar color a tus mapas, y es sumamente fácil de hacer. (Esto es solo para la versión premium). Si quieres colorear tu mapa, solo tienes que hacer clic en nuestro selector de color y elegir un color, y tu mapa cambiará al instante.
Aquí tienes uno que hemos tintado de rosa:
Page Builder Sandwich también admite combinaciones de colores más elaboradas mediante SnazzyMaps. Cuentan con una enorme lista de esquemas de color aportados por los usuarios y te permiten crear el tuyo propio si deseas un mayor control sobre los colores.
Simplemente busca la combinación de colores que te guste, copia el código y pégalo en Page Builder Sandwich. El esquema de color se aplicará a tu mapa de inmediato.
Hay muchas más cosas geniales que puedes hacer con los mapas, como añadirlos en filas de ancho completo para lograr un efecto más espectacular. También puedes añadirlos dentro de un carrusel si quieres, o dentro de pestañas (una función que llegará pronto).
Si aún no tienes Page Builder Sandwich, puedes probar la versión premium haciendo clic en el enlace de «Demo en vivo» de arriba.
Básicamente, el espacio en blanco, en su definición más elemental, es el espacio alrededor y entre todos los elementos de una composición que se deja sin marcar. No es solo una pérdida de espacio en pantalla, como piensa la mayoría de los propietarios de sitios web. Cuando se utiliza bien, el espacio en blanco puede ofrecer beneficios reales para promocionar mejor un producto. Es una clave fundamental para crear un buen diseño y mejora un sitio web en todos los sentidos.
Aunque el nombre espacio en blanco insinúe que el espacio es blanco, no siempre tiene que ser literalmente blanco. En realidad, el espacio en blanco puede ser de cualquier color; incluso puede tener un patrón sutil o una textura. Es un área en la que no quieres que el ojo se concentre. De forma alternativa, también se le denomina espacio negativo.
Entonces, ¿por qué es importante el espacio en blanco?
El espacio en blanco entre las líneas base y los párrafos realmente ayuda a que las personas lean cómodamente todo el contenido del sitio. Ajustar pequeños detalles de tu sitio (como el interlineado o el espaciado entre letras) puede marcar una gran diferencia a la hora de facilitar la lectura.
El objetivo es hacer que las personas quieran seguir leyendo diseñando maquetaciones que resulten agradables a la vista.
Fuente de la imagen: HP Magic Words
Motivo n.º 2: acelera la interacción
Seamos sinceros: la mayoría de tus visitantes no tendrán la paciencia suficiente para mirar con detenimiento al navegar por los sitios web. Cuando un sitio web se ve saturado, distrae a los usuarios de encontrar lo que están buscando.
El espacio en blanco debe ayudar a guiar al visitante por la página. Menos elementos compitiendo por la atención, junto con un uso adecuado de los espacios en blanco, pueden evitar distracciones que ralenticen a los visitantes.
Motivo n.º 3: dirige la atención hacia los elementos adecuados
El espacio en blanco puede dar a los usuarios pistas visuales sobre hacia dónde deben mirar. Cuando se utiliza de forma adecuada, el espacio en blanco ayuda a enfatizar la información y a dirigir la atención hacia un área concreta de tu sitio web.
Recuerda: si todo destaca, nada destaca.
Fuente de la imagen: Pocket Penguins
Motivo n.º 4: las primeras impresiones importan
El aspecto y la sensación general de un sitio web son la clave principal para causar una buena primera impresión. Una buena primera impresión a menudo se traduce en visitas más largas. Muy poco espacio en blanco puede hacer que tu sitio web parezca de baja calidad y poco fiable. Los visitantes no considerarán que el sitio o la marca sean creíbles a menos que tengan un aspecto atractivo. Tener una cantidad adecuada de espacio en blanco ayuda a crear el tono correcto para tu sitio web. El espacio en blanco puede ser una forma de transmitir ingenio, frescura y, en ocasiones, elegancia.
Consejo: aquí tienes una idea sobre cómo hacer que tu diseño web sea simple y familiar.
Fuente de la imagen: Flock Knitwear
Motivo n.º 5: ayuda a crear espacio para respirar y equilibrio
Un diseño equilibrado no significa que sea simétrico. Un elemento de diseño grande se puede equilibrar con varios más pequeños. Añadir espacio en blanco es una forma excelente de equilibrar elementos de diseño de diferentes tamaños en tu página. Crea una fluidez para que la mirada de los usuarios no salte por todos lados. Un buen diseño debe ser capaz de guiar al usuario de un punto a otro sin confundir al visitante.
Conclusión
La próxima vez que visites un sitio web y te encuentres quedándote un buen rato, piensa en qué hizo que te quedaras a leer. ¿Crees que el interlineado hace que un artículo sea más fácil de leer? ¿La experiencia hace que quieras volver a por más? ¿Te costó encontrar la navegación?
Toma nota de la buena aplicación del espacio en blanco en el sitio web. Si crees que también puede funcionar en tu sitio web, aprende a aplicar y gestionar cuánto espacio debes asignar a cada elemento hasta que consideres que has transmitido el tono adecuado y la legibilidad sin sacrificar la «fluidez» que deseas para tu sitio web.
El objetivo final de cualquier sitio web es la comunicación. El atractivo visual va de la mano con el éxito de tu sitio web.
Si eres relativamente nuevo en la creación de sitios web, lo más probable es que no estés familiarizado con el gran debate entre WordPress.com y WordPress.org. Puede que ni siquiera supieras que existía el otro, ni los diferentes pros y contras de cada uno. Entonces, ¿en qué consiste, por favor, este gran debate entre usar WordPress.com y WordPress.org? ¿Acaso uno de ellos es solo una copia barata esperando a ser demandada?
Pues no.
El debate, en pocas palabras, gira en torno a cuál de estos dos servicios de WordPress se adapta mejor al sitio web que intentas crear. Ninguno es una copia del otro y ambos sitios son propiedad de WordPress; lo que ocurre es que uno (.com) es una versión más accesible para no desarrolladores que el otro, y .org tiene muchas menos limitaciones a la hora de crear un sitio en comparación con .com.
«Pero ¿cómo sé cuál necesito?»
La respuesta a esta pregunta depende totalmente de las necesidades de tu futuro sitio web. No existe una versión de WordPress que sea objetivamente la «mejor» o la «ideal» a utilizar. Ambas tienen sus propias características únicas y una cantidad equivalente de ventajas y desventajas.
WordPress.com: ¿Por qué y cuándo debería elegirlo?
WordPress.com se encarga de los aspectos básicos esenciales por ti, lo que te permite centrarte más en el contenido de tu sitio. Es un creador de sitios gestionado y alojado por completo por un grupo empresarial llamado Automattic. Obtienes alojamiento prémium, copias de seguridad, seguridad y elementos similares. Esto significa que puedes concentrarte en el contenido de tu sitio con mucha más facilidad, en comparación con tener que pasar horas interminables creándolo desde cero.
Ten en cuenta, no obstante, que WordPress.com también tiene sus propias limitaciones. Aunque no tengas que preocuparte tanto por el mantenimiento del funcionamiento interno de tu sitio, debes tener presente que probablemente no tendrás tanta libertad como te gustaría. Si bien personalizar la interfaz de tu sitio puede no ser un problema (WordPress.com incluye una gran cantidad de temas, por ejemplo), añadir ciertas funcionalidades y elementos en forma de plugins puede convertirse en un problema, especialmente si tu sitio necesita características específicas que no están disponibles en WordPress.com.
Cómo mantener un sitio web es una historia completamente diferente. Depende en gran medida de: 1) no eres desarrollador de WordPress, 2) no tienes intención de aprender a programar, o 3) no tienes tiempo o apenas dispones de él.
WordPress.org: ¿Cuándo es el momento de tenerlo en cuenta?
Una regla general a la hora de considerar WordPress.org es cuando estás al menos un poco familiarizado con el funcionamiento del código o estás dispuesto a invertir algo de tiempo en aprender a hacerlo. Dado que WordPress.org es una versión autoalojada de WordPress, puedes meterte de lleno en las entrañas tanto como desees. Además, tienes la libertad de trastear con él tanto o tan poco como quieras. Serías el encargado de buscar tu propio alojamiento, de configurar tus propias copias de seguridad y, en general, de mantener el sitio web por ti mismo y, lo que es más importante, bajo tus propias condiciones.
«Pero espera, ¿por qué iba a querer eso? ¿No se supone que la finalidad de WordPress es facilitar la creación de sitios?»
…No exactamente. Piénsalo de esta manera: The Daily Post plantea una analogía excelente entre WordPress.org y WordPress.com, de modo que hasta el más novato entre los novatos (como yo) capta la idea de inmediato.
Según ellos, debes pensar en WordPress.com como algo sobre lo que no tienes la propiedad absoluta. Imagínate, por ejemplo, cuando tenías 15 años y aún vivías con tus padres. Si querías pintar tu habitación, primero tenías que pedirles permiso (ya que ellos son, por supuesto, los propietarios de toda la casa, incluida tu habitación). Técnicamente, la habitación es tuya, pero al fin y al cabo, bueno… en realidad no del todo.
Así que, si necesitas o quieres hacer algún cambio drástico (como pintar las paredes o ampliar la habitación), tendrías que hablarlo y/o llegar a un acuerdo con los verdaderos dueños de la casa, es decir, mamá y papá. Sin embargo, la ventaja de esto es que cuando salta un fusible en el sótano o el aire acondicionado deja de funcionar, tus padres se encargan de solucionarlo y tú no tienes que preocuparte por nada.
WordPress.org, por otro lado, es algo que puedes personalizar y modificar libremente por tu cuenta. Esto se puede comparar con el momento en que por fin te independizas a los 18 y consigues un piso propio. Al tener la propiedad absoluta de tu vivienda, no tienes que llegar a acuerdos con nadie para pintar tus paredes de ese color que tu madre siempre detestó; tienes la libertad de tomar la decisión y/o contratar a alguien que cumpla tus estándares para que lo haga por ti. Además, también tienes la libertad de elegir exactamente qué unidad de aire acondicionado quieres para tu salón. La única cuestión es que, si se estropea, tendrás que contratar a un técnico para repararlo o averiguar qué falla y arreglarlo por ti mismo (lo cual no está nada mal, porque, oye, lección aprendida, y aprender siempre es bueno).
A estas alturas, es de esperar que tengas una idea más clara de cuáles son exactamente las notables diferencias entre WordPress.com y WordPress.org. Pero, en pocas palabras:
instala tanto o tan poco como desees los temas están limitados solo a temas de WordPress, debes pagar una tarifa determinada para eliminar los anuncios.Tienes un control casi total de tu sitio; puedes añadir, personalizar o incluso crear tus propios temas.
El control del contenido es limitado;
WordPress.com
WordPress.org
Totalmente alojado por WordPress; todos los elementos esenciales están cubiertos.
Autoalojado; elige tus propios elementos esenciales o elige otros mejores.
Las características están limitadas a lo que ofrece WordPress.com
Miles de funcionalidades en forma de plugins;
Estas son algunas de las comparaciones que surgen al sopesar las diferencias entre ambos. Elegir entre los dos se reduce en última instancia a la cantidad de libertad que deseas al crear tu sitio y a cuántos recursos (tiempo, esfuerzo, dinero, etc.) estás dispuesto a dedicarle. Recuerda que ambas son opciones cruciales a considerar antes de decidir qué plataforma de WordPress se adapta mejor a ti. Por tanto, ¡no te precipites en el proceso de decisión!
Un aspecto fundamental a tener en cuenta al crear tu primer sitio web (ya seas una empresa, un profesional independiente o cualquier otra persona) es que no todo el mundo domina el código ni el desarrollo de software. Podrías ser, por ejemplo, un cocinero que quiere publicar sus recetas en la red. También podrías ser un estudiante de Bellas Artes que necesita un porfolio profesional, o una empresa emergente que necesita su propio sitio. Sea cual sea tu caso, la realidad es que, aunque algunos conozcamos los conceptos básicos de programación, no todos somos desarrolladores a tiempo completo ni todo el que necesita o quiere un sitio sabe cómo crearlo desde cero. Aquí es donde WordPress resulta de gran ayuda. Surge entonces la pregunta: «¿Por qué WordPress?»
MOTIVO #1
WordPress es un sistema de gestión de contenidos, lo que lo hace totalmente intuitivo.
Lo primero que debes saber es que WordPress es un sistema de gestión de contenidos (o CMS). En términos sencillos, esto significa que WordPress permite crear sitios web sin tener que programar desde cero. Cuenta con una interfaz ordenada y metódica que te permite tenerlo todo bajo control sin necesidad de tocar código constantemente.
A diferencia de crear un sitio web desde cero, que suele empezar con algo así:
Con un sistema de gestión de contenidos, puedes empezar con algo así:
La interfaz de administración de WordPress. Gestionar y crear sitios web es mucho más fácil con un CMS.
Quizá te preguntes: «WordPress parece genial, pero ¿y si no tiene las características que busco para mi sitio?», o «¿y si necesito un mapa, un reproductor de música, un motor de caché o un sistema de seguridad más fiable?».
…Técnicamente, es muy probable que WordPress ya cuente con esa funcionalidad que buscas, y vendrá en forma de plugin de WordPress.
MOTIVO #2
Plugins: la guinda del pastel de WordPress
Si te preocupa que WordPress no incluya esa función concreta que deseas para tu sitio, no te preocupes: lo más seguro es que sí la tenga.
Los plugins son «ampliaciones de funciones» creadas para aumentar las posibilidades de tu sitio WordPress. Si tienes un negocio y necesitas un formulario de contacto, verás que WordPress por sí solo no incluye esa opción, pero existen muchísimos plugins que sí lo hacen. Y dado que WordPress es de código abierto (lo que significa que cualquiera puede colaborar en su desarrollo), se crean nuevos plugins constantemente. Puedes conseguir el formulario de contacto que necesitas y mucho más. Tienes la libertad de añadir plugins para botones de redes sociales, mapas o incluso medidas adicionales de seguridad para tu sitio, entre muchísimas otras opciones. Suena bien, ¿verdad?
A día de hoy, WordPress dispone de miles de estos plugins, y muchos son gratuitos o cuentan con versiones gratuitas, incluido PBS.
MOTIVO #3
Código abierto: la comunidad de WordPress
WordPress es de código abierto. Esto implica que cualquiera tiene la libertad de colaborar en su desarrollo y de examinar su código base para aprender más sobre desarrollo de software e incluso sobre el propio WordPress. Existen incluso empresas dedicadas por entero a crear y desarrollar productos para el ecosistema de WordPress, como plugins y temas (¡como nosotros!).
Al ser de código abierto, hay infinidad de usuarios, desarrolladores y diseñadores colaborando continuamente y ayudándose entre sí a solucionar dudas y problemas de WordPress. Así, recibes ayuda directa de personas reales y, al mismo tiempo, aprendes con ellas. Esto es algo que los servicios de atención al cliente tradicionales rara vez consiguen ofrecer.
MOTIVO #4
WordPress es una opción contrastada.
CNN, el blog oficial de Star Wars, la revista Time e incluso la mismísima Beyoncé tienen sitios gestionados con WordPress, entre muchos otros. Estas marcas y personalidades no son lo único que respalda la solidez de WordPress: según Treehouse.com, alrededor del 25 % de todos los sitios de la web funcionan con WordPress. Teniendo en cuenta los millones de sitios web que existen… el 25 % es una cifra enorme.
MOTIVO #5
¡Personalización total!
WordPress cuenta con un sinfín de temas para ti y para tu sitio. Puedes elegir entre opciones gratuitas, versiones de pago o incluso diseñar uno a medida (¡o encargarle a alguien que lo haga por ti!).
MOTIVO #6:
Es gratis.
Sí, has leído bien. Mediante el desarrollo local, WordPress es totalmente gratuito y puedes instalarlo en tu ordenador con solo hacer clic en un botón. Del mismo modo, en vez de contratar a un desarrollador, puedes aprovechar cualquier conocimiento de código que tengas para aprender más sobre cómo funciona WordPress (y oye, aprender siempre viene bien).
…por no hablar de que, si da la casualidad de que no tienes tiempo para profundizar tanto en WordPress y en la creación de sitios, siempre puedes hacerte con un ingenioso plugin maquetador de páginas y probar el nuestro.
¡Recuerda que las posibilidades con WordPress son infinitas y no hace falta ser un genio para entender cómo funciona todo!
Utilizar WordPress puede ahorrarte mucho tiempo, dinero y esfuerzo. Y en una época en la que esos recursos escasean, ten en cuenta que los sitios de WordPress, sus plugins (¡como PBS!), sus temas y, sobre todo, su comunidad, pueden echarte una mano y hacerte las cosas muchísimo más fáciles.
Existe la posibilidad de que estés aquí porque has oído que PBS es muy posiblemente uno de los atajos más rápidos para crear sitios web. Aunque los maquetadores de páginas, en general, existen para facilitar las cosas, todavía hay algunos aspectos que quizás quieras tener en cuenta antes de profundizar en este ámbito particular del desarrollo con WordPress.
Aprender WordPress: un requisito previo crucial para los maquetadores de páginas
Este es probablemente el elemento más obvio de esta lista, pero sigue siendo el más importante. Lamentablemente, los maquetadores de páginas no se pueden comprar por sí solos. Vienen en forma de plugins en WordPress, los cuales tendrás que instalar y aprender a utilizar. Ten por seguro que WordPress es una de las formas más fáciles y legítimas de crear un sitio web. No te arrepentirás de adquirir conocimientos técnicos, considerando la era en la que nos encontramos. Hay una diferencia entre WordPress.com y WordPress.org, y ¡saber cuál se adapta a tus necesidades también te ahorrará tiempo!
Sin embargo, si te intimida un poco la abundancia de términos técnicos en este artículo, no te preocupes. Hay algunos sitios web útiles que puedes visitar para ayudarte a empezar. Algunos de ellos son WordPress Codex y Treehouse. Alberga consejos sobre WordPress y creación de sitios web, según tus necesidades y nivel de conocimientos.
Quizás quieras tantear el terreno primero, solo para asegurarte
Siempre es una buena idea probar las versiones gratuitas o de prueba antes de realizar compras importantes de las que te puedas terminar arrepintiendo en el futuro. Afortunadamente, la mayoría de los maquetadores de páginas cuentan con versiones gratuitas o de demostración. Por supuesto, también podemos consultar un montón de reseñas fiables sobre maquetadores de páginas mientras que otroscomparan y contrastan maquetadores de páginas. ¡Asegúrate de sopesar tus opciones detenidamente!
Aparte de revisar artículos y reseñas, una de las cosas que nos gusta de WordPress es que cuenta con una enorme comunidad detrás. Hay particulares, equipos e incluso empresas dispuestos a tender una mano a otros usuarios de WordPress, ¡especialmente a los nuevos como tú! La comunidad funciona básicamente bajo un principio de «cadena de favores» más que de toma y daca.
El diseño marca una gran diferencia
La entusiasta de WordPress Donna Fontenot Cavalier plantea un punto muy acertado sobre los maquetadores de páginas de arrastrar y soltar, y la importancia del diseño básico. Si bien los maquetadores de arrastrar y soltar como PBS pueden ahorrarte mucho tiempo, unos conocimientos básicos y al menos cierta familiaridad con la estética es otro aspecto crucial a considerar al crear sitios web. Imagina esta situación: supongamos que consigues un fantástico maquetador de páginas de tu elección: ¡genial! Pero supongamos también que eres una persona que no tiene precisamente el mejor ojo para el arte, el diseño y la funcionalidad: oh, oh.
Sin embargo, no te preocupes. Page Builder Sandwich no es solo un maquetador de páginas; nuestro equipo también se dedica a echar una mano a otros usuarios de WordPress. Así que, si tienes algún problema con el diseño, no te preocupes: tenemos un montón de artículos aquí en el blog de PBS con muchos consejos útiles para ayudarte a empezar. De esa manera, podrás hacer más, aprender más y preocuparte menos.
Recuerda que, si tienes alguna pregunta o duda sobre los maquetadores de páginas, o cualquier asunto relacionado con los puntos anteriores, no dudes en escribirnos en la sección de comentarios a continuación. Siempre estamos encantados de ayudar a nuestros clientes.
When your dream website finally becomes a reality, the first thing you want your audience to know is what your site’s all about. The trick to reel them in is to give them a good but quick summary of your site’s content – and the easiest way to do that is by creating a Hero Header for your page.
¿Qué son los encabezados hero?
The purpose of the Hero Header is to visually communicate with your target audience in the fastest and most efficient way possible. You need to grab their attention quickly, in a way that it says: “Hey, this is my website, and here are the reasons it may be worth your time.”
Typically, hero headers take up most of the space on the page, usually with large text and an equally large background image in order to give your readers a quick but firm-enough grasp as to what your website can offer them.
Para empezar con tu primer encabezado hero en PBS, sigue estos sencillos pasos:
Paso 1: Insertar columna y ajustar el ancho de la fila
Click 1 Column below the Insert Content tab on the inspector (that thing on the left/sidebar). Make sure your caret (the blinking cursor on the text box) is inside the text box.
Under the Row Properties tab, you may change the background color in order to use it as a guide for the next steps. Change Row Width from Normal to Full-Width: Retained Content Width using the toggle button shown above.
What’s the difference betweenNormal, Full-WidthandFull-Width: Retained Content Width?
Normal – Background, text and other elements are contained within the bounds of your current theme’s row width
Full-Width – Background, text and other elements fill the entire width of your browser window
Full Width: Retained Content Width – Only the background fills the entire width of your browser window. Text and other elements are contained within the bounds of your current theme’s row width
In this layout,Full Width: Retained Content Width is used because the text that will be applied is centered; not full-width.
Paso 2: Ajustar el margen para crear espacio en blanco
Increase the top and bottom margin by hovering the cursor on the arrow pointing to the margin you want to adjust. When the cursor turns into a double-headed arrow, click and drag down to your desired margin height. Its important to put Whitespace (also called Negative Space) between elements in a composition to create flow and help draw focus to the content on the page.
Paso 3: Añadir fondo con superposiciones de texto y elementos
To add a background image with text and element overlays, simply click the Background Image icon under the Row Properties tab, upload your desired background image, and select to apply.
Tip #1: For Premium users, using the Background Image Tint option, helps to provide more contrast for text, buttons or other elements. You can select a tint color and adjust its value by clicking on the Background Color icon. Both icons can be found under Background on the Row Properties tab.
Type in the message for your header. See Text Formatting tab to adjust the style. Choose typefaces that are easy to read and goes well with the background image. Remember to show contrast from the background image.
Consejo n.º 2: Para los elementos de marca, considera usar un logotipo blanco o negro para que no desentone con una imagen de fondo colorida.
You can also add buttons by clicking on Button below the Insert Content tab.
¡No olvides guardar tu trabajo y ya estará todo listo!
¡Enhorabuena por crear tu primer encabezado hero con PBS! Si no lo consigues, no te preocupes; empezar desde cero es probablemente más fácil con PBS, así que no debería suponerte mucho problema.