Tag Archives: theme

Thumbnail

How To Reduce The Need To Hand-Code Theme Parts In Your WordPress Website




How To Reduce The Need To Hand-Code Theme Parts In Your WordPress Website

Nick Babich



(This is a sponsored article.) Good design leads to sales and conversions on your website, but crafting great design is no easy task. It takes a lot of time and effort to achieve excellent results.

Design is a constantly evolving discipline. Product teams iterate on design to deliver the best possible experience to their users. A lot of things might change during each iteration. Designers will introduce changes, and developers will dive into the code to adjust the design. While jumping into code to solve an exciting problem might be fun, doing it to resolve a minor issue is the exact opposite. It’s dull. Imagine that you, as a web developer, continually get requests from the design team like:

  • Change the featured image.
  • Update the copy next to the logo in the header.
  • Add a custom header to the “About Us” page.

These requests happen all the time in big projects. It’s a never-ending stream of boring requests. Want to have fun while creating websites, focus on more challenging tasks, and complete your projects much faster?

Elementor helps with just that. It reduces the need to hand-code the theme parts of your website and frees you up to work on more interesting and valuable parts of the design.

Elementor Page Builder

For a long time, people dreamed that they would be able to put together a web page by dragging and dropping different elements together. That’s how page builders became popular. Page builders introduced a whole different experience of building a page — all actions involving content are done visually. They reduce the time required to produce a desirable structure.

What if we took the most popular CMS in the world and develop the most advanced page builder for it? That’s how Elementor 1.0 for WordPress was created. Here are a few features of the tool worth mentioning:

  • Live editing. Elementor provides instant live editing — what you see is what you get! The tool comes with a live drag-and-drop interface. This interface eliminates guesswork by allowing you to build your layout in real time.
  • Elementor comes with a ton of widgets, including for the most common website elements. Also, there are dozens of Elementor add-ons created by the community: https://wordpress.org/plugins/search/elementor/
  • Responsive design out of the box. The content you create using Elementor will automatically adapt to mobile devices, ensuring that your website is mobile-friendly. Your design will look pixel-perfect on any device.
  • Mobile-first design. The Elementor page builder lets you create truly a responsive website in a whole new visual way. Use different font sizes, padding and margins per device, or even reverse column ordering for users who are browsing your website using a mobile device.
  • Revision history. Elementor has a history browser that allows you to roll forward and backward through your changes. It gives you the freedom to experiment with a layout without fear of losing your progress.
  • Built-in custom CSS feature allow you to add your own styles. Elementor allows you to add custom CSS to every element, and to see it in action live in the editor.
  • Theme-independence. With Elementor, you’re not tied to a single theme. You can change the theme whenever you like, and your content will come along with you. This gives you, as a WordPress user, maximum flexibility and freedom to work with your favorite theme, or to switch themes and not have to worry about making changes.
  • Complete code reference and a lot of tutorials. Elementor is a developer-oriented product — it’s an open-source solution with a complete code reference. If you’re interested in creating your own solutions for Elementor, it’s worth checking the website https://developers.elementor.com. The website contains a lot of helpful tutorials and explanations.

There are two particular cases in which Elementor would be helpful to web developers:

  • Web developers who need to create an interactive prototype really quickly. Elementor can help in situations where a team needs to provide an interactive solution but doesn’t have enough time to code it.
  • Web developers who don’t want to be involved in post-development activities. Elementor is perfect when a website is developed for a client who wants to make a lot of changes themselves without having to write a single line of code.

Meet Elementor Pro 2.0 Theme Builder

Despite all of the advantages Elementor 1.0 had, it also had two severe limitations:

  • There were parts of a WordPress website that weren’t customizable. As a user, you were limited to a specific area of your website: the content that resides between the header and the footer. To modify other parts of the website (e.g. footer or header), you had to mess with the code.
  • It was impossible to create dynamic content. While this wouldn’t cause any problems if the website contained only static pages (such as an “About Us” page), it might be a roadblock if the website had a lot of dynamic content.

In an attempt to solve these problems, the Elementor team released the Elementor 2.0 Theme Builder, with true theme-building functionality. Elementor Pro 2.0 introduces a new way to build and customize websites. With Theme Builder, you don’t have to code menial theme jobs anymore and can instead focus on deeper website functionality. You are able to design the entire page in the page builder. No header, no footer, just Elementor.

