How to Make The Standard and Vertical Navigation Overlap on Your Divi Website

In this post, we’re going to show you how to combine the standard and vertical navigation. More specifically; how to make the secondary menu and footer overlap the vertical navigation on your website. That means you won’t have to choose between having a top navigation or vertical navigation; you can do both! You can style the primary menu and secondary menu however you want within your Theme Customizer, that’s not what we’re going to help you achieve in this post explicitly. We’re rather going to show you the following things that help in the process of doing the following things:

  • how to make your secondary menu overlap your vertical navigation
  • how to make your secondary menu fixed when scrolling
  • how to make your footer overlap your vertical navigation

These are all the things that’ll help you create a nice balance between the standard and vertical navigation on your website. By making the standard and vertical navigation overlap, your website won’t feel like it’s being dominated by the vertical navigation. The main content on your website will adjust itself to the vertical navigation but the secondary menu and footer will behave in the same way it behaves when vertical navigation isn’t enabled.

Result

By the end of this tutorial, you’ll be able to achieve the following result on a website that used vertical navigation:

standard and vertical navigation

The Inspiration for Overlapping Standard and Vertical Navigation

In a previous post, we’ve shared some examples of websites that use the vertical navigation.  All of the examples showed us how creative you can get with a Divi option that is not that often used. A thought-through vertical navigation on your website can give that extra interaction you were trying to achieve with your visitors.

While showing the examples, there were some comments that inspired us to show you how to achieve certain results. This post is one of those inspiration-based tutorials that will show you how to make some tweaks to your website without having to search for solutions yourself.

We’ve been inspired by the Alex Brands website that uses the secondary menu at the top and the vertical navigation on the left side of the page.

standard and vertical navigation

While scrolling, the secondary menu scrolls along. It gives that nice extra little touch to the website and it helps to keep the focus on the content within the secondary menu. Alex Brands is an e-commerce website and the fixed secondary menu helps to remind people what’s in their shopping basket and the deal that they’re offering.

This kind of vertical navigation is especially interesting for e-commerce websites. The vertical navigation makes it easy for visitors to navigate through the different categories of items that are offered on the website. It’s easier to follow the menu items when they’re located in a vertical navigation since it’s easier interpreted as a list people have to go through.

General Steps

Before we dive into the part where we show you how to make your standard navigation overlap your vertical navigation, we’re going to go through the general steps first. These general steps are the foundation you’ll need to go through before you apply the overlap.

Without any further due; let’s get started.

Create Your Menu & Add Menu Items

The first thing you’ll need to do (if you haven’t done that already) is add a menu and the menu items to your website. These are the menu items that will appear within your vertical navigation. To add a new menu to your website, go to your WordPress Dashboard > Appearance > Menus. Once you’re on that page, give your new menu a title and create the menu.

standard and vertical navigation

Continue by adding menu items and making this your primary menu.

standard and vertical navigation

Add Social Icons to Secondary Menu

The next thing you’ll need to do is activate your secondary menu. To make sure the secondary menu appears on your website, your secondary menu must have an element that is activated. In this post, we’ll only add the social media icons, but you can, of course, add whatever you like.

To activate the secondary menu and make the social icons show up, start by going to your WordPress Dashboard > Customize > Header & Navigation >Header Elements > Enable the ‘Show Social Icons’ option.

standard and vertical navigation

Activate Vertical Navigation

The next step you’ll need to take is enabling the vertical navigation within your Divi builder. To do that, go to your WordPress Dashboard > Appearance > Customize > Header & Navigation > Header Format > Enable the vertical navigation.

standard and vertical navigation

Besides that, you can also choose where you want your vertical navigation to appear; on the left or right side of your website.

Disable Fixed Navigation For Your Primary Menu

Before we go over to the advanced modifications, there’s one last thing left to do: disabling the fixed navigation for your primary menu. If you’ve already disabled primary menu, skip this step. If, however, your primary menu is currently fixed, go to your WordPress Dashboard > Divi > Theme Options > And disable the fixed navigation.

standard and vertical navigation

Combine Standard & Vertical Navigation

In the next part of this post, we’re going to show you how to make your standard and vertical navigation into something different than usual. When it comes to vertical navigation, we’re used to seeing a part of the screen being covered up by it. The secondary menu and the footer will, by default, not pass the vertical navigation.

But in some cases, we want to make sure the secondary navigation and footer are on top of the vertical navigation. That way, the only thing that’ll depend on the vertical navigation is the main content. Your website won’t feel like it’s completely divided in two places; the vertical navigation and the rest of the website.

