If I were to sum up what we do day-in and day-out, I can say that we create tools for building sites and build a site to sell those tools. It’s not just a wordplay; it’s been our way-to-go since our inception, and we’ll continue to spend most of our time working on making our craft better both for our customers and us.

A great way to do that would be to use the same website building tools that we give to our clients and rely on them to build our Pixelgrade.com website. It seems obvious, so why haven’t we done this until now?

In the last nine years, we built over 30 products and reached more than sixty thousand paying customers. Each one of our products comes as a package consisting of a WordPress theme with starter content to help people get a head start, a set of plugins for additional functionality, and a tool to customize the site according to their needs.

The particularity of each of our products was that it addresses specific niches like restaurants or creatives, and none of them appeal to a digital product store that is our website.

That changed about a year ago. We started to bring all the pieces together from all our products and design a modular system far more adaptable to different use cases. An outcome for this effort is reflected in our Rosa 2 product, a restaurant-specific theme often used to build sites for different industries.

Now that we have a powerful and flexible enough product, we’re ready to bring the system from Rosa 2 to our own site.

Read further to learn more about our commitment to using our own products and ask yourself if you’re able to do the same and what you could possibly gain from it.

The best of both worlds

All of our activity at Pixelgrade resides in two main areas that go in parallel:

1. Designing and building the most suitable products for our customer’s needs.
2. Building and extending the Pixelgrade.com website as a system to present, market, sell and offer support for those products.

There are not too many things in common between those two areas, besides the same people that work on them and put the same amount of expertise on the table.

While the products that we build involve a great amount of research from our team to discover the struggles of our current and potential customers, the Pixelgrade.com website is the other way around: we know what we need and we just have to create the necessary tools to make it work.

Now we want to close the circle and start using the products that we sell to our customers right where they have their first experience with us—on our own website.

A tightened feedback loop

Running two projects in parallel is a good strategy when the challenges are different enough, and you want to be able to separate one from the other and make them operate independently. For a while, this worked well for us, especially when our website was not our main channel of distribution, and we used 3rd party marketplaces to sell our products.

Now, we’re at a point where our products reached a safe level of versatility that they could accommodate the needs of our website. And, at the same time, there are great solutions that we developed only for the Pixelgrade.com website that we want to share with our clients—and what better way than building them right into our products?

By closing this circle and building a two-way relationship between our site and our products, we ultimately step in the customer shoes for real.

Besides the regular feedback that we get from our clients via regular one-on-one video calls, support emails, and product reviews, we’re making a new commitment to be at the forefront of using those products, learn and improve them firsthand, and create a common ground to bring more value to our customers.

The first bite tastes excellent

We begin our journey right here on the Upstairs‘ blog homepage. It’s an area that we know inside-out, and a great opportunity to use the broad experience we have in building over ten blogging themes, ranging from simple tools for personal use to complex systems for online magazines.

To kick things off, we designed a tool that generates beautiful blog post layouts starting from a simple (and boring) three-column list of posts to creative and unique styles usually done by professional designers.

How does it work? You simply customize the posts layout by twisting and turning a set of parametric variables until you find the desired solution. It’s like an adventure game where you choose our own path to the treasure.

Adopting our products and using them daily means we could explore the system first hand, way beyond just testing it. We do that anyway before releasing new features, but when we actually use them in a real context, the mindset and the expectations change. This way, we become more aware and unbending about what works and what doesn’t.

What’s next?

Therefore, the overall intention of this plan is twofold: by using the same set of tools and components, we create the products that we offer to our customers and build the Pixelgrade.com website. We started with the visual layer (as in the example above), but we plan to go up to the server infrastructure, security, and the performance optimization strategies that we have learned along the way.

By taking this route, we are even closer to those of you who spend their money on our work. We will have the chance to understand the reality from the tranches. We will feel on our skin when something breaks, moves slow, defeats the purpose, or, on the contrary, is flawless, highlights the result, and glues the entire experience.

Final thoughts

We live in an era where too many businesses are built to be sold with little regard for the people’s trust and energy invested in supporting those products or services. We believe that it’s important to go a step further than closing a deal and move to the next customer. We believe in accountability for the customer itself, not only for their money.

We know how much it matters for all of us to trust that the product and service provider that we choose will be around for a while, and by making this step, we want to strengthen our commitment that we’re here for the long run.

We are very excited about this step in our journey as a product company. It will be challenging, but we will be better for taking it. Like everything we’ve done so far, we know that open hearts and clear eyes can’t lose.

The post Start being our own clients appeared first on Pixelgrade.

This bold statement is endorsed not only by how it’s been keeping traction but by how people used it in creative ways to create their own digital corner.

If you are interested in finding out how we put together the improved version of the best-selling restaurant theme out there (more than 13K folks use it), feel free to read this thoughtful article. You have the chance to both take a sneak peek inside the product and find out more about our approach in the WordPress ecosystem.

Meanwhile, just to make sure we are on the same page, please allow me to give you a short description of our gem.

Rosa 2 is a digital product that you can use to create a modern site that serves real business goals. It’s more a framework and less a theme in the core sense of what customers within this economy are accustomed to.

Therefore, there is no wonder why Rosa 2 can easily adjust to serve needs from a wide range of niches. As always, I genuinely believe that what customers are already achieving with it is more representative than any well-packed marketing message. They are proof of what you can achieve with it.

I chose three examples to showcase how it adjusts to serve diverse digital requirements. I love the fact that people all over the world are being brave enough to challenge the status quo of Rosa 2 and have been creating a wide range of beautiful sites with our product.

Let’s explore them together and see how each one makes the most out of it.

A small hand made soy candle business sells its products online

Flair Scent is a local business that creates and sells handmade scented soy candles in all kinds of jars since 2016. It all started when, in lack of better gift ideas, Andra, the gal and creator behind, began exploring the idea of making candles from scratch.

Five years later, it turned into a proper business that needed a refresh of its digital presence. That’s where Rosa 2 with the WooCommerce Add-on came to play and allowed her to showcase and sell her products with ease.

In case you don’t know, WooCommerce is the most popular e-commerce plugin that enables everyone with a WordPress website to create and sell anything online. The best part is that it’s free and allows you to sell both digital products (like ebooks, memberships, courses, and more) and physical ones. If you want to know more, you can read this post.

To help people who want to create an online shop with Rosa 2 while keeping the site’s design consistency across the board and offer a seamless online experience for their visitors, we created the WooCommerce Add-on. We wrote in detail about the importance of this integration and how it helps you in branding and sales.

In a nutshell, this add-on makes Flair Scent’s shop look and behave exactly like the rest of the website with the addition of must-have styling that the WooCommerce plugin lacks.

This way, her audience will not have an experience damaged by inconsistent design, by being redirected to another place to purchase her products, or by having to call or write on social media to get the desired products to their doorstep.

Below are two examples of Rosa 2 without and with the WooCommerce Add-on.

With this tool available, Andra managed to create an online shop in a matter of minutes. And she did a great job with it. Here’s what one of her Instagram fans messaged her shortly after launching the website:

I have rarely seen such an awesome and professional website for a small handmade shop. I got the invoice via email, and the whole purchasing process was smooth. I can’t want to receive the candles and get some more. Good luck in everything you do.

A Chef puts his culinary skills to work in private cooking sessions

Bogdan is genuinely passionate about cooking for people. He’s also the one who makes food for our lunches, and just hearing him talk about his cooking process makes us drool.

Being tired of working in various restaurants where he felt his skills are not valued enough, he started working independently by offering lunch packages to businesses alongside private chef cooking sessions in his backyard.

Soon enough, people started to reach out in search of his services. The increase in demand made him think about creating a place to tell his story and present his services in a visually pleasing way.

Rosa 2 seemed the obvious choice and a great fit for his needs. Although he doesn’t use all the bells and whistles the theme has to offer, he made the best of the Media Card’s new features.

In case you didn’t know, Media Card is one of the many editor blocks available in Rosa. Here’s how the process of creating his home page went:

On top of this, by using the features from the Style Manager, our intuitive colors and fonts customization system, he managed to adapt the website’s color tones to match his brand identity.

To get a better sense of what Style Manager is all about, check out the video below.

As you can see, the pre-defined palettes spare you from making design mistakes (by choosing the wrong color or font combination) and from paying top bucks on website development work usually needed to make all those changes.

Of course, you can also create color and font palettes that match your brand, applying them instantly across all website areas.

Thanks to this tool, you’ll see the same color tones everywhere on Bogdan’s site, colors that make you think of a calm summer afternoon surrounded by friends and great food. Yum! 

Two sisters carefully handcraft functional and decorative ceramic objects

Our mission is to support people who want to make an impact in their communities, so it’s always great to see our products used by creatives who put their minds together to create products people love.

That’s the case with DE CERAMICĂ—a ceramics studio run by two sisters, Mădălina and Crenguța. They slip-cast small series of objects and handbuild unique pieces from sketch to the final product, all while using molds and materials made in-house.

With Rosa 2, they managed to create a digital corner where they showcase unique projects they’ve worked on, sell their ceramic products, and market their pottery workshops.

Here’s a page where they present their special ceramics collections:

On this page, the gals cleverly arranged the Hero of the Galaxy block that comes with Rosa 2 in a 3×3 column to showcase the collections they’ve worked on. Each block has a button that gets people to a dedicated page that hosts details related to that collection alongside a list of products readily available for purchase.