How Does Theme Builder Work?

The tool allows you to build a header, footer, single or archive templates, and other areas of a website using the same Elementor interface. To make that possible, Elementor 2.0 introduces the concept of global templates. Templates are design units. They’re capable of customizing each and every area of your website.

The process of creating a template is simple:

  1. Choose a template type.
  2. Build your page’s structure.
  3. Set the conditions that define where to apply your template.

Let’s explore each of these steps in more detail by creating a simple website. In the next section, we’ll build a company website that has a custom header and footer and dynamic content (a blog and archive). But before you start the process, make sure you have the latest version of WordPress, with the Elementor Pro plugin installed and activated. It is also worth mentioning that you should have a theme for your website. Elementor doesn’t replace your theme; rather, it gives you visual design capabilities over every part of the theme.

Custom Header And Footer

The header and footer are the backbone of every website. They are where users expect to see navigation options. Helping visitors navigate is a top priority for web designers.

Let’s start with creating a header. We’ll create a fairly standard header, with the company’s logo and main menu.

The process of creating a custom header starts with choosing a template. To create a new template, you’ll need to go to “Elementor” → “My Templates” → “Add New”.




Large preview

You’ll see a dialog box, “Choose Template Type”. Select “Header” from the list of options.




Choose the type of template you want to create. It can be a header, footer, single post page or archive page. (Large preview)

Once you choose a type of template, Elementor will display a list of blocks that fit that type of content. Blocks are predesigned layouts provided by Elementor. They save you time by proving common design patterns that you can modify to your own needs. Alternatively, you can create a template from scratch.




Choose either a predesigned block for your header, or build the entire menu from scratch. (Large preview)

Let’s choose the first option from the list (“Metro”). You can see that the top area of the page layout has a new object — a newly created header.




Large preview

Now, you need to customize the header according to your needs. Let’s choose a logo and define a menu. Click on the placeholder “Choose Your Image”, and select the logo from the gallery. It’s worth mentioning that the template embeds your website’s logo. This is good because if you ever change that logo at the website level, the header will automatically be updated on all pages. Next, click on the menu placeholder and select the website’s main menu.




Large preview

When the process of customization is finished, you need to implement the revised header on your website. Click the “Publish” button. The “Display Conditions” window will ask you to choose where to apply your template.




Every template contains the display conditions that define where it’s placed. Choose where the header will be shown. (Large preview)

The conditions define which pages your template will be applied to. It’s possible to show the header on all pages, to show it only on certain pages or to exclude some pages from showing the header. The latter case is helpful if you don’t want to show the header on particular pages.




Choose where you want to show the header. Want one header for the home page and another for the services page? Get it done in minutes. (Large preview)

As soon as you publish your template, Elementor will recognize it as a header and will use it on your website.

Now it’s time to create the footer for your website. The process is similar; the only difference is that this time you’ll need to choose the template named “Footer” and select the footer layout from the list of available blocks. Let’s pick the first option from the list (the one that says “Stay in Touch” on the dark background).




Choosing a block for a footer. (Large preview)




Large preview

Next, we need to customize the footer. Change the color of the footer and the text label under the words “Stay in Touch”. Let’s reuse the color of the header for the footer. This will make the design more visually consistent.




Large preview

Finally, we need to choose display conditions. Similar to the header, we’ll choose to display the footer for the entire website.




Large preview

That’s all! You just built a brand new header and footer for your website without writing a single line of code. The other great news is that you don’t have to worry about how your design will look on mobile. Elementor does that for you. UI elements such as the top-level menu will automatically become a hamburger for mobile users.

Single Post for Blog

Let’s design a blog page. Unlike static pages, such as “About us”, the blog has dynamic content. Elementor 2.0 allows you to build a framework for your content. So, each time you write a new blog post, your content will automatically be added to this design framework.

The process of creating a blog page starts with selecting a template. For a single blog post, choose the template type named “Single.” We have two options of blocks to choose from. Let’s choose the first one.




Choosing a block for a single post. (Large preview)

The block you selected has all of the required widgets, so you don’t need to change anything. But it’s relatively easy to adjust the template if needed. A single post is made of dynamic widgets such as the post title, post content, featured image, meta data and so on. Unlike static widgets that display content that you enter manually, dynamic widgets draw content from the current pages where they’re applied. These widgets are in the “Elements” panel, under the category “Theme Elements”.