Add CSS Code to Theme Options

You can add the CSS code in two ways: through Divi’s Theme Options or through the Theme Customizer. To add the code to the Theme Options, go to your WordPress Dashboard > Divi > Theme Options > General > Scroll down the tab and paste the following lines of CSS code into the Custom CSS box:

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

standard and vertical navigation

Add CSS Code to Theme Customizer

The other possibility you have is adding the CSS code lines to the Theme Customizer. To do that, go to your WordPress Dashboard > Appearance > Customize > Additional CSS > And paste the CSS lines in the Custom CSS field:

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

standard and vertical navigation

Final Thoughts

In this post, we’ve shown you how to combine standard and vertical navigation on your website. More precisely; we’ve shown you how to make the secondary menu and footer overlap your vertical navigation and how to make your secondary menu fixed. If you have any questions or suggestions; feel free to leave a comment in the comment section below!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Featured Image by Line design / shutterstock.com

The post How to Make The Standard and Vertical Navigation Overlap on Your Divi Website appeared first on Elegant Themes Blog.

Powered by WPeMatico

Canadian Web Hosting [Ad]

10+ Helpful Javascript Tutorials for WordPress Developers in 2017

In Matt Mullenweg’s 2015 State of the Word address, he gave the entire WordPress community a homework assignment – “Learn JavaScript, Deeply.” That focus, along with developments like Calypso and the REST API, is why we just published a basic JavaScript tutorial post for beginners to get started with JavaScript.

That post focuses entirely on basic JavaScript tutorials, though. In this post, I’m going to take things a little bit further and give you a JavaScript tutorial list of content that focuses specifically on JavaScript as it applies to WordPress.

Because the focus is on applied JavaScript, rather than the basics, you’ll likely need at least a basic understanding of JavaScript to get value from these tutorials. If that sounds like you, I invite you to dig in and learn some WordPress-applicable JavaScript!

Helpful JavaScript Tutorials for WordPress Developers

Before I get to the list of tutorials, I want to spend a second giving some background on how I actually went about constructing this list.

As I mentioned in the intro, this is not a list of general tutorials to help you learn JavaScript. Rather, to make it on this list I was looking for two things:

  • The resource is specifically about applying JavaScript to WordPress
  • The content covers something “meaty”. That is, it’s more than just a short code snippet or a brief explanation.

Beyond those two requirements, the tutorials on this list cover a fairly eclectic range of applications. Additionally, most are standalone tutorials, though some are broader courses or collections.

And finally, most tutorials are free, but there are also some paid options intermingled in the list. I’ll make sure to note which is which so that you can find something that fits your budget (or lack thereof).

Ok – enough chat. Let’s get to the list…

1. Use AngularJS as WordPress Frontend

In this tutorial from Andrea Terzani, he takes you through building a simple AngularJS application to serve up post content. Andrea is Italian, so the grammar isn’t always perfect (that’s not a criticism, I appreciate bilingualism!), but he includes tons of code examples, and you can always grab the whole package from his GitHub page.

Price: Free | More Information

2. JavaScript for WordPress

Javascript for WordPress

Zac Gordon is fairly well-known in the WordPress community thanks to his Treehouse tutorials as well as his talks at a huge number of WordCamp events.

JavaScript for WordPress is his “master course” program for learning JavaScript as it applies to WordPress.

The course is neither publicly available nor free. In fact, you have to reserve a seat before you can even join the course.

That’s because Zac prefers to work either one-on-one or in small cohorts, rather than taking a more “set it and forget it” approach to learning.

That personal attention doesn’t come cheap – the course clocks in at a cool $697. But if you’re serious about learning JavaScript for WordPress development, Zac’s credentials definitely back up the high price tag.

Price: $697 | More Information

3. Building Reactive WordPress Plugins

Delicious Brains, the makers of the much-loved-by-developers WP Migrate DB plugin, put out tons of quality developer-focused tutorials on their WordPress blog. This three part series on building reactive WordPress plugins is no exception.

Each of the three posts in the series focuses on building the same simple WordPress plugin, just with a different front-end technology.

Across the whole series, you can see how the plugin is built with:

  • Backbone.js
  • Vue.js
  • Elm

The tutorials are lengthy and well-explained, so you’ll definitely get a ton of value from this series.

Price: Free | More Information

4. Using Backbone Within the WordPress Admin