This shows that with just a little bit of imagination and a theme that is 100% developed on Gutenberg blocks, you can build a website that stands out and create the missing pieces that fit your needs with just a few clicks.

Of course, these are a few examples, but they are not isolated. If you want to explore more, you can check out the showcase area.

The flexibility of our premium WordPress theme offers plenty of room to push the boundaries and shape a digital experience that people love. In the end, everyone wants a site that looks great and is, at the same time, aligned with a particular set of goals, no matter how big or small.

It’s up to your imagination to twist and turn Rosa 2 to match your needs and create a site that brings real added value and does not sink in the digital ocean. Ready to take the leap?

Does Rosa 2 sound interesting?

Take a look and discover all the features packed into this versatile WordPress theme 👇

View Rosa 2

The post Rosa 2 in action on websites from different industries appeared first on Pixelgrade.

Quick navigation:

• A brief history
• The first steps forward
• Giving it a shot
• Something still seemed a bit off
• Pushing the boundaries
• We found a solution that fits our needs

The web is a wonderful medium, buzzing with information and connections. The web is also a very dynamic, interactive medium that, unlike the printed page, can and will be accessed from all sorts of devices. Web users get to easily adapt the web to their daily lives, making it part of their existence.

Sadly, this heart-warming, seamless experience doesn’t trickle down to us, the people building the tools of web builders. In fact, we end up with an ever-increasing problem on our hands.

Every working day we take this problem and hammer at it, from all sides, but there is one basic (under)side that gets the better of us: the screen size. Simple as it seems, the screen’s size tends to wander off heretically with variations in physical size, pixel density and aspect ratio. Some of these can be simply ignored since you must always consider the trade-offs in trying to cover every possible scenario.

Leaning on Pareto’s tried and tested principle, trying to cover 80% of use cases with 20% of the effort would be a good start.

In what follows, I’m going to focus just on one specific struggle that I’m sure many people doing web development faced. It’s the pursuit of that elusive implementation that delivers consistent typographic hierarchy across devices and offers a top reading experience on any device. If such a thrill is your cup of tea, join me. If not, I won’t mind, promise.

A brief history

Over the years, the web design community came up with various patterns for solving different layout or UX challenges on small screens and there are a plethora of available resources online to help you decide which route to take for your specific use-case.

The choice is never simple since you are constantly assessing the attractive, easy way (like using the hamburger icon to toggle navigation on small screens) and a more creative solution that’ll hopefully be better suited to the current problem-domain.

Typography is one of the cornerstones of designing and developing a web interface with a crucial role in making it usable, hence successful. You strive for readability juggling things like font size, line length, leading and the actual typeface, while making sure you provide structure and hierarchy to your content.

The real challenge is to keep all these properly in-tune and consistent across different screen sizes. This is a problem still in search of that one solution to rule them all.

The first steps forward

Initially, designers have overcome this challenge by creating high fidelity designs of the interface for the most common screen sizes, followed by developers who would make sure that the implementation accurately matched the design for each and every one of them.

Those common screen sizes would come to be known as breakpoints since those were the places where the layout broke and needed to adapt. Usually, people would settle for just three designs: one for phones, one for tablets, and a third one for desktops.

Roughly around 2010, media queries gained wide support in most browsers and people in the industry were handed the challenge of creating one interface that would adapt to any screen size. In hindsight, hand-picking some points on a continuous spectrum of sizes seems like a very rudimentary solution. Much like trying to draw a rainbow with only three colors. It was a necessary stage nonetheless.

Carrying the habits of the past, designers took the familiar path and created static mockups (due to available tools at the time), did the math on paper and handed them over to a developer for implementation. There were actually two to three static designs on different screen sizes: one for mobile, one for tablets and the usual one for desktops.

Despite designers’ best efforts into crafting good-looking mockups, each one of them felt disconnected due to the huge black holes left between those points. In reality, it was up to developers to figure out what happens in-between. Developers had to swing it, as best they could.

Giving it a shot

One of our earliest attempts at overcoming these technical limitations took place during the creation of one of our first commercial WordPress themes called Fuse. This took place back in 2013 when viewport units were slowly being introduced in the CSS specifications — we took them as experimental since browser support was still very scarce.

With Fuse, I tried to mimic a fluid font size by using Sass (CSS with superpowers) to generate a lot of intermediate media queries and font sizes between the mockup breakpoints. We were quite pleased with the results, knowing full well that we took on increased complexity and codebase size for a perceived notion of fluid typography.

Despite being discontinued meantime, shipping Fuse was an important milestone for me, as it was one of the first times when I felt we were really pushing boundaries at Pixelgrade and I was really proud of my work. Today, looking back, I don’t feel the same excitement — I was just trying to draw a rainbow with 50 shades of green. It was an important, personal, stepping stone nonetheless.

Fast forward to 2015, many people were experimenting with various paths toward a proper way to handle adaptive font sizes. From Sass generated CSS to fully-fledged JavaScript solutions like FitText and FlowType, you had plenty of ideas to choose from and fit into your project.

More so, viewport units were now supported in most browsers with fallback solutions for the ones that lagged behind. More experiments followed and, soon, fluid typography descended from the realms of theory into a tangible notion, with a rather simple proof of concept to boot.

There wasn’t much to it but it worked. You didn’t have much control over the final values and you employed some weird calculations to ensure a certain font-size value for a specific screen size. What mattered is that things were moving again — fluid typography had momentum. 

All that was needed was a couple of developers to start bouncing around some ideas and prototypes, and, after some iterations, Mike Riethmuller came up with a solution that satisfied most of us.

In this article published on CSS-Tricks, Geoff Graham further explored Mike’s implementation and even created a Sass mixin to get rid of duplicate values and simplify the code. Job done! It felt like fluid typography was firmly added to our tool belt of solved problems — on to the next. Well… not quite.

Something still seemed a bit off

Even though it didn’t appear to be anything wrong with the implementation described above, there was still something bothering us, at Pixelgrade, with regards to the way in which we designed and implemented responsive typography in our products.

It was related to the fact that we, and seemingly everyone else, were stuck in the same old mindset: designers defined font sizes at every breakpoint for every element on the page and developers just had to make it happen.

It felt like a lot of unnecessary, repetitive, and tedious work because we needed to define at least one pair of start-end values for every element on the page. However, most of the time, with very few exceptions, the minimum values were the same. Also, we realized that a maximum value wasn’t actually needed since content should adapt if “screen real-estate” was available. 

Intuitively, it seemed things should be a lot simpler than what pixel-perfect mockups and consequent code made it out to be. If font sizes on small devices are pretty much the same and there is no use for a maximum value, all we needed was a design snapshot at a certain screen-width and code should take care of the rest.

Pushing the boundaries

Around 2016 we started working on an internal tool called Typeline whose sole purpose was to take care of spacings and font sizes on small devices. It would have a small configuration with some constraints for font sizes in general, and a list of breakpoints at which we would like new sizes to be generated. After that, when it came to typography, we could focus mainly on the desktop version while Typeline would take care of the rest.

If you are interested in the technical details, hop on to the Smashing Magazine blog and check out this article where Jake Wilson describes in depth a very similar implementation.

Typeline served its purpose really well, being an important part of most, if not all, of the WordPress themes we’ve released since its inception. All was not without downsides though. 

One such drawback was the increased complexity of the implementation. We had one common configuration file and multiple versions of Typeline implemented in Sass, JavaScript, and PHP for various tasks and use cases.

Unsurprisingly, some of our new colleagues had a pretty tough time understanding how everything came together. At times, they related to the Typeline set up as a black box — a far cry from the simplicity we had in mind at the start.

The second thing that bothered me sprung up rather recently and it had to do with the fact that we still relied on breakpoints to declare new font sizes. Even though it’s just an implementation detail, these were the same relics I advocated we needed to get rid of. Things have come full circle, and not to my liking.

For some time, an idea that a simpler and more elegant solution may be possible kept lurking in my mind. CSS custom properties was a direction yet to be explored. Even though they were first introduced in the CSS specs around 2016, the fact that IE11 won’t ever support them deterred me from trying any fancy stuff.

We found a solution that fits our needs

The goal of this struggle was not to engineer an overly complicated solution to a rather simple problem; even less so to impress our peers. We simply found some pretty big flaws in our design and development process and I wanted to do something about it. 

In 2019, I set myself up to find a solution akin to the times we live in, based on the experience we gathered in web development. The requirements were pretty simple: 

• font sizes should be declared only at one specific screen-width;
• we would infer the size at any other width automatically;
• all other initial configuration would be kept at a minimum. 

The implementation would rely on CSS custom properties and viewport units. It won’t need any JavaScript to work and it would preferably not need any preprocessing either.

What followed was probably the most interesting part of this whole journey. I had a lot of fun experimenting with CSS custom properties and learning new things about them. One of the craziest things I discovered is that you can actually solve equations in CSS — I couldn’t envision this a few years back. This boosted my confidence and allowed me to overcome any obstacles that came my way. I could see the idea in my head turning into reality. 

Everything came through quite nicely and the final result exceeded all my expectations. The proof of concept I was looking for coalesced into as a very solid solution. So solid in fact that I was confident enough to use it in our latest WordPress theme, Rosa 2. 

For consistency, let me circle back to the rainbow comparison I was making earlier. The way fluid typography works in Rosa 2 is quite simply like this: we pick our favorite color, draw a line and then all the other colors are automatically generated.