List of dynamic elements. A dynamic widget changes according to the page it’s used on. (Large preview)

When you work on dynamic content like a single post, you’ll want to see how it looks on different posts. Elementor gives you a preview mode so you can know exactly what your blog will look like.

To go into preview mode, you need to click on the Preview icon (the eye icon in the bottom-left part of the layout), and then “Settings”.




Never again work on the back end and guess what the front end will look like. Use preview mode to see how your templates will work for your content. (Large preview)

To see what your page will look like when it’s be filled with content, simply choose a source of content (e.g. a post from the “News” category).




Large preview




Fill your template with content from your actual website to see what the result will look like. (Large preview)

Once you’ve finished creating dynamic content, you’ll need to choose when the template will be applied. Click on “Publish” button, and you’ll see a dialog that allows you to define conditions.




Choosing conditions for a single post template. (Large preview)

Archive

The archive page is a page that shows an assortment of posts. Your archive page makes it easy for readers to see all of your content and to dive deeper into the website. It’s also a common place to show search results.

The Theme Builder enables you to build your own archive using a custom taxonomy. To create an archive page, you need to go through the usual steps: create a new template, and choose a block for it. For now, Elementor provides only one type of block for this type of template (you can see it in the image below).




Large preview

After selecting this block, all you need to do is either set a source for your data or stick to the default selection. By default, the archive page shows all available blog posts. Let’s leave it as is.




Large preview

As you can see, we’ve successfully customized the website’s header, footer, single post and archive page, without any roadblocks of coding.

What To Expect In The Near Future

Elementor is being actively developed, with new features and exciting enhancements released all the time. This means that the theme builder is only going to get better. The Elementor team plans to add integration for plugins such as WooCommerce, Advanced Custom Fields (ACF), and Toolset. The team also welcomes feedback from developers. So, if you have a feature that you would like to have in Elementor, feel free to reach out to the Elementor team and suggest it.

Conclusion

When WordPress was released 15 years ago, the idea behind it was to save valuable time for developers and to make the process of content management as easy as possible. Today, it is widely regarded as a developer-friendly tool. Elementor is no different. The tool now offers never-before-seen flexibility to visually design an entire website. Don’t believe me? Try it for yourself! Explore Elementor Pro today.

Smashing Editorial
(ms, ra, il, al, yk)


Read article here – 

How To Reduce The Need To Hand-Code Theme Parts In Your WordPress Website

How To Internationalize Your WordPress Website

On September 30th, 2017, the international WordPress community united for 24 hours to translate the WordPress ecosystem. For the third time, #WPTranslationDay fused an all-day translating marathon with digital and contributor day events designed to promote the value of creating accessible experiences for global users, better known as “localization”.
As an open-source community, we should all strive to localize our open-source contributions. Before you can transcribe your digital assets though, you have to internationalize your codebase.

Read More:  

How To Internationalize Your WordPress Website

Filling Up Your Tank, Or How To Justify User Research Sample Size And Data

Jen is presenting her research report to a client, who runs an e-commerce website. She conducted interviews with 12 potential users. Her goal was to understand the conditions under which users choose to shop online versus in store. The client asks Jen why they should trust her research when she has spoken to only 12 people. Jen explains her process to the client. She shares how she determined the sample size and collected and analyzed her data through the lens of data saturation.

See original article: 

Filling Up Your Tank, Or How To Justify User Research Sample Size And Data

Thumbnail

How To Make WordPress Hard For Clients To Mess Up

WordPress is a wonderfully powerful CMS that ships with many versatile features giving it the flexibility to work out of the box for a wide range of users. However, if you are a professional building custom themes and plugins, sometimes these features can be problematic. The same features and options that allow off-the-shelf themes to adapt to many different use cases can sometimes also be used to undermine a carefully designed custom theme built for a specific use case.

See the original article here:

How To Make WordPress Hard For Clients To Mess Up

Thumbnail

8 Mobile-Friendly Landing Page Templates Designed With Love

XB, Paris, pont arts, bridge, lovers, locks, Seine, couples, love, keys, fence, river
These mobile-friendly landing page templates were designed just for you, with love. Image source.