In this two part tutorial from Envato Tuts+, you’ll first learn how to apply Backbone JS within the WordPress backend, followed by the second part on using Backbone on, you guessed it, the frontend.

Shane Osbourne takes you through everything, including plenty of code examples and screenshots.

As is the norm, you can also check the comments section for some debate about code quality.

Price: Free | More Information

5. Yoren Chang’s Tutorials On Building Themes With AngularJS and WP REST API

Since October 2014, Yoren Chang’s hobby has been building WordPress themes with AngularJS. Why is that important for you? Because over that time, he’s also been documenting his hobby into a number of tutorial posts at his site.

Currently, he’s posted 21 different tutorials, all dedicated to using AngularJS with WordPress themes.

Some of the tutorials are short quick-hitters, while others delve a little deeper. Put them all together, though, and you have a deep collection to keep you busy for quite some time.

Price: Free | More Information

6. Working with JavaScript and WordPress

Working with JavaScript and WordPress is a short PluralSight course from developer Brian Hogg.

At under 2 hours, the course isn’t too much of a commitment. It takes you through a short introduction, using JavaScript in plugins and themes, and using AJAX to send and save data.

While you technically need a PluralSight membership to access the course, you can get a free 10-day PluralSight trial which should give you more than enough time to consume the course.

Price: Free w/ Free Trial | More Information

7. Creating Single Page Applications With WordPress and Angular.js

This JavaScript tutorial is a more recent addition from Tom Whitbread at Envato Tuts+. As you can probably glean from the name, it takes you through the process of using AngularJS to build a single page application based on WordPress.

You can also find all of Tom’s code at his GitHub page.

Price: Free | More Information

8. How to build React apps on top of the WordPress REST API

This is another one where you can get a pretty good idea of what’s covered just from the title!

Beyond the depth that Andrey, the author, went into, I also like that this tutorial has a solid comments section for added debate.

You can also check out a demo of the basic front-end that you’ll be building, as well as Andrey’s GitHub page with all of the code.

Price: Free | More Information

9. A Simple Route to Writing a React.js App in a WordPress Plugin

WPShout is well-known in the community for their developer-focused WordPress tutorials. While they by no means focus exclusively on JavaScript, this tutorial from Fred digs into a similar topic as the previous tutorial by showing you how to write a React.js app inside a WordPress plugin.

Beyond code examples in the post, Fred also includes a ZIP file with the full code from the demo.

Price: Free | More Information

10. JavaScript for WordPress Developers from WPMUDev

Daniel Pataki, the WordPress editor at Smashing Magazine and one-time author at Elegant Themes, put together a multi-part JavaScript for WordPress Developers series at WPMUDev.

The course builds from the basics up to more advanced topics. It’s a bit more friendly to JavaScript beginners than some of the more advanced tutorials on this list. So if you’ve felt a little lost up until now, this might be a good place to start.

Price: Free | More Information

11. Single Page Apps Using AngularJS and the WordPress REST API

This one is a detailed tutorial from Almir at SitePoint. It gives you an in-depth look at using AngularJS to build a single page app based on WordPress and the REST API.

Almir includes separate GitHub pages for both the Angular app and the WordPress child theme that he uses in the example, so you should be able to easily follow along with everything that’s happening.

Price: Free | More Information

Wrapping Things Up

With the increasing focus on the REST API, JavaScript and WordPress are only going to be getting closer. As of March 2017, you can even find JavaScript-based themes on the WordPress.org repository.

So, if you want to keep up with the WordPress community you need to, as Matt put it, “Learn JavaScript, Deeply”.

I hope at least one JavaScript tutorial on this list helped. And if you know a great tutorial that deserves to be on this list, it would be great if you could share it in the comments so we can collaboratively make this resource even better.

Article thumbnail image by Teguh Jati Prasetyo / shutterstock.com

The post 10+ Helpful Javascript Tutorials for WordPress Developers in 2017 appeared first on Elegant Themes Blog.

Powered by WPeMatico

How to Add a Search Field to Divi’s Secondary Menu

In today’s Divi tutorial, we’re going to show you how to add a search field to your secondary menu. The secondary menu is also known as the header of your page and the place where you try to fit in some practical information about your website or company. Adding a search field to it might be a request you’ve had from a client or a need you have for your own website. Either way, we’ll show you how you can easily integrate this search field into your secondary navigation when you’re using the Divi theme.

Result

