In this article we will go over WooCommerce product list features and discuss best practices for an effective product listing page, plus how Jupiter X2 can help you build an impressive product listing for more conversion and growth.Continue reading
It was around June 2020 that Jupiter X Lite, the free version of our Jupiter X theme, was finally approved and released to the WordPress repository for public use. The reason behind all the effort we put into preparing and releasing the Lite version was to let everyone enjoy a glimpse of Jupiter X experience without having to pay for it. Jupiter X Lite has all the essential features of Jupiter X, plus a good level of customizability, making it more than enough to build a professional website.
From the beginning our intention was, unlike many free WordPress themes available on the market, to make Jupiter X Lite as practical and customizable as possible so that building a decent website is not dependent on paying for the premium version at some point. One exciting feature we added to make this happen was the readymade templates. Recently we have added 5 new free Jupiter X Lite templates to our theme to make the process of building websites even easier.
Meet the newly added free templates for Jupiter X Lite
Let’s take a look at the 5 new Jupiter X Lite templates that will help Lite users get started on their dream website without wasting too much time and energy on the details.
The one-page Yoga website template, as its name suggests, is perfect for yoga instructors, fitness coaches and personal trainers who want to create a solid web presence and promote their skills online. The combination of soft and soothing colors and the uncluttered, simple layout perfectly matches what yoga intends to teach: finding peace within and helping spread it to others!
Using elements such as image boxes, testimonials, image galleries and icon lists you can showcase your various pricing options, introduce your trainers, share relaxing images of your yoga sessions and much more.
For agency owners looking for a simple, functional and elegant website, the one-page Agency website template is the right choice. Designed with the needs of agencies in mind, this template promotes your projects and services in the most concise and professional way.
Here is another one-page template that will ensure that your consulting and life coaching services stand out among the crowd. The Life Coach website template, with its eye-catching hero section, tailored page elements and easy to navigate layout, makes sure you are always accessible to your clients and are ready to change their lives!
Subscribe to Artbees Themes Blog for the best WordPress tips and insights.
Nowadays nobody can dispute the importance of a personal portfolio website for freelancers looking to grab business opportunities. If you want clients to find you in the vast and competitive sea of information on the internet, a simple resume won’t do the trick. You have to tell your story in the form of a modern, visually appealing and descriptive website.
The one-page Personal Portfolio website template will give you a hand with setting up your online portfolio and highlighting your skills and expertise. The dark background color, contrasting white and green color text elements and the clean customer testimonials and gallery section will have clients flocking to you in no time!
If you have an app or a software that you would like to showcase to the public, it’s a great idea to have a landing page that does just that. Take a simple yet powerful approach with the one-page App website template and highlight your app or any product’s features, perks and lifeline in the best possible way!
What does the future look like for Jupiter X Lite?
Surely this is just the beginning! We won’t stop with these 5 new Jupiter X Lite templates, plus the older Callisto template! More new Jupiter X Lite templates are on the way in the near future to cover more businesses and personal interests and help our free users get started on their dream website faster and easier.
We just summarized our 5 new Jupiter X Lite templates. Are you a Jupiter X Lite user? Have you used any of the templates mentioned above? What did you like the most about them? Please share in the comments what other businesses we should prioritize while adding more templates to the Lite version.
When was the last time you bought a magazine? The chances are that you don’t even remember unless you’re an avid reader who still carefully keeps up the tradition of going to the newsstand and picking your favorite magazine right after it comes out! Just like in every sector, the internet and digital age has dramatically changed the world of magazine publishing. Every day more and more magazines are moving online in order to keep up with the pace. Publishers have come to an understanding that online magazines are becoming more popular because they are easily accessible, and in most cases, free.
That being said, the trend of online blogs and magazine websites with WordPress on the rise. Undoubtedly, content is king, but if you want to put up a magazine website that is aesthetic, professional, visually appealing and user friendly, you need to pay double attention to website design. Even the best content seems banal sitting on a bad design.
Magazine-style websites should be dynamic, stylish, rich in content yet uncluttered and consistent in design. Maintaining these criteria is not easily achievable, so in this article, we put together some key tips along with some live examples from Jupiter X magazine and blog templates that can help you get inspired and create a professional-looking magazine website to reach a wider audience.
Grid and masonry layout
Using vertical and horizontal lines of the grid system to organize content has always been a common practice in traditional paper magazines. Grid layouts are now modernized following the trends and are still a popular layout for blog, news and magazine websites as they make the website visually appealing, neat and easy-to-read. The grid layout – which looks like the cells of a table spaced perfectly right next to each other – creates the best architecture to organize your posts. Most of the Jupiter X magazine templates are designed under the grid layout in most sections. Here is an example of how it looks in action in the Joi template:
Another popular layout when designing magazine websites with WordPress is the masonry layout. A slight difference between masonry and grid layout is that images can be displayed in a larger size and that they are more fluid in their placement on the page. The Masonry layout comes in two inner and outer formats with their own aesthetic features. The trending News section in the Magazine 2 template enjoys this layout:
One of the unavoidable widgets in blog or magazine websites that feature heavy content is the Smart Post List, which will help you to organize posts in an interactive manner. You can customize the lists in many ways such as image size, featured post style, alignment, meta and more. Check out an example of the listing posts in the Magazine 2 template:
Another cool way to display posts in stylish tiles is by using the Smart Posts Tiles widget. Just like lists, you can customize nearly everything in tiles, from image size and title length to box overlays and height and width. A perfect example of this style is live in the Photography Blog template’s homepage.
One common and eye-catching way to display the recent posts on the website is by using a carousel style. Showcase your featured or most recent posts in moving slides, and readers will much easier be able to locate the important posts or even the archived posts from the past. Magazine 2 template uses the carousel in a neat way.
Visually appealing is a must!
The next time you buy a paper magazine, pay attention to the number of images, colors and other visual elements used on various pages. With a lot of content to read, rich media can make the design of your website compelling and more entertaining.
Don’t underestimate the power of images in drawing the reader’s attention to stories. Think of your homepage as the cover of your magazine and try to make it as much attention-grabbing as possible. Use big, bold and high-quality images that are of course in line with your design style. Jupiter X’s Joi, Meditrinalia and Photography Blog templates include this image rich layout.
Using image-specific elements such as Image Accordion and Slider to showcase your posts makes your website even richer. You can find examples of these elements in the Magazine 2 and Simple Magazine templates.
Videos & animations
One fundamental difference between paper and online magazines is the use of videos and animations. Using them adds to the dynamism of the website. People tend to pay more attention to the posts that include a video compared to the text-only ones, so try to incorporate engaging videos that match the general feel of the website and the post they represent when you create a magazine website with WordPress, just as we did perfectly in Blog 2 and Magazine 2 templates.
Another important factor that will make your website pleasing to the eye is the right use of fonts and typography. Don’t be afraid to use different fonts, font sizes and font colors that are consistent with the website design. Use larger fonts for headlines or the top news you want to highlight and smaller fonts in the footer or for older posts etc. Check out the various fonts, sizes and colors in Joi, Meditrinalia and Health Blog templates.
Regardless of how many types of content your magazine is covering, they all need attractive headlines – in design and content – to be read. It doesn’t matter if it’s on the stand or on a computer monitor – the first thing that a reader’s eye is going to notice is the headline. That’s why it’s worth spending time on it. According to some tests regarding headlines, the traffic to content can vary to as much as 500%. Thankfully, Jupiter X has solved the design part of headlines for you, and all you need to think about is content.
The most distinctive feature of magazine-style websites as stated above is being dynamic with too much content grouped together in a space as small as a screen. This creates a fine line between being stylish and being cluttered. While paying attention to the visual aspects of the website, you should also be careful not to drive your audience into an unwanted mess. Embrace white space and let your readers take small breaks in between their navigation throughout the website and focus more on the content that’s appealing to them.
Allow users to navigate easily
There is a debate about using sidebars nowadays. For certain types of websites, sidebars have become obsolete. However, in situations where users need some guidance and/or you have a content-heavy website (such as a magazine website), sidebars can be useful. Sidebars play an essential role in designing magazine websites with WordPress as they are an excellent way to show other articles or pages of your website. They also allow users to navigate easily through the website or to display call-to-action buttons for something like a subscription or even a place for your social media accounts, just like we did it stylishly in Magazine 2 and in Magazine without any clutter to get the benefit of sidebars.
If your magazine website has a lot of categories and subcategories, then a mega menu is a good option to let users navigate easily through different parts of your website. This type of menu is useful to show all of – or most of – submenus of the main menu, and you can have a short description for each item on it. You have infinite customizability with Jupiter X’s Mega Menu, with a horizontal or vertical menu and add text, video, list items, image, icon, form and many more elements on your menu.
Have you ever noticed that narrow band of tape at the bottom of television channels for displaying news, information, advertisement, etc? It’s called a news ticker and is being increasingly used on the homepage of websites to show related information just like television channels. It can draw attention not only to the information that is shared but to the whole website. On a magazine website, you can use it to share your new articles so users can easily click and access that article. Or if you have a market or finance magazine, you may use it to show the price or rate of things that change frequently, but like most elements in a magazine website, it shouldn’t make the website appear too busy. Take a look at how we go about implementing this in the Blog 2 template.
Divide into categories
Another excellent way to appeal to site visitors while creating a magazine website with WordPress is by archiving your content into meaningful categories. To do that, you should have a clear understanding of why your audience visits your website. Avoid making too many categories as it can cause clutter on your website. For example, if you’re thinking of having a general fashion magazine, it would be wise to divide categories into Men, Women, and Kids for the main page. Jupiter X provides both outer style and inner style for categories, for instance, we designed Magazine 2 with inner style to categorize contents and Fashion Blog with outer style.
Include a subscribe button or sign-in form
Online magazines are becoming popular for a reason: they are easily accessible. In order to keep readers engaged and faithful to your magazine or blog, you should let them subscribe to it with ease and just like they could get paper magazines in their mailbox, let them gain access to the latest news in their inbox. Failing to do so can make you lose them forever to competitors.
Most magazine templates from Jupiter X include a subscription section and a contact form for possible questions and queries. The best practice is that you include the subscription button down every page of the website. Check out the Magazine 2 and Blog 2 templates as examples for both.
Embed social media
With so much content available for free on the internet and social media, promoting your content seems pretty difficult in such a competitive field. Thus, the effect of social media is undeniable for your brand and content to go viral. Make sure you allow for a discussion on social media about your content, which will operate like “word of mouth” in the digital world. Embed your social media accounts wherever possible on your website that of course does not make the overall design look ugly! The header, footer and contact pages are the best places to consider.
There’s no doubt that you should focus and spend a lot of time on an eye-catching design to create a magazine website with WordPress, and Jupiter X would be a huge help and easy way to achieve it. We provide various templates with a lot of features for different tastes that, like all the templates of Jupiter X, you can add, edit, or delete every element of your website.
Now it’s your turn, are we going to see a new online magazine soon?
Subscribe to Artbees Themes Blog for the best WordPress tips and insights.
Amid the COVID-19 outbreak, many companies around the world were forced to roll out remote work as their top policy to help slow the rapid spread of Coronavirus. And we weren’t the exception! As a member of the WordPress community with 80% of our staff already working remote, shifting to working-from-home mode was not a major hassle for us. Following the initial announcement, we partially shut down the office, and nearly everyone was asked to begin working remotely during COVID-19. Since the beginning of last week, we completely closed our office doors, and we are now happy to announce that our team is 100% remote, hoping we could – even if only a bit – help to break the chain of infection.
Obviously, this shift was pretty new for a couple of us, and we experienced some challenges to get everything in place working from home. So to get a grasp on real-life experience, we asked both our veteran remote workers and newbies to share what challenges they faced and how they overcame them. We also gathered some tips on how to effectively work in lockdown, which could be helpful for anyone struggling to strike the work-life balance at home.
Constant communication is key
Remote work means you are also remote from your colleagues, office environment, coffee break chats and more. According to the stats, 20% of remote workers struggle with loneliness. Working remotely during COVID-19 with the added pressure of social distancing doubles concerns about a breakdown in communication. This loneliness and lack of proper communication with colleagues can demotivate and negatively affect the overall quality of someone’s work. Fortunately, in the age of the internet with numerous communication tools available, this shouldn’t be a major issue anymore.
Set up daily stand-up meetings with your team or supervisor at the beginning of the day. Even a single wave in a short video conference will boost your energy for the day. Use tools such as Slack, Skype and Zoom to be in constant communication with your team. Tatyana, our Senior Support Staff, also believes that anyone can easily overcome the miscommunication issue:
I myself have been working remotely for 6 years. Sometimes it’s difficult as you don’t have your colleagues near your side, and no one will give you a piece of advice. But in the age of technology, this problem can be solved. We have different messengers like Skype, Slack, Viber where you can communicate with each other.
Treat it like you are at the office
Working remotely from home? Woohoo! I’ll go ahead and wear my warm pajamas, jump in my cozy bed, have my coffee by my side and promise to be the most productive me! Stop there! This is definitely the worst approach toward working from home.
Working in your house clothes in an improper place like your bed can affect productivity in the long run. So try to get up at least an hour before work starts, take a shower and get dressed. You don’t have to be too formal. Doing things such as brushing your hair, putting on make-up (if that’s part of your work routine) and dressing in comfortable and proper clothes is enough to help your brain to prepare for work. This also helps establish some normalcy, which is particularly important while working remotely during COVID-19. Plus, you won’t be caught off guard if your supervisor makes a video call out of nowhere!
Gulhan – who is a developer – and two members of our support staff, Alexander and Aamir, think you should define a specific routine to stay organized while working from home:
Gulhan: I wake up early and always go to bed and wake up at the same time even on weekends. Because my brain clock knows my routine I never feel sleepy or tired. I also change my clothes before I start to work. Working at home doesn’t mean that we work with sleeping clothes. Nobody is asking us to suit up surely but working in sleeping clothes is not acceptable at all.
Alexander: When you work remotely the main thing is to be self-organized and divide your home routines and working time. Get up before the working shift starts, at least 1 hour earlier to do some morning exercises, and never work in your pajamas!
Aamir: One tip for working from home is to make sure that you get dressed. There’s something about getting dressed, putting clothes on, brushing your hair, because when you do this, it kind of puts you into work mode and it tells your brain, ‘okay I’m transitioning from the bed into work mode.’
Equip your home office efficiently
One of the biggest challenges of working remotely is finding the best spot to establish your workplace that isolates you from your personal life and family members. Dedicate a special time to set up your home office and do as much as you can to equip it with any tools and devices that will help you keep your productivity steady.
If you’re a messy-desk type of person and have already made peace with your clutter, then this piece of advice will be the easiest task for you to accomplish! Just grab your laptop, find a place for it on your desk and start creating wonders! But those who are used to working on a neat desk, you should take time to create your own workplace away from any distraction. The best thing to do would be to dedicate one room to work. But if you live in a small apartment, a comfortable corner that separates you from the rest of your home would also do the job. Get a comfortable chair that you can safely spend hours on and try to choose a place with enough natural lighting. Separating yourself from your personal life like this also helps your family members understand you are officially at “work” and to respect that by not distracting you with any conversation, chores, etc.
After all, it’s a matter of what works the best for you. You might want to change your workspace once in a while from your room to a sofa in the living room or even to the balcony. You will gradually figure out what and where allows you to focus on your work better. Just like what Aamir suggests:
You don’t have to be in the same spot every single day. Sometimes what I do is I actually go hang out in my sisters room and I actually get work done there, because when you work from home it’s nice but sometimes after a while you can easily get bored and it can drive you crazy.
Or you can separate a room for work – and only work – like what Gulhan did:
I have my own working space at home and it’s designed like an office. I have only 1 table and 1 very comfortable chair and that’s all. I did not put a second chair intentionally, because I did not want anyone else to come to my room to hangout or chat.
Or like Alexander, pay close attention to the furniture and devices you need:
The most important part is a working place: spacious table, comfortable chair, ergonomic keyboard and mouse, eye-friendly monitor (don’t forget to keep your eyes safe). Good and stable internet connection also plays an important role to be more productive.
Sometimes you need to personalize your home office as much as possible to stay focused. Patrick, our developer, believes so too:
Having my own desktop and laptop. I cannot simply work on other people’s devices. I mean you need something that you own personally. And I work on desktops more than laptops. I love a large screen, keyboard and mouse. I feel much more productive and comfortable.
And finally, as we mentioned earlier, choosing the best spot to work depends entirely on you and your mood. Nodari, a member of our support staff, for example, went against all odds and figured out he can be productive and creative in different locations –even on a hammock!
Sitting at the PC desk for several hours can be very boring, can affect your back and probably you will be tired very soon. This was the problem I was dealing with when I started working from home, then I started exploring some other options and this is what I came up with:
The main station – I call it my main working desk where I spend most of my time with my laptop. It’s kind of a universal place and usually I use it when I’m working on a serious task.
Sofa – I love it because I can take different poses on the sofa, I can lie on it, and I can even take half sitting half lying poses! 😀
Beach chair – not often but I have one and sometimes it’s very comfortable to lie on it. Maybe it’s reminding me of summer and sun? 🙂
Hammock – Believe it or not, I have a hammock in the room! It’s great for creativity!
Well, why not?! If it helps you stay focused and increases your productivity, then go for it! Even if it runs counter to all the tips mentioned above!
Take small breaks
While working at home, you obviously don’t have the option to get up and go around the office or meet in the cafeteria for a coffee and chat a bit with co-workers. You are more likely to spend all day behind the desk, which is dangerous for your health and bad for the quality of your work.
Take small breaks, prepare a tea or a coffee, take casual walks around home and get back to work again. But remember, your break times are for relaxing only! Try not to mix it with completing chores around the house!
If you have small children, go spend some time with them while they’re watching cartoons. Have a conversation with other family members. Put on your headphones and listen to your favorite music, do exercises, yoga or meditation for a couple of minutes, which will boost your mental and physical health. This is invaluable advice, particularly while we are working remotely during COVID-19 and ongoing social distancing.
Nearly all our colleagues pointed out the importance of breaks:
Tatyana: Don’t sit at the desk the whole working day! You’ll be tired and bored. Take a 5-min rest after each hour, make some cup of coffee or tea or even talk to your remote colleague via chat or video call.
Aamir: Make sure that you take frequent small breaks, these are really important. I usually follow the 20-20-20 rule. It goes like this “Every 20 minutes, take a 20-second break and focus your eyes on something 20 feet away.”
Alexander: Don’t forget to take breaks each 1-2 hours and shake your bones, as sitting and working affects your health in a bad way.
Patrick: Have flexible break times. I either take a break before or after a daily stand-up meeting. Sometimes I’m in the zone and I have to pause my break for later. And I drink coffee twice a day, one after I started my day and another one after my break.
One final word to leaders
And finally, a word to all leaders and managers working remotely during COVID-19! As a manager in the web industry, there is a high probability that you already developed remote working strategies for at least a couple of your employees – meaning that managing a remote working team won’t be that difficult for you. But managing a team during a pandemic can be challenging, and you might need to develop extra plans to lead your team through this tough time. Many plans you previously put in place might not be effective or appropriate during this time.
For example, following the Coronavirus outbreak, all kids are at home now, so be as flexible as you can with working hours to your teammates with children. It might be difficult for them, at least in the beginning, to balance their time between kids and work.
Keep track of your teammates and communicate with them more often. A casual chat or a video call to check on if they’re doing ok and all is well with work would be very motivating and will drag them out of unwanted isolation.
Send feedback to your team more than usual, celebrate their wins and get them engaged in group conversations on Slack or any other instant messaging app. It’ll make them feel as if they are part of the family.
Hold virtual happy hour meetings once a week and ask everyone to join with their favorite snacks and just talk about anything other than work – you could even get their family members to join. Trust me, nothing will boost their morale more than this during this challenging time.
Subscribe to Artbees Themes Blog for the best WordPress tips and insights.
We are in this together!
Working remotely during COVID-19 can pose challenges to our lives, particularly with the stress, rumors and negativity that come with the outbreak. However, if it’s done in the right way, it can even be the most productive period of your professional life. So accept the challenge and always remember that your lockdown has such a big effect on reducing the likelihood of transmission. So stay inside, stay connected, stay safe and don’t forget that we’re all in this together!
We also shared our experiences working from home in the video below. If you have any other tips and experiences regarding remote work, please comment below and help us spread the useful knowledge!
In the digital age we’re living in, the internet has changed our lives in several ways. Could you imagine a day without surfing the net for anything from finding information to social networking, from entertainment and shopping to money transactions? Probably not!
Education and learning got their share of this change as well. Universities and schools are now widely present on the world wide web – not to mention the rise of online courses! Most of us are tired of the headache of browsing university or educational websites! So if you’re running an educational facility or business, building an education website that is uncluttered, accurate, user-friendly and visually attractive at the same time is essential.
In this post, we’re going to share some useful tips to keep in mind while designing your site.
Education websites target two types of visitors: students and parents. Students visit the website to find out more about campus life, class, and after-school activities, among other things. Parents, on the other hand, visit the school’s website to learn more about tuition fees, the school board, and facilities in addition to the points above. In terms of design, the website should be visually appealing to create a good first impression. So it’s essential to properly use welcoming pictures and videos.
The best way to encourage visitors to check out what an institute has to offer is by displaying an interactive image of the students studying or campus life with enticing background colors in the hero section. But beware! Avoid stuck photos while building your education website! Be authentic and present what really goes on at your learning institute.
The Jupiter X Language School template took this approach. As seen below, a full-size image of a student on a bright neon green background and welcoming slogans perfectly captivates visitors at first glance.
One other approach would be to choose the color palette to match the concept of the school. For example, a website for a preschool would look much better with colorful text, button, and background, funny animated texts and images, among more. Have you ever seen a kindergarten website all in black or dark colors?! I doubt it!
An excellent example of this approach is the Jupiter X Preschool template, which has a light pinkish color scheme.
And finally, matching website colors with the school or university’s branding colors can also be good practice and will make the website design more authentic and original.
Not Minimal but the Right Amount of Simplicity and Information Accuracy
Building an education website that is minimal is almost impossible due to the amount of information and content embedded in it. But this rule applies to any type of design: keep it simple! Think about an uncluttered website that students and employees can easily navigate through and find the information they need with minimum effort.
The Jupiter X Course 2 template is made up of well-organized sections with categorized posts, with just enough information sitting on easy-to-comprehend boxes. Everything you need to know about online courses is clickable and on point with the adequate use of images and text. This results in an overall functional, user-friendly design. This online course template serves as a great example of how a design can be simple yet striking and appealing.
Make it Responsive
Education websites provide more than just information about admissions, dates, and departments. School and online education websites are the main way students and parents interact with the school. Students log in through portals to learn their grades, contact teachers, navigate through departments and get information about facilities. The same goes for parents who see the website as a gateway to the school. That means all the information should be available for them on the go and on all screen sizes.
Browsing through phones and tablets is much more popular than before – particularly among the younger crowd. So while building an education website, keep in mind that all your elements, navigation menus, visuals and the user-friendliness of the website are kept intact.
SEO and Speed Optimized
The goal is that your educational center attracts more users to whom you can offer services. To do this, the website needs to be easily found online, which is why you should ensure your website is SEO optimized. Through implementing proper keywords into your website content or hiring SEO experts to apply more professional SEO practices, search engines will better analyze your website and boost your rankings in their algorithms. As a result, you’ll easily be found by those who are looking for quality education.
Previously, we mentioned simplicity. Even more important than aesthetics, too much content and too many visuals slow down your website. Slow page load will scare users away. Remember that by holding onto the simplicity rule, you can keep users engaged by allowing them to quickly access the information they’re looking for.
Make Awards and Achievements Stand Out
You need to constantly remind your site visitors that the quality of your institution and its services stand out. Brag about the achievements and awards your institution accomplished throughout the years. Dedicate a section of your design to awards and impressive numbers, which is possible by using a counter element. Check out live examples in the Jupiter X University and Osogoa templates.
Dedicate Pages to Blog and Events
You value your site visitors – and in your case mostly parents – so much that you share every piece of news and update them about your institution! Isn’t that what any professional and caring school would do?! You got it! Creating an Events or Blog page while building an education website would be the best idea to keep your users engaged in your services.
Design an Events page on your website to announce upcoming, current or past events. By using the Jet Listing element, you can present your event content within a grid as you wish and link it to the events detail page for date, time and event descriptions, and you can build a separate blog page to share news about breaks, holidays, exams, school events or even articles related to education. A regularly updated blog with appealing and relevant content could greatly help you in attracting more visitors.
Consider Culture and Languages in Design
If you are a well-known, international institution, chances are that you attract students from different countries. At this point, having a multi-language website is critical. Non-English users may miss out on important events and information simply because they misunderstand something on your site. You wouldn’t want to miss out on a prospective student for this trivial reason! So consider the language factor when building an education website and make it available to more users around the world by adding languages that you assume the majority of your prospective students speak.
Jupiter X has features that allow you to have a multilingual and RTL compatible website in no time. Read more about them here.
Create a Listing Website if You Have Several Courses and Classes
If you run a big institution or an online education website with hundreds of courses and classes, a listing might be the best tool for you to organize the courses into sections. You can customize their layout and showcase your courses as you see fit. A listing grid layout is perfect for content-heavy websites that display items for different purposes but with equal hierarchy. The Jupiter X Language School, Course and Course 2 templates all have great examples of showcasing courses using a listing grid.
One other cool feature that you can add to your listing is the Smart Filter. In fact, it’s a must-have if you want your site to be user-friendly. Smart filters allow users to narrow down their choices by courses, authors, date, etc. and get to exactly what they’re looking for faster and more efficiently, and by using the Checkboxes widget, they can apply multiple items to their choices. The Jupiter X Course 2 template applied these filters to its courses page, and it works like a charm!
Check out the JetSmartFilters official page to learn more about this useful plugin.
And finally, an important part of any education website is the instructors’ and teachers’ introduction section. The listing grid has many functionalities as mentioned above. You can create your own post types, from services to projects and from products to team members and customize every detail about them.
Using the listing grid element enables you to create a profile for each instructor with information about their position, major, classes and more and in the single listing page for each profile to add a description about the instructor’s background, education and more.
Parents and students alike will absolutely love this level of transparency about teachers’ backgrounds, guaranteed! The Jupiter X Course 2 template has a fantastic example of this instructor’s list in action.
Regardless of the size of your school or the type of knowledge you offer and disseminate, a well-designed website can undeniably help your school grow. It’s time to accept the importance of an online presence and get to work!
Let us know about your experience building an education website in the comments. Which one of these tips inspired you and what was the feedback from your users? And finally, please help us in creating a more comprehensive list by adding the tips we might have missed.
Subscribe to Artbees Themes Blog for the best WordPress tips and insights.
Ok, the big bald rich man is waiting for me to deliver the website for his chain of hotels in one week – and there’s not much time left. In the first part of this series, we dove into creating a dynamic room listing with room attributes and a nice template that will include those custom attributes, both of which will be filled out by the receptionist. Picking up from where we left off, we’ll create a listing for an archive page in this part as part of building a dynamic hotel website.
As you’ll recall, we created a custom post type for our room called Rooms and then created a listing for it. A listing is an embodiment of the meta fields in a custom post type with a particular design. In the first part, we built the custom post for our rooms and a listing and beautiful design for a single page. The only thing is that the single page is not discoverable by visitors if it’s not inside a post feed. Someone should play with filters on your listing page and find the item they want, click on it and enter the single page for that item.
In order to understand and follow the instructions in this article, make sure to read the first part.
Before proceeding with the tutorial on how to build a dynamic hotel website, don’t forget to check if the following plugins are activated and have the minimum versions below:
- JetEngine plugin v2.1.4
- Jet Elements v2.1.2
- Elementor v2.7.5
- Raven v1.8
- JetSmartFilters v1.5
As you noticed, in addition to what we used in the first part, we need the JetSmartFilters plugin in this part to create the filters we require for our archive listing.
In this tutorial, we’ll cover the following:
- Creating a listing template for our custom post type
- Creating filters for our listing
- Creating a general listing template
1- Create a listing template for our custom post type
So first things first when it comes to building a dynamic hotel website. Just like the listing we built for the single page of our custom post type, we need to create a listing for the listing archive.
- In the WordPress dashboard, go to:
- JetEngine > Listings > Add New
- In the upcoming dialogue, set Listing Source to Posts, Post Type to Rooms and give it a Name such as “rooms-archive” and proceed. You’ll be taken to the Elementor environment to create a design template for the new listing.
- Clicking on the button will create a new listing for your custom post type. In the next step, you’ll be taken to the Elementor environment so you can create a design template for the Rooms archive page.
- Add a box section with 374px width and add 15px bottom padding (0,0,15,0).
- Right-click on the column. From Styles set the background color as white (#fff) and from Advanced tab set the bottom padding for the column as 25px (0,0,25,0)
- Add an Image element inside the section (JX image element), set the image source as Dynamic/Custom Image and give it a custom size of 374 x 220 px
- Set a dynamic Image source and choose Field as Post Thumbnail.
- Add a Dynamic Field setting the Source to Post and the Object Field to Title.
- Centralize it and format it as you like. I’ll go with 20px Muli Bold #1d3239.
- Give some space to its top and bottom using 15, 0, 15, 0 padding from the Advanced tab
- Add a Dynamic Field, set the Source to Meta Data and the Meta Field to Beds.
- Centralize it and format it as you like. I’ll go with 16px Muli #636f74.
- Add a Dynamic Field, set the Source to Meta Data and the Meta Field to Price.
- In order to automatically add the $ sign before the price, in the Dynamic Field settings add $%s to the Field Format.
- Style it as you want. I’ll put 20px Muli Bold #006b93.
- Add a 20px Bottom Padding to the price.
- Add a Dynamic Link element. Set the Source as Permalink. Label it as Book Now and centralize it.
- Format it as 14px Muli #fff and weight 600.
- In Normal state, set a #ff5374 colored background for it with #fff as text color. In Hover state, reverse color by giving #ff5374 as text color and #fff to background color.
- You should define a solid 1px border colored #ff5374, 3px border-radius in all corners and 7, 15,7 ,15 paddings.
In the WordPress dashboard, go to:
- Templates > Saved templates > Add New
- Select Archive as template type and give it a name (Room Archive)
- Add a Listing Grid element to your page. Set the rooms-archive as Listing Source and activate Use as Archive Template option.
- In the WordPress dashboard, go to Jupiter X > Customize > Post Types > Rooms > Rooms Archive and select the page you just saved and then publish the changes.
Ok, what’s next? We just designed how a room custom post type will appear in the listing. Now we need to put this inside a general template for the listing – but before that, let’s create the filters we need for the listing sidebar.
2- Create filters for our listing
Let’s say we need a price range filter and some checkbox filters for our room facilities. With JetSmartFilters v1.5 installed:
- In the WordPress dashboard, go to SmartFilters > Add New
- We’ll give our filter a label and active filter label
- Set the filter type as Range
- Set Value Prefix as $
- Set the Minimum and Maximum Value as you wish (the price range of your rooms)
- Set a Step number. This is the amount added to the selected range everytime the visitor moves the indicator one step. For example, if set to 5, everytime you move the indicator to the right or left, an amount of 5 will be added or deducted to the range.
- And finally give the filter a Query Variable. This query variable will help us connect the filter to its results in the other hand of the listing page.
Using the same process, we should create checkbox filters for our room facilities. The only part that will be different is:
- Set the Filter Type as checkbox list and Data Source as manual input.
- Activate the Is Checkbox Meta Field (Jet Engine) to filter data from checkbox meta fields type, created with JetEngine plugin.
- In the Options List Box, add checkbox options for the filter. Each option should have a value and label.
Important: The value for a checkbox option should match with the checkbox value of the custom meta field it relates to. The query variable value should match with the Name/ID of the custom meta field it relates to.
3- Create a general listing template
With the filters created and the template designed for the individual listing, we can design a general template for the listing on our website where users can use the filters in the sidebar to define the room criteria they want and see the results on the other side.
- In the WordPress dashboard, go to Pages > Add New
- From the lower-left corner, click on Elementor settings (gear) icon and select Elementor Full Width as Page Layout.
- Give the main section should have 55, 0, 90, 0 px paddings from the Advanced tab.
- We need a 30%-70% column pair. The 30% column in the right will contain the filters and the 70% column on the left will carry the filter results.
- Apply 0px Widget Space to the left column.
- From the Style tab, add a white background color to the column.
- From the Border section, add a 6px radius to all corners of the column.
- From the Advanced tab, add margins 5, 0, 580, 25 px and paddings 30, 32, 30, 32 px
- For the right column, from the Advanced tab, add 0, 0, 0, 25px paddings to it.
- Add a JX Heading element to the left column and edit it to Filter Listing.
- Format the heading as you like. We’ll input Muli Bold 24px colored with #006b93.
- From the Advanced tab, give it a 35px bottom-padding to it.
- Add another Heading element and edit it for the price and format as you like. We’ll go with Muli 20 Bold colored #1D3239.
- Give the second heading a 25px bottom-padding
- Add a Range Filter element to the left column.
- Select Price Range as Filter and set JetEngine for This Filter For
- Apply On should be set on Click on apply button.
- Query ID should be set to Rooms.
- On the Styling tab, set the color to #EBF7F7 and Border Radius to 2 in all corners.
- Set the background color as Range Point. We’ll go with #006B93 and a Border Radius of 3px to all corners.
- In the Value section, format the text for value. We’ll go ahead and put Muli 16 #1D3239 with the top top-padding of 25px.
- From the Advanced tab, give the range filter a 20px bottom-padding.
- What’s left in this section of filters is a Filter Results button. Drag an Apply Button element below the price indicator.
- Set its query ID as Rooms and style it as you like.
- In the Style tab, for the Normal state button, we’ll go with a Mul 14px weight 600 with #fff as the color and #006b93 as the background color, a solid border of 1px with #006b93 color, a border-radius of 3px and a padding of 11, 25, 11, 25 px. For its Hover state, we’ll swap the color and background colors.
- Finally, in the Advanced tab, give the button a 30px bottom-padding.
This should be what you have built so far:
Ok, let’s move onto the next section of filter options: Facilities.
- Drag the Checkbox Filters element below the Filter button.
- Select the filters as needed.
- This filter for should be set as JetEngine. Apply Type is Ajax. Apply On is Click on Apply Button.
- Query ID should be set to hotels.
- In the Style tab, set 10 for both Space Between and Children Offset.
- Set the Checkbox size to 20px. Set the background color to any color such as #EBF7F7. Set #006B93 for its Hover background color. Give it a Solid border with 3px border-radius for all corners.
- Set a #EBF7F7 background color for the Checkbox icon and set its size to 10.
- Set #636F74 as background color for the Checkbox label.
Now let’s add an apply button to the checkboxes as well. Just duplicate the button we created above for price range and drag it down below the checkboxes.
Ok, what we’re going to do for the right column is to simply put a Listing Grid element.
- Set Listing to Rooms-archive and the Column Number to 2.
- In the Advanced tab, set the CSS ID to rooms. This will connect our listing grid to the filters on the left side.
And that’s it. We just created the listing page that holds the listing filters and the results. Give it a try and see how the filters set on the left side will result in the items on the right hand.
In the following episodes of this Crash Course, we’ll cover how to add a price calculator and booking module to the lower right corner of this template – as well as everything else remaining before we can deliver the hotel website to the Wolf of Wall Street!
Do make sure to watch the tutorial video alongside this post to better understand the process and ask any questions below in the comment section. Keep an eye out for the upcoming episode on how to build a dynamic hotel website.
Subscribe to Artbees Themes Blog for the best WordPress tips and insights.
Let’s say you’re running a pretty popular restaurant with delicious food and special recipes in town and you start thinking about moving things online to showcase your mouthwatering food, entice more hungry customers and even open up new branches all over the city. Smart move! But building a website for your restaurant is no easy feat unless you know the key elements for your restaurant website to make it both attractive and user-friendly at the same time.
In this article, by looking at 5 Jupiter X restaurant templates, we’re going to take you through the key elements that will help you build a mouthwatering restaurant website that’ll help you build a strong web presence and make your site visitors drool!
Go visual! You’ll hear this from just about every graphic designer you hire to design your website. And, yes, get ready to read about it once in a while in this post too! Images have a magical effect on promoting your restaurant. You don’t open a restaurant website to read the About page or to imagine what the food looks like from the menu, right?! A bunch of high quality and tempting images of the food hits visitors in the stomach every time! So folks, let’s admit that they’re essential elements for your restaurant website, and Images Layout is probably the best element to help you out showcasing them.
Images Layout lets you showcase as many images you want in up to 6 columns, choose between 4 different layout types (Masonry, Grid, Justify and List), add titles and description as well as different background overlay and lure visitors with appetizing pictures of your gourmet dishes!
You can find a beautiful live example of this element in the Jupiter X Danae template.
If you have a blog you are regularly updating to offer tasty recipes, writing about healthy diet trends or simply sharing the latest news with your restaurant, you might want to organize and show them on different pages of your website. And this is all possible with the Posts element. There are many features to play with and customize to your taste, skin type, layout and categories to name a few. And as mentioned before, you can set the source to be a blog or portfolio.
Or you can simply drag and drop the Posts element and start building it from scratch without linking it to the blog or portfolio. If you need to read more about its features and how to work with it, please head over here.
Here’s a nice example of the Posts element in action from the Jupiter X Restaurant template:
Add as many delicious food pictures as you want and catch the attention of visitors to your stunning food art, but at one point you’ll need to turn those visitors into paying customers and increase the restaurant’s footfall. A functional and easy to use reservation form will do the job! Now that visitors are even more hungry by browsing through tempting food pictures, they should be directed toward booking a table.
Forms can be used either for reservations or as a means of online ordering if you happen to have that option. You can create a simple form in seconds with the Form Builder element. Just drag and drop the Form element to your page, edit the placeholders, add an action email to collect the information and that’s it! You now can receive orders and bookings!
Avoid too many fields and ask questions with short answers as much as possible in order to make the booking process easy and efficient. The form used in the Jupiter X Restaurant template serves as a good example.
A slideshow is always a great way to feature menu specials and give customers a sense of what’s in store for them. Imagine opening the homepage to a full page header slideshow of your delightful hamburgers! Just like this delectable slide reel in the Jupiter X Burger Restaurant template:
Adding slideshows is pretty easy in Jupiter X. All the steps you need to go through are explained in detail in this video. After watching the video in full, creating a stunning slideshow will only take seconds.
How many times have you booked a hotel room over another only because of a couple more positive reviews and ratings? How many times have you chosen a product online just by checking its stars and positive comments? Nearly always, right? The same thing goes with restaurants too! Testimonials are like social proof that will help potential customers choose you.
Using the Testimonials element, you can add an uncluttered and beautiful set of customer testimonials, customize its text, style and positioning, play with its animation settings and let the uniqueness of your restaurant stand out through the words of your satisfied customers. The Jupiter X Burger Restaurant template features a nice example of this element in action:
Restaurants and online businesses that are offering a product should have a functional price handling system for customers’ convenience. Using the Price List element, you can create your special menu and feature your dishes in an organized way. You can visually customize every detail of the list like the heading, image, price and even make items clickable by adding links.
The Jupiter X Italian Restaurant template features a beautiful sample of the Price List for its menu:
We’ve emphasized the importance of images for a restaurant website enough, so no need to repeat ourselves! But there is always room for more fun! Using the practical Animated Box element, you can put your images inside a box with different animation effects; write some important content on the backside of the box; customize the layout, color, style; add icons and links and choose among many cute animation effects. That’s fun, right? Mark our words – adding a bit of taste to your image-dominant page guarantees customer satisfaction! Here’s a sample of the Animated Box element from the Jupiter X Restaurant template:
Another dynamic element for your restaurant website that will help you boost your restaurant’s reputation, increase the trust of the existing customers and create potential new visitors, is the Counter element. Just drag and drop the element to your page and brag about the number of satisfied customers, branches around the city, dishes served, any health certifications awarded, as well as any other interesting numbers while playing with its eye-catching styles and animations. Your achievements are definitely worth a mention!
Here is an example of the Counter in action from the Jupiter X Europa template:
If you own a big restaurant that offers all kinds of food, from seafood to Mexican and from appetizers to desserts or from alcoholic to soft drinks, you might want to organize them into tabs to avoid your site visitors a headache! The Tabs element will help you make it happen in the neatest way possible. You can put each type of food in one tab, set a vertical or horizontal look on it, add icons next to titles, use images and customize every detail about tabs items such as background color, title, description and many more as you please.
Check out how it looks live in the Jupiter X Steakhouse template:
Wrapping up elements for your restaurant website
In this post, we highlighted some essential elements for a stunning restaurant website in the hopes that it’ll encourage you to get started with your unique and tasty restaurant website. So now that you have the ingredients you shouldn’t be waiting any longer, hungry customers are waiting outside!
Let us know in the comments about your experience creating your restaurant website or if you have already created yours, drop us the website URL for as inspiration for your fellow restaurant owners.
Subscribe to Artbees Themes Blog for the best WordPress tips and insights.
A hotel website consists of different parts such as the homepage, about and contact pages – but the most important part of a hotel website is filtering, room listing, and booking. In this November Crash Course, I’ll show you how to create a dynamic room listing with the custom post type and custom attributes. In the upcoming parts of this course, I’ll show you how to add booking compatibility as well as other filtering and listing features required to build a dynamic hotel website.
A hotel website is, in fact, a room listing website where each room type has a profile for itself and all the features and attributes for that page are included in that profile. Also, we need it to work like a template where a hotel receptionist or a Guest Relations Officer can easily fill in those attributes and the room profile is created.
When creating a regular blog post in WordPress, we’ll fill in some related information such as the title, category, tags, excerpt, author, featured image and body of the blog post so we need a custom post where custom attributes about the room is definable.
In technical terms, we should create a custom post type for hotel rooms with custom meta attributes about the room’s title, description, price, rating, amenities and so forth. We call this custom post type the “Hotel Room.”
Here is what we need to create a “Hotel Room” in action:
- Define a custom post type with custom meta fields (as room attributes)
- Create a listing for our custom post type single page (room profile page) and a template for it
- Create a design template for your post type single page
It’s important to note that a custom post type has two sides:
- Backend where the custom meta fields (room custom attributes) is filled
- Frontend which is how the custom post type and its attributes appear visually. We call this a “listing”. A listing is a visual presentation of a custom post type.
1- Define a custom post type with custom meta fields:
After installing Jupiter X, you need to install the JetEngine plugin v2.1.4. JetEngine is a tool used to create custom post types in Jupiter X. Additionally the following plugins should be installed and activated:
- Jet Elements v2.1.2
- Elementor v2.7.5
- Raven v1.8
In the WordPress dashboard sidebar, go to:
- Plugin > Find JetEngine and click on Activate.
From the dashboard sidebar, go to:
- JetEngine > Post Types > Add New
- In the General Information section, give your custom post type a name and slug like Rooms
- In the advanced settings section, define an icon for your post type in Menu Icon and for support, set the following:
- The most important section here is Meta Fields where we define the room’s custom attributes so the receptionist can fill them in accordingly. We can set various options about meta fields but those that we need most in this tutorial is:
- Field Label (name)
- Field Type defines the type of field which can be text (for attributes such as the city), text area (for large text amount like description), gallery (for attributes that require the receptionist to upload images), checkbox (for amenities that differ from room to room) and more.
- Field Width defines the width you want the meta field to occupy in the backend. You can change this as you like to make it simple for the receptionist. In this tutorial, we’ll set it as 25% for all meta fields.
Let’s say our room has the following custom attributes. We need to create a custom field for each of them. You can use the suggested values you see on the table.
|Meta Field||Field Type|
Note that for select and checkbox field types, we should define the options that the receptionist can choose from.
Now that we have defined what custom attributes we want available for our receptionist, let’s find it in the dashboard sidebar and create an actual post from our Rooms post type. The new post page should look something like this:
As you can see, all the room custom attributes we wanted are located in the meta fields section lower on the page. Let’s imagine that our receptionist filled out these fields but could he or she just go ahead and publish the page? No! We should first make this data presentable or – in technical terms – assign it to a listing.
2- Create a listing for our custom post type single page
In the WordPress dashboard, go to:
- JetEngine > Listings > Add New
- Fill the upcoming dialogue as follows and proceed.
- Clicking on the button will create a new listing for your custom post type. In the next step, you’ll be taken to the Elementor environment so you can create a design template for your room profile page or, in technical form, a template for the single page of your new Rooms custom post type.
3- Create a design template for your post type single page
Just before we start, please note the resulting design of this tutorial so far should be similar to this template. This template is part of the Jupiter X Hotel Listing and is available for Jupiter X users to download from its control panel.
Alright, now we are going to design the template how we want and arrange the custom attributes based on their importance to the receptionist accordingly.
First, add a bit of top margin to your page to separate the page content from the header. Right-click on the main container section:
- Edit Section > Advanced > Set Top Margin to 40px
Intro & Image Slider
For the title of our room, we’ll use a Dynamic Field:
- Drag the Dynamic Field to your page from the element library.
- Style your title as you like. We used Muli Bold 36px.
- Set Source as Post/Term/User Data and Object Field as Title. This is where we specified the value for this field should be filled by the name of the post created by the receptionist.
Next up is the room image gallery:
- We need to first activate the slider and grid capabilities for dynamic fields in JetEngine. Save your work and go to the backend. Click on JetEngine in the sidebar and check the following two options:
- Go back to your single page template and drag the Dynamic Field to your page from your element library.
- Set Source at Meta Data
- Set Meta Fields as Room Images. We just set our dynamic element to load the images uploaded by the receptionist when creating the post in the Room Images section.
- Turn on the Filter Field Output and set the callback as Image Gallery Slider. Also, turn on the Use Lightbox option.
Description and Ratings
Now we need to define the location for the other info about the room including its description and specifications.
- Create an Inner Section inside your main section, set its Top Padding as 60px and divide it by three columns with these ratios: 50%, 15%, 35%
- Unlike the main title, we don’t need a dynamic title for “About This Room.” Simply use a Heading element and style it however you want.
- For the room description, we’ll use a Dynamic Field and set its Source as Meta Data and the Meta Field as About Hotel.
Right next to the description column is the room rating. For the rating, we’ll need a circle including the rating inside it. So here’s how we do it:
- For the middle column (15% width), set a 10px left margin and 32 px Top Padding.
- Drag a Button element inside the middle column.
- In the content tab, set its Text as Dynamic > Custom Field > Rating. This will load the value added by the receptionist in the rating section in the backend.
But that’s not all. We need to make the button container circular now.
In the Style tab, apply the following settings:
Now Let’s add the skill meters to right column:
- For the right column (35%), set a 35px Top Padding and 10 px Left Padding.
- For the dynamic skill meters, we’ll actually add 3 Progress Bar elements (from the JetElements library), and we’ll set the percentages to:
- Dynamic > Custom Field > Cleaning rate
- Dynamic > Custom Field > Restaurant
- Dynamic > Custom Field > Pricing
The respective value for these parameters will be dynamically replaced by what the receptionist has entered in the backend.
You can style the meters as you wish. Below is the recommended styling:
What’s left of this section of the template is putting the circular and bar rating in a box. For this, we’ll add a three-side border without the right side to the left box (15%) and a three-side border without the left side to the right box (35%):
Amenities, Location & Booking
Ok, what’s left is the last section of the template, which includes room amenities, hotel location, and the pricing calculator. We’ll cover the pricing calculator in the following episodes together with the booking feature. If you remember in the first step, we created 7 meta fields for our Rooms post type that will appear as checkboxes in the post single backend. Those that are checked by the receptionist will appear in the front end.
So what we need to do is to put all of the amenities as Dynamic Fields in the page but set to display only to those that have a value (which means checked in the backend by the receptionist). So let’s do this.
- Drag a Dynamic Field to your page. Set the Source to Meta Field and the Meta Field to one of your amenities like WiFi
- Define an icon for your amenity
- Enable the Hide if the value is empty (with this, the amenity will be displayed only if checked in the backend by the receptionist)
- Activate the Filter field output and set the callback to Checkbox field values
- Complete some further styling to your amenity item
Repeat the same process for the other 7 amenities that we have. You can divide your column by 4 columns to better organize the list of amenities. Ok so far this is what we have:
So we have one more item to add: The location map.
- Drag a Google Map element to your page and set its Location to fetch from the dynamic custom field address:
Ok, we are done with creating the template. Now we need to tell Jupiter X that the template we created should be the template we want to use as the custom single template for the Rooms post type.
- Save the content of the template by right-clicking on the bottom of the page and choosing Copy all content or using Elementor Save As Template option in the lower-left corner.
- Publish/Save the template
- In WordPress dashboard try Dashboard > Templates > Add new > Single. Give your template a title such as Room Single Template.
- In the upcoming Elementor environment, either paste the content you copied in the last step or import the template you saved.
- Publish/Save the template
- Open a new browser tab and go to Dashboard > Jupiter X > Control Panel > Settings > lower on the page, check the Listing Items and Rooms (the name of your newly created custom post type). This will allow us to use Customizer for these two items.
- Then go to Dashboard > Jupiter X > Customize
- In Customizer > Post Type > Rooms > Room Single
- Click on Custom and select the Room Single Template as the custom template for the single page:
- Publish the changes.
And that’s it. We just built our custom post type Rooms a nice single page design template with dynamic components that will be fetched from what our receptionist will enter in the backend.
In the following episodes of this Crash Course, we’ll cover how to add a price calculator and booking module to the lower right corner of this template as well as other listings derived from our Rooms post type, such as the main rooms listing and archive listing.
Do make sure to watch the tutorial video along this post to better understand the process and ask any questions below in the comment section. And keep an eye out for the upcoming episodes on how to build a dynamic hotel website for our Wolf of Wall Street!
Subscribe to Artbees Themes Blog for the best WordPress tips and insights.
Are you right in the middle of planning for your big day? Preparing a wedding website has become a growing trend among newlyweds – but among all other tasks that need to get done, typically very few couples find the time and energy to build their website! Well, we all know how stressful ticking things off the wedding to-do list can be – however, creating a wedding website doesn’t have to be! This is particularly true when you know which elements for a wedding website to use and where. In fact, this will be the easiest of all wedding planning tasks! And we’ll show you just how you can easily get it done.
In this article, we’re going to walk you through the key elements that should be used in a wedding template while having a look at three Jupiter X wedding templates. If you’re planning a wedding website (or maybe a wedding!) this will specifically help you kickstart your website. We will try to visualize what an informative, classy and fun wedding website should look like, as well as showcase a list of important elements for a wedding website that best matches your big day’s theme and style.
Websites that are built for special occasions such as weddings, Valentine’s Day, engagement parties, graduation ceremonies or even honeymoons are like online albums in a way. So the focus should be on images and the elements that organize images. Jupiter X’s Sarpedon template can be a good example of such a concept. Using elements like the Image Carousel and the basic gallery portrays an image-driven template. Let’s go through one-by-one some of the useful elements that’ll help you build a clean, well-designed website (or better to say online album) for your big day:
Your website loads to a beautiful set of you and your partner’s photos, and the first thing visitors see on your website is a collection of your most precious photos together – isn’t that fancy?! We think so too! You can do this with the Image Carousel element. Here’s how it looks in the Sarpedon template:
You can customize the Image Carousel down to every single detail: from image size, the number of slides to show on one click, animation style, and speed to hover effects.
You can learn more about the Image Carousel element by looking at more examples here.
You most probably have an Instagram history with your partner that you carefully created to share with your followers. You can actually showcase your Instagram feed on your website by using the Instagram element. Choose between grid, masonry and list layouts to make pictures appear as you wish. You can also choose which photos to show, set the number of columns and customize the overall look of the element. To read more about how to work with this element in detail, please visit this page.
A typical wedding website template should allow you the option to showcase your love-filled pictures through Images Layout in the catchiest way, as well as collect information and track down your attendees through a well-designed RSVP section equipped with a functional Form element. The Leda template is Jupiter X’s other one-page wedding template that comes in handy with these two elements.
Let’s take a look at these elements that – together with the other carefully planned details – will make your guests congratulate you twice on your big day!
As mentioned earlier, you can showcase your pictures in an organized way with the Images Layout element. Just like with any other image-related element, you can customize its look, hover effects, number of images and columns to show, add an icon or a title on the image and many more!
Images Layout has four different layout styles you can choose from: Masonry, Grid, Justify and List. Their width and height sizes are what differentiates them from each other. For this template, we choose the Grid layout to ensure that all items have the same width and height. To learn more about the other layouts, you can head over to our knowledge base and read more here.
Wouldn’t it be cool and creative to gather all your RSVP information in your email instead of just posting your guests one-by-one and receiving reply notes in your physical mail? Of course, the traditional way is fun, but a simple online RSVP form can save you a lot of time, money and energy and ease the wedding planning tension a bit!
You can create a simple form in seconds with the Form Builder element. Just drag and drop the Form element to your page, edit the field placeholders and sizes and add the email you want to gather information in the “Add Action” section of the setting, and tada! You’ve got yourself a nice and clean RSVP form!
You can even customize the feedback message to pop up after a message is sent. It can be a catchy informal “thank you” message from you and your spouse or a more formal one appreciating their reply.
Learn more about the Form Builder element and how to create one here.
And last but not least let’s dig into three more elements for a wedding website that should not be forgotten! We’ll look for the examples in one of Jupiter X’s most recent wedding templates, the Wedding Invitation.
Why not add some hype around such an important day of your life?! Add a countdown timer to your website and make your guests wait excitedly and impatiently for the big day to come. You can play with this element all you want, change its styling, typography and the overall appearance, choose between different timer types based on your taste and even set what happens after the timer is expired. You can find detailed instructions on how to use the Countdown element here.
You can showcase the main activities happening on your wedding day using the Timeline element. Add as many items as you want and stylize each by adding icons, titles, and texts and set the timing for each so that your guests know what kind of fun events they should be expecting at your wedding.
Here you can find examples of Timeline in vertical and horizontal style.
Yes, you heard correctly! You can actually use the Team Member element to introduce your very precious bridesmaids and groomsmen! Create a profile for each of them and customize the look of it by adding names, photos, position, and even their social media accounts! Cute surprise, eh?!
Wrapping it Up
Everything is set for a fun and beautiful wedding website, you just need to plan on which elements suit your taste and get it done – it’s as easy as a piece of wedding cake!
Let us know about your experience in the comments. Have you built a wedding website for your special day? How did the invitees and attendees like the idea? Or you just made up your mind creating one just now? We would love to hear your ideas!
Subscribe to Artbees Themes Blog for the best WordPress tips and insights.
While social media has dramatically changed the world of photography, it has also provided platforms for ordinary people to reveal their inner photographers. And the majority of us embraced it for good as these social media sites have become increasingly popular by the day. But if you’re a professional photographer – or have a real passion and talent for it – it might be time to create an ideal photography website as a way to store and showcase your valuable photos.
Wouldn’t you prefer your beautiful snaps be displayed in a professionally made website to impress the crowd and potential clients rather than scattered around Instagram or Flickr? You owe that to your skills and talent!
Too confused to know where to start? We hear you! Starting off somewhere is always a hassle, but worry not! Jupiter X has got you covered! In this post, we’ll walk you through 5 photography website templates, explaining each one’s unique anatomy as well as features that will help you choose the best option that best suits your expectations and goals. It will also help you get your hands on your personal or corporate photography website in a snap!
Multipage with right sidebar navigation and sectioned homepage
Who should use it?
One of our popular photography templates, Proserpina, is perfect for both freelancers and studios who want an uncluttered, yet descriptive portfolio website.
The homepage consists of a full-height hero section that you can leverage to shout your name as your personal/professional brand with an intriguing background image, descriptive sections to write about yourself, your business and your projects, portfolio and one-half large sections with video background that adds a cinematic feel to your website if you want to showcase your video editing and shooting abilities. The burger menu with the right sidebar navigation effect helps place focus on the content and images more by keeping menu items out of sight.
Proserpina has 2 inner pages: Portfolios and Contact. You can store your photo albums and collections in a clean portfolio page. Your concept and vision matter for every single photo. So what’s even better than putting them in different categories for faster and smoother navigation through your photos? Proserpina comes with Posts Element that you can categorize according to your point of view.
Forms, addresses, and social media channels make you reachable to your customers and give them a way to stay in touch with you. You have it all in the contact page, which is ready for customization.
With no more than 3 pages (Home, Portfolio, Contact), this template has everything your audience needs to know about you, your style and your work.
Locaste: Dark Minimal
Multipage page with a 4-column grid
Want to impress your audience with nothing but your photos at first sight? Well, search no more! Locaste template does just that!
Who should use it?
This minimal template can suit both freelancers and studio owners of the same taste.
The homepage loads to a full gallery of photos using the images layout and is organized in 4 columns with no other text or elements to distract your visitors. And the tiny burger menu adds up to it! So the no-intro homepage style is also surprisingly compelling to website visitors.
Locaste has 4 inner pages: About, Gallery, Blog and Contact. They all follow the overall minimal style of the template but contain multiple layout options to choose from for Gallery and Blog pages.
You can choose between various gallery and blog layouts, from classic to masonry, each with a categories option and different column structure to better organize your albums and posts.
The About page includes 4 main sections, a hero section with a background image, the about section to write about the artist or the business, a section to add teammates and the last section organized in 2 columns of an image and text, which can be dedicated to anything related to the photos, studio or the artist.
And finally, the contact page consists of a column for the address, social media accounts and a simple form following with a Google Map.
All in all, if you need a big album and a blog to write about the spirit behind your photos, this clutter-free template is the perfect choice. Just take your camera and let Locaste guide your fans through the magical world of your shots!
Single page with no navigation
You’re a beginner, you know you’ve got the eye and want to share it with the world, but in no way want to mess with the technical hassles of creating a complicated website! We hear you and offer you the ultra-minimal one-page Cynosura template.
Who should use it?
This single page template is perfect for freelance photographers who just need to set up a virtual album and a place to communicate with those who find their photography interesting.
The homepage loads to a short intro consisting of a full-height background image and some minimal text without a navigation bar. There are no inner pages, and the portfolio is presented on the same page. So all you need to do is to add a photo album element, upload your photos, add your social media accounts and contact information in a simple footer, and trust us, that’s it! You have your simple cool portfolio website.
Multi-page with 2-column Grid
Who should use it?
This multi-page template is ideal for those freelancers who would like to add a bit more detail to their online portfolio.
The homepage starts with a short intro and portfolio organized in two half large columns that each can be served as an album containing more information and photos inside, as well as a minimal footer.
Arbius has three more inner pages: About, Personal and Contact.
The about page is simply made up of some image and text elements and defines what can be called the best “about” page in its most concise and well-set way.
The personal page can be called your album storage. You can organize your photos into different albums here using the photo album element.
And, finally, the very simple contact page contains your personal studio address, phone number, and email. Isn’t that what a typical contact page should offer?
Multi-Page with classic navigation and sectioned homepage
Who should use it?
Jovial is a classic multi-page template, perfect for photography studios that consider their website as the main platform to present their services, explain the techniques they use and to showcase their work samples.
The section-based homepage starts off with an eye-catching intro, a full-height hero image, and scrolls down to more sections, each containing details and explanations about the services offered. The proper combination of image and text while avoiding an uncluttered overall look is noticeable.
Like the majority of the classic website templates, Jovial also has many inner pages: About Us, Our Team, Projects and Contact Us.
The about page has an intro with bold headings on top and a cover image below. The inner sections in between can be served as side notes about your business. The fixed background with text element walking on it adds a sophisticated look to the page.
The team page has the same bold heading and cover image style and uses sections to introduce the team members. A whole descriptive section that speaks to the members’ background and experiences sounds great! Some of the sample works can also be added as posts to the page. It will for sure invite the visitors to check on the projects page!
The projects page is all about its name! Following the same intro style, it’s your treasure chest, storing your work samples and past projects.
And finally, the contact page which will serve as a bridge between you and clients with a Google map and contact information down the page.
We showcased 5 models that represent different approaches in design and content for an ideal photography website and can be chosen as a foundation or inspiration for your photography website based on your brand’s characteristics and preferences.
Have you already started setting up your website? Do you plan to strengthen your online presence and let the world see through your eyes? Let us know in the comments!
Subscribe to Artbees Themes Blog for the best WordPress tips and insights.
Artbees Hosted Istanbul Meetup on WordPress Translation Day 4
24 hours, 81 local events, 612 volunteers and contributors. Yes, this is the power of WordPress! On Translation Day 4 on May 11, the WordPress family came together in 35 countries around the world to celebrate the MakeWordPress polyglots team. Hundreds of volunteers dedicated their time and skills to translate all things WordPress and to make this online platform available to more people around the globe.
We at Artbees wanted to be part of this amazing polyglot crowd and event, so we decided to hold a meetup in Istanbul. It was the best chance for us to both meet with fellow WordPress lovers in Istanbul and to contribute what we could to help WordPress grow into as many languages as possible.
It took us such as long time to recover from all the excitement of Translation Day 4 in that we’re finally getting around to publishing this post! Everything went as planned, and on a cloudy Saturday morning, Niloufar and Maziar gathered at a cozy diner in Istanbul to help make the event a success.
After setting up the equipment, preparing snacks and welcoming two other attendees, we lined up to join the live session with Afsana Multani, WordPress enthusiast, speaker and contributor, and to speak with the WordPress community as first-time polyglots contributors.
Other activities as part of WordPress Translation Day 4 included live online training, localization and internalization sessions as well as local and remote events. During the course of the day, polyglot contributors collaborated on a number of common goals such as increasing the number of PTEs and mentors, translating the 200 most popular themes and plugins and improving Rosetta’s Translate page.
We hit the ground running, and our local Istanbul meetup contributed translations to WordPress.org and WordPress Rosetta projects! Being among avid participants from 35 countries with the common goal of making WordPress more accessible in different languages felt beyond amazing!
What is WordPress Translation Day
WordPress Translation Day – which takes place every year – is a 24-hour worldwide marathon that is committed to translating everything in the WordPress sphere, including core, themes, plugins, documentation and marketing assets into as many different languages as possible.
The day is entirely driven by contributors, who volunteer their competence, time, labor, and equipment to translate WordPress into their languages. Everyone from WordPress professionals to inexperienced users is invited to join in the event.
Previous WordPress Translation days had over 700 people globally participate both online and in person in local meetups to translate WordPress – but the event has grown in size throughout the years. Translation Day 4 had more local meet-ups than previous translation days with contributors working around the clock in Africa, Asia, Europe, North America, South America, and Oceania.
Why We Should Contribute to WordPress
The main aim of WordPress Translation Day is to help make WordPress understandable to as many people as possible around the world. This aligns with the WordPress culture of giving back to the community.
On a regular basis, contributors with varying levels of experience from developers to marketers, designers and translators lend their expertise and knowledge to the WordPress open source project, which in turn helps millions of people throughout the world to build websites and provide digital services.
Anyone who knows about any aspect of WordPress can contribute to creating, maintaining and growing the platform. Contributors are part of the larger global WordPress community and ultimately aim to enhance the platform and connect with other WordPress enthusiasts.
Why WordPress Needs to be Translated
The reach of WordPress is far and wide: it powers more than one-third of all websites – meaning that there’s a need to translate a massive amount of content into several different languages.
The number of languages that WordPress has been translated into has grown since the first Translation Day was held. In 2017, WordPress was translated into 178 languages. That number has now surpassed the 200th mark.
Presently, WordPress is accessible in 201 locales with 3,086 PTEs, 614 GTEs, and 32,585 contributors.
The more that WordPress is translated, the more that users throughout the world are empowered. Thanks to the hard work and commitment of the global polyglot community, more and more people are able to access the most popular WordPress plugins and themes that have been translated into their language.
Subscribe to Artbees Themes Blog for the best WordPress tips and insights.
Nine years after Artbees started in an abandoned apartment basement, the team launched new products and released countless updates, resulting in new milestones and exceptional growth for the company!
You may have already seen enough of Year In Review posts in the last days of 2018, so we thought it’s better to keep ours for early January when you’re back afresh from the holidays.
This post highlights what Artbees has done in 2018 and recollects how we reached our achievements and milestones.
Probably our biggest news in 2018 was the release of Jupiter X, the most capable and customizable remake of the Jupiter WP theme yet.
Well, listing all the powerful features that Jupiter X offers would definitely not fit in a single blog post, let alone a short paragraph. Suffice it to say, Jupiter X is going to be a game-changer with its very new page builder, Elementor. Just imagine that you have limitless control on every single aspect of every element and the ability to customize everything within a smooth user experience. All that would be possible with Elementor.
You now can build a unique header and footer with header and footer builder, customize every bit of your WooCommerce shop through the Shop Customizer, revamp the look of your blog and portfolio list, enjoy the ready-made block templates and get inspired to kick off your website, to name a few. If you want to step into the future of WordPress themes, Jupiter X can take you there — just dream and create!
To see for yourself the unimaginable freedom and power Jupiter X gives you, please visit this link.
It was in November that, along with our attendance at the Web Summit 2018, we introduced our very young product, GrowFlow, that just like Jupiter X for WordPress themes, is the future of Marketing. It basically personalizes marketing solutions for each and every user. The best thing about it is that it’s “intelligent”! Yes, Artbees stepped into the growing and exciting world of AI and machine learning to make marketing easier for everyone, not just marketers. GrowFlow constantly monitors users’ behavior and provides intelligent suggestions accordingly.
GrowFlow is in its very first steps, it is evolving as AI does, but it’ll soon take you away from the mass marketing giant, and instead offers you the tailored marketing solutions in the most efficient and intelligent way, and makes sure you are not left behind halfway. GrowFlow is not released for public yet and we are planning to send beta access invitation in early 2019.
To read about our official announcement of GrowFlow, please visit this link.
A Community of 132000 Users, Yay!
We’re proud to announce that the number of our users has grown by 20% from 2017. And to be exact, we are now a family of 132,206 members who trust and support us to this day. Shout out to our great Artbees family, and way to go!
Agencies and Businesses Run by Artbees Themes
Nothing is better than watching the result of your hard work powering websites and fueling up businesses all around the world. 2018 was again a year of dreams and creations! Here are some statistics to get a better idea:
- 1 agency made 100 websites using Artbees Themes.
- 131 agencies each made more than 5 websites using Artbees Themes.
- 40 agencies each made more than 10 websites using Artbees Themes.
- 4 agencies each made 50 websites using Artbees Themes.
More and more awesome websites will come to life in 2019, cheers to that!
Artbees in WordCamp Europe 2018
2018 was the year of social presence and our reunion with the great community of WordPress. We managed to attend a couple of WordCamps around the world, the first of which was the WordCamp Europe happening in Belgrade, Serbia. Needless to say that we were lucky enough to be among 2000+ developers, designers, freelancers, entrepreneurs, speakers and experts who had one thing in common — the passion for WordPress.
In the upcoming days, we were running from isle to isle and moving from workshops to talks to get the most out of the event. The entire WordCamp was somehow revolving around WordPress’s new editor, Gutenberg, and its capabilities, as well as GDPR. Matt Mullenweg had a keynote speech about that and the state of WordPress.
We managed to attend many exciting talks and workshops such as, “Mastering Feedback by Davide Casali”, which was simply about how we can master at giving and getting good feedback, “Making Websites Talk by Andrea Volpini” of wordlift.com which was mainly about the importance of the intelligent content on AI and machine learning application, and “Technical SEO to Grow Your WordPress Business by Yoast founder Joost de Valk”.
We also had a chance to engage in warm chats with some of the best in the market during the event and in after-parties, like the guys from Envato, Freemius, Elementor and many more. We learned a lot and met with a lot of fabulous people in this WordCamp, and cannot wait to attend WordCamp Europe 2019 in Berlin.
Artbees in WordCamp Milano 2018
Our second WordCamp experience happened in the charming city of Milan. Along with other factors that get us excited every time before attending WordCamps, this event was special in another way because we were lucky enough to sponsor a WordCamp event for the first time as Bronze-tier sponsor. Jupiter X was also presented to the great Italian community of WordPress.
One thing we’re sure about WordCamp Milano is that it had the best Contributor’s Day among all our WordCamp experiences. In a blog post, Maziar, one of our representatives, wrote about the insights and the reasons why he thought contribution day at WordCamp Milano was so special and how it changed his mind on voluntary work.
At this very special day and the days forward, Artbees had the chance to meet with guys from Yithemes, who run some of the most successful WooCommerce plugins in the market. We also met with Raffaella Isidori, an expert designer and passionate speaker, who shared some valuable tips and insights on the topic Maziar was going to speak about in our next WordCamp.
As always, we learned, shared, contributed, networked and strengthened our bonds with the great community of WordPress and came back excited for the upcoming WordCamps, this time in Greece.
Artbees in WordCamp Thessaloniki 2018
The last WordCamp we attended in 2018 was a local one in the beautiful city of Thessaloniki, Greece. Well, it was our last chance to contribute to WordPress and follow the culture of giving which is the spirit of all WordCamps, local or continental. That being said, we had the pleasure of sponsoring the event with our brand new Jupiter X for the second time.
Along with the sponsoring opportunity, Artbees had the pleasure to present in one of the talks. Maziar Firuzmand talked about a less covered topic “WordPress and The Problem of Diversity”, as part of a company dealing with this problem all the time. He gathered quite a positive response from the much diverse community of WordPress. Maziar also joined a panel discussion about Gutenberg and shared ideas, suggestions and community concerns together with other guests. Full videos of both sessions will soon be available on wordpress.tv.
Like all other WordCamps, we were really happy to be able to meet with fellow developers, designers, marketers, and WordPress-based agencies in Greece and will definitely plan to go back soon, hopefully for WordCamp Europe 2020 in Athens this time. You can read our full travelogue of this WordCamp here.
Artbees Got Even More Diverse
Artbees family has grown and got even more diverse during 2018. Right now there are 32 bees all around the world working hard hand in hand to make great products and to support our valuable community. Bees from many countries around the globe like Philippines, Ukraine, Colombia, India, Turkey, Nepal, Russia, and Canada bring together their unique cultures and languages along with their professionality to make Artbees a great example of a diverse WordPress family.
We are inexplicably grateful for every single member of our squad and will look forward to work with more peers from other parts of the world.
Audience and Users from Different Countries
In 2018 we again were rewarded with our users’ trust from all around the world. Receiving feedback, positive and negative, has made us work even harder to fulfill the users’ needs and to deliver the support they deserve.
Just like 2017, our reports show that our biggest community is in the US, with Germany and the Netherlands in the second and third row. A big shout out to our people in these and other countries. We will keep striving to make greater products and to walk the long way to flourish our young products together with you.
Happy Creating in 2019!
None of these milestones, objectives or achievements would be possible without the valuable community of people who use Artbees themes to create great websites or products. We are honored to be part of many ventures and businesses who use Artbees products to build and run and we can’t wait to see what our community will come up within 2019!
Subscribe to Artbees Themes Blog for the best WordPress tips and insights.
WordCamp Europe 2018 was not just a group of talks and workshops from WordPress experts. It was a festival, a community meet up, a cult meeting!Continue reading
Every small business will come to the conclusion at some point that they will need a well-executed rebranding strategy in order to gain voice in the competition and stay in the minds of customers for years. Small business branding encompasses a broad set of techniques. Here we discuss some of the many solutions to achieve an appealing website which is critical for a blooming and growing brand and business.Continue reading
In today’s internet-dominated age starting an online store is a must for every business owner. It’s a proven fact that poor usability will kill your business. You can avoid this risk by building an intuitive and user-friendly website. Here is how you can easily build your online store and keep consumers and visitors glued to your website with the help of a good online store builder.Continue reading
How do you, as a freelancer, make your work stand out from the internet crowd? The effect of a killer website is undeniable. Boost your online presence by combining your creativity with this incredible formula.Continue reading