You want your page to look professional and modern, but are you getting lost in the aesthetics and losing sight of the true goal: conversions? You need a balance of both, and we want to help.

For the second year in a row, Unbounce has teamed up with our friends at ThemeForest to offer designers a chance to show off their best landing page designs. We put up $14,000 in prize money and put out the call for designers to give us their best in 13 different categories.

We’re sharing seven of the winning landing page templates right here!

Find out why we thought these were the best in their categories, and discover which elements they contain that will help you get more conversions. Make sure you read on to learn more about the secrets to high-converting landing page design.

1. Mediclick

Designer: Surjith Ctly
Prize: Best Medical Template

medical-treatment-landing-page-small

The minimalist design of this Mediclick template provides the means to deliver a consistent message. The sections are broken up nicely, and the map on the bottom is especially helpful in providing much-needed location context. Not to mention the blazingly obvious call to action (CTA)!

They’ve also included a CTA towards the bottom that scrolls back up to the top of the form when clicked. This is a great addition for readers who might require a little more convincing before they click.

There are two variations of this template to choose from, one with the form and CTA above the fold, the other with those elements directly below it. Test both to find out which one works best for your audience.

2. Donate

Designer: Ewebcraft
Prize: Best Nonprofit Template

donation-landing-page-small

This landing page template for nonprofits by Donate starts out with a strong and very compelling header section.

The visually distinct sections allow you to guide your visitor’s eye through a clear and linear narrative. The stats section is a very nice touch here and could go a long way towards helping readers understand why they should donate to your cause or organization.

Would we add anything? Maybe a “Donate Now” button at the bottom to give readers another chance to convert. Other than that, this is a solid landing page template that is sure to help do a lot of good.

3. QuickTravel

Designer: Nasirwd
Prizes: Best Travel Template, Best Lead Generation Template

travel-landing-page-small

Finding great landing pages in the travel industry isn’t easy. They’re as rare as a tropical vacation with no sunburn.

This travel landing page is focused on one goal, with just one CTA on the page. It does a great job of conveying the magic of going on a trip — even without any real copy there I’m ready to pack my bags!

Vacations are expensive, and people might need a little more convincing to reduce their anxiety about the high price tag. To counter that, this template provides sections devoted to describing the benefits of the offer and allows for the addition of large images and videos.

It’s not every day that you get to see a landing page that is both beautiful to look at and laser-focused on conversion. This page has both of those things in spades.

4. Flat Vault

Designer: creativeCary
Prize: Best Multi-Purpose Template

minimal-landing-page-small

I love this Flat Vault landing page! It uses a trendy and modern aesthetic while incorporating a lot of core conversion rate optimization concepts. Sometimes too many colors can be distracting, so you can appreciate the minimal color palette on this page.

The headline is clear and easy to read. The form stands out enough to get people to pay attention to it, and the CTA button jumps out at you like a red spot on a white shirt (in a good way). You may want to test that CTA button with a fourth color, just to see if you can get it to contrast more with the rest of the page.

There’s a well laid-out spot to add a video and a few very catchy icons that add a nice design element without being too distracting. This page is also mobile responsive and collapses nicely to reach those mobile customers everyone keeps talking about these days.

5. Explore

Designer: Xvelopers
Prize: Best Updated Template

updated-landing-page-small

This section includes landing pages that were updated in the last year. They may have added a mobile responsive element, or undergone a complete overhaul. Either way, the winner this year is this outstanding travel landing page template.

If you’re going to convince someone to go somewhere, you’re going to want to show them some nice, big aspirational images like the one at the top of this landing page. The first section below the fold, which grabs your eye immediately, is a great place to include the three quick benefits.

The page also gives you clear contrast between the three sections. They’re not just cookie cutter boxes, and each of them stands on its own. And the most important aspect? The CTA remains consistent throughout.

6. iStartup

Designer: Xstyler
Prize: Best SaaS Trial Signup Template

startup-purple-landing-page-small

This landing page has a lot of great stuff going for it. Above the fold, you’ve got space for a hero shot, a nice big headline and your value prop, with a form and CTA thrown in for good measure.

If you’re using this template, you may want to test the ghost button against a regular CTA button with more contrast. Ghost buttons look cool, but everyone I’ve talked to that has used them says that contrasting buttons work better every time.