Before we dive into the different steps you’ll have to take to get there; it might be interesting to show you the result in advance. By following the steps in the post and adding CSS appearance changes, you’ll obtain the following result on a default secondary menu:

search field

Why Add a Search Field to Your Secondary Menu

Adding a search possibility to your secondary menu is one of the things you might have tried to do. But unlike the primary menu, the header doesn’t have a separate page within WordPress that helps you add things manually, without having to add PHP code lines to the header.php file of your website.

However, adding a search possibility in your secondary menu can be an interesting thing. Let’s take a look at some reasons on why you’d want to add one.

Offer Your Visitors a Search Possibility From The Start

You have all kinds of visitors on your website. Some of them are looking to explore things and take their time, while others want to find specific information right away. By adding your search field to the secondary menu, you’ll be guaranteed that the visitors who are looking for something specific, have the ability to do that right away. Since a secondary menu is located at the top of the page, the visitors that are in a hurry will appreciate the effort that improves their user experience.

To Save Your Primary Menu From The Search Field

Of course, another thing you could do is add the search field to the primary menu. But in some cases, you might not want to do that. For example; if you want to keep the focus on your menu items or if you don’t want to mix the menu items with the search field. Another reason could be that you already have quite some menu items that make your primary menu look busy, and you don’t want to add a search field on top of that.

Emphasize The Search Field Without Having a Flashy Primary Menu

Most people tend to keep their primary menu sober and make their secondary menu pop. Primarily, because they want to show the obvious difference between the two menus. And secondary, because the secondary menu often has some things they want to emphasize (such as the social media icons).  When you decide to integrate the search field within your secondary menu as well, it’ll automatically be highlighted as well and it’ll stimulate your visitors to search and find exactly what they’re looking for.

Add Search Field to Header PHP File

Now, to actually add the search field to your header as shown in the image below, you’ll primarily have to add something to the header.php file of your website. The code line you’ll be needing is the following:

Go ahead and copy this PHP code line and go to your WordPress Dashboard. Within your WordPress Dashboard, go to  Appearance > Editor > header.php.

search field

You can now place the code line wherever you want your search bar to appear. Since we want it to appear right next to the social media icons, we’re going to show you where exactly to place it in the code. We’ll need to place it right before the secondary menu, the container and the top header close.

search field

Style Your Search Field

By default, the search field looks a bit outdated. You’ll probably want to change some things just to make it look the way you want it to and to make it fit with the look and feel of the rest of your website. These are three things you’ll probably want to change: the search label, the search input and the button input.

If you don’t make any CSS modifications to the search field, it’ll by default look like this in your secondary menu:

search field

Which is obviously not the final result we want to achieve. Luckily, we can make as many modifications to the field as we want to. In the next part of this post, we’ll show you how to modify all the elements of the search field and we’ll also share the CSS code lines to achieve the following result:

search field

Remove/Modify Search Label

The first element that is part of the search field is the search label. This is the text that appears that explains to people that they can search for anything on the website by using the field. However, this label is not necessary. Everyone knows nowadays how a search field works. You can always make the search label disappear by adding ‘display:none;’ to the CSS of that label. Or, you can change the appearance of the label.

The class you’ll be needing to make any modifications to the search label is “.screen-reader-text”. Like shown in the example below, you can disable it from appearing.

.screen-reader-text {
display: none;
}

Style Your Search Input

The next thing you might want to style is the search input. To make any adjustments to this input, place all the CSS code lines between the following brackets:

 input#s
{

}

Style Your Button Input

And lastly, we have the button style as well. To make any modifications to this part of the search field, place your CSS code lines between the following brackets:

input#searchsubmit
{
}

Needed CSS Code For Our Example

search field

After you’ve made the PHP modification, you can instantly achieve the result that is shown above by going to your WordPress Dashboard > Divi > Theme Options > General > And adding the following lines of CSS code to the Custom field:

.screen-reader-text {
display: none;
}

input#s {
border-radius: 5px;
}

input#searchsubmit {
border: 1px solid #000000;
color: #FFFFFF;
background-color: #000000;
border-radius: 5px;
}

form#searchform {
float: right;
}
@media screen and (min-width: 480px) {
#top-header .container {
padding-bottom: 5px;
}

#et-secondary-menu .et-social-icons {
margin-top: 6px;
}}

search field

Result

Now that we’ve been through all the steps, let’s take another look at how your header should look like:

search field

Final Thoughts