Here’s a quick demo on Codepen that you can check out to get a feel of how this concept can work in practice.

Progress made by the web development industry and fast-paced adoption of new technologies allowed us to enhance our processes and the quality of our work to often surprising results. We’ve managed to make such leaps long before any design software would hopefully provide something to mitigate our struggles. Pixelgrade, as a web company, has gained agility and efficiency, while I managed to find new reasons to be proud of my work.

If all this sounds interesting and you want to chat more, I would love to get in touch. You can drop me a line at razvan@pixelgrade.com or on Twitter @razvanonofrei. 

More on the subject

If you want to gain a deeper understanding of fluid typography, I believe the following resources are good starting points:

• https://eduardoboucas.com/blog/2015/06/18/viewport-sized-typography-with-minimum-and-maximum-sizes.html
• https://www.madebymike.com.au/writing/fluid-type-calc-examples/
• https://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/
• https://24ways.org/2016/responsive-display-text/

The post Creating true fluid web typography to improve our processes appeared first on Pixelgrade.

Rosa 2 is much more than a restaurant WordPress theme built on top of Gutenberg, the latest editor within the ecosystem. It is not only the sequel of Rosa 1, which is still the best-selling product in its category — it is also an opportunity.

With this theme on board, you can too push the boundaries and use it to fit various digital needs.

The playground where people can mix and match Rosa 2 is not an accident nor a surprise for us. We knew it from the early days that this WordPress theme will impact the status quo of how people build websites due to its design and functionalities.

As we already described in extenso in the release blog post regarding our approach on Rosa 2, from the philosophy up to the craft behind the process, this theme can be seen more as a tool and less as a ZIP file.

Just imagine the toolbox of a carpenter: you got everything you need to either build something beautiful or, on the contrary, damage and ruin things around you. In the end, it’s a choice — your choice.

It’s not only my teammates or me who share this perspective, but also our existing customers who took us by surprise and proved that Rosa 2 could adjust to a wide range of destinations: restaurants, hotels, arts&crafts, coffee shops, catering, and more. 

We previously showcased at least three possible destinations for Rosa 2: building online stores, personal websites, or even www for events and gatherings of all kinds. However, people who put their skin in the game and paid for our WordPress theme were even braver than us and went further.

I chose three areas where Rosa 2 fits like a glove, so in case you need more inspiration to get started, here you can get some. Enjoy it!

1. A coffee shop where passion stays at the core

The guys from Happy Coffee use Rosa 2 to highlight their love for specialty coffee in a way that fits their personality and style. Moreover, they plan to keep using our theme to create several landing pages, depending on the country where they want to expand their business.

On the homepage, you can easily find out more about their story, what they do, and how they do it to make sure they grab attention and set the right expectations for the visitor. Here is their bold statement:

”Happy Coffee stands for quality coffee beans made from transparent direct trade from farmers and cooperatives all over the world. All our coffee beans are selected based on our criteria.”

Since they are in the business of selling specialty coffee across Europe, they also wrote their first in-depth blog post about why Chemex, a method of preparing coffee, is their favorite.

Hopefully, more articles are on their way to see the light of the day since the design of the blog within Rosa 2 looks outstanding and matches the overall mojo.

2. A website to promote Shopify as a solution for e-commerce

It was quite a surprise to see that one of our customers uses Rosa 2 to promote Shopify — the popular e-commerce platform where you can sell whatever you want.

As WordPress players, our first recommendation would be to choose WooCommerce, a well-known plugin within the open-source ecosystem.

Thus, this does not mean that we don’t appreciate the effort of putting together a beautiful website with Rosa 2. After all, WordPress is one of the best options for services websites, a place where Shopify doesn’t spark. However, this is how the people behind endorse the platform:

”Many online shops have grown to become successful businesses on the Shopify e-commerce platform. If you have a business idea you’ve been thinking about, launch it on Shopify.”

The crew behind the website is, in fact, Shopbouwers, a Shopify partner and believer that can help you build and migrate your Shopify online store.

The home page they created with Rosa 2 doesn’t follow our demo since they needed to adjust the sections to their particular needs. Fortunately, with Nova Blocks, the free plugin within our theme, it was easy peasy to twist and turn everything in just a couple of minutes without ruining the experience.

3. A mother-and-daughter creative and spiritual business 

It was thrilling for me to discover a business type I am not familiar with, which intrigued me and made me curious to want to find out more. In the end, Trump’s name appears on the website, so yeah, I was looking forward to finding more.

A mother and daughter joined their creative forces to create paintings based on ancient spiritual techniques. However, they do more than that by offering an entire spectrum of services linked to the concepts around Ki Compass and Feng Shui. The story on the About page is alluring, and the following snippet is proof in this sense.

”We explain the unexplained and discover hidden. We transfer intentions and desires to the canvas. We receive signals and materialize them. Our paintings set new life paths.”

Their website is a bit more complex due to the multiple layouts of their business. You can get access to a free consultation, buy some custom paintings, or simply get familiar with their approach to wealth and creativity.

It’s great to see that the way the website is structured makes it easy to find out all kinds of relevant details: who are the creators, what are they offering, the motivation behind their work, and what’s the value people are getting out of it.

These are just a few examples that caught our attention so far and that we wanted to put in context to show you, once again, that Rosa 2 keeps its promise — a brand new way of building websites with WordPress.

No matter what type of digital presence you aim to nurture in both the short and long run, this premium WordPress theme comes with the entire set of tools to help you shine. Make it count.

Does Rosa 2 sound interesting?

Take a look and discover all the features packed into this versatile WordPress theme 👇

View Rosa 2

The post Rosa 2: how does this theme look on real websites? appeared first on Pixelgrade.

Rosa 2 incited plenty of thoughtful debates (some led me to write this article about media coverage in WordPress), both internally and externally, and we are grateful for that.

Being neutral was never an option at Pixelgrade. It isn’t one when it comes to the products we’ve been building in the last eight years, not when it comes to design nor concerning how we’re managing our team. 

Neutral equals detached. Neutral involves boring. Neutral does not reinforce progress. Neutral implies a lack of passion.

We are miles away from that.

We like pushing limits, questioning assumptions, being bold and true to ourselves even though sometimes this implies all kinds of costs. It is healthier to pay such bills than being in disagreement with ourselves.

In this article, I have the pleasure of walking you through three examples of websites you can build with our WordPress theme by yourself. It’s just the beginning of this new yet fascinating world that Rosa 2 opens due to its features, design, functionalities, and everything we thoughtfully included in it.

George, the designer of Rosa 2, covered three categories of websites (online store, personal and events) that you can start building with Rosa 2 onboard right away. You don’t need coding skills, technical background, or an agency to get the job done. Thanks to the flexibility of Nova Blocks, our custom Gutenberg blocks plugin, you can now create amazing websites on your own.

Are you ready to let your eyes be amazed by a visual whim provoked by Rosa 2? Join me on this beautiful journey and give your senses a bit of adrenaline. 

Website example #1 – Rosa 2 for e-commerce websites where products shine

If you plan to create an e-commerce website to showcase a single or a small number of products, please bear in mind that Rosa 2 can help you achieve that in great style.

We went with the scenario of someone in love with organic products who wants to sell them online and promote a healthy lifestyle.

Among the advantages of using our WordPress theme Rosa 2 to achieve this goal is that it comes natively integrated with WooCommerce, the most popular e-commerce plugin. This means your website will have the same look and feel across the board.

Besides, our theme also comes in your sales goal aid by displaying your items in a visually attractive way. This, combined with the integration above, means your visitors can easily understand the purpose of each product, what they contain in terms of ingredients, how these products improve the lifestyle, or what do current customers say about them.

By putting the accent on the details of your products, you not only offer a comprehensive understanding of your work, but you also create a certain mood around your website.

Look how Rosa 2 can accommodate an online store’s needs with ease and plenty of satisfaction both for you and your potential customers. 

Imagine that you can get the same result if you sell specialty coffee, leather aprons, jewelry of all kinds, lamps or other any other type of products. Rosa 2 will help you put together an ecommerce website where each of these grabs attention from the right people.

Website example #2 – Rosa 2 for personal websites that tell an engaging story 

We live in a world where a growing number of people want to make the most out of their creative potential. No matter if they are handymen, fitness trainers, ceramicists, personal chefs, tailors, or city tour guides, more and more individuals want to make a name out of their passion and work.

We took the challenge to see if Rosa 2 can help such people, too, and the answer is definitely positive. In the end, our product is built upon a flexible framework that is suitable for various industries and niches.

With Rosa 2, you can engagingly highlight your story, while also keeping in the spotlight what makes you-you. For a personal website, this is crucial since people tend to choose you because of what you represent in terms of beliefs, experience, and thinking. 

Below is an example of a website made for a ceramist who sells professional services related to his daily activity, but, most important, who has something unique he is eager to share with his audience, no matter how big or small it is at the moment. 

Regardless of the type of creative entrepreneur you are, there is a common ground that brings you on the same table with the rest: sharing your vision of the world by putting your best skills at the core. With Rosa 2, you can achieve this goal in a form that feels authentic and bold at the same time.

Website example #3 – Rosa 2 for events websites that want to stand out

Event organizers and community builders can go wild with Rosa 2 and offer a pleasant experience for their guests. Our WordPress theme can easily adjust to your particular needs and requests without taking the focus on what matters most to you: gathering people together and celebrating on a kind and meaningful note.