That said, the rest of the page makes great use of whitespace for readability and includes another appropriately placed CTA button to convert readers who went all the way down the page.

7. Avira

Designer: Xknothing
Prize: Best Real Estate Template

real-estate-landing-page-small

Having researched real estate in a couple of different cities, I can tell you two things about real estate landing pages. First, they’re often not actual landing pages. Second, they often look like they were built using AngelFire in 1998.

Not this real estate landing page template, though! This page is a breath of fresh air that provides enough room for your content to breathe. The fonts are well chosen and the style is modern. And there’s plenty of space to add photos and entice someone to contact you about that special property.

The use of the testimonial above the fold is a bit unorthodox, but it’s crazy enough that it just might work! In the Conversion Marketer’s Guide to Landing Page Copywriting, Joanna Wiebe says the following:

[The] testimonial is a marketing message – but it’s far more powerful than regular marketing copy because you’re not the one saying it.

This is a great way to get people interested based on some social proof right away. Nice touch!

8. Flare

Designer: Morad
Prize: Best Startup Template

startup-landing-page-small

There’s something very exciting about promoting a startup. You want the world to know all about what you do, and you want to tell them everything.

The problem is, you can’t tell them everything. You need to emphasize what makes you unique – and this template has a big section above the fold to help you show off your hero shot, your catchy headline and your value prop.

There are two separate sections for feature lists to help people understand what you’re all about. Use one or both, and take advantage of the minimal space for copy by keeping your messages brief.

Providing great-looking spots for social proof and a few factoids about your startup are also a nice touch.

A bright future for landing page design

All in all, what we saw this year was that landing page designers are becoming a lot more savvy about conversion centered design. Very few designers appear to be going for form over function, and it’s encouraging to know that Unbounce customers have such a great field of landing page templates to choose from.

Congratulations to the winners, and to the many designers who took the time to show us their best. You can find all of these templates and a whole lot more in the Unbounce landing page template section over at the Themeforest marketplace.

Which landing page template is your favorite? Let us know in the comments!


From: 

8 Mobile-Friendly Landing Page Templates Designed With Love

How To Build A Custom WordPress Archive Page

If I were to ask you what the least used default page type in WordPress is, chances are you’d say the archive template. Or, more likely, you’d probably not even think of the archive template at all — that’s how unpopular it is. The reason is simple. As great as WordPress is, the standard way in which it approaches the archive is far from user-friendly.
Let’s fix that today! Let’s build an archive page for WordPress that’s actually useful.

Jump to original – 

How To Build A Custom WordPress Archive Page

How To Choose A WordPress Theme

Economists have taught us that a lot of choice is not always a good thing. Having many options can lead to “analysis paralysis” and a feeling of being overwhelmed, due to the increased effort required and the level of uncertainty in making the right choice.
With a nearly unlimited pool of WordPress themes to choose from, it becomes so easy to feel overwhelmed and resort to inaction or choosing a low-quality theme.

Source article:  

How To Choose A WordPress Theme

How To Create A Twitter Widget

Twitter needs no introduction. It has become the way to reach audiences for some people and companies and a place to hang out for others. Placing a Twitter feed on one’s website has almost become compulsory. Embedding a feed isn’t all that difficult if you are comfortable with Twitter’s default widget, but making your own will enable you to blend it into your website seamlessly.

The Result The result of our effort will be a WordPress widget that can be placed in a widgetized sidebar.

See the article here – 

How To Create A Twitter Widget

Thumbnail

Tips And Tricks For Testing WordPress Themes

Whether you offer free or premium themes, testing should be a major part of your development process. By planning in advance, you can foster a development environment that deters some bugs by design and that helps you prevent others. The aim of this article is to share some of the tricks I use personally during and after development to achieve a bug-free product.
This article is split into three distinct sections:

View original article – 

Tips And Tricks For Testing WordPress Themes

Practical Tips From Top WordPress Pros

Recently I shared with you some advice from the WordPress community to beginners. But what if starting out is already a dim memory? What if you’re already so immersed in the world of WordPress that you dream of Trac and you bore your partner with talk of your latest achievement with custom post types?
Below are some tips from WordPress pros from across the community. Many of the tips cover development, but there’s also advice on business, running your website and, of course, getting involved with the community.

Read original article: 

Practical Tips From Top WordPress Pros