In this tutorial, we’ve shown you how to add a search field to your secondary menu. Besides that, we’ve also shown you how to modify the elements within that search field and presented you with an example of CSS code lines that you can just copy and paste for your own use. If you have any questions or suggestions, feel free to leave a comment in the comment section below!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Featured Image by D Line / shutterstock.com

The post How to Add a Search Field to Divi’s Secondary Menu appeared first on Elegant Themes Blog.

Powered by WPeMatico

Ghost 1.0 – The Spirit of Blogging Future?

Ghost wants to be the next big thing in blogging. Like any good WordPresser, I wanted to get my grubby little mitts all over it and see what all the fuss is about.

Originally funded for development via Kickstarter, Ghost is a blogging platform that very recently pushed into its primetime 1.0 release. That’s big news for folks like us, those who want to stay on the cutting edge of web development and publishing.

So the release of Ghost 1.0 was a good spot to dig in and check out how things have progressed since the Kickstarter.

Just What is Ghost?

First off, Ghost is open-source. For WordPress folks like us, that’s great news. But we have to remember that not all open-source is created equal. Multiple licenses exist for distribution, and Ghost is put out under the MIT license, whereas WordPress is maintained as GPL.

You can read about the differences in a couple of places. Unless you’re a developer or themester, the MIT vs GPL side of things may not affect you much.

Other than that, it’s a pretty straightforward publishing platform with a theme marketplace, local development tools, and a slickity-smooth interface that honestly puts the WordPress admin panel to shame in terms of design.

Getting Started With Ghost 1.0

You have two options when starting with Ghost: you can purchase hosting from the parent company through their Ghost(Pro) program (think about it like managed WP hosting), or you can install it on your own host (pretty simple, so far, right?)

Here’s the catch: you get a choice of only six hosts that support Ghost.

Ghost 1.0 Blogging and Publishing Platform

If you’re used to the ubiquity of WordPress, that feels almost claustrophobic.

For my purposes, I signed up for a 14-day trial of Ghost(Pro) to play with the web interface, and I did the local installation, where I could do pretty much whatever I wanted in my own little sandbox with the desktop client.

Installing Ghost 1.0 Locally Stinks

Famous 5-Minute Install, this is not.

I’m a techie kind of guy. I am comfortable with a command line. So when I saw that Ghost’s recommended system was Ubuntu 16.04, my eyes lit up. “That’s what I use!” my mind screamed in excitement. So I promptly followed their instructions, and…

Error. After error. After error.

First off, my version of Node was wrong. Ghost only supports Node versions 4 to 6.5. I was running 8.x. No worries. Install Node Version Manager (nvm), swap to 6.5, easy peasy.

Nope. Now there’s an issue with the SQLite3 installation. The Ghost CLI didn’t install it right (despite it already being installed and updated on my system). Uninstall, reinstall. Same thing.

They said to swap to MySQL then. Okee dokey. Nope, still not going to run. And…somehow in this mess, Ubuntu decided that I didn’t have nvm installed anymore. Ugh.

None of this was hard, mind you–just frustrating.

I take a break, make a sandwich, and swap to my Macbook (running MacOS Sierra and fully updated). I mean, it’s Unix, so it can’t be that different to install.

And it wasn’t. Exactly the same errors happened. In exactly the same order. Node versions. Problems with SQLite3 installation. Problems with MySQL. Forgetting nvm is there.

Ugh.

Eventually, I poke and prod and update and uninstall and reinstall, and things work. Like I said, I’m comfortable in the command line, but I can’t tell you what made it eventually work because I tried so many things.

In the end, it took over a dozen attempts to get Ghost installed and working on a computer. (I didn’t try Windows 10, though, so it may be a better experience there. Let me know!)

Using Ghost

I load things up, hit the localhost URL in my browser, and there’s no admin panel. No way to edit posts. Nothing. I am simply a user. I have a clean website, full of tutorials and pre-filled content, and no way to add my own.

004 - Ghost 1.0 Publishing and Blogging Platform

After looking around a bit, I find out there’s a desktop client. It installs easily (yay!), and it asks for my URL (the localhost one) and a username. I have no idea, so I just type one in, and it creates my blog user automatically.

Weirdly enough, the desktop client isn’t an installer as well. Hopefully in future releases that happens because I cannot see most people going to the trouble I did.

Additionally, the desktop client is the only way to edit and publish. There is no web interface (that I can find) unless you are using the Ghost(Pro) service for hosting. If you go with one of the other hosts, you’ll be using the command line and desktop app.