Cold facts, such as date, time, location, agenda, and other precise details don’t need to be packed annoyingly. With Rosa 2, you can fully integrate them into the mojo of your website and still keep what’s relevant and upfront for your audience.

It’s valid even though you are a concert planner or any big festival organizer where you run multiple events at the same time, and you need to have an overview in the blink of an eye.

We created an example of an event website for the wedding industry to show you how convenient it is to organize such an important day. It can accommodate a small and intimate gathering of just a couple of people (friends and families) or a huge party with several layers of entertainment.

You can apply the same principles and joy of playing when creating a website for a concert, a conference, an event hall, even a private cocktail at the company you are working for. You have all the tools you need to fulfill your creative freedom and get top-notch results.

Did you enjoy these website examples made with Rosa 2 and think you want to take the leap and build one? 

Here’s the thing: if you resonated with at least a case study presented above, then you no longer have excuses not to use this WordPress theme. It was created with one main goal in our minds: to push the limits of building digital experiences and open doors for all kinds of people to express their personality online.

These are only a few directions to give you a sneak peek and show that Rosa 2 is much more than a theme made for the hospitality industry. Only the stubborn cannot see or accept the massive playground this product offers to its believers.

I am eager to see how you will start exploring our WordPress theme to create websites that make you proud. Ready to join the ride and build your digital legacy?

Does Rosa 2 sound interesting?

Take a look and discover all the features packed into this versatile WordPress theme 👇

View Rosa 2

The post Rosa 2: website examples to get inspiration appeared first on Pixelgrade.

Quick navigation in this article:

• A little background on how we do things
• A better, saner way to create websites
• Constantly evolving tools for an integrated experience
• Bending the new editor in our way
• An opportunity that lies ahead
• Meet Rosa 2. Making our vision a reality
• All-new site building blocks
• Customize the design to match your branding
• Everything you need to create an online storefront

When times are changing, you either adapt and evolve or get left behind. We like staying ahead, pushing the boundaries of what is possible both from a technical standpoint, but more importantly of what you can achieve that you previously shied away from.

It’s no easy feat, definitely not for the faint of heart,  to take a wildly successful WordPress theme and make it even better. Especially when nimble, small businesses rely on our ability to know the ways of the web and help them put up a digital facade to strengthen their brand and bolster success.

A little background on how we do things

If there is one thing that has permeated just about everything we created at Pixelgrade throughout the years, it surely is the courage to own our share of responsibility as product makers — really own it, down to the minute, often overlooked details. A large part of this responsibility rests on our ability to first accurately understand and describe the customer problems we aim at solving, and then draw the proverbial “line in the sand” between the product areas where it is best we make the decisions and those where the customer is in a better position to know better.

This distinction has often set us on a collision course with the “market’s default expectations.” These were, and still are to a large extent, somewhere along these lines: create a product with more options than anyone but us can handle; shamelessly promise that you can create any website you can imagine; back that up by designing tens of eye-candy demos; you buy feeling confident that this product is the best bang for your buck, ever.

This is the story every multipurpose WordPress theme and page builder plugin is betting on. To make things “better,” services like Squarespace, Wix, or Webflow, to name a few, further reverberate this promise. It is only a matter of time before anyone googling for ways to create a beautiful website for their business gets on board this bandwagon.

All would be swell if everyone creating websites would be decent designers and well-versed developers. Clarity and consistency would be maintained across every page, and complex interactions between various elements would be confidently resolved. All those tools would be put to good use. This is not where the world wide web is at, nor where it’s going — quite the contrary. Thankfully, we managed to “democratize publishing” and empower almost everyone to claim a piece of the web.

The promise of “the only WordPress theme you will ever need” (or variations along this line) is maybe enticing, but undoubtedly false and deceitful. Such a theme (or page builder) is quietly dumping all the decisional responsibility on you without first asking if you have the skills to handle it — only true professionals have them. Furthermore, to make sure there won’t be any complaints with regards to a lack of flexibility, the options provided are nothing less than a visual coding environment. It seems your “unchained creativity” better come fitted with design and coding skills.

We want to prove to you that there is a better, saner way to create websites in general, and WordPress sites in particular since that is what we play with at Pixelgrade.

A better, saner way to create websites

You must have heard the tagline “Our way is better than theirs” painstakingly often. We have too, but sometimes modesty needs to give way to plainly stating the actual state of things. We genuinely believe we can offer a better way to create the website your business needs with the tools you can actually take full advantage of.

Our way starts with solving actual real-life problems that business owners encounter when aiming to put together a website. This forces each of our themes to stay focused on specific niches, even if the codebase can handle a higher degree of flexibility. 

We prefer to sacrifice potential product reach than to increase the cognitive load you need to handle. Life is complicated as it is for an entrepreneur. There is no reason building a site adds up to that.

Next, our way aims at maximizing what you already know. We consider you are reasonably knowledgeable of what WordPress has to offer out-of-the-box when it comes to editing and managing your content. We build on this familiarity so you can jump right in with minimal learning involved.

Finally, we prefer to hide away any extra complexity that is not central to achieving your goals. The WordPress ecosystem has its established ways of doing things, but not all of them stem from a user’s need or concern. Strangely, some cater more to developers than users, owing to the developer-focused beginnings of WordPress. We have the experience to recognize such shortcomings and gently get them out of your way whenever possible.

By now, you may ask: OK, this all sounds reasonable and a little bit idealistic, but what have you actually done differently than others?

We’ve done plenty. We haven’t found this way of building products recently. It’s been with us pretty much from the beginning, eight years ago; we just needed the experience and clarity only time can provide. 

Constantly evolving tools for an integrated site-building experience

A couple of years back, we’ve started crafting, and continually refining, a set of tools and systems, each focused on a specific aspect of a customer’s journey to their desired WordPress website. We add new ones as WordPress evolves, and our customer understanding gets sharper.

For anything related to your purchased products, their recommended plugins or demo content, their documentation, and any customer support questions you may have, we provide the Pixelgrade Care plugin. We want to help you remain close to your content and not lose focus or time.

A fundamental, but distinct need of anyone crafting a WordPress site is changing the theme styling to match their personality and brand. To solve this crucial need, we created the Style Manager system (provided by our Customify plugin). Getting to the predictable and straightforward customization experience we proudly offer today was a real saga, one that deserves a few more details.

Any premium WordPress theme is bound to provide a set of options for changing layouts, colors, and fonts. Our themes make no exception. But not all theme options are created equal: layouts sizing and small decorations are pretty straightforward; colors and fonts may seem similar, but are far from it. You need to be able to adjust colors and fonts while retaining the overall logic and consistency of the design you fell in love to start with. 

It’s no fun seeing your site’s design slowly fade away with each stylistic change you make. Albeit well-intentioned, you reach a point where you either quit and switch themes or retreat to the “safety” of the demo content. For us, this is a failure on our part, and we don’t fancy failing. To solve this challenging problem, we had to figure out a way to provide smarter color and fonts controls that would be aware of the theme’s overall design constraints and automatically make changes in line with them. Talk about a mouthful, but that is the nature of the problem.

We are proud of the current state of the Style Manager that abstracts specific color or font controls, replacing them with lists of carefully imagined Colors Palettes and Fonts Palettes. You can still reach out and change the base controls, but we are confident you won’t feel such a need.

Bending the new editor in our way

Starting with WordPress 5.0, users had a completely new block editor at their disposal. Despite all the controversy and push-back leading up to that release, the Gutenberg editor (sort of a nickname for the block editor) came with big promises: “a streamlined editing experience across your site […] more flexibility with how content is displayed […] a more consistent treatment of design as well as content.” The entire Gutenberg project consists of four phases, with work underway on Phase 2. More big promises are on the horizon.

We respect and appreciate the boldness of the entire Gutenberg project. We would love nothing more than to succeed in making due on those promises. In the current state of things, when you peel away all the PR efforts and look at how editor blocks work and evolve, corners seem to have been cut at all the wrong places. At least, corners that we care about considering the way described earlier.

In their current state, bundled WordPress blocks mix content, layout, and styling with disconcerting ease. Exactly opposed to the way we believe it is best for keeping design consistency across posts and pages. You get to make too many decisions on a block by block basis, decisions that have no place in a content creating context. You are in a different mindset than the one required to step back and look at the overall look and feel of your site.

Furthermore, the blocks system is pretty much oblivious to the fact that a site needs a design system in place if we are to cater to regular users, not professional designers that are capable of “holding” such a system in their heads (with difficulty). Take, for example, a simple button: it is now far easier to insert one, but why are you prompted to choose its colors and not your real intent like primary or secondary button?

An opportunity that lies ahead

However, we are a pragmatic bunch. We saw the editor’s shortcomings as an opportunity to make a point (again) and showcase how we think that things should play together in the future of building websites. We decided to take our best selling WordPress theme — Rosa and rebuild it from scratch to fully integrate with the latest version of the Gutenberg editor, and then some. 

It was good timing as it is a five-years old theme and it is starting to show. No matter how many updates we released (over 45), the backward compatibility promise and code legacy are real show stoppers when you aim to take advantage of the latest technologies and tools.

Staying true to our way, to overcome the challenges of building everything with blocks as elegantly as possible, we set out to add a new focused tool to our set: the Nova Blocks plugin (nova as in astronomy, hence the names of various blocks). 

This WordPress plugin holds all our newly created editor blocks, plus any behavioral alterations to the editor experience. Every block is imagined with the sole purpose of providing just the right amount of flexibility while seamlessly connecting with the overall design of your site. 

