Category: For Beginners

  • Safety Measures in WordPress: The Importance of Backups

    safety-measures-in-wordpress-the-importance-of-backupsImagine this: Your first WordPress website, finally up and running. You’ve never felt this accomplished in months. You give yourself a well-deserved pat on the back, and so do the people who’ve helped you accomplish the fruit of your labor. You install the plugins you need, and start planning further into your website’s future. It looks bright, and everything’s going swell.

    Until the unthinkable happens. And your site crashes.

    You shrug to yourself. You’ve heard of this kind of thing happening, even to the best of people. Heck, you’re sure Mark Zuckerberg and David Karp have had this kind of thing happen to them before, and they’re both doing just fine now, aren’t they?

    So you try to get it back up and running, Googling frantically for fixes. It doesn’t work the first try. It doesn’t work on the second either– or the third, or fourth, or the seventeenth, and even twenty-second. Your eyes widen at the realization that you’re completely and utterly doomed; your website is gone forever. You go through the web for a solution, but almost all of the how-to sites say the same thing:

    You should have backed up your WordPress files from the get-go.

    You should have backed up your WordPress files from the get-go.

    You should have backed up your WordPress files from the get-go.

    One of the website owner’s worst nightmares, at best. This exactly the kind of thing we want to avoid, so how exactly do we prevent it? Well, the answer is kind of simple: We need to install a good backup plugin.

    "a very "secure" bridge" by Garrett LeSage is licensed under CC BY-SA
    “a very “secure” bridge” by Garrett LeSage is licensed under CC BY-SA

    How and Where to Start?

    The first step in backing up your WordPress site is knowing exactly what it is you need to back up. WPBeginner, in their article “Which WordPress Files Should You Backup? And the Right Way To Do It”, the following are listed as the essential files needed to be backed-up for this task:

    • Core WordPress Files
    • Files in the wp-content Folder (your theme, plugins, and uploads)
    • WordPress configuration file
    • Your WordPress Database

    Backups Explained A Little Further

    WordPress alone doesn’t come with its own security and backup systems for your site (you could learn how to manually set them up, though– although that will take a lot of time), so it’s up to you to find a way to lessen complications. Updating your site is always a given (just in case you want to add in anything new to it, like another plugin, or if you want to take something down), and backups are must, unless you want to lose data (you don’t). Other reasons to back your site up and tighten security include the assurance that it’s hacker-free, and that no one gets to steal any of your site’s data.

    “There’s a Plugin for That, Too.”

    WordPress has tons of plugins for all kinds of features, including (yep, you guessed it) several for security and backup measures. There are a ton of these plugins you can choose from too; a few of the more popular ones include BackupBuddy and UpDraftPlus. There are reviews for these plugins (and more) almost everywhere, so don’t worry – the magic of the internet has your back. Personally, we use VaultPress, for both security and backup, for the following reasons:

    1. VaultPress was made by Automattic– founded by Matt Mullenweg– the same person who who founded WordPress itself. Many if not most of Automattic’s products and service are fool-proof, and it’s never a bad idea to subscribe to plugins that have already been tried and tested.
    2. Unlike most backup plugins, VaultPress doesn’t require storage space. They store your stuff in their own servers so you won’t get any “you’re-eating-up-a-lot-of-the-server-space” notices from your web host.
    3. Simplicity. To use it, you just need to log into your UI, and you can view all your backup details and perform operations from there.

    Now, because VaultPress meets our personal standards, it works for us perfectly. However, if you’re not satisfied with VaultPress, many sites – such as WPBeginner and wpmudev — offer the usual compare-and-contrast article in case you have any more trouble deciding.

    All Up to You

    At the end of the day, the decision of whether or not to secure and backup your website is up to you. Some people are confident they’ll be able to face of the risks an unsecured site presents… and some people aren’t – and that’s okay. It’s better to be safe than sorry, after all.

    Whichever decision you stick to, always remember to weigh in your options. After all, only you can gauge what it is you’re capable of handling.

    Good luck!

  • 5 Simple Tips To Make Your Website Look Good

    5-Simple-Ways-To-Make-Your-Website-Look-GoodIn general, one thing that most people tend to overlook is today’s demand for functional design and aesthetics. While not all of us may be aware of the extent of just how much it matters, the fact remains that design is a very crucial factor towards success—any kind of success– including your website’s. Yes, your content is an important key towards reeling your audience in, but how your site looks will definitely be a determining factor as well.

    Here are some basic tips on what you can do to improve your website’s design.

    Add high-quality images

    You want to add the best quality images on your website that reflect your brand style, but if you don’t have a high-resolution camera or the money to pay a photographer, you can get free stock photos from sources like Pexels and Pixabay. Images should pertain directly to the content of your site. Including images is always better than no images at all.

    Choose the right colors

    booneselections
    Lawrence Boone Selections uses black to add a sense of luxury and value to their website
    juicebox
    Juicebox used this zesty combination for people to get that organic and fresh that the brand represents

    A website’s color scheme plays a big role in creating the proper tone and mood for your brand. Picking a nice color doesn’t necessary mean its the right one. Each color sends off a different message and response. Colors is one of the first things that site visitors notice and it can actually impact your website’s success.

    Pick two to three base colors at most for your design. If you feel the need to add more color, you can utilize the tints and shades of your base colors. In color theory, a tint is the mixture of a color with white, which increases lightness while shade is the mixture of a color with white, which reduces lightness.

    Additional Tip: There are great tools such as Adobe Colour CC and Coolors to make picking colors easier.

    Use contrasting typefaces

    Font Pairing There are more fonts other than Arial, Georgia and Times New Roman. Google Web Fonts offer a variety of typefaces you can use for free on your site. Just like with choosing colors you can easily over do fonts, so I suggest you do not use more than two typefaces on your website. Most well-designed websites use two typefaces only, one for the headlines and one for the body text.

    Paring two typefaces can be hard even for designers. You could keep it simple by playing around with two different fonts from one typeface. If a second typeface is necessary, choose something that contrasts well against your first typeface. Normally, combining a serif font and sans-serif works well together. Another important tip is to choose typefaces that matches your company’s style. You could have the nicest looking font in the wold, but when used in the wrong context, it could still look terrible.

    Keep it clean using whitespace

    Whitespace is one of the easiest and most effective ways to create a visually effective website. Your website should look well organized and clutter free, directing users exactly where they need to go. Make sure elements stand out and are grouped together by using whitespace properly.

    Make it mobile-friendly

    People are probably going to visit your site at different times using different devices and screen sizes. While content is important, consistency across devices provides a better user-experience for anyone who visits your site. It makes it easier for users to share and link contents on your website to social media platforms on mobile. On top of that, Google prioritizes responsive websites on search results.

    Additional Tip: Using Page Builder Sandwich on your website will automatically enable mobile viewing and adjust it for mobile screen size.

    Conclusion

    Remember: Underestimating the power of design is one of the worst mistakes you can make when building your website. You don’t have to exert too much effort when designing your website, of course, but in the meantime, simply following these tips can ensure that your site doesn’t emit any feelings of disapproval from your audience.

  • What In The World Are Shortcodes, Anyway?

    What-Are-Shortcodes-AnywayIf you’ve noticed, one of WordPress’ rules of thumb is to always, always make things a little easier for everyone– newbies and experienced developers alike. One of the ways they get to achieve this goal is through the use of shortcodes.

    The WordPress.com Support Page defines them as such:

    shtSounds pretty simple. Now, If you haven’t heard of shortcodes before this article, and you don’t know what they look like, they’re those archaic code-like text wrapped in square brackets.

    Compared to normal code, which typically looks like this:

    HTML5-video-tag-sample-code
    (Erm. What?)

    Shortcodes in general look a little something like this:

    embed_shortcode
    (Easy-peasy.)

    …and if you’re a developer (or heck, even someone who’s been around a computer at least twice), you’ll probably agree that mere the act of typing and clicking to get one measly task done can eat up lot of your time. For the same reason we have keyboard shortcuts, shortcodes exist to make things easier for all of us, so we save up time in order to do and create better things; they’re very much like shortcut keys in that they have that very same purpose.

    Now let’s go back to this specific piece of shortcode, the same as above:

    embed-shortcode This specific one is called the embed shortcode and is built-in by default in WordPress. It embeds the video from the URL into your content. If you’re on WordPress right now, you can copy and paste the above shortcode in your site if you want to give it a spin.

    Shortcodes aren’t the perfect solution to time-saving, though. In our previous article, we delve in deeper into why shortcodes have its own share of cons, and what the Sandwich Team’s brewing up in order to fix them.

    For now though, feel free to tinker with shortcodes and see just what they can do for you.

    Happy Site-Building!

  • 5 Reasons Why Whitespace Matters

    Reasons-Why-Whitespace-MattersBasically, whitespace, at its most basic definition, is the space around and between all the elements of a composition that is left unmarked. It’s not just a waste of screen space, as most websites owners think. When used well, whitespaces can actually provide benefits to better promote a product. It is an important key to creating good design and it makes a website better in every way.

    Although the name whitespace implies that the space is white, it doesn’t always have to be literally white. Whitespace can actually be any color—It can even have a subtle pattern or texture. It’s an area that you don’t want the eye to focus on. Alternatively, it’s called a negative space.

    So, why does whitespace matter?

    newsfeed
    Image Source: News Feed

    Reason #1: Improves readability

    Whitespace between baselines and paragraphs actually help people comfortably read all of the content on the site. Adjusting small details of your site (like line-spacing/leading or the letter-spacing) could make a huge difference in make reading easier.

    The goal is to make people want to keep reading by designing layouts that are easy on the eyes.

    hpmagicwords
    Image Source: HP Magic Words

    Reason #2: Speeds up interaction

    Let’s be honest: most of your visitors won’t have enough patience to look thoroughly when browsing through websites. When a website looks cluttered, it keeps users distracted from finding what they are looking for.

    Whitespaces should help lead the viewer around the page. Less elements competing for attention plus proper use of whitespaces can prevent distractions that slows visitors down.

    google
    Image Source: Google

    Reason #3: Drive attention to the right elements

    Whitespace can give users visual cues on where they should be looking. When used in a correct manner, whitespaces help emphasize information and draw attention to a particular area on you website.

    Remember, if everything stands out, nothing does.

    Image Source: Pocket Penguins

    Reason #4: First impressions matter

    The look and feel of a website is the main key to good first impressions. Good first impressions often leads to longer visit duration. Too little whitespace can make your website look cheap and unreliable. Visitors won’t think the site or the brand is credible unless it looks attractive. Having a good amount of whitespace helps create the right tone for your website. Whitespace can be a way to communicate ingenuity, freshness, and sometimes, elegance.

    Tip: Here’s an idea on how to make your web design simple and familiar.

    flockknitwear
    Image Source: Flock Knitwear

    Reason #5: Helps create breathing room and balance

    A balanced design doesn’t mean symmetrical. A large design element can be balanced by a few smaller once. Adding whitespace is a great way to balance different-sized design elements on your page. Create a flow so the users eyes won’t dart all over the place. A good design should be able to guide the user from one point to another without confusing the visitor.

    Conclusion

    Next time you visit a website and find yourself staying a while, think about what made you stay and read. Do you think the line-spacing makes an article easier to read? Does the experience make you want to keep coming back for more? Did you have a hard time looking for the navigation?

    Take note of the good application of whitespace on the website. If you think it can also work in your website, learn to apply and manage how much space you should allocate on your element until you think you’ve conveyed the right tone and readability without sacrificing the “flow” you want for your website.

    The ultimate goal of any website is communication. Visual appeal goes hand in hand with the success of your website.

  • 3 Things to Consider Before Diving Into Page Builders

    3-Things-to-Consider-Before-Diving-Into-Page-BuildersThere’s an off-chance you’re here because you’ve heard that PBS is quite possibly one of the quickest shortcuts to site building. While page builders, in general, exist to make things easier, there are still a few things you might want to take into account before diving deeper into this particular realm of WordPress development.

    Learning WordPress: A Crucial Page Builder Prerequisite

    This is probably the most obvious item on this list, but still the most important one. Page Builders aren’t quite purchasable on their own, unfortunately. They come in the form of plugins in WordPress, which you’ll need to install and learn in order to manipulate. Rest assured that WordPress is one of the easiest and most legitimate ways to create a website. You won’t regret knowing something technical, considering the age we are in right now. There is a difference between WordPress.com and WordPress.org, and  knowing which one caters to your need saves time too!

    If you’re a little intimidated by the abundance of some of the technical terms in this article, though, fret not. There are few helpful sites you can visit to help get you started. Some of these areWordPress Codex, and Treehouse. It houses WordPress tips  and website building, depending on your need and level of knowledge.

    You might want to test out the waters first, just to be sure

    It’s always a good idea to give free and/or trial versions a go before making any huge purchases you might end up regretting in the future. Thankfully, most page builders come with free/demo versions. Of course, we could also look into  a ton of reliable reviews about page builders while otherscompares and contrasts  page builders.  Make sure to weigh in your options carefully!

    Aside from going through articles and reviews, one of the things we like about WordPress is that it has a huge community behind it. There are individuals, teams, and even businesses, willing to lend a helping hand their fellow WordPress users, especially new ones like you! The community basically works on a pay-it-forward scheme than a give-and-take.

    Designs make a huge difference

    WordPress Enthusiast Donna Fontenot Cavalier makes a very good point regarding drag and drop Page Builders, and the importance of basic design. While drag-and-drop builders like PBS can save you a lot of time, basic know-how and at least some familiarity in aesthetics is another crucial thing to consider when creating websites. Imagine a scenario– let’s say you get your hands on a nifty page builder of your choice: that’s great! But then let’s say you’re a person who doesn’t exactly have the best eye for art, design and functionality: uh-oh.

    Don’t worry, though. Page Builder Sandwich isn’t just a Page Builder; our team is also dedicated to giving other WordPress users a hand, too. So if you’re dealing with a bit of trouble regarding design, don’t worry– we have a bunch of articles here on the PBS Blog with a lot of useful tips to help you get started. That way, you get to do more, learn more, and worry less.

    Remember, if you have any questions or concerns regarding page builders, or anything relating to the items above, feel free to drop us a line in the comments section below. We’re always happy to help our customers out.

    Happy Site-Building!

  • WordPress.com VS WordPress.org

    Wordpress-Com-VS-Wordpress-OrgIf you’re relatively new to building websites, chances are, you probably aren’t familiar with the great WordPress.com vs WordPress.org debate. You might not have even known that one of the other exists, and the different pros and cons of each one. So what is, pray tell, this great debate between using WordPress.com, and WordPress.org? Is the other one just a cheap rip-off waiting to get sued?

    Well, no.

    The debate, in a nutshell, is about which of these two WordPress services is a better fit for the website you’re trying to build. Neither is a rip-off of the other, and both sites are owned by WordPress; it’s just that one (.com), is a more non-developer-friendly version than the other, and .org has a lot less limitations when it comes to site building, compared to .com.

    “How do I know which one I need, though?”

    The answer to this question all depends on your future website’s needs. There is no one WordPress entity that’s objectively the “better” or even “best” version to use. The two have their own unique features, and an equal amount of pros and cons.

    WordPress.com: Why and When Should I?

    WordPress.com takes care of the basic essentials for you, which lets you focus more on your site’s content. It’s a site builder that’s completely run and hosted by a group of company called Automattic. You get premium hosting, backups, security, and the like. This means that you can focus on your site’s content a lot easier, compared to having to spend hours on end building it from scratch.

    Take note though, that WordPress.com also comes with its own limitations. While you may not have to worry as much about maintaining the inner workings of your site, you may have to keep in mind that you probably aren’t going to have as much freedom with it as you’d like. While customizing your site’s interface may not be an issue (WordPress.com comes with a ton of themes, for instance), adding certain features and elements in the form of plugins may become a problem, especially if your site needs specific features that aren’t available at WordPress.com.

    How to maintain a website is an entirely different story. It greatly depends on 1.) you aren’t a WordPress developer 2.) you have no intention of learning code, or 3.) have little or no time to.

    WordPress.org: When Is It Time to Consider?

    One rule of thumb when it comes to considering WordPress.org is when you’re at least a little familiar with the workings of code, or are willing to invest some time in learning how to. Since WordPress.org is a self-hosted version of WordPress, you can get your hands as dirty as you want them to be. Plus, you have the freedom to tinker with it as much or as little as you’d like. You’d be in-charge of finding your own host, of setting up your own security backups, and overall maintain the website by yourself– and more importantly, on your own terms.

    “But wait, why would I want that? Isn’t the point of WordPress to make site-building easier?”

    …Not exactly. Think of it this way: The Daily Post creates an excellent analogy between WordPress.org and WordPress.com, in a way that even the noobest of noobs (such as myself) get the gist right away.

    According to them, you have to think of WordPress.com as something you don’t have full ownership to. Take for instance, your 15-year old self, still living with your folks. If you wanted to paint your bedroom, you’d have to ask your parents’ permission first (who of course have full ownership of the house, including your room). Technically, the room is yours, but at the end of the day, well…it kind of isn’t.

    So if you need or want to make any drastic changes (like painting your walls, or having the room extended), you’d still have to talk it out and/or work up a compromise with the actual owners of the house, a.k.a. mum and dad. An upside to this though, is that when the fuse in the basement crashes, or the AC stops working, your parents get to take care of it, and you don’t have to worry about a thing.

    WordPress.org, on the other hand, is something you can freely customize and tinker with on your own accord. This can be compared to when you finally get to move out at 18, and get a flat of your own. Since you have full ownership of your residence, you don’t have to compromise with anyone to paint your walls in that color your mum’s always dreaded; you have the freedom to make the decision, and/or hire someone who fits your standards to do it for you. Additionally, you also have the liberty to choose exactly which AC unit you want for your living room. It’s just that if it happens to crash, you’re going to have to hire a mechanic to fix it, or figure out what’s wrong and how to repair it on your own (which isn’t too bad, because hey, lesson learned, and learning is good).

    By now, you’ve hopefully gotten a clearer picture of just what the stark differences between WordPress.com and WordPress.org are. But in a nutshell:

    install as much or as little as you want themes are limited only to WordPress themes, you have to pay a certain fee to get rid of ads.You have near full-control of your site; you can add, customize, or even build your own themes.

    Content control is limited;

    WordPress.com WordPress.org
    Fully hosted by WordPress; all essentials are covered. Self-hosted; choose your own essentials, or choose better ones.
    Features are limited to what WordPress.com offers Thousands of features in the form of plugins;

    These are a few of comparisons that come with weighing in the differences between the two. Choosing between the two ultimately comes down to the amount freedom you want in creating your site, and how much resources (time, effort, money, etc) you’re willing to give up for it. Remember, that these are both very crucial options to weigh in before you decide which WordPress platform suits you best. So, don’t rush the decision process!

    Happy Website-Building!

  • Why WordPress?

    Why-WordpressOne important thing to consider when building your first website– whether you’re a business, a freelancer, or anything and anyone, really– is that not everyone is adept in the language of code and software development. You could be, for instance, a chef who wants to publish his recipes online. You could also be a Fine Arts undergrad who needs a professional-looking portfolio, or a start-up business that needs a site of their own. Whether it’s one or the other or anything in between, the fact remains that while some of us may be familiar with the basics of code, we aren’t all full-time developers, and that not everyone who needs or wants a site knows how to make one from the bottom up. This is where WordPress might come in handy. Enter the question: “Why WordPress?”

    REASON #1

    WordPress is a Content Management System, Making It Totally User-Friendly.

    The first thing you need to know is that WordPress is a Content Management System (or CMS). In simpler terms, this means that WordPress allows its users to create websites without having to build code from scratch. It has a systematic, organized interface that lets you constantly keep things in check without having to tinker with code every now and then.

    Compared to building a website from scratch, which would typically start out like this:

    screenshot-1 With a Content Management System, you get to start out with something like this:

    WordPress
    WordPress ‘s back-end interface. Managing and creating websites becomes easier with CMS.

    You might ask yourself, though: “WordPress seems great, but what if it doesn’t have the features I want for my site?”, or “what if I want a map, a music player, or a caching engine, or a more reliable security system?”

    …Technically speaking, WordPress probably does have that feature you want, and it will come in the form of a WordPress Plugin.

    REASON# 2

    Plugins: The Cherry on Top of the WordPress Cake

    If you’re worried that WordPress doesn’t include that particular feature you might want on your site, don’t worry: it probably does.

    Plugins are “extension features” that exist to increase your WordPress site’s functionality. If you’re an entrepreneur who needs a contact form for your site, you might want to take note that WordPress in itself doesn’t have that feature, but there are tons of plugins that do. And since WordPress is open-source—meaning just about anyone can contribute to its development—new plugins are created regularly. You can get that contact form you want, and more. You get the freedom to add other plugins ranging from social sharing buttons, to maps, and even additional security measures for your site, among many, many other features and extensions. Now tell me that doesn’t sound neat.

    As of now, WordPress has about thousands of these plugins—and some of them are even available for free and/or have free versions, including PBS.

    REASON #3

    Open Source: The WordPress Community

    WordPress is Open Source. This means that anyone is free to contribute to its development, and anyone is open to study its backbone code to learn more about software development, and even WordPress itself. There are even businesses that are solely dedicated to creating and developing WordPress-related products, such as the plugins and themes (like us!)

    Because WordPress is open source, there are tons of users, developers, and even designers that constantly collaborate and even help each other out with WordPress-related problems. This way, you get real help from real people, and at the same time, learn from each other. This is something that your typical customer relations services hardly ever get to do.

    REASON #4

    WordPress is Legit.

    CNN, The Official Star Wars Blog, Time Magazine, and even (GASP!) Beyonce all have WordPress-run sites, among many others. These big names aren’t the only thing that backs up WordPress’ legitimacy, too– according to Treehouse.com, about 25% of all sites up on the web are run by WordPress. Considering how many millions and thousands of websites exist… well, 25% is a pretty big number.

    REASON #5

    Customizations Galore!

    WordPress has a ton of themes available for you and your site. You’re free to choose from free versions, premium ones, or even build one on your own (or hire someone to build it for you!).

    REASON #6:

    It’s Free.

    Yep, you read that right. Through Local Development, WordPress is totally free, and you can install it in your computer with the click of a button. Likewise, instead of hiring a developer, you could use whatever knowledge you have about code to learn more about how WordPress works (and hey, learning is always good).

    …not to mention that if there is a chance you don’t have time to get too deep into WordPress and site building, you could always get yourself a nifty page builder plugin and give ours a go.

    Remember that there are endless possibilities with WordPress, and it doesn’t need to take a genius to figure out how it all works!

    Using WordPress can save you a lot of time, money, and effort. And in a time when there’s very little of those resources, bear in mind that WordPress sites, their plugins (like PBS!), their themes, and its community especially, can totally help you out and make things much, much easier for you.

    Happy Website-Building!

  • How to Create Basic Hero Headers in 3 Easy Steps

    How-to-Create-Basic-Hero-Headers-2

    061716_PBS_Jihan_How to Create Basic Hero Headers_Done

    When your dream website finally becomes a reality, the first thing you want your audience to know is what your site’s all about. The trick to reel them in is to give them a good but quick summary of your site’s content – and the easiest way to do that is by creating a Hero Header for your page.

    What are Hero Headers?

    The purpose of the Hero Header is to visually communicate with your target audience in the fastest and most efficient way possible. You need to grab their attention quickly, in a way that it says: “Hey, this is my website, and here are the reasons it may be worth your time.”

    Typically, hero headers take up most of the space on the page, usually with large text and an equally large background image in order to give your readers a quick but firm-enough grasp as to what your website can offer them.

    To get started on your first ever PBS hero header, follow the quick steps below:

    Step 1: Insert Column and adjust Row Width

    061716_PBS_Jihan_How-to-Create-Basic-Hero-HeadersClick 1 Column below the Insert Content tab on the inspector (that thing on the left/sidebar). Make sure your caret (the blinking cursor on the text box) is inside the text box.

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-1-b_Revised-1Under the Row Properties tab, you may change the background color in order to use it as a guide for the next steps. Change Row Width from Normal to Full-Width: Retained Content Width using the toggle button shown above.

    What’s the difference between Normal, Full-Width and Full-Width: Retained Content Width?

    Row Width-Normal

    Normal – Background, text and other elements are contained within the bounds of your current theme’s row width

    Row Width-Full-Width

    Full-Width – Background, text and other elements fill the entire width of your browser window

    Row Width-Full-Width Retain

    Full Width: Retained Content Width – Only the background fills the entire width of your browser window. Text and other elements are contained within the bounds of your current theme’s row width

    In this layout, Full Width: Retained Content Width is used because the text that will be applied is centered; not full-width.

    Step 2: Adjust margin to create Whitespace

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-2-revisedIncrease the top and bottom margin by hovering the cursor on the arrow pointing to the margin you want to adjust. When the cursor turns into a double-headed arrow, click and drag down to your desired margin height. Its important to put Whitespace (also called Negative Space) between elements in a composition to create flow and help draw focus to the content on the page.

    Step 3: Add background with text and element overlays

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-aTo add a background image with text and element overlays, simply click the Background Image icon under the Row Properties tab, upload your desired background image, and select to apply.

    061716_PBS_Jihan_How to Create Basic Hero HeadersTip #1: For Premium users, using the Background Image Tint option, helps to provide more contrast for text, buttons or other elements. You can select a tint color and adjust its value by clicking on the Background Color icon. Both icons can be found under Background on the Row Properties tab.

    061716_PBS_Jihan_How-to-Create-Basic-Hero-Headers_Step-3-cType in the message for your header. See Text Formatting tab to adjust the style. Choose typefaces that are easy to read and goes well with the background image. Remember to show contrast from the background image.

    Tip #2: For branding elements, consider use a white or black logo so it does not clash with a colorful background image.

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-dYou can also add buttons by clicking on Button below the Insert Content tab.

    Don’f forget to save your work and you’re all set!

    Congratulations on making your first hero header with PBS! In case you don’t though, no need to fret; starting from scratch is arguably easier with PBS, so it shouldn’t be that much trouble.

    Happy website building!

  • Easily Add Email Newsletter Signup Forms

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

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

    Normally, you’d have to install another plugin, then maybe add a shortcode somewhere, or you’ll have to go through a popup and fill out some fields, or maybe you’ll have to set up a widget for your newsletter sign up form to work. Now, all the complexities of adding newsletter signup forms are gone. Just add the Newsletter Element on your page, add your list API keys and it should work right away.

    You can further customize your sign up form by simply clicking on either the email field – where you can change it’s colors, size, border and plenty more, or the button – then add icons, change your button’s size, or even make it show up only when your visitor begins typing in their email address. You can fully customize the looks to suit your design. Do you want the field to change colors when the user is typing? You can easily do that with a color picker. Need a minimalist design and the field is just a border, no problem!

    One cool thing is that the newsletter element doesn’t disrupt your user’s flow within your site. Once they subscribe, the page won’t refresh and the signup form will just get replaced with a “thank you” message. This message and it’s colors are customizable as well.

    As with the rest of Page Builder Sandwich, you can place your brand new newsletter signup form where ever you like, just drag it inside your rows or in another location.

    Are Mailing Lists Important?

    The short answer is yes. You know how if you have a Twitter account, other Twitter users can literally “follow” you and they’ll see your Tweets, a mailing list is how your visitors can follow your site through email.

    Don’t Have a Mailing List Yet?

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

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

    Learn More About Page Builder Sandwich

  • How to Create a Website from Scratch for Under $100

    How-to-Create-a-Website-from-Scratch-for-Under-$100

    If you want create a website from scratch, but you only have a short budget and absolutely zero technical knowhow, then this short guide is for you.

    This article is meant for absolute beginners who just really want to create a website without all the technicalities and complications. So if you’re a startup business owner who just wants a website for his office to show off to clients, or a foodie who wants to write your restaurant reviews online, or you’re a do-it-yourself guy or gal who just needs a site, then keep reading! I will stray away from as much technical jargon to keep things as simple as possible.

    Let’s enumerate what we’ll end up with when we’re done. By the end of the article, you would have:

    1. Your own website that people can visit at http://supermegaawesomewebsite.com,
    2. Optionally have your own email address at [email protected],
    3. A certain zen-like state of mind.

    What You Need

    Okay, so before we begin with the actual steps, we’ll need the following:

    1. An idea of what your website is going to be,
    2. A credit card or a Paypal account with $100 dollars credit, and
    3. A soda or a glass of water just in case you get thirsty, it’s always good to be hydrated.

    What Is a Website?

    Before we do anything, it’s important to know what we are actually creating first. Yes, we are creating your own website, but what is it really?

    In a nutshell, a website is a bunch of files in a special computer, and this special computer can be accessed by using a special web address on your web browser. After accessing the web server, it’s going to crunch those files together and in the end we would be able to see a pretty looking web page.

    Sorta techy terms:

    • bunch of files = web pages
    • special computer = web server
    • special web address = domain name or URL

    The bold words in the previous paragraph are the stuff that we need to get. Luckily for us, there is a place where we can get all of those all at once.

    Getting a Place in The Web

    I would recommend getting the GoDaddy’s Managed WordPress Hosting – Basic Plan. This plan gives us everything that we need to create our site right away with the least amount of hassle. The best part is that we don’t have to worry about the technical details of setting everything up.

    If you’re wondering what a “Managed WordPress Hosting” plan is, I’ll break it down:

    • Managed – GoDaddy will be the ones who’ll make sure that everything runs smoothly, updated, fast and without any problems. And if you need any help, you can ask their customer support.
    • WordPress – This the content management platform that will be used. It’s what you’ll use to publish your content online. It’s awesome. If you want to know more about WordPress, WP101 has a great intro video on What WordPress Is
    • Hosting – Everything will be placed in GoDaddy’s servers, so everything can be accessed quickly and with almost no down time.

    When getting the plan from GoDaddy, they also provide you with a domain name for free. This is awesome since now we don’t have to do anything aside from signing up in order to get the full package!

    As an added bonus, you can also get email addresses by getting their Basic Plan. The first year is free, so this is a no-brainer if you’re going to use email to converse with customers and other people.

    Check out this link below for more details on their plans (and no, they’re not paying me to recommend them):

    Check out GoDaddy’s Managed WordPress Hosting Plans

    Fill up all the details, find the domain name that you want (you don’t have to use supermegaawesomewebsite.com), then continue to check out and pay for it.

    I recommend that you sign up for at least one year so that you can avail of their discounts. You can also scour the web to check if there are any promos available.

    Web Server Cost: $12.18 – $59.88 for 1 year (the key here is to find a promo) Email Cost: $0 for 1 year Domain Name Cost: $0 for 1 year

    Total Cost so far: $12.18 – $59.88

    Congratulations, You Now Have A WordPress Website!

    After you’ve gotten your GoDaddy hosting, then your site should now be working fully. You can start browsing to your domain http://supermegaawesomewebsite.com and see your site.

    Initial impressions of your site is that it might look.. empty.. and it looks normal. Don’t worry, let’s fix that up!

    Accessing Your Website

    Since you’ve signed up with GoDaddy, they’ll give you a URL where you can access the administration side of your website. If you can’t find it, you can add a /wp-admin at the end of your URL. e.g. http://supermegaawesomewebsite.com/wp-admin and log in from there. Once logged in, you’ll end up in your WordPress Dashboard.

    GoDaddy has their own “Quick Setup” system to help beginners customize their site. I recommend going through this setup process if you aren’t familiar with how WordPress works.

    Learning WordPress

    Now it’s time to get familiar with WordPress. As I’ve mentioned earlier, WordPress is the platform you’re now using to publish your content. In other words: you log into your site, create pages and blog posts and literally hit the publish button.

    The next step now is to learn how to use WordPress. If you haven’t used WordPress before, the dashboard is a bit of an information overload if you’re seeing it for the first time. I recommend that you explore the different areas on your own pace.

    If you need guidance, there are a lot of tutorials on how to use WordPress online too. One of them is WP101. WP101 makes things super easy by providing lots of tutorials in video format, and they have a huge library of videos that will teach you all the ins and outs of WordPress.

    They have a few free videos in their site. For example, you can watch WP101’s video tutorial about the WordPress Dashboard.

    Check out WP101’s Video Tutorials

    Video Tutorials Cost: $15 per month (if you can obsess over all their videos within the first month, then you’re golden)

    Total Cost so far: $27.18 – $74.88

    Making Your Site Look Pretty

    The next step is to change the design of your site to make it match your personality and/or needs. You’ll need themes for that. In short, themes are like “skins” for your WordPress site.

    There are a ton of free and paid themes out there. If you want free themes, then there’s no doubt that the WordPress.org theme directory is your number one option.

    Since there are a lot out there though, it’s sometimes hard to find the perfect one for you. Theme Friendly’s Find Themes helps by providing reviews for themes and gives them a score based on their review. They have a number of themes in their site, and probably the best thing there is that you can click on filters while browsing themes, so you can view only themes fit for portfolios, businesses or blogs, and many more.

    There are also paid themes, but for starters I would recommend the free ones first. If you decide to take the premium route check out Premium WordPress’ list of theme shops.

    If you’re wondering why I didn’t mention ThemeForest, it’s because there are a lot of themes there that add a lot of bloat (unnecessary features) to your site. So if you really want to find a theme from there, tread carefully.

    Theme Cost: $0 – $70 one time (I’d recommend looking for promos in theme shops too)

    Total Cost so far: $27.18 – $144.88

    Adding More Functionality To Your Site

    As you create your site and continue to add content to it, you might find yourself wanting to add more stuff like contact forms, maybe some icons, or a Google Map, or something else. For these kinds of stuff, you’ll need plugins.

    As with themes, there are also a ton of free and paid options. And like themes, the number one choice for free plugins is the WordPress.org plugin directory. It’s a common saying within the WordPress community that if you need something in your site, “there’s a plugin for that.”

    For premium plugins, you can also find premium ones in CodeCanyon.net. But I would recommend going through the thousands of free ones in the WordPress.org plugin directory first.

    Plugin Cost: $0

    Total Cost so far: $27.18 – $144.88

    Conclusion

    You might have noticed that the total cost indicator is a range instead of a solid number. It’s because there are various ways to push the cost down like watching out for promotions, and opting for free themes & plugins.

    So if you play your cards right, you can actually have your own site from scratch (powered on for a full year), for only $27.18

    Most likely the succeeding years won’t be as cheap as the first year, but if you have your site up and running for at least a year already, then I would like to think that it’s a success and the other future costs aren’t a problem anymore.

    Hopefully you’ve learned a bunch from this article. And if you didn’t know about WordPress before and you’re now a proud WordPress user, consider joining the numerous WordPress communities online. Just search for a WordPress group in Facebook :)

    Wait! Don’t Close the Tab Yet!

    Hold on! I’d like to mention Page Builder Sandwich before you close this tab. I’ve mentioned a lot of awesome stuff above, but you haven’t seen Page Builder Sandwich yet.

    Page Builder Sandwich will let you design your pages in your brand new site easily without knowing any piece of code. It looks and behaves kinda like editing a word processor document, but it’s for websites. With it, you’ll be able to make your site even more awesome with carousels, icons, buttons, image backgrounds and plenty more easily.

    You can try out the demo, or watch the video below. What’s cool is that we’re still below the $100 limit :)

    Try the Demo of Page Builder Sandwich

    Page Builder Sandwich Cost: $39 for 1 site

    Total Cost so far: $86.18 – $203.88