There’s no mobile app yet, either. So keep that in mind.

After using both interfaces for a while, I am pretty sure they’re exactly the same. I like that a lot. Unified design means a lot to me (and to the Ghost folks, too).

The Editor Itself

In the spirit of really giving Ghost 1.0 a shot, I have written this post entirely in the Ghost editor. From note taking and experimenting, to editing, I bounced between the desktop and web client until finalizing the post in WordPress.

I gotta say, I like it.

Ghost 1.0 Blogging and Publishing Platform

But for folks used to WordPress, it may take some getting used to. You see, it’s a markdown editor, not a WYSIWYG/plain-text editor like we’re used to. You can still use HTML, though, if you’re not familiar with markdown syntax. If you’ve ever left Reddit comments or contributed to Github, you’ve probably seen or used markdown.

Ghost 1.0 Markdown

There are two editing modes: single pane (just the markdown or HTML), and double-paned, side-by-side editor. The double panes are very, very nice, especially if you’re new to markdown–you can see exactly what the symbols do in real time and check your formatting as you go–helps with typos and missing tags and such.

Ghost 1.0 editing double pane

But–and there’s always a but, isn’t there?–because it’s two-columned, even on the fully-scaled MacBook Pro Retina display that I am using, it felt kind of awkward to write in. But then again, I don’t like the WordPress distraction-free mode, either. So there’s that.

Posting and Ghosting

Posting is super easy, and every option you need is a single click away. Open up the post settings, and you get access to the post image, meta data, Twitter cards, Facebook cards, and even header/footer scripts.

Every bit of it is easily edible and understandable.

I have had some issues with URL slugs not working quite right. It will add “-post” to the end of my slugs occasionally, or if I click away from the title field when it’s blank, the slug is forever set to “untitled.” It’s a small bug that will be ironed out in future releases, I’m sure.

Those kinds of bugs are minor annoyances for a hobbyist, but major issues for a large company (which is a major target of the Ghost software) because writers and editors can easily miss that kind of error.

Deleting a post, however, is not so intuitive. There is a single place to delete a post, and it’s at the bottom of those individual post settings. You can’t do it from the post list at all, which needs to be addressed.

I also could not find a way to sort my draft posts separately, just tagged with a red draft icon in the main list of posts. Which again, I am sure will be fixed in the future.

Ghost 1.0 Blogging Software

Ghost 1.0 Feels Comfortable and Clean

Design and the user experience matters to the Ghost Foundation. Using Ghost 1.0 is pleasant, and I feel right at home from the moment I load it up.

The software, both on the front-end and the administrative side feels similar to Squarespace and Medium. If you’ve ever used either of those, Ghost will take you very little getting used to.

The speed is great, there is no lag whatsoever in the editor or display. Even if you go with the default theme (which is all I toyed with), it’s polished and clean enough to use, even if it is pretty cookie cutter.

Ghost 1.0 Theme Example

The Ghost 1.0 release feels like what Squarespace would be if you took the training wheels off, or maybe like Medium if you had full control of the publishing platform.

Ghost may also be what Gutenberg aspires to be in the long-term. And that’s not necessarily a bad thing for the publishing side of WordPress.

Conclusion? To Be Continued…

I really don’t think it’s possible to draw a firm conclusion about Ghost 1.0. It’s a bit early in its life to pass judgment. So I am going to just leave it as a to be continued.

The software itself is awesome, but it’s new. When it was first announced, I saw tons of articles about how it was a WordPress killer. That’s just plain silly.

First of all, WordPress has 13 years of a head start and over a quarter of the internet runs on it. It’s going nowhere.

WordPress is also a content management system. It isn’t used solely for blogging and publishing.

Ghost is.

Ghost is a publishing platform, first and foremost. On the website, the header says it as clear as day.

Ghost 1.0 is a professional publishing platform

They tout themselves as a professional publishing platform, which is an inherently different audience than WordPress targets.

Sure, in a broad sense, WordPress and Ghost are competitors. They’re competitors in the way that Windows and Linux are competitors: they kind of do the same thing, but they aren’t really even in the same market.

You can’t run an e-commerce store from Ghost or use the software as a server endpoint for an iOS app. You can do that with WordPress.

Ghost is not on track for that. That’s okay. That’s not what their niche is. They want to do publishing exceptionally well, and they are on track for that.

So What’s Next for Ghost 1.0?

“Ghost 1.1?” you say. Well, to get it there, the Ghost Foundation will depend on you, actually. Since this is open source software, Ghost wants you to get involved in the development. They actively want you to contribute to the software.