So instead of ending up in a lose-lose situation where you needlessly go back and forth between the high-level view of the Customizer and individual posts or pages, we provide a win-win experience where predictability and consistency come naturally.

Now let us show you how everything we’ve talked so far comes together in the new Rosa 2 theme.

Meet Rosa 2. Making our vision a reality

The initial Rosa theme went out of its way to make the most out of what WordPress offered at that time, without resorting to complicated page builders or custom workflows that would lock-in user’s content and make for a steeper learning curve.

Despite certain friction points, we were all too aware that people wholeheartedly embraced this simpler way of building a business website. To our enjoyment, other theme authors got inspired and followed suit — everything is a remix after all.

“I’m so happy with my Rosa theme and the Pixelgrade team. I hesitated to get this theme because I’m not working in the hospitality industry, but I’m so glad I did because it works really well with my business and I get compliments about my website all the time. I’m not an expert at websites, but it was super easy to do that I did it all by myself.” — Mia Morrison

The new block editor brought within our reach the possibility of making our vision a reality to a much higher degree. We jumped at this opportunity and reconsidered every workflow in this new block-based context, all the while careful not to end up with a more complicated solution. Rosa 2 is the result of this journey.

We are confident it manages to retain everything so many loved in the first iteration, while significantly improving the overall design and editing experience.

For starters, the buttery smooth parallax sections intertwined with your content and images are even easier to build and manage. Gone are the subpages each with a hero and some content with shortcodes. Now you can build an entire multi-section page in a single page, just like you would expect. Thanks to the power of the block editor, you can easily add new parallax-based hero or slideshow blocks wherever your message requires it.

Owing to the possibility of encapsulating pieces of functionality as editor blocks, we could eliminate the reliance on page templates — one less thing to worry about. Contact, pages with no title or pages featuring a slideshow are not needed when you can have a simple Map or Slideshow block.

Due to some very recent developments in Gutenberg, we were able to pull off something quite remarkable: you can fully build your site header and footer with blocks like the menu or logo block.

These are just the highlights of the features and improvements that allow Rosa 2 to help people create successful sites just like its predecessor. If you want to dig deeper into each feature, follow along — you won’t be disappointed.

Learn more about Rosa 2

Check out the best-selling restaurant WordPress theme, reimagined for the new Gutenberg editor.

View Rosa 2

All-new site building blocks

While everyone can have fun and build all sorts of blocks just because it’s easy (kudos to the Gutenberg team), few have our experience of assisting a considerable number of users, regularly talking with them, learning their struggles and extracting the necessary insights to iterate even further.

👋 Rosa has over 13,000 customers, making it the overall #1 selling restaurant WordPress theme. The accumulated knowledge gives us the confidence to believe we can make it even better.

We examined how those customers go about building their sites with Rosa, extracted the relevant insights, and made proposals for each block required for a smooth experience. All this knowledge is now embedded in a set of building blocks that you can mix and match to create all kinds of pages.

Here is a brief overview of the most important blocks available in Rosa 2:

The Hero block

This is usually the first thing your visitors see, making it a great spot to get them acquainted with your brand or value proposition. Controlled by a smooth parallax scrolling and featuring a fullscreen background image or video, this is the perfect place to make a great impression and capture your visitor’s interest.

To learn more about about the Hero Block, check out the details in this guide.

The Media Card block

Often a message is more readily remembered if complemented by a matching visual. The Media Card block helps you manage such areas with ease. 

Use it to display media objects, like images or videos, alongside short pieces of content. It could be anything from a portrait image accompanying a summary of your About page; a visual promo for your project and some lines about it; or a testimonial from a client along with its photo to build trust.

You can change the media position (left or right) and create further emphasis by adjusting its styling options — all in line with the overall theme design, of course.

The Food Menu block

Just about any restaurant, coffee, or tea shop owner wants to showcase the food menu on their website. Having an intuitive way to manage a decent size menu becomes crucial. That is why we just had to design a custom block editor that would handle the complexities and edge-cases our customers demanded over the years while keeping things in line with our way.

Use the Food Menu block to display a list of food or drink items available at your venue — it’s easy-to-use and flexible to make it suitable for all your needs. There is no need for breaking the user experience with the old-style PDF files.

The Food Menu block is optimized to automatically add the required structured data to your website — the rich snippets that appear in search results and help you rank it more appropriately (SEO concerns… checked).

The Map block

The food industry is physical; someone needs a place to prepare and serve the customers with the fruits of their passion. Displaying your location on your site becomes a no brainer. The Map block is just the tool for the job.

Showcase an interactive Google Map with a location pin of your venue. Place this block on your Contact page or at the bottom of your Front page, making it that much easier to get your customers on the front door.

You can customize the map styling with your site’s colors and hide nearby venues to avoid any distractions from competitors.

The Slideshow block

Use this simple block to display a gallery of images in a single, coveted space. It helps you keep your visitors immersed and willing to discover more about your venue.

It has a very smooth sliding transition between slides to help with the overall impression.

The Announcement Bar block

Put this block to good use by featuring a message across the top of your site and let everyone visiting your site know about that all-important event.

Whether you have an announcement for a promotion or a custom update to make, it’s one of the easiest ways to get your visitor’s attention.

There are a few more blocks to help you with crafting each page on your website, but we will let you discover them on the go. 🤫

Customize the design to match your brand

As promised when we described our way of building websites, we genuinely care about the simple, yet bold idea of having a consistent website. This is where our Style Manager is paired with Rosa 2 to ensure such a visual consistency, automatically, or automagically if you will.

We have integrated Style Manager into the core of Rosa 2 achieving a seamless transition from managing your overall site style to offering individual block controls connected to it.

Put your experimenter hat on and see what the set of custom Fonts and Color Palettes can do for your site. Use them with confidence in conveying the right visual message to your visitors. 

An online store designed to fit your needs

When you are ready to dive into the world of eCommerce and push your store fully into the digital realm, Rosa 2 will be there all ready to assist you at every point. It integrates beautifully with the most popular eCommerce WordPress plugin, WooCommerce.

Rosa 2 perfectly aligns each shop section with your brand style and makes the entire buying process consistent across the board. You will find out that setting up an online store doesn’t have to be so complicated and cumbersome. We have taken care of as many concerns as we possibly can, leaving unto you the things only you know and can decide upon.

That’s it for now

This is the thinking behind and what Rosa 2 has in store for its users. We hope we managed to prove to you that we deliver on our promise of providing a better way to create the website your business needs. 

The new theme is easier to use while maintaining it’s initial simplicity and edge that made it famous. Check out Rosa 2 today!

PS: Rosa 2 is a whole new product that is not backward compatible with the previous theme. While we don’t provide an automatic migrate process, replacing Rosa 1 with Rosa 2 should not be a difficult task, albeit some manual work is involved:

• content from each page and subpage needs to be recreated using the new blocks, replacing shortcodes with their corresponding blocks;
• use multiple heroes followed by content in a single page to replace a parent page and its children;
• readjust the styling to match your previous look and feel.

If you’re an existing Rosa customer, please check your email for an exclusive loyalty discount. 

The post Meet Rosa 2: A brand new way to create restaurant websites with WordPress appeared first on Pixelgrade.

Let’s try a summary of the story behind this major release, just in case you haven’t kept tabs with the whole saga and instead focused on creating what you are passionate about. Good for you.

What’s the story behind this major release?

It all started about two years ago with a resounding alarm bell by Matt Mullenweg: what got us this far, will not get us much further. Things need to fundamentally change if we [the community] want it to stay relevant and thriving for the foreseeable future. WordPress needs to find its focus once again and realign with the way the web at large is evolving.

If there is one thing that stands out when people think about the main use-case WordPress fills in their online endeavors, that is surely “managing my content”. This is the “killer feature” WordPress has promised and delivered time and time again. It succeeded so much at this that most of the time we [developers] took it for granted and considered it a done deal. It is a dangerous mindset to be in, and the community has been basking in it for years.

So the people that drive and steer the development of WordPress made the courageous decision to reinvent how content is written and managed on the platform. No one treated it as an easy or uncontroversial feat, but not doing it would have put WordPress on a sure path towards obsolescence. Not a prospect that would help the free, open web.

Dozens of paid, full-time designers and developers, hundreds of voluntary contributors worked like crazy for two years to take the best of the Medium, Squarespace, Wix editing experience and do it better. A serious challenge by any standards, especially when we are talking about an open source project. This whole effort has been called Project Gutenberg or, how it’s more commonly known, the Gutenberg editor. To highlight the importance of getting it right, Matt himself took the lead for this update.

The development was done entirely in the open, with anyone invited to contribute in any ways possible. There were endless talks and articles about various challenges and decisions made along the way. As expected, the [developer/agency] community mostly split into three crowds:

• the “this is going to break everything we’ve built over the years, and we don’t want you to force us to do extra work to make the transition” bunch; “why change it if it works” kind of thinking;
• the “this is a good thing for the future of WordPress, but we need to be careful on how we manage the transition and not break our commitment to backward compatibility”;
• and the “this is awesome and we will build a whole lot of new shiny things with it” camp.

The project leaders tried their best to listen and weight in the over-abundance of opinions and perspectives, but one would be foolish to think the end result could please everyone. Changing the editing experience has too many known and unknown consequences for that to happen.