Their team is everywhere, and the support is awesome. So no matter if you prefer Github, Twitter, Slack, whatever–someone will talk to you about Ghost, your experience with it, and how you/they can improve it.

My Final Take

Ghost does so much well. It’s fun to write in, and once it’s installed, it works incredibly well. But that installation…boy, oh boy, was that awful.

If the team behind Ghost really wants to bring this to WordPress-level ubiquity, they need to tone down the “for coders” mentality of it a bit.

WordPress attracts a lot of people because of its ease of use. You can do a lot with just a knowledge of HTML and CSS.

By contrast, Ghost uses Handlebars as the templating language and works primarily in JavaScript via Ember and Node. There’s a good chance that stack could potentially alienate some users.

Ghost 1.0 is built on JavaScript

That said, they’re not necessarily targeting small businesses and hobbyists like WordPress does. So having an entirely JS based stack, from development to the end-user could draw a lot of business attention (and future-proof their product, given the explosion of JavaScript growth in recent years).

Outside of picking that nit, installation for self-hosting really, really, really, really needs to be simplified. It may never get to WordPress-level simplicity, but it shouldn’t take someone who understands bash and the command line to take a dozen stabs at it over two different operating systems (and still end up failing entirely on one OS).

Who You Gonna Call?

Not Ghostbusters, that’s for sure. Not this time. This is one ghost, I’ll happily let haunt me for a while.

I really, really like Ghost 1.0. Or maybe Ghost’s potential. At this stage in the game, that’s pretty much the same thing.

What we have in this release is a fantastic product that, by the time it hits release 2.0 or 3.0, could be a real contender in the publishing arena.

Article thumbnail image by gst / shutterstock.com

The post Ghost 1.0 – The Spirit of Blogging Future? appeared first on Elegant Themes Blog.

Powered by WPeMatico

Divi Plugin Highlight – Mobile Menu Customizer

Have you ever wanted to style your mobile menus independently from your desktop menus? Divi’s menu system includes settings for mobile that places the menu within a hamburger icon, but what if you wanted to use a different header for mobile, add new styling, or even animate the menu’s opening or closing actions? You can do this with a third-party plugin called Mobile Menu Customizer.

In this plugin highlight we’ll take a look at Mobile Menu Customizer from Divicio.us and see what it can do and the effect it would have on your website’s loading time. The images in these examples were taken from Unsplash.com.

Installing Mobile Menu Customizer

You must first unzip the downloaded file. Within it you’ll see three files:

  1. Changelog
  2. Divi-mobile-menu-customizer
  3. README

Upload and activate the divi-mobile-menu-customizer file.

Within the plugin menu in the dashboard is a new link called DMMC Plugin License. Click this and enter your license key in order to receive updates.

New Theme Customizer Settings

A new menu item is added to the Theme Customizer called Mobile Menu Customizer. Selecting it automatically displays your website in a mobile view using a mobile menu. You can also select tablet mode. Within the menu are seven menus.

Menu Header Settings

Menu Header Settings include settings for the header background color, text and icon color, icon format, type text for open and closed menu, text size, icon size, menu bar font style, and the dropdown menu top offset.

I’ve changed the header background color and text and icon colors. I’ve selected to show the text and menu icon, entered the text I want it to display, and selected bold and italic font styles. I’ve left the text and font sizes at their defaults. I could also show the icon on the left and text on the right, just the text, or just the icon.

For the open menu I’ve entered text to display and selected to show an X icon. I’ve also set the dropdown menu top offset to 5 just to show that it is adjustable.

Menu Settings

Menu Settings include fixed menu, fullwidth (in portrait mode), padding, top bar background color, text settings, and border settings. I like that it automatically shows you the website in portrait mode, but I didn’t see a way to view in landscape mode, so I’m not able to see the effect of the full-width menu.

I’ve set it to fixed so the menu remains on screen on scroll. I’ve set the top bar and menu background colors, and centered the text. You can see that I’ve set the opacity to show just a little bit of the background.

I’ve also increased the spacing and font size, font colors, and adjusted the border width, radius, and color. In this second example I’ve adjust the top border radius and right and left border width. It would be helpful if the small sliders had a button to take them back to their default settings.

Menu Item Settings

The Menu Item Settings apply to the individual items within the menu. Adjust the margins, height, background color, border width, border radius, and border color.