As of December 6th, 2018 the new editing experience is in the WordPress core and available to all as the 5.0 release. This is the new reality of the platform and there is no going back.

How does Pixelgrade approach Gutenberg?

In all honesty, at first, we’ve panicked a bit at the prospect of a rebuilt editing experience that made obsolete much of the setup our products we’re relying on. With time, the ambitious goal of Gutenberg has grown on us and we’ve started to see all the possibilities and benefits this new paradigm introduced.

We believe the block editor (the rightful name for the editor) is a much-needed breath of fresh air for the WordPress platform and the ecosystem at large. We welcome the new approach as it aligns very much with our own in building a digital experience: focus on the user problem, keep things intuitive, and use standards you and others can build upon.

While all this is great for the future, there is still the thorny problem of already existing themes that were built with the old editor in mind, like many of our themes are. It’s our responsibility to deal with this situation and we don’t shy away from it.

We will do our best to ensure that our themes can be used with the new block editor and that any existing content you have published will just work. Our goal is to keep your site running with no or minimal hassle while giving you the possibility of staying on the latest and greatest version of WordPress.

Allowing you to update to the latest version is of great importance to us as besides Gutenberg, new versions come with many other enhancements and security fixes. We don’t want your site to be relegated to a dark corner of the web.

Considering the above, we have already taken precautionary measures to put the necessary logic in the Pixelgrade Care plugin that comes with all of our themes, and also in our Customify plugin that handles styling customizations. This is why it is crucial that you keep them updated.

We decided to wait a bit and let the new block editor gather some wide usage and allow for any problems to be ironed out by the WordPress core team.

When you update to WordPress 5.0, by default the old/classic editor will remain active if your theme hasn’t been updated to be compatible with the new editor. You can bypass this and switch to the Gutenberg editor from your dashboard by going to Settings > Writing. We don’t recommend it, but you can if you want to.

In terms of theme compatibility, our portfolio is split in two:

• themes that used the regular editing experience without any custom fields; these themes have already been updated to be compatible with the Gutenberg editor and the transition should be painless.
  • The themes in this category are Patch, Hive, Gema, Noto, Vasco, Julia, Felt, Jason, and Silk.
• themes that use custom editing experiences with multiple custom fields and meta boxes; these themes will be much harder to be made compatible and we will tackle them to the best of our abilities; some of them have such a custom workflow that the best option for them is to stick with the classic editor as too many things might break when switching.
  • The themes in this category are Rosa, Osteria, Listable, Fargo, Noah, Timber, Mies, Pile, Heap, Border, Lens, and Bucket.

Why have you made this decision?

Our main goal is to keep your site running smoothly, even if that means sticking with the old editing experience. We believe a good experience for your visitors outweighs the benefits of the new editor.

We also know from experience that after a major update, for a couple of weeks things are still in flow and very often there is at least one bug-fixing update that patches any uncaught glitches. This is why we haven’t rushed to release theme updates beforehand; things are likely to change a little bit.

It is not an ideal situation and we would very much like to be able to use the block editor for all of our themes. But the complexities need to be taken into account and balanced with the amount of effort involved. We want to be here for years to come, not sink all of our efforts into re-engineering our products and going bust. We hope you also want that for us.

Does my theme work with Gutenberg?

If you have updated to WordPress 5.0 and see the new editing experience, then your theme works with Gutenberg. If not, you will need to wait for a heads-up from us or a new theme update announcing this. We are working as fast as we can.

Can I safely update to WordPress 5.0?

Yes, but… When it comes to our themes, you can update to WordPress 5.0 and your site will not break, even if some of you might still see and be able to use only the old editing experience.

But, before you update you should also consider the plugins you are using and check that they have been updated to be compatible with the new version of WordPress.

Obviously, we can’t account for the multitude of possible scenarios that arise from mixing the new WordPress version, the new block editor, our themes, and who knows how many plugins active on your site.

That is why we recommend that, at least for complex WordPress installations, you back up your site and try the new version in a staging or test setup. Better safe than sorry.

Building websites for a living?

With the Themes Bundle you get all our WordPress themes and save more than $2000.

Learn more about Themes Bundle

The post Pixelgrade and WordPress 5.0: what you need to know appeared first on Pixelgrade.

It might look like a dream come true, but I’m confident we’ve created a solution that could help you get closer to it.

👋 Say hello to Vasco!

Vasco is our flagship WordPress theme for travel bloggers — it is carefully designed to help you create rich content that will allure your visitors to read it from top to toe. Moreover, they will come back later on and engage even more, which will make room for you to keep traveling. 

Designing Vasco was a long and challenging adventure. I would love to offer you a glimpse into this journey (from the idea to the final product) to better understand some decisions we took and why I believe this is your go-to design for your next travel blog.

Research Phase

Every new project starts with the research phase. This means that before getting caught into any visual excitement, we take the time to understand the need and the desirability that (a bunch of) users are looking for. After that, we delve into various ideas and find out how we can help them overcome it.

Who is this for?

We created a solution for people who want to start switching their passion for travel into a real business. You might travel with friends or as a solo backpacker, you might go wherever the road takes you, or you could have a hyper-organized plan — any kind of traveler you might be, I’m sure that you learned many things that you wish you would have known in advance.

Unlike Current Solutions

Many available WordPress blogging themes out there advertise that, among others niches, they aim to serve the travel one too. Most of the times this is just a general statement and the solution provided is not actually serving your specific needs and requests.

While it definitely could be used by any other categories of bloggers, we essentially designed Vasco with travel bloggers in mind, and all the decisions that we made were to match their pains.

Understanding a travel blogger’s needs

Most of the time, a travel blogger who’s at the start of this career often focuses on two main things:

• Share their stories, journeys, and experiences with others
• Grow an audience to financially support their traveling experiences

Those two are going hand in hand, and each one depends on the success of the other. While both may sound merely practical and quite cold actions, the difference lies in how the blogger relates to its audience and how he succeeds in creating a brand around his personality.

When you’re growing an audience, creating an emotional connection is a must-have in order to keep momentum.

Emotional connection is made through your writing style and it can be enhanced (or disgraced) by the surrounding context which highlights the content. That’s why it’s important to be able to speak up as a whole and have consistency by choosing a design which complements your personality.

The Key Features of a Theme for Travel Bloggers

Being a travel blogger starts with being a blogger first with some specific needs dictated by the niche you are part of.

After doing our research, reading reports and case studies, analyzing industry-leading travel blogs, we figured out a list of the most important features that a theme should have to help a traveler kick-off his blogger journey:

• A distinctive design with carefully crafted elements to help you express your personality and stand out from the crowd.
• A set of conversion-focused sections that you actually need, available across the entire site (e.g., current location widget, social announcement bar, newsletter forms, sharing buttons) designed to help you nurture a loyal audience around your stories and capture their commercial interest.
• A well-researched content strategy for your Home page that is cleverly laying out the elements to promote your content to as many people as possible
• A set of layouts that let your articles breathe and take in beautiful imagery to set the perfect stage for your stories.

All these key features should match together like a puzzle and create a cohesive design to help you shine and get traction. How did we come up with an outstanding solution? Read further and discover the process behind the scenes.

Design Playground

After gathering all the necessary data from the research, we created a persona to keep in mind in order to guide our decisions:

Amanda is a millennial traveler looking to see the world and help others do the same. She’s working remotely, and she’s writing articles varying from the smallest excursion outside the city to multi-month expeditions.

Then we moved on into the sketching phase where we designed the Home page’s necessary sections, their order, and how they should interact to convey the information and stimulate visitors to take specific actions: reading an article, exploring a category or subscribing to the newsletter:

Once we crafted the strategy and the ideal scenario for a travel blogger’s Home page, we moved on to the creative ideation phase.

A Branding Concept is Born

Taking inspiration from the traveler’s lifestyle, we explored how classic motifs like postcards, stamps or vintage cameras would fit into a blogger’s digital presence. It was important for us that everything we proposed was linked to the traveler, so this was a direction that we really wanted to delve into.

Without having the traveler firmly in our eyesight, we couldn’t have made opinionated decisions, and we would have veered further from our goal of providing a distinctive design aimed at travelers.

Ilinca is giving some insights about the exploration process that she went through in moving from a static set of wireframes to bringing some real personality to the theme:

Ilinca: “While building the wireframes and the demo site’s information architecture, it all might seem just like another theme on the wall. All this is necessary for having a basic understanding of the persona we’re building the theme for, but what would make Vasco the user’s new favorite flavor of travel blog theme? 

Analogous inspiration is a IDEO design trick that clicked for me, and in the context of Vasco, I tried to get a hold on what are the objects that a traveler encounters in his universe: postcards, stamps, cameras, maps. Next thing you know, I was breaking these elements into shapes, colors, typography, graphic gestures, then mix-and-matching them and iterate as far as I could; a top-to-bottom approach so to say. It was a short walk in the shoes of our persona and a road we were confident to take while polishing Vasco.”

Next, we sketched out various elements to include those specific details and discreetly integrate them. Some gestures would fit better than others in a web context, but at that point, it was important just to put them together and analyze later.

💡Something caught our attention and soon an interesting idea emerged: an overlay stamp and a series of background colors that extended over the edges and enriched the visual presentation:

Taking this a little bit further and pushing the boundaries, we figured out a colorful combination of abstract shapes that complement the image and make it feel unique. 🤩

We thought that this was the kind of unique concept that we were looking for, so we needed to find ways to implement it flawlessly.

While we could have been exploring a bunch of variations, the dynamic nature of the design would not be fulfilled if we would not have moved it into the development phase to see how things were going to look in the real world.

The Implementation

No matter how good a design is, it means nothing if it is not properly executed and brought in front of real users. In order to speed up the development time and have consistency among the theme’s features, we build a set of components around the most used elements that we’re able to reuse and improve from one product to another.

Vlad, the architect behind this system, is talking about the philosophy of those components and how they help us build better products:

Vlad: “The way we think about WordPress Theme Components is much in the same way Henry Ford thought about standardizing auto parts and revolutionizing the whole industry: with a suite of standardized, well understood, tested and continuously improved parts you get the current diversity of car offerings but with the confidence that the basic functionality is there – not perfect, but dependable. You know, everyday stuff like having doors that open and close properly, a gearbox with forward and reverse, or pushing the brake pedal and expecting to decelerate. Things we take for granted nowadays.

We believe a more standardized approach to WordPress themes is the way forward if we are to constantly improve the user experience and have a more diverse offering to our customers.

It is not an easy road as it forces new responsibilities upon us in terms of constantly thinking of the larger system, of the implications each change has. Nevertheless, we are committed to making it work since it has the potential to push us forward the same way Ford did more than a century ago.

We are marking constant efforts to design the whole system as open and inclusive as possible, thus paving the way for wider adoption by the other actors in the community. We see this as the perfect win-win opportunity where Pixelgrade wins by being at the forefront, our customers and WordPress users in general win by having a reliable system at their fingertips and other theme authors win by having a solid foundation to build upon and contribute to.”

As with any of our themes, we aimed to bring something new and unique to the table— below are some of the key features we’re most proud of.

The Blobs System

It all started with a static mockup that showed a set of three blobs in perfect harmony with a representative image of the blogger. Even if the shapes looked random, their format remained fixed and couldn’t be personalized — how can we generate those shapes and make them unique for each individual blog?

Răzvan took the challenge to programmatically generate those shapes in an arbitrary manner but still offer some level of control to the user, keeping them unique. See how it works in the video below and read about some of the challenges he faced during the development of the blobs system:

Răzvan: “The first challenge was to find a way to programmatically generate random shapes but also give the user consistent results and have a simple way to store them in the database.

The second one was to find the right balance between the number of controls and the level of customization the user had in generating the blobs.

We ended up with a pretty clear process in the end: dynamically create regular polygons in SVG, translate some of their points to create some more unique shapes and then smooth out the edges using some SVG and CSS magic.”

The final result is an easy-to-use interface that you can use to quickly generate any kind of blobs you want.

Auto-generated Stamps

Another element frequently found in the traveler’s lifestyle is the stamp applied to postcards that you send back home to the loved ones.

We imagined that this is a perfect gesture that we could bring to the digital world and use it to create an emotional liaison between the physical part of the traveling experience and your online presence.

To be even more authentic, it was important that the whole graphic element could have been generated from your name and automatically placed all over the site to reinforce that the browsing experience feels like receiving a personal postcard from you.

A Blueprint to Jump-Start Your Content Strategy

We know that while you may not be a top-notch copywriter, you still have your own storytelling approach — which is recommended for the most areas of your site. At the same time, it’s important to nail down the basics and include all the relevant information about who you are and what you’re going to do with your blog.

As you already imagine, we took the challenge and searched for ways to give you a helping hand on this matter. After the initial research, we worked with Oana, our digital strategist and copywriter, to create a set of default text for each block that you can freely use to kick-off your content strategy with the right foot.

As the visual assets help you kickstart and optimize the design phase of your blog, we think that the same principles apply to your content.

Oana is giving you more details about the importance and flexibility of the content placeholders that we provide:    

Oana: “When I worked on the content placeholders I tried to make the most out of the micro-copy areas, without losing any of Vasco’s personality and charm. I wanted to support and highlight its great design, not over shine it.

The narrow space forced me to be both creative and straightforward, but the fact that I always kept in mind the needs of our persona made my life easier. This way, I was able to craft snippets of copy that could be easily adopted and adjusted by a wide range of travel bloggers. I genuinely cared about this kind of convenience from the very beginning.

By keeping in mind the needs of a persona traveler, I was able to craft snippets of copy that could be easily adopted and adjusted by a wide range of travel bloggers.

The key messages I fine-tuned for Vasco’s demo have one single goal: to help people have an accurate communication entry-point. They make room for travel lovers to build upon and make it even better through their own storytelling approach.

Their flexibility allows users to be authentic and consistent from start to finish, avoiding a bunch of naive mistakes that can damage the overall mojo. On top of that, it definitely leads them to create an experience that audiences of all kinds will remember and brag about.”

We will push even further into this area in the future, but for now, you have an excellent entry-point for each section of your Home page.

Conclusion

As you can see, to actually create a solid solution for travel bloggers, to go beyond the obvious, requires a lot of effort and commitment — but it pays off in the end. What follows is to see how you can take Vasco even further. Best of luck! 🤞

Fun facts

As a final note, I would love to share some naive yet funny occurrences that happened during the development of Vasco.

#1—Is it Bobo?

This time, we tried to postpone the naming challenge and focus on different areas first. We used to call it “Bobo” during the whole process, so now some of our folks are still stuck with this name. 🤷‍♂️

#2—Demo Guy

The first demo’s presentation we created for Vasco had an intriguing image on the Home page. We displayed a man at the bar, enjoying his drink, but the girls in the office pleaded for changing it because it had an Italian mafia vibe.

#3—Blobs Art

During the development of the blobs system, things started to get a little funky with all those shapes and their controls — and not in a bad way. Our developers got a little too carried away with discovering strange but beautiful shapes that could be generated with numbers. Ahhh…the beauty of maths.

The post Starting your traveling blog with Vasco appeared first on Pixelgrade.

As a coordinator of our affiliate program and a blogger myself I’ve been skimming through dozens of articles related to blogging and its universe. How to make money out of your blog? How to win your first 1K followers on Instagram? How to create long-term partnerships with big brands? How to build an audience around your interests? How to improve your writing skills?

Everything has at least dozens of answers. Just give it a try, type on Google any of the above questions and you can get depressed, shut the computer, and go for a walk in the park. But hey, stop for a sec.

Do your research. Being well-informed and strongly committed can lead you far. The simple fact that you land now in this tribe give you a tremendous advantage: everything you dream of is at your fingertips.

By the way, by 2020, the number of bloggers in the U.S. is set to reach 31.7 million.

Three ways in which we can help you shape a promising start for your blogging journey so that you aren’t caught off the guard:

#1 — The right solution for your context

More than six months ago we created Pixelgrade Club as a response to your particular pain. You get not only full access to a growing collection of our best blogging WordPress themes, but also an educational onboarding.

We assist you with what you should know to launch your blog in no more than 14 days — this equals the free trial period, which means you jump in this adventure with zero costs upfront.

Our portfolio includes themes tailored to specific industries and solve real digital needs. Start with the one you believe fits your purposes and switch between them when you feel it’s not the right mojo. It’s never been easier to change the look-and-feel of your website, and this is crucial when you are in your early days of blogging.

Small Tip: Search for flexible solutions and partners since it’s a learning-by-doing kind of process and it’s hard to draw steady decisions from day one.

#2 — Customer support to watch your back

We’re proud to say that we’ve been always aiming to deliver the best experience to our customers. No matter if they bought the cheapest or the most expensive product, if they wrote us in a broken English or with loads of respect, if they were throwing too many questions or they understood that it takes two to tango, we put our best work to meet their expectations.

For us, an experience is defined by the great feeling of being part of an authentic story. We treat our customers as our business partners and we genuinely care about their success in the digital world. In the end, if they make it we can continue crafting even better WordPress themes.

You will need customer support, that’s for sure. No matter how easy and convenient is the journey, any fresh blog will face certain struggles, even though some of them might not be related with the theme per se. We’re here to help and to assist you along the way, no matter the nature of your curiosities.

Small Tip: Look after collaborations where the customer support approach is top-notch, but also with a human touch, because you are going to actively need it.

#3 — Consistency to keep the momentum

Consistency and perseverance are mandatory when it comes to building a digital reputation that makes a difference. Therefore, we developed an internal system to offer continuous updates for our WordPress themes, so that you can focus on what you know best: expressing your ideas.

We even provide access to adjacent tools of customisations to make sure that your blog defines you and you develop an emotional connection with it. Duplicating the demo means scratching the surface, but you can go way further with our products and make it truly yours.

Maybe it’s hard for you to imagine the future since you’re barely getting your ducks in a row, but trust me that there’s no better way to think about this aspects. You will thank us later on.

Small Tip: Invest in durable relationships that bring you real value by offering results that you can’t provide at this point, but will definitely help you stand out.

I’m here to help you create a fabulous blog

Express your ideas better next to me.

Get started now

I totally support you to allow yourself to start a blog right away. One that you will feel proud to show your friends, to constantly write on it, to share it on social channels, to endorse your ideas and beliefs. Ignore the I-know-it-all kind of attitude that can be intimidating, and focus on what makes you-you.

Give us a ping (e-mail tweet, comment, pigeon) if you need a helping hand to make it happen. Or get a theme from our shop and take it from there. It’s your call and the perfect timing to enter the game. This could be an inspiring first story on your blog, that’s for sure. 🙌

The post New to the blogging world? We help you kick-off in style appeared first on Pixelgrade.