In this example I’ve increased the margins to 4, set the item height to 22, set the border width to 5, and the border radius to 8 to give it a slightly rounded corner.

Submenu Settings

Submenu Settings allow to make the submenu collapsible, change the colors of the background and links, and adjust the font size and style. I’ve adjusted the colors, increased the font size from 14 to 16, set it to italic, and made it collapsible.

Shadow

Shadow allows you to control the in and out direction, X and Y offset, blur, spread, and color. I’ve set this one to outset with an X-offset of 20, Y-offset of -17, a shadow blur of 5, and spread of 10. I’ve also darkened it to make it stand out.

Gradients

Gradients can be applied to the menu header and the menu itself. It gives you three colors with a stop location for each. You can also change the angle.

This is a look at the menu gradient.

You can also display a different gradient for the menu and menu header. Here’s the same gradient with a different angle and stop locations for the menu header.

Animations

Animations provides two drop-down lists – one for the open animation and one for the closing animation, with 10 animations each. Animations include fade, shrink, zoom, flip, etc. You can use the in and out animations in any combination you want.

This one uses Fade In Right and Fade Out Left.

This one uses Grow and Shrink.

This one uses Flip In X and Flip Out Y.

This one uses Lightspeed In and Fade Out.

Using the Settings Together

Up to this point I’ve highlighted each menu item separately so you can see what they do. Here are a few examples of how they look when they’re combined.

In this example I’ve adjusted the menu background and link colors, swapped the menu icon for text, changed the color of the bar, adjusted the menu item height, provided a top border, set the submenu fonts to bold and italic, set a submenu color, and provided a shadow using inset and adjusted the settings so that it just shows.

This one uses an offset border width with a radius of 12 to round the corners. The border color is red. I’ve increased the font size and width to the max. The background is black with an opacity of .87. The header is black with an opacity of .55. The menu link is red to match the dropdown menu border.

This example increases the font sizes and uses various shades of red gradients for both the header and dropdown menu. I’ve set the top bar color to a dark shade of red to match. I’ve also adjusted the menu height.

This example uses a dropdown menu top offset of 100 and is not fixed. The letter spacing and font size are maxed out. The menu border radius is set to 50 and border width is set to 5. The text is right-aligned. The background is white with an opacity of 30.

The menu item border width is 1 and the radius is 25. I’ve used the same black background but with an opacity of .08 and the border opacity is .12.

The submenu settings have a background opacity of .55 and a white font. The shadow stands out just a little using the same black with an opacity of .17. The shadow offset is set to 16 for both x and y. I’ve placed a gradient in the header using black with various levels of shade and opacity.

A couple of small adjustments changes the look completely. This one uses bold fonts that are centered and a background opacity of .90.

Here’s a look at the menu in tablet mode. It’s a good idea to switch between the modes as you make your customizations.

Update – Two New Settings

Before this article published, two new settings were added: Background Image and Menu Icons.

Background Image Settings

Background Image Settings allow you to upload an image to place behind the drop-down menu. You can choose its size, position, if it repeats, and how it clips for the border.

Menu Icon Settings

Menu Icon Settings allow you to choose an icon for each menu item, and adjust the size and location.

Mobile Menu Customizer PageSpeed Test

Since the plugin is rendering a lot of effects with all of the features enabled I decided to test it using PageSpeed Insights. With the plugin disabled my test server gets a score of 70. I’m using no minifying or cache plugins.

With plugin enabled the score went from 70 to 69. I tried the test twice and got the same result both times. It’s worth 1 point to have this level of customizations.

License

You can install the plugin on unlimited websites for both you and your clients. It includes lifetime updates and 6 months of support. Documentation is provided as videos in the developer’s website.

Final Thoughts

Mobile Menu Customizer adds a lot of features to style the mobile menu. I found the customizations easy to use. I wanted to see menu icons included and now they have been. I would like to see a few features for the logo. I would like to see the customizations available for desktop menus as well. The plugin does not work with Extra.

The customizations look great and there are a lot of settings to choose from. I like that you can style the header and menu independently. If you’re interested in customizing your mobile menu’s styles and adding some animation, Mobile Menu Customizer is worth a look.

We’d like to hear from you. Have you tried Mobile Menu Customizer? Let us know about your experience with it in the comments.

Featured Image via Francois Poirier / shutterstock.com

The post Divi Plugin Highlight – Mobile Menu Customizer appeared first on Elegant Themes Blog.

Powered by WPeMatico

Canadian Web Hosting [Ad]