I hardly found good resources on designing a WordPress theme and it was a challenge to explore and go through a custom empirical process.

My playground was contoured by a generous amount of research (and a generous amount of open tabs), loads of sketches that were hoarded up in the drawers of my desk, a lot of ping-pong discussions with George, my fellow designer, nerve wrenching use case scenarios, the Grand Canyon between Photoshop and front-end reality and finally, the launch and how the feedback surprised me day by day.

Let’s bring a glimpse inside Gema, a WordPress theme that is the child of broken rules and some sweet vibe I got from a perfume ad. The scene is yours!

Manifesto

As we did the research through bloggers’ sites and after observing their behaviours in crafting their posts, a silly but obvious behaviour emerged: they are not taking that much effort in choosing the perfect proportions for their images or they not carefully take into consideration the posts title length. Still, their stories are great and they are looking to make it even better together with how it’s showcased.

All our themes aim to have a little “wow” effect, something that made them different from day one, so the cherry on the top of the cake for Gema was to apply a solution to the problems above, on a coherent and harmonious aesthetic grid layout that adjusted depending on its content.

The Design Playground

Considering that I’m not having a mature design process in place and I cannot afford the time to set up one, George suggested to keep in mind these 3 things:

1. Focus on my native instincts aka go back to my roots and trust my illustrator guts.
2. Cultivate my sense of observation by reviewing well–done websites.
3. Then challenge myself and push silly things forward as he will try to get myself back on track.

The 3x3x3 Research Mantra

I’ve never called my research “research”, but “inspiration hunting”. And I also gave it a name: the 3x3x3. George actually came with this idea that implied searching for inspirational websites as follows:

• 3 which have great use of font pairing,
• 3 that are chromatically satisfying and,
• 3 that nail it when it comes to layout.

Typewolf is pure eye candy for any web designer, even if Jeremiah is hunting down only the beautiful use of fonts, but with great fonts come great expectations in layout design and color picking. Fast forward, I’m at page 124 (or so) and even if there were less than 70 to go (haha, like that is a piece of cake), I ended up with the list on the left.

*Ok, they’re not really 3 of them, the list was even bigger in my Bookmarks bar, but I took my time and Alt+Cmd+[Arrow] through the sites that were left and finally picked 3 of them.

Let the magic begin

Now we’ve got 9 inspirations, 3 of those relating to layout being used later on. All in all, there was nothing left to do than fire up Photoshop and start mixing and matching colors, fonts and image placeholders. I was mindlessly combining all these resources that I found, without knowing that it was my first process of iteration that resulted into this:

Style’s done, grid’s next.

After searching through 124-ish pages of websites, you’d say I’ve seen my fair amount of grids. Not really actually. It turns out designers don’t play much with grids, so when you’re viewing masonry built websites or clean horizontal/vertical alignments, you’ll probably end up with a dull sketch of some squares 3×3. That’s what I even got from my 3x3x3 research, the layouts weren’t visually challenging or demanding much attention, so why bother with something new if people like this?

😅 All good, I’m happy — what’s the next step?

This was the moment when the manifesto kicks in along with George and, in his words:

“Not — that’s boring. Back to the drawing board and push some boundaries.”

George was this Waif (on Zen mode, thank God) that kept poking me with a stick whenever I was taking the short path instead of making my own. My first sketches that included the layout were no exception. Being two designers in the team turned out to be the beginning of a ping-pong that we are still practicing, so I slowly make my way back to the drawing board.

Iteration is my middle name

The (re)making of the grid started with well…Breaking the grid. Page after page, I bookmarked what I thought would be a new approach on blogging grids. My first attempts were kind of boring, never ending alternations of the good old Masonry that we dreaded so much — the shitty first drafts, as Max Temkin calls them.

But I finally got my hands on something “braver” and proudly presented my sketches to George.

“Nop — still boring. Try something more gutsy.”

Did I expect this response? No. Did I end up frustrated? Hell yeah, what would be design without it? It felt like someone asked me to invent a new color.

Shaping the workflow

I decided to reverse the workflow and went from clearly defined layouts to doodling random tiles by personal appeal (yeah, I hear you frowning), only by keeping the initially defined problem in mind. My grid went from Plain Jane to something I proudly named Trigravity Masonry, or if fancy words aren’t your cup of tea, the Tetris T blocks.

Frustration worked like a charm and George agreed 😊.

This is what we’re looking for.

Finding the red thread behind the doodles

Blog posts were grouped 3 by 3, forming a T-shaped block that was 90 degrees rotated either to the left, or the right and the rest is…Tetris: the goal of it all was to fill in the possible gaps that would frustrate you to hell and never let you get a straight line a.k.a. avoiding awkward white spaces in the design.

Question everything in terms of use-cases

The grid was more of an experiment, so, before passing it to the front-end masters, I started a DIY prototype of the grid which used random strings of L’s (Landscape), P’s (Portrait), T’s (Text), each of them representing the posts types I had designed earlier. All those characters, bundled up, had to be use cases of blog posts that a possible user could have had. Looked pretty promising, eh?

Keeping your wheels spinning when everything breaks

It turns out later that my Trigravity Grid was a white-space inducing monster and there are still many unfortunate cases that I didn’t cover. Here I am with Răzvan, one of the front-ends, that was the happy winner of a subscription to grid hell guided by an anxious designer. He’d been working on multiple variations of the grid following my algorithm, but it seemed like the thing that made it a pretentious little bitch was actually…my algorithm?!

😞 Upset moment — we might leave it behind and get back to start.

But.. giving up is not an option

I was pretty disappointed, I wanted it to work because it looked so smart and yet so random, I just found order in chaos, but then I broke that order. I started downgrading all, making posts all square, trying good ol’ Masonry and even try to change the style. This was then followed by a deep discussion on Slack with George and, in a tl;dr manner, it all turned out to this: giving up is not an option.

While 🤔 brainstorming with Răzvan and George we decided to switch the algorithm from a block-based layout to a column-oriented one, which in most of the cases would give us the same result: a unique and adaptable layout based on the posts content + a balanced whitespace area around all the posts. It works!

🎉 Glee, party, and confetti!!!

Single Page, they say

After the archive layout was confirmed, I had to go to the other important section of the blog: the single post page. The thing about single pages is that there is not much more to improve as they all emerge from a few known patterns.

Going the fast way and things are done — so easy!

“Not — let’s dig deeper.”

Iteration is my full name now

Oh, hi, haven’t heard this for a long time. Again I’m trapped in some kind of circle of what users have been used to until now, but as if Newton’s apple was reincarnated somewhere in my head, I thought: “Why not use my Trigravity grid algorithm?”. Eureka! An idea that will make the whole site more consistent has been born.

Things were looking great, and there were no many things left to do.

Finishing the journey

Menus, widgets, comment sections and responsive layouts, these elements were the last milestones that I passed through. I am sure this was my “Aha!” moment as a designer when I noticed how important micro-interactions and a responsive layout are. This was about to get even more significant while implementing the new styles with Cristi, front-end master no.2.

Things were going pretty smooth and after 3 months from the start, we submit the theme for review.

Let’s open that champagne 🍾

Lucky us for, the WordPress.com guys have a really thorough review system and boy, did they REVIEW it.

Within another 3 months of fixes and enhancements, based on the back-and-forth with the review team, Gema was launched on 2nd of June 2016.

🎉 Horaaay!

Honest takeaways

I thought I’d share a handful of lessons I’ve learned during this design process — as a helpful guide for those just starting out.

1. Never settle on the first idea: nor on the second one, just keep searching, improving, learning and things will work out as they should.
2. Don’t be afraid to break the rules: if you want to be a cutting-edge, inspiring agency or freelancer, always step aside when you’re happy with what you’ve done because it surely isn’t your final work. Or get yourself a George who will be somewhere in the background saying: “Try something more stunning”.
3. Downs are good to get better and move forward: Ups and downs are good, but the best are the downs — I’m writing this with joy and a smile on my face — all the effort was so well deserved, I would have been probably emotionless if it all worked just as planned.
4. Iterate, iterate, iterate: It’s like polishing a diamond — you need be patient and keep on scratching on a rock until you get to the shiny core. It’s not only a discovery of the intricateness of an idea but a self-journey where you explore how much your creativity can take.
5. Shape your own workflow: the 3x3x3, the paper-generated grid, prototyping shouldn’t always be about site maps, user diagrams; go wild, things could end up so bad, but so good, you have the same 50/50 chance of doing it well in both cases — so why not have fun in the process?
6. Be a team player: talk, discuss, be open, ideas aren’t good or bad, they’re ideas; fear and anxiety just consume time and energy. I expect that designers tend to be introverts rather than extroverts since they dedicate a lot of time to research and analysis, but the energy of a team that is prepared to implement your ideas and ready to discuss over it is surely something you can’t achieve on your own.

My conclusion

After all this struggle, I was finally having a warm fuzzy feeling while staring at Gema’s theme page. Now I have 2 notebooks full of sketches and an acre of my mind bundled up with Do’s and Dont’s, which I’ll be surely using on the next theme I am already designing.

This story was about the good, the bad and the ugly behind the design process of a WordPress theme that wanted to break the rules. Thank you so much, my lovely Pixelgrade crew, for letting me grow in such ways that I never expected and allowing me to contribute to our path. Cheers, let there be more ahead of us! 🍻

The post Designing GEMA — so you think you can break the rules? appeared first on Pixelgrade.