#but on the site when i highlight text to change a little popup shows and blocks the available options so i can select them anyway.
Explore tagged Tumblr posts
theinheriteddutchess · 1 month ago
Text
Different looks for site and app 😭😭:
Tumblr media Tumblr media
0 notes
Text
Merchandise Ordering Part 1
When I first became a fan of S.I.N.G. I wanted to purchase the official merchandise and albums to support the girls. Unfortunately, I do not live in mainland China. There is very little available for sale outside of China. I have only ever found one album and a few singles available on iTunes. There is an official S.I.N.G. store in China, but I was told it was impossible to purchase from it and have the merchandise shipped overseas. However, I was able to successfully purchase their 2020 calendar and have it shipped to me. It was by no means an easy process to figure out, but it did work. In the following posts, I hope to document my second attempt at purchasing an item from the store so that others can purchase items if they wish to.
Disclaimers: 1. This has worked for me once. I can make no promises that it will work for you. All I am providing are the steps I used as an aide to help you if you should like to try. 2. There were a couple of times where it looked like I might have hit a dead-end and would not receive the product. I would not recommend trying this with money you can't afford to lose if it fails. Similarly, I would suggest ordering one item at first to make sure you can do it. 3. I live in the United States, if you want it shipped to another country these steps may help you but I can't give you a step-by-step for your country since I have no experience with that. 4. I do not speak/read Chinese. 5. I have no affiliation with S.I.N.G. or their store. They could change how it works at any time and this could all be meaningless.
Notes: 1. I used the Chrome browser to do this. This is important for a couple of reasons. One being the ability to right-click-Translate. Do not turn on auto-translate though, there are some times where you need the original text and may have to copy and paste it out to another tab that contains Google Translate. 2. Since this is my second time through, I already have an account. I can't easily show the steps of registering for an account since it is tied to my mobile number and I only have one mobile phone. This is true of both the store site and Alipay (the payment site that processes your credit card). 3. So far I have not been able to tie my email address to the account. So I receive no updates at any steps in this process. I have to go back daily to check on the status of the order. 4. The prices have a symbol next to them that resembles the Japanese Yen symbol. These prices are NOT in Yen. They are in Chinese Yuan. 5. I have not found CDs available in the store. Just fan merchandise. This was highly disappointing.
The first step: Go to the store. https://shop390505445.taobao.com/
Tumblr media
You can use the Translate function to try to help you navigate. But keep in mind that it will not translate text that is in images. So that black bar that contains the categories to shop by won't translate.
For this order, I am going to try to order the 4th Anniversary Photo Album. I clicked the All tab, and it opened in a new tab:
Tumblr media
At this point it will prompt you for a login. You can close the login window, but every time you try to see products it will prompt again. Translate does not work on the popup.
Tumblr media
Click the four Chinese characters under the big orange button.
Tumblr media
Translate:
Tumblr media
Click the "Agree agreement" button.
Tumblr media
Pick your country from the dropdown. Fill in your mobile number in the box next to the drop down. Click and drag the verification bar to the right (I think this is one of those "I am not a robot" things). Click Next step...
Unfortunately, at this point I can't walk you through much more of the registration process because I did it a month ago with my first purchase. It sends you a text message with a number, you enter it on the next screen and follow the prompts from there. The auto translate got me through this part fairly painlessly.
Once you are done with the registration, you can go back to the second tab and login. Refresh may also work.
Tumblr media
Translate:
Tumblr media
Clicked on "By new products"
Tumblr media
Clicked on the product image "[Spot] SING Women's Group Limited Four-Year Limited Photo Album SING's First".
Tumblr media
Translate:
Tumblr media
Below the first orange bar you'll see "Delivery". You want to change that to "overseas".
Tumblr media
Then choose "overseas" again
Tumblr media Tumblr media
Unfortunately, at least for me, at this point the Add to cart button did nothing. If you click on the icon at the end of the browser address bar with the G in it, a little dialog appears and you can tell it to 'Show Original', which will put the text back into Chinese. At this point, the dark orange button that used to say Add to Cart will work. If you have created an account previously, like I have, it will now prompt you to login.
Tumblr media
Either way, you should end up at this page:
Tumblr media
Translate:
Tumblr media
Go to cart settlement
Tumblr media
Click the check box next to the item so it highlights and puts a total at the bottom. It is important to note that the price is still in Chinese currency. Why it has the US dollar symbol? No clue.
Tumblr media
Click the dark orange button next to the total.
Tumblr media
Translate
Tumblr media
Note: It defaulted in my address. You will have to enter your address at some point:
Tumblr media
This screen resists translation. The grey bar at the top is the country where you live. Those two characters in black are for United States. The blue text is a link to a popup to pick your country. Click the blue text.
Tumblr media
First off, the letters across the top may or may not have anything to do with the first letter of your country in your alphabet. You have two options, you can either go to Google Translate, put the name of your country in the left (in your language) and pick Chinese for the output, then go through the tabs until you recognize the same symbols, or you can select the text in this box, copy and paste it into google translate and match them up. Below is what I mean for the second option:
Tumblr media Tumblr media
That was probably the second hardest part I had when I made my first order. Once you've picked your country, you'll need to click the dark blue bar at the bottom. The first dropdown back on the address screen is state and city (at least for the US).
Tumblr media
The next box is your address under 'Detail'.
Tumblr media
The next box is your postal code. The next box is your name. It is not your user name like it implies, it is the name that would be on your postal address. The mobile number should default in. Click the Make Default button if it isn't already checked. Click Save. Now you are back here:
Tumblr media
Make sure 'Forwarding by air' is checked, or you're flying to China to pick it up. A tempting, but considerably more expensive method. Scroll down.
Tumblr media
Submit order Now, if you see this page, you've been sitting around on these pages too long taking screen shots like I have.... It's the time out error page.:-(
Tumblr media
But if you're lucky, and it works, you should be brought to a page to create an Alipay account. Again, I already did this so it won't let me do it again. It again wants your cell phone number. An important note: When creating the account, the password is a series of numbers. Make note of these numbers. Don't just let Chrome store them for you. Much later in the process, once you receive your merchandise, you will be prompted for those numbers in a field that Chrome doesn't recognize as a password field, so it won't auto-fill. You'll have to go back to your password management page (remember your google password) and dig up the password. Third most frustrating thing in this process.
Tumblr media
Enter your credit card number, click Continue You should see a screen similar to this:
Tumblr media
Translate:
Tumblr media
You should be able to fill this out after it's translated. confirm payment
Tumblr media Tumblr media
Your order is complete. Now what? Hover over the menu item at the top "1 taobao" and click on "I have bought baby". It is important to note here that for some reason the Chinese word for things you have bought translates to baby. You'll see it multiple times. They are not mailing you a baby. Sorry to disappoint.
Tumblr media
Click "Order details" in the right column of your order.
Tumblr media
Translate:
Tumblr media
Scroll down a bit:
Tumblr media
So now you wait. You will need to return to the site on a regular basis to check the status of your order.
Continued
1 note · View note
hydrus · 6 years ago
Text
Version 316
youtube
windows
zip
exe
os x
app
tar.gz
linux
tar.gz
source
tar.gz
I had an excellent week. I was able to cleanly 'do' the big gallery overhaul, resulting in many changes. This is an important release for anyone who does a lot of downloading.
gallery update
So, the meat of the gallery overhaul is complete! Where available, subscriptions, the gallery downloader, and the url downloader will now use the new parsing system to parse 'thumbnail pages'. The new pipeline has numerous improvements behind-the-scenes and is another important step in allowing users to create and share their own downloaders for new sites.
I won't go into all the details here, but anyone who has poked around the new parsing system's advanced dialogs will now see that gallery pages are now featured.
The important change for most users is that the main gallery downloader page is now a 'multi-gallery' page. It looks much like the multi-watcher for thread-watching, where the one page manages multiple queues simultaneously. Gallery download pages now list every query you enter separately and work on them simultaneously, reducing overall ui load significantly and making it much easier to pause one query without affecting others, spot queries that return 0 results, avoid big chokes and delays caused by larger queues, and manage the results you finally get as different pools. The old single-download page can no longer be created--your existing gallery pages will be updated to multi-pages on update (your existing queues will survive as generic 'updated from' entries, but everything will start paused, so you'll want to go through them, verify it all looks good, and then unpause when you are ready).
And like the multi-watcher, gallery pages can have a 'highlighted query'. Double-clicking on a list entry will show its current thumbnails in the media panel and show its full details in a panel below the main list. This new panel is very similar to the old gallery page's ui and lets you see downloads as they happen and inspect the file import queue and gallery log and so on in more detail.
Gallery download pages are now also downloader-agnostic. You open them just as 'gallery' from the F9 new page popup (there's also a new shortcut for them, under the 'main_gui' set), and they have a new 'gallery selector' button that lets you change the source for the next queries you enter. The gallery selector means that one gallery page can handle queries for multiple sites simultaneously! This new button will always default as 'deviant art' for now, but when I do the last stage of this downloader overhaul--the 'searcher' step--I will be able to add some reasonable 'favourite' options here.
Subscriptions can also use the new gallery parser, and they have the neater 'gallery selector' as well. You shouldn't notice any difference with how they operate--they should just run as before. But after some thought, I have reduced subscriptions' maximum 'first time' and 'regular' file limits to 1000 and written some help on the edit panel to explain this change. tl;dr is: use download pages to do big one-time syncs, use subs to keep up with new stuff. If this 1000 change affects you, please check out the help and feel free to ask me about it.
URL downloader pages also support parsable gallery urls. They only do the single page you add (i.e. they don't start a whole new multi-page search, but this capability will come), but they'll suck up any drag and drop for any working parser. For this week, I've written gallery parsers for danbooru, gelbooru (0.2.0 and 0.2.5), and e621 to get us started. Like with 'file pages', I will roll out more gallery parsers over the coming weeks until all default downloaders are using the new system.
A lot has changed. I have done a whole bunch of testing here and I am overall happy with it, but if you encounter problems with an unusual query or site or anything else, please let me know. If you are the sort of user with 200k items waiting to download in your current session, I strongly recommend you ensure you have a good backup before you update. This multi-gallery page also makes it easier than ever to create a session with lots and lots of files, but I will reiterate that the client tends to get laggy at 50k+ items, so take it easy and make a schedule for big stuff if you can!
There is a little more work to do here to support some unusual situations like tumblr, but the big hump of the downloader overhaul is now done. The 'searcher' change will be much simpler (it is basically just converting samus_aran -> http://safebooru.org/index.php?page=post&s=list&tags=samus_aran and some ui to manage it) and then it'll just be ui cleanup and figuring out an easy-mode share object, and redoing some help, and then we can talk about what we want out of a login manager (including whether it should be put off for something else).
multi-watcher
The multi-watcher also has a new 'highlight' panel just below its list. In a similar way, it has similar ui to the old single-page watcher and lets you inspect the file list and gallery (thread) log. Single watcher pages are removed this week, so all existing single watchers will be updated to multi-watchers. A variety of related single-watcher 'page naming' options and so on are also removed. Rather than be redundantly complicated, hydrus now just has 'url downloader', 'watcher', 'gallery', and 'simple downloader'.
full list
gallery:
gallery url classes can now be linked to parsers!
if parsers are linked, gallery pagewalk can now work on the new parsing system. gallery import pipeline has been significantly updated to reflect this
gallery import objects are now 'multiple' gallery imports, much like the multi-watcher, with each separate query having its own entry in a list (they also run in parallel!)
the multi-gallery list will show file/gallery pause status in slender columns, and will show a 'stop' character when gallery parsing is done
wrote a 'gallery selector' button and added it to the new multi-gallery page, so you can spawn queries for ~different sites~ on the same import page! it always defaults to 'deviant art' for now, but when the next 'searcher' overhaul step is done, this will be customisable
the new page selector and related 'pages' menu is now simpler--with the new selector, you just select 'gallery'
added 'new_gallery_downloader_page' shortcut action to the 'main gui' set to allow quick opening of this new page type
wrote a 'gallery import panel', which reviews a single gallery import stream, and added it to the multi-gallery page to show the current highlighted query
as all gallery imports now run in parallel and work on the new system, the now almost-useless 'cancel' gallery pagewalk button is now removed
with the wider availability of the new gallery log for file count and error reports, shifted around and smoothed out some gallery status text presentation
improved the auto url_class->parser linking 'try to fill in gaps' logic to work with gallery urls (this was surprisingly complicated)
fixed a misc stupid waste of time in auto url_class->parser linking
many misc updates to gallery pipeline
.
subscriptions:
wrote a new gallery pagewalk pipeline for subscriptions, which still does oldest-to-newest url addition and obeys file limits and so on
numerous subscription pipeline and error handling tweaks and improvements, particularly in regards to the new code
subscriptions now have max initial and periodic file limits of 1000. existing subs with >1000 or infinite will be cut to 1000. there is a help button on the edit sub panel to explain why you should do large syncs with the manual downloader and not subs
the ugly and dangerous-if-you-scroll-in-the-wrong-place gallery selector mismash control in the edit subscription panel is now replaced with the new gallery selector button
fixed an issue where the edit subs panels could sometimes say '48 years ago' (i.e. displaying a literal time delta since 0, 1970) on initial timestamps
juggled some 'periodic limit' reporting logic to skip an unusual false positive that affect hentai foundry subs for now and more in future
.
urls:
the url downloader now accepts gallery urls and will receive drag-and-dropped gallery urls. at the moment, it only parses the one page (i.e. it doesn't start a new 'searching' pagewalk) and sends the parsed links to its file queue
.
watcher:
finished 'watcher panel', which reviews a watcher, and added it to the multi-watcher page to show the current highlighted watcher
the single watcher page is completely removed--it is only the multiple watcher now. all singles will be converted to multiples on update
some single-watcher options (like watchers naming their own page tabs and the [404]-style page name prefixes) are removed
multiple watcher panel now lists file/checking pause status and has separate buttons to control these paused statuses
fixed some misc watcher highlight code--highlighted watchers should correctly publish to the page from the start of session load now
improved some 'repage' logic in how highlighted threads get removed
.
misc:
discovered a scroll-setup parameter that stops janky scroll-to-click-focus behaviour on all the new scrolling panels, thank the LORD
improved some 'can't parse' error handling for post url parsing
reworked how all importers present their network jobs to the ui, including fast response if the switch happens during a job
in prep for searcher switchover where all downloader sources will be harmonised into one system, booru identifiers now present in several ui locations as 'name', not 'booru: name'
updated the danbooru parser to deal with the new 'next page' markup they use
wrote a gelbooru gallery parser that works with 0.2.0 and 0.2.5 gelb sites--an ancillary issue where gelb-related downloaders could sometimes not accurately figure out the magic '42' next-page offset is hence now fixed
wrote an e621 gallery page parser
these sites hence now support single-page gallery drag-and-drop
added url classes for artstation gallery url and its api counterpart, but didn't go further yet--we aren't quite there with api pagewalking just yet
updated deviant art gallery url classes
added an e621 'search initialisation' gallery url class to improve some future drag-and-drop stuff
url normalisation no longer cuts off 'www.'-style prefixes
url comparison is more careful to test 'www.'-style prefixes, so a file import cache should recognise that 'http://www.blah.com/blah' is the same as 'https://blah.com/blah'
did a bunch of refactoring to further split up the bloated ClientImporting.py
fixed some misc downloader layout that may have been hiding some texts previously
some multi-watcher and multi-gallery events like add/pause query should be a bit snappier
in the parsing ui, url and title priorities are now 50 by default
prepped a little subscription unit test code for when searcher object is done
misc downloader layout improvements
misc listctrl refactoring
next week
A lot of stuff I overconfidently said "I will check this this week" about has been left in the dust of this unexpectedly large job. I want to spend a week focusing on this smaller stuff and catch up back to regular schedule.
2 notes · View notes
jvzooproductreview-blog · 5 years ago
Text
Maxconvert Review & 12% OFF Coupon
Tumblr media
MaxConvert Review -- AI-Based Personalized Notification Technology That Happens Any Site, Website or Landing Page Into A Personalized Engagement, Leads And Sales Magnet Together With ONE lineup Of Code.​
Inside this Web App Inspection, you are going to see about Maxconvert. That really is an impartial maxconvert inspection after obtaining accessibility from the MaxConvert Owner Dr. Amit Parikh.
What Exactly Is Maxconvert?
MaxConvert is online earnings and contributes converter software you could use for shifting over one networking arrangement to the next. It will not incorporate any form of downloading or institution. Rather, you may go to the official site of MaxConvert and then begin the shift procedure.
Once we said earlier, MaxConvert could be your ideal option once you amass leads and create sales. Evidently, you'll find always a handful of highlights which we had loved within this period and also a huge part of these high lights create MaxConvert most likely the best approaches to change-over sound and video issue totally free.
To be certain that you realize, MaxConvert is truly a pile of apparatus. You are going to see apparatuses for sound company transformation too. By way of instance, you may use MaxConvert being a WAV to MP3 converter too.
You merely require a sign to dispatch each of these brilliant high lights. As you've got a sensible inspection of MaxConvert, we'd consider several select high lights that it offers.
Read MaxConvert Customer Review
The Transformation Procedure
MaxConvert offers most likely the most effortless strategy to change-over video recordings to distinct associations. You're able to change over any recording to video or sound arrangement.
By way of instance, to the off likelihood you own a video rendition of this song, it is possible to without much of a stretch to get that the MP3 or WAV sort. Whatever the event the choice of settings, it seems exceptionally straightforward to do exactly the shift utilizing the MaxConvert site.
After you disconnect the official site of MaxConvert, you're able to relocate the record you want to alter over. Or on the flip side, it lets you use a standard file program. At the subsequent stage, you may pick the goal sound or video goal designing.
Whenever you are put, hit on the Convert grab to keep on with the conversion.
Since you most likely understand, you want to move and download articles between your MaxConver servers. It may take a little more on the off likelihood you have a moderate worldwide web institution.
That said, MaxConvert does exactly the shift just work on astonishing velocities. That you never have to worry over the lack of implementation here.
To put it clearly, we believe the video shift by method of MaxConvert is only remarkable.
Now, I'll reveal precisely the way MaxConvert works. This really is actually the member's area as soon as you sign into.
•Produce Tidy and Sticky Bar-S
These would be the chief features of this software MaxConvert.
You may either pick in their Gallery or make your self.
This can be actually the popup builder the truth is.
A wonderful thing is that MaxConvert is built Free-Form Editor therefore that you may drag & drop together with freedom.
You may produce a conversion goal because you desire.
And after that choose the way that it displays online.
Yet another amazing thing that you ought to be aware of is that it can help you activate your own audiences. Thus, you won't reveal just a single sort of popup into a current market, you also can show a number of one.
Even as we said, we now have a handful of marvelous high lights, advantages, and features we within MaxConvert. You are also able to be determined by those high lights with respect to lively and uncomplicated video modification.
From adding the video file to downloading the return album, what's lively and simple.
Regardless of whether you're entirely new into the world of record rankings, you'd believe it's valuable. Together these lines, once you want to change past a video to MP3 or distinct structures, you ought to not be one master from the domain of video layouts.
•Straight-forward Process
That you never have to download or present any such thing in order to work with MaxConvert. Rather, you're able to move to the site, move the file and then download the changed over stuff.
Making matters simpler, MaxConvert does not require any registration or sign into. You're able to keep to change downloading and over recordings as you'd like, without confinements, therefore.
•More comprehensive Service
With respect to recording group service, MaxConvert truly rivals the job field spouses. Inside this video-converter tool, you also are able to change within the video right into 18 unique structures in video and sound classes.
That really is incredible once you must modify within the video to get not quite famous gadgets. Thus, you wont need to worry more than stigma whilst utilizing MaxConvert.
To make use of MaxConvert, then you want to move the substance. None the less, the point requires enough effort to make certain your documents are guarded. All of the moved records are erased the subsequent three to four hours.
It signifies that, even when there should appear an occurrence of almost any problem, your advice will have stayed careful. In any case, once you're shifting over some shrouded files, you're able to stay certain.
Contrasted with additional internet video converters, MaxConvert does not set lots of limitations. You're able to change download and over exactly the very same number of sound or video documents while you want.
The government will not throttle speeds. You'll have the choice to make use of the most useful rates your ISP may give. It signifies that obtaining the previous yield will be easier than you ever guessed.
To wrap up things, MaxConvert is obtainable over, you understand. That you never take a PC to modify over files utilizing MaxConvert. Simply sign up on utilizing your mobile phone and also be careful of business.
•The Most Important Thing
Together these lines, we've already been using MaxConvert to get a range of video shifting within missions.
Moreover, we all can say it is exceptional in contrast to additional internet converters you'll be able to buy now. It needs to become iterated such a huge on the web device was made accessible for nothing whatsoever.
Without enlisting or registering, you can now don't hesitate to modify over video documents to sound/video records in associations that are advantageous. Moreover, once we said, MaxConvert is, in addition, obtaining a handful of unique tools the package. By way of instance, you are able to change over pictures and sound documents too.
The Way To Utilize MaxConvert?
Get hundreds of ready-to-use notification templates to pick from based on your own aim. They truly are lovely and assembled only to procure you additional conversions & profits.
Have complete freedom to create an effort for virtually any target -- just edit or add whatever text, picture, picture or count down timer & a whole lot more. It's simple and quick.
Know user behavior & disclose your absolute best providers to this targeted audience.
MaxConvert Is Still An (Artificial Intelligence) AI-Based Personalized Notification Technology That Happens Any SiteWebsite or Landing-page into A Personalized Donation, Leads And Sales Magnet Using One-line Of Code.
please, browse during my frank overview of this before choosing to gauge the flaws and features of this.
In the event you buy MaxConvert during my link, then you're going to receive appealing and special bonus bundles.
Ps: For those who have any questions you want to ask about MaxConvert or you would like showing your feelings and thoughts relating to it.
please, don't Hesitate to relay your Opinions, hints or corrections., I will respond for you personally and thoughtfully. Thanks!
If you would like to save your self Your Own Time & Money on Agency for Leads & Traffic then here may be the best Program you ought to be searching for. It is going to easily can help you and your customers to build FREE traffic leads and earnings from Lookup Engine.
Maxconvert is sold with a 1-month money-back guarantee & 1 year together with live video lessons,, youan spend your cash with no risk.
Read More
VoiceBuddy Review: Upto 50% Off Coupon 
https://www.reddit.com/user/SammyBelose/comments/e72gyx/maxconvert_review_oto_coupons_bonus/
Resources
https://sammybelose.com/web-application/maxconvert-review/
0 notes
siliconwebx · 6 years ago
Text
Divi Plugin Highlight: Simple Overlay Solution
Simple Overlay Solution is a third-party plugin for Divi that makes it easy to create full-screen overlays, popups, and mega menus with the Divi Builder. Add multiple overlays to any page. Choose between a click or an automatic timed delay trigger, a light or dark loader, and a light or dark background. Style the close button, or create your own background and buttons with the Divi Builder. Each overlay has a 30-day cookie.
Simple Overlay Solution
Upload and activate the plugin as normal. Then, you’ll need to activate the license. In the dashboard menu, go to Settings > Divi SOS Activation and enter your API key and email.
Import SOS Samples
The SOS plugin comes with a set of demos as a JSON file that you can import into the SOS library. First, unzip the download file to access the JSON file. These are great to get you started.
In the dashboard menu, go to Divi > SOS. Select Import & Export.
Import the JSON file like any layout.
You now have 5 demos in the SOS library. You can see the demos at the developer’s website.
Creating SOS Layouts
SOS Layouts are also created in the SOS library. Go the library and click Add New.
Name the layout something that makes sense to you. Choose Layout for the Layout Type.
Select SOS Layouts for the category.
I chose a premade layout and then selected the Contact page from the Resort layout pack. To the right (or at the bottom if you’re viewing with visual mode) is the layout settings. This gives you the HREF code for the layout so you can trigger it on any page (anywhere that allows for a URL). This is the link you’ll use for buttons, text, etc., to trigger the overlay.
You can also have it to show automatically (this opens a setting for time and to enable a cookie so it knows the visitor has seen the overlay or popup). Set the transition to fade, slide, or none. Choose a light, dark, or no background. Select a light or dark loader color. Select whether or not to show the close button. You can style the button and its background.
The loader can be light or dark. Here’s the dark loader over a light background.
Example SOS Overlays
I’m creating an overlay that will show booking information when the visitor clicks on the Book Your Getaway button. Add the link to your button URL in order to trigger the overlay.
I set the section’s background to transparent, chose a light background in the SOS settings, and customized the layout to use only one of the sections. Clicking on the Book Your Getaway button opens the section to book the stay. The background includes the white overlay. I’ve also added the close button and styled it to match the layout. The layout is placed at the top of the screen and takes the full width. This can be customized with padding.
I’ve added a little bit of padding to the top of the section. I’ve also disabled the background so I can control it with the Divi Builder.
For this one, I’m using the contact form from the same layout. This time, I’ve added a box shadow to the bottom row so it will stand out from the overlay’s background.
I added the link to a button on the same page as the first overlay (you can add as many as you want). This one opens a contact form when they click on the Message Us button.
The result looks interesting. I didn’t add a close button to this one. The visitor can click anywhere off of the form to close the overlay. I’ve added a background to the row and set the opacity so just a little of the background shows through.
This one uses a section from the Investment Company layout. I want to create a popup with a call to action. I’ve set it to show automatically with a 1000 millisecond delay. When showing automatically, you don’t have to add the link anywhere. It automatically shows on every page. I’ve also set the cookie to only show the popup once every 30 days.
The popup shows 1 second after the page loads. This creates a CTA as a popup, and it will only show once every 30 days. You can’t tell in this image, but I also gave it a parallax background, just because. This allows you to be as creative with popups as with any page design.
I’m moving the close option from the button in the top right corner to a button created with the Divi Builder. I cloned the button from the layout, changed the text, and added the close link to the URL.
The result is a clean design that works great as a CTA.
I went back to the design and added a new background and a button that opens another page.
For this one, I created a newsletter popup based on the Esports layout. I’ve set the popup to open automatically after 30 seconds. The background is set to dark and the loader is set to light. I will also include a close button using colors from the layout.
The subscribe popup looks great and fits perfectly within the site’s design because it’s actually from the site’s design. I like that it can use regular Divi layouts to create the popups.
Mega Menus
You can also create mega menus with SOS. Create a custom link as a menu item and then add the overlay’s link to the menu item’s URL.
I’ve added the overlay to the About link in my slide-in menu. You can have a different overlay for every link in the menu if you want, and they can be anything you can build with Divi.
Simple Overlay Solution Price
There are two licenses for SOS. Both have a one-time fee and include lifetime updates.
1 website and 1 dev site – $25
Unlimited websites – $45
You can purchase SOS from the developer’s website.
Ending Thoughts
Simple Overlay Solution is easy to use. The controls simple and intuitive. Building the overlays is almost the same as building a page with Divi. If you can use the Divi Builder you can use SOS. The Divi pages load fast because the overlays are not preloaded. Overlays and popups also load fast.
I like that it has a cookie. This gives you some control over your popups so the same visitor won’t have to see the offer every time they visit the website. I’m sure it wouldn’t be easy to do, but I’d like to see a few cookie options. For example, maybe set it to show once per week, once per day, twice per month, etc. A few loader options would be nice, too. Maybe different choices and color customizations. I’d also like the ability to exclude a page from showing the automatic overlays.
I like that a regular Divi button can be used for the close button. This opens up a lot of design possibilities and you’re not limited to using the built-in button. If you do want to use the button, it does have a lot of color options.
SOS is an easy plugin to recommend. If you’re interested in an easy way to create overlays, popups, and mega menus with the Divi Builder, Simple Overlay Solution (SOS) might be the plugin you need.
We want to hear from you. Have you tried the Simple Overlay Solution plugin to create overlays and popups? Let us know what you think about it in the comments.
Featured Image via Bakhtiar Zein / shutterstock.com
The post Divi Plugin Highlight: Simple Overlay Solution appeared first on Elegant Themes Blog.
😉SiliconWebX | 🌐ElegantThemes
0 notes
templified · 6 years ago
Text
Best WordPress Retail Themes
New Post has been published on https://www.templified.com/best-wordpress-retail-themes/
Best WordPress Retail Themes
We know, running your own business is a big, big challenge.  That’s why you need the perfect retail WordPress theme to help you sell your products.  WooCommerce is one of the best themes for selling retail products and the selection of themes you can choose, well, it’s exhaustive.  High quality retail themes come in all shapes and sizes, so what’s the best?
How do you know where to start?  Well, we hope you start with our list, the freshest themes around, updated constantly.  And if you’re here, I guess that’s exactly what you’ve done.
If you’re looking to get started with eCommerce, we think WooCommerce is a perfect choice.  Why?  Well, first of all it’s free.
WooCommerce was forked from Jigoshop and since then, it’s come a long way to become the most popular and flexible solution for selling products online.  Whether you’re selling digital downloads or tangible products, WooCommerce can help you set up a shop quickly.  The learning curve is really fast with WooCommerce too, so you won’t spend weeks or months trying to learn how it works.
That means you’ll have more time to fine-tune your website and spend your time running your business, not learning all of the ins and outs of the software itself.  If you’re selling jewelry, clothes, electronic products and gadgets, digitally downloadable files, rocket ships, candy and cakes or whatever else you can imagine.  Track your inventory, add sale prices, set up shipping, track clicks and taxes.  WooCommerce is perfect for leveling the playing field so you can go toe-to-toe with the big online stores or big-box brick and mortar places you’re competing with.
That’s awesome.
Anyway, here we go, the very best retail themes available for WordPress.
Bishop
When you have a business, it is essential to make sure that you become prolific, and that your business becomes profitable—no matter if it’s big or small. However, most of the time, people get confused as to how they can market their business—especially online. Well, with that, Bishop might just be the theme that can save you! Basically, Bishop is a theme that’s specifically made for eCommerce purposes. Being neat and responsive, it is the perfect theme that can help you show your clients—and potential clients—your products or services, and help them learn more about your business, as well. It’s easy to manage and navigate as it comes with a drag-and-drop builder, and three special homepage layouts that you can choose from, depending on your needs and preferences.
Even without knowing anything about code, Bishop can help you make use of amazing, patterned backgrounds that can give more definition to your blog. This theme also features the following: quick product view popups—that you can click after something in the list catches your eye; product filtering options, so you can easily segregate the products that you’re featuring; solid codes and search engine optimization for easy search rank improvement; an extremely responsive web design that makes way for easy navigation, and easy page loading; currency switchers, so your readers won’t have a hard time understanding or converting prices; retina and mobile ready, for easy integration on any device; and is fully integrated with WooCommerce—so you can make it easy for potential buyers to shop or patronize your services. You can even choose your own dashboard, or customize the theme even better, and also get constructive feedback from your readers—so you can improve your blog and business even better. Surely, with the help of Bishop, you can be certain that your business will thrive!
Demo Demo Get Hosting
Hestia Pro
What’s Hestia Pro all about?  Well, it’s a flat, material design style WordPress theme that packs a lot of information into a single page format, using parallax scrolling and a highly adjustable layout to create the page you have in mind.  With WooCommerce, you can turn Hestia Pro into a full featured app sales page too, so if that’s what you want from a theme, Hestia Pro is a wonderful choice.  For flat themes, a simple that can ‘roll with the punches’ is what you want, adjusting to any kind of content without overshadowing it.  That’s what Hestia Pro succeeds at doing, in my opinion.
Demo More Information Get Hosting
Milo
Milo, from Made by Minimal, is a modern and sleek portfolio theme that does an excellent job of letting your content speak for itself.  This WooCommerce ready, minimalist portfolio and blogging theme is completely responsive.  No matter what device, this theme looks fantastic.  Desktop or laptop, Android or iPhone, the sleek and crisp, modern style looks fantastic.  For shops that do a lot of online business, that can be a really great feature to have, since the minimalist and responsive themes tend to load up quicker, you’ll get fewer folks abandoning their carts in frustration.  With all of Made by Minimal’s themes, which come in at a little more than other themes ($100), you get access to all four of their premium, minimalist blog and portfolio themes.  (They’re all WooCommerce ready too.)  So it’s a pretty good bargain, especially if you’re not sure exactly what kind of theme you want.  Sometimes you change your mind.  I know, I’ve done it.  That makes this deal pretty solid at $25 a pop.
Demo More Information Get Hosting
Divi
When choosing between different WordPress WooCommerce themes, one of the top choices is the Divi theme. Created by Elegant Themes, the Divi theme is best known for its WYSIWYG editor. Its main advantage is its built-in visual page builder where you can make changes to your website and see the changes applied in real time.
With the Divi theme, everything is customizable including fonts, spacing, CSS, rows, columns, images etc. The Divi theme also boasts a responsive design. It has more than twenty pre-built layouts and 46+ content elements that you can mix and match to create any webpage design element.  As a WYSIWYG editor, Divi allows you to adjust the heights and widths of any page element; edit and add new text content; change the user interface; add, copy, or delete any page design element; and drag, drop, and rearrange any content.
The Divi theme includes different page elements or short codes that can help enhance your website like audio player, blog, buttons, accordions, counters, comments, additional codes, page dividers, email opt-in forms, filterable portfolios, galleries, headers, shops, pricing tables, sliders, social media buttons, tabs, testimonials, toggle pages, videos, and video sliders.  Check out our full review of Divi here.
Demo More Information Get Hosting
Ultra
Looking for an incredible WooCommerce theme? One that’s flexible and powerful, allowing you to easily create a layout that perfectly fits the products you’re selling, even if you’re not an expert at web design or coding?  Have you taken a look at Ultra yet?  If not, please to, I think this is really among the very best eCommerce themes around.  Whether you choose to use WooCommerce or not, Ultra is a perfect fit, though I tend to recommend Woo-Commerce thanks to the wide range of addons and extensions you can use to power up you online shop.  With over five dozen demo sites included, each one eCommerce ready, you’re definitely going to find a style and a layout that you love.  But don’t worry if it’s in need of a few tweaks, Ultra is a drag and drop page builder, meaning you can add functions and content areas where you want them, making your site absolutely customized to be exactly what you want.
Demo More Information Get Hosting
Narcos
With several cool and lovely layout styles to choose from, I think Narcos is a flexible and well designed WooCommerce WordPress theme.  Narcos is a blog, a portfolio and an online shop all rolled into one, which makes it a real multipurpose theme.  Created by Tesla Themes and made for businesses who want a sort of vintage inspired look, this theme is a really solid choice for folks who want a well coded, responsive, multi-page or single page WooCommerce theme option for blog, for corporate websites, creative agencies, personal portfolio sites and more.  Since it was created by Tesla Themes, Narcos is fully documented and well supported too.
Demo More Information Get Hosting
Shoppe
This is the Shoppe WordPress theme, from Themify.me, and it’s another in a long line of great looking WooCommerce themes that these guys have come up with.  What Shoppe offers is a very beautiful and modern style with features to match, all built to help make your online enterprise a smashing success.  Themify have included demo data with your purchase, so you can upload that and then edit the existing pages, which can help you get started quicker than with some other themes.  Shoppe uses the power of Themify’s drag and drop page builder to let you craft a site with any feature and any layout you need.
Demo More Information Get Hosting
Amaryllis
Amaryllis is a nice looking WooCommerce ready WordPress theme that was built with fashion shops in mind, though it’s also well designed to sell products in just about any niche.  That’s thanks to the simple, clean design that means any products will be highlighted in a professional and beautiful way.  Amyrillis offers a unique design that helps make your business look very professional, no matter your niche.  With WooCommerce, or any of the other major eCommerce plugins, you can quickly and efficiently set up shop to sell your products.
Amaryllis employs a drag and drop page builder to help make your site look precisely like you want it to look.  There are multiple custom widgets to help with growing your social media presence, which is increasingly important these days.  Jetpack is fully supported too and since Amaryllis isvery well coded, it’s SEO properties are helpful for ranking.  This theme also works hand in hand with the top SEO plugins like Yoast and All-In-One SEO.  With Amaryllis, you get a very user friendly, incredibly flexible theme that will definitely help your business run as smoothly as possible.
Demo More Information Get Hosting
Adventure
Answer the call to Adventure!  This theme is a stylish, fun and well organized WooCommerce ready theme that’s meant mostly for travel blogs, but as a standalone shop, it’s a great choice too.  Nearly any kind of blog will work well with this theme and you can establish your online presence quickly, tailoring each page and post to fit your brand.  Swap out colors, fonts and layouts with ease.  Organic Themes has made sure that every line of code is up to the current WordPress codex standards and since Adventure is perfectly responsive, it looks amazing on all devices, no matter what.  Everything that Adventure does is built to make sure your eCommerce shop is easy to use, flexible and what’s most important, your conversion rates are bound to go up.
Demo More Information Get Hosting
Studio 8
Studio 8 is a blog theme with a stylish portfolio and WooCommerce support, so it’s a very nice solution for designers, shops and companies who want to offer a full website without breaking the bank.  Studio 8 is ideal for creative professionals, for photographers, advertising and design agencies, web designers and more.  The ability to showcase your products and sell them is a really nice touch and since WooCommerce is completely free, you won’t have to spend an arm and a leg purchasing an expensive license or paying a monthly subscription fee to set up a shop.  Pretty sweet!
Demo More Information Get Hosting
Float
With themify.me’s powerful, user friendly and feature-rich drag and drop page builder, a thorough and easy to implement customization panel, SEO optimization, fast page load times, tons of user friendly options and a simple interface, all Float needed to do was add WooCommerce support and we’d highly recommend it on this collection.  Well, they went and did it.  Float is a parallax, creative eCommerce theme with multiple pre-created demo sites to help you showcase your products or posts, highlighting your content in a professional and fun way.  Float is SEO friendly, it loads up really quickly, the blog is clean and attractive and Float is completely responsive, which is a key in this day and age.  If you’re not completely satisfied with any of the pre-made demo sites, you can always change things up using Themeify’s drag and drop page builder, which is included for free.  And best of all, you don’t even need to know anything about coding to make use of it.  Nice touch!
Demo More Information Get Hosting
CoupShop
For your online store, you’ll need a great looking theme with tons of features, a theme that’s simple to use as it is beautiful.  That could be Coup, a wonderfully clean. crisp, modern, simple to use and powerful theme for online shops.  Coup Shop, from Themes Kingdom, is powerful, it’s simple to use and it’s filled with options.  Themes Kingdom always does a great job of making their themes easy to operate, powerful enough for experts but simple enough for a beginner to get started with.  With a simple design, Coup Shop can work well for all kinds of products, from electronic gadgets to furniture, clothing and accessories or whatever else you can imagine.
For an amazing online shop, you need look no further than Coup Shop, a delightfully simple, user friendly and powerful eCommerce theme for all kinds of online shops.  Themes Kingdom is the group behind Coup Shop and they’ve done all they can to make sure this theme is easy to operate, easy to adjust and it’s really got enough features for any site.  Of course, the simple and minimal style lends itself to all kinds of online shops, so you’re definitely able to frame any type of product with ease, making it look enticing.  Whether you’re selling tech products, jewelry or something else, even digital downloads, Coup Shop is a wonderful choice.
Demo More Information Get Hosting
Zerif Pro
Zerif Pro is pretty unique when compared to a lot of WooCommerce themes on this list.  Why?  Well, it’s a one page theme, for one thing.  That’s possible because of the Site Origin Page Builder, which gives Zerif Pro a huge amount of design flexibility, putting products, blog, portfolio, pricing table and more, all on one page.  The net effect is a simple, clean and efficient site that can really help you sell products.  It’s probably not ideal for companies that have a ton of products like clothing stores, but if you’re selling apps, SEO services, software or something like that, Zerif Pro could be amazing.
Demo More Information Get Hosting
Hugo
WordPress WooCommerce themes like the Hugo is a premium theme geared towards ecommerce sites owners who want their brands to stand out. The Hugo theme boasts of a customizable elegant design that can support the WooCommerce plugin in your website. The main advantage of the Hugo theme is its page builder options. You can build your site pages by using either Elementor, Divi, and SiteOrigin Page Builders. All these page builders are included in the Hugo Theme.
As a go-to theme for an ecommerce site, Hugo includes all the different page templates that a site owner may need like a shop index, testimonials, blog, multiple types of product pages, contact page, and a customer account page.  Furthermore, included in the Hugo theme are different theme options where you can make any design changes to your site, .po and .mo translation files, optimized site pages, and a retina-ready responsive design.  You can create a website that is easily modified with the use of the drag and drop page builder. It allows you to see the changes you made on your site right away.  The Hugo theme is also SEO optimized and includes a built-in option to edit your site’s and any post’s on-page SEO descriptions.
Demo More Information Get Hosting
Foxy
Foxy is a WooCommerce theme from Elegant Themes, it’s a simple but highly stylistic theme that could be just what you’re looking for.  This is a theme with an opinion, if you know what I mean.  It’s not a neutral, minimal style template, it’s got a bold style that’s not incredibly flexible.  But if the style fits your brand, it’s a great way to go, because it’s well crafted and it works fast.  I think Foxy could be great for software sales, SEO companies, apps and stuff like that.  If you want to sell products or services, you’ll need a great shopping cart and for many, WooCommerce is that shopping cart of choice.  Check out the links below for more information.
Demo More Information Get Hosting
Bold
For a WooCommerce ready theme that doesn’t look like all the other themes out there, Organic Themes’ Bold magazine and blog theme is a great choice.  This theme really is unique.  Bold was created using the Organic Themes framework called ‘Seed’.  Seed makes it simple to create a custom look and style for your website, but that’s just the beginning.  Bold is WooCommerce ready, which means you’ll be able to set up and online shop with ease.  Add on any of WooCommerce’s extensions and add-ons to create a full service online shop.  Whether you’re selling digital downloads or hard goods, this theme works well.  As with all Organic Themes, this template is simple to adapt to any sort of shop and the customer service is outstanding.
Demo More Information Get Hosting
Elegance Pro
This is Elegance Pro, a beautiful and simple eCommerce theme for WordPress.  If you’re looking for a simple, effective and attractive theme, one that’s incredibly stable, SEO friendly and easy to use, that’s Elegance Pro.  This theme is a Genesis child theme, which means it’s got that clean code base that makes it a really great option for an eCommerce site.  Elegance Pro is graceful and minimal at the same time, it does a wonderful job of showing big, bold, beautiful images and combining that with a simple to manage online store.  If you want a refined, polished theme, with custom built page templates, easy to manage color schemes, social networking plugins for Instagram and more, a news widget and contact form built in, you should certainly consider Elegance Pro as your next web template.
Demo More Information Get Hosting
Beatrix
Got the entrepreneurial spirit?  Well, that’s half the battle, now all you need is a fantastic website to help you get the job done, earn some money and grow your business.  Beatrix was built specifically for self employed folks who make their own products to sell.  It’s sort of a ‘one person Etsy’ shop and it can really help you to build a reputation for quality.  Beatrix helps you pursue your passion of creating cool stuff while earning a little bit of money at the same time.  Even if you didn’t hand make your products, Beatrix is a great fit for watch shops, jewelry stores, antique stores and more, because it’s simple enough and sleek enough to work for nearly any style of product.  You can even use Beatrix as an awesome multi-vendor marketplace site, where users can create their own accounts and sell products on your site whil you take a small commission from every sale.  (Find more multi vendor themes in our collection, which can be found here.)
Demo More Information Get Hosting
Shop Isle Pro
This is Shop Isle Pro, another great WooCommerce ready WP theme from Theme Isle.  Shop Isle Pro is responsive, it’s multipurpose and it’s perfect for all sorts of online shops, no matter what kind of product you’re selling.  You can create an awesome front page for your online webstore in just minutes, customizing any setting you want to customize.  While WooCommerce is powerful right out of the box, you can also add on some great functionality with extensions like product addons, affiliate programs, PayPal by Braintree, Stripe or Amazon Pay gateways, WooSubscriptions, coupons, dynamic pricing, shipment tracing and a whole lot more.
Demo More Information Get Hosting
Create
Create is a powerful, premium WordPress theme that was created by ThemeTrust and I really recommend this theme if you’re building an online shop using WordPress.  Create is packed with features that make it a solid choice and ThemeTrust keeps adding features every month.  Create utilizes a drag and drop page builder, made by Site Origin, to allow the admin to craft a site with a unique and powerful layout and all of the features your site needs to be a smashing success.  This theme does it all, with either a boxed or a full width layout, parallax scrolling, video backgrounds, single page navigation, slick looking portfolios, professional blog templates, contact forms…the list goes on and on.  All of that in a beautiful, responsive and retina ready display.  This is truly a premium template.
Demo More Information Get Hosting
0 notes
silvino32mills · 6 years ago
Text
13 Key Ways to Lower Your Blog’s Bounce Rate (and Why it Matters)
The post 13 Key Ways to Lower Your Blog’s Bounce Rate (and Why it Matters) appeared first on ProBlogger.
Bounce rate is a Google Analytics metric that tells you the percentage of people who “bounce” off your site (i.e. visit your site and leave from the first page they arrive on).
To find out your bounce rate, log into your Google Analytics account.
(If you haven’t set up Google Analytics on your blog, do it. It’s powerful, very useful, and completely free. You can find out more about Google Analytics in episode 30 of the podcast.)
Once you’re in Google Analytics, go to Audience → Overview and look at the Bounce Rate. You should see a little chart and a percentage that looks something like this:
Tumblr media
On my Digital Photography School site the percentage is around 78%. That means 78% of the people who arrive at the site only view the page they arrive on.
You can click the little chart or select from the dropdown menu to see the entire chart for the previous month (or whatever period you select):
Tumblr media
Most blogs don’t see much day-to day-variation in their bounce rate. Mine changes slightly when I send out our email (which I’ll talk about soon), but chances are your blog has a steady, even line when you view your chart.
Interpreting Your Bounce Rate
A high number (say, 99%) means a lot of people are leaving your blog without checking out any of your content beyond the page they arrive on.
A low number means a lot of people are sticking around, and looking at more than one post or page on your site.
Bloggers often think a high number is bad and a low number is good, and later in the post I’ll be showing you ways to lower your bounce rate. But it’s worth keeping in mind that a high bounce rate isn’t necessarily a bad thing. For instance:
You might want readers to leave and do something else. For instance, if you promote affiliate products you probably want to send readers away to buy them.
You might want people to call your business. And a high bounce rate might suggest that’s working. People are finding your site, and then picking up the phone to call you.
You might sell products through a major e-retailer such as Amazon or eBay. If you are, you’ll need to send people away from your site.
You might be getting readers to sign up to your email list through a popup tool that doesn’t load another page on your site.
How to Drill Down When You’re Looking at Bounce Rate
While looking at the bounce rate for your entire site can be interesting, it’s better to focus on specific pages. You can do this by going to Behavior → Site Content → Content Drilldown, and clicking on the page you’re interested in. Here’s an example:
Tumblr media
On ProBlogger, the bounce rate for the front page is 61%. That’s lower than our site average, which is normally in the high 70s. When people arrive on the front page, they’re probably trying to figure out what the site is, what content they’re interested in, and so on. So it makes sense for the bounce rate of that page to be relatively low.
Some pages on ProBlogger have a really low bounce rate. On the “Start Here” page it’s 54%, and on the job board it’s 35%. That’s great, because it means people are clicking to view individual jobs.
Other pages have a much higher bounce rate. One post from 2012 gets search engine traffic every day, but its bounce rate is 91%. People arrive, see that the information isn’t relevant for them, and leave.
How to Look at the Bounce Rate of Different Sources of Traffic
Another thing to be aware of is that bounce rates vary depending on the traffic source. In Google Analytics, you can go to Acquisition → All Traffic → Channels to view the bounce rates for different sources of traffic. It’ll look something like this:
Tumblr media
On Digital Photography School, Google traffic bounces away at 77% and social media traffic bounces at 81%. But email traffic has a much lower bounce rate – 55%.
So when I’m looking at lowering the bounce rate there, I’m particularly interested in the Google traffic because more than half of my traffic comes from Google. And most of it comes from first-time visitors. I’d love them to stick around and hopefully subscribe.
But I’m not particularly bothered about lowering the bounce rate for email traffic. It’s already pretty low, and those people have already subscribed.
13 Straightforward Ways to Lower the Bounce Rate on Your Blog
Now that you understand bounce rates, and how to break it down by page and traffic source in Google Analytics, let’s go through some ways to lower it.
#1: Make a Great First Impression
When someone comes to your site for the first time, they decide within seconds whether it’s credible, is relevant to them, and has content worth reading.
And they base those decisions on your design, branding, tagline, and other clear indicators to the benefits of them reading.
#2: Work on Social Proof
If you have a testimony from a reader (or from someone well known), include it. If you’ve got a lot of Twitter followers or email subscribers, put the number on your site. If you’ve been quoted or featured in mainstream media and can use that publication’s logo, use it.
These are all signals to first-time visitors that your site is credible and useful.
#3: Remove the Dates on Your Blog Posts
This might be a bit controversial, but I’m going to suggest it anyway. Consider removing the dates on your blog posts. It can help make a good first impression – especially when you have a lot of older evergreen posts.
On my Digital Photography School site I have a post about shutter speed that I wrote in 2007. It’s just as relevant today, but if I included the date on that post people would inevitably judge it as less worth reading.
#4: Make Your Site Easy to Use
It might sound obvious, but people are more likely to click around on your site if it’s easy to do. Make sure your site loads quickly, and make your content easy to read.
For more on this, you might want to listen to episode 176 of the podcast where I talk about creating scannable content: making sure the text is easy to read, having clear navigation, making your site responsive so it’s optimised for mobile, minimising interruptions, and so on.
#5: Focus on High-Quality Content
If a first-time reader lands on a well-written, articulate article that enhances their life in some way, they’re going to click around. So focus on writing consistently good posts that help your reader as much as possible.
And investing time to write great content improves your blog in other ways too.
#6: Ask Readers to Connect in Some Way
Normally you want readers to make an ongoing connection with you – perhaps by subscribing to your email list or following you on social media. Make strong, clear calls to action in various parts of your blog to encourage readers to connect to you.
This will help keep readers coming back to your site as return visitors, which will reduce your bounce rate over time. On Digital Photography School we see that people who come back every day click around at a much higher rate than first-time visitors.
#7: Create Portals for Your Site
This is one of the best things I’ve done on ProBlogger. On the front page we have icons for different ‘portals’ (under “I need help to…”). The same icons also appear in the sidebar next to every single post.
Each portal is a special page that includes a video greeting (where I make a personal connection) and a call to subscribe. There’s also lots of information on each portal page. It isn’t a category page with links to our latest posts. Instead it’s a curated list of the best content we have.
These portals have reduced our bounce rate a lo. The individual portal pages have a bounce rate as low as 40%. If you’d like to know more about them, check out episode 114 of the podcast.
#8: Create a “Start Here” Page
Our “Start Here” page is featured prominently in our navigation: it’s the first item in the menu. It’s targeted at first-time readers, particularly those coming from Google who hopefully spot the link in the navigation and click on it.
You don’t have call yours a “Start Here” page. An “About” or “My Story” page could serve the same purpose.
#9: Make External Links Open in a New Tab
When you link to another site or blog from one of your posts, a simple way to ensure you don’t lose your reader is to make the external link open up in a new tab (or window). That way, the reader won’t actually leave your site.
This is simple to do in WordPress. Simply edit the link and click the checkbox to open it in a new tab. There are also WordPress plugins that can handle this for you, such as Open external links in a new window.
#10: Link Back to Older Content from Your Posts
When you write your next blog post, challenge yourself to create links to at least three of your existing posts. For example, you could link to a previous post that covers something you mention in greater detail.
Another option is to add suggested reading (or listening) at the end of your post. While you can do this using a plugin, I like to add in my own so I can choose exactly what I want to encourage readers to look at next.
You could also create an interlinked series of posts, which can be great not only for lowering your bounce rate but also for exploring more complex ideas on your blog.
#11: Link to Popular Posts in Your Sidebar
If you’ve got a post (or several posts) you know are popular, make sure they’re really easy to find. You could highlight them on your About or Start Here page. But you can also link to them in your sidebar.
You can do it with a text link, or you can get more creative with a button or a banner. For example, on ProBlogger we have an image in the sidebar that links to our “How to Start a Blog” post, with the call to action text in the image itself.
#12: Create a “Sneeze” Page
In the menu on Digital Photography School, we highlight a post called “Tips for Beginners” because it’s always popular with our readers. If a reader clicks that link, they end up on what I call a “Sneeze” page.
This page introduces the topic, then lists 40 or so different posts we’ve written that are relevant for beginners. The point of the page is to get people “sneezed” deeply into our archives.
You can also write entire posts with this in mind. One we produced for Digital Photography School is “21 Settings, Techniques and Rules All New Camera Owners Should Know”.
#13: Make it Easy to Search Your Site
Many blogs don’t give readers the opportunity to search their content, or bury their search bar somewhere low on the page. This makes it hard for readers to search for information they particularly want.
Make sure your search bar is easy to find. You want you readers to find the right content as easily as possible.
I know that’s a lot to take in. So here are some practical steps for what you can do next:
#1: Identify the top three posts on your site that consistently get a lot of traffic.
#2: Have a look at the bounce rate on each post. Are they all similar, or is one much higher or lower than the others? Can you figure out why?
#3: Try to optimise those three posts to reduce the bounce rate. You could add a call to subscribe, include further reading, or add extra links in that content.
If you want to go further, create a “Start Here” page for your site, or create some “Sneeze” pages or posts to list your best content in particular categories.
Don’t forget to leave a comment below to let us know how you get on.
Image credit: Markus Spiske
The post 13 Key Ways to Lower Your Blog’s Bounce Rate (and Why it Matters) appeared first on ProBlogger.
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
       from ProBlogger http://feedproxy.google.com/~r/ProbloggerHelpingBloggersEarnMoney/~3/Zyijb5iAmkM/
0 notes
kensingtonseo · 7 years ago
Text
Local Security Company SEO Audit
SEO Audit Example Of A Local Security Business
00:01 Hello, this is an SEO site audit for the Three Lion Security Limited, so we met at the networking meeting in Thrapston, and he asked me to have a quick look over his site. So I’ve gone through and done what I would call a simple SEO audit for you, which will highlight a number of the issues you have with the website and I’m listing things that you need to do, a checklist of things that you need to get done to help you improve your ranking. So hopefully you find it useful.
00:58 So I’m just going to take you through your website and show you some of the issues. I’ve got a notepad here where I’ve just taken some notes of some of the issues with the site. I expect this will take about 15 to 20 minutes, so start off with. It’s a, it’s a nice little site. It’s functional, it’s on WordPress, which is good. There are a few kinds of legal things that need to happen. You need to have an EU cookie consent pop up. You’ve probably seen those annoying popups on other websites where you need to have one on here so that you can, you can do that via a WordPress plugin. There are plenty of those. Um, and also you need to have, I can’t find them anywhere, some privacy pages and your terms and conditions pages, especially as a limited company.
01:59 You should really have those on the website as well and you can just pop them in the footer bar here, the footer menu here to keep them out of the way that they really ought to be there. One comment on the homepage is there isn’t really a lot of information and to improve your rankings it will be a good idea to add some more content. One of the biggest issues I see with websites these days is they try and look better than they are useful to Google. So, you know, it looks nice. You got a big header image here and you’ve got the three content boxes here, but the only real content is this a little bit here and it’s not really enough for Google to be able to understand what your site is all about. So let’s just have a quick look at the Moz toolbar.
02:54 This is something that just gives us some information about the page and you’ll see as we go through this that there are some reoccurring themes. A page title, this should be around about 75 characters and yours is 133. And for most of the pages, the page title is too long. So we need to look at reducing the page titles, the Meta description as well, which is here. This is the snippet that shows when somebody does a search and Google, this is too long as well. There should be shorter than this, otherwise, it gets truncated and it doesn’t make sense for the searcher. So we need to look at shortening those on the page. One of the things that most of your pages have is these Meta keywords, now this has been dropped by Google.
03:52 I would remove those keyword tags has probably been done by the Yoast plugin, but you can disable that. So I would get rid of those. We’ve got an H1 tag here. There’s no H1 tag. It will be good and helpful to have an H1 tag, although we’ve got an H2 tag. It was possibly something to do with the theme or it might just be the way in which the text has been formatted, but you would certainly want to have an H1 tag not having an H1 and just having an H2 wouldn’t make any sense to Googlebot. So that needs to be looked at and there’s no bold words or Italics. Ideally, you want to bold your main keyword and italicize some of your main keywords throughout the content, preferably in the first paragraph.
SEO Audit Checklist – Image Optimisation
04:46 This is the ALT tag, a little explanation that you can add to any images that you’ve got on the page so that a web browser can read them and understand what the image is about. And also screen readers use this for the visually impaired. If you’ve got people with accessibility problems, shortsightedness, those kinds of things, then the screen readers will be able to tell them what the images are and all throughout your site, your ALT tags really could do with being better optimised. This is pretty much the standard that we’ve got on every single page. That’s mainly due to the logos and that in the footer. So it will be better to look at improving the ALT tag and again, through WordPress, that’s reasonably straightforward because each image has the facility to add an ALT tag text to it using the media library.
SEO Audit Checklist – Schema Markup
05:51 There isn’t any Schema markup on any of the site. Schema Markup is something that is a code that you put into the site which will tell Google exactly what your page is about in an easy to understand machine language. You should, as a local business, have at least local business markup you can use. You can use a plugin to help you with this and it should ideally be in JSON LD, but it could also be in microdata format, but really it tells Google what your business is, where it is, and also helps to link together your social profiles so it can start to build up an idea of who your business is on the web and start linking those properties together so that when you tweet something or you share something on Facebook, Google can understand that it actually is about your website entity.
SEO Audit Checklist – Secure Website With SSL (https)
06:50 One last issue on the home page, something that is a ranking factor these days, which again now isn’t that difficult to do, is to switch to an https website, a secure website. You’ll need to make sure that you do any redirects from the old site to the new site, but that would also help to give your site a little ranking boost. So, just looking at, these other pages, we’ve got things like security guarding and again, it’s a fairly similar thing. We’ve not got anywhere near enough content on these pages. There should be at least 300 words as a very minimum. And if you’re looking to outrank competitors, then you need to make sure that you’ve got more and better quality content for your pages to make sure that you rank for these. Again, looking at the on-page stuff, we’ve got a page title too long meta-description this a little bit too long.
SEO Audit Checklist – On-Page Elements
08:02 We’ve got meta keywords that need to be removed. We’ve got H1 tag, but really we could do with better optimising that so that it’s more keyword rich. And we’ve got an H2 tag with the content “why use us?” That’s a bit of a waste of a keyword in the H2 tag. Again, no bolding or Italics to identify or highlight the keywords that this page is about. So in an ideal world, you have, for each of these pages, this is your security services page. Your title will reflect that your meta-description will reflect the keywords, the keywords that are bolded in the text reflects that the H1 tags reflect that the H2 tags, the images, the images, ALT tag text on the images reflect that as well. So the whole page is themed around these, the main keyword.
09:03 So I won’t go through the rest of them because they’re all pretty much the same. I’m just moving over to here. Accreditation’s again, it’s just a similar theme. There’s just not much content and Google really doesn’t like what’s known as thin content pages, ones that don’t have much content. So you need to look at putting more information on your pages or combining the pages so that it’s. I said that they’re kind of better laid out. On the meet the team. I thought it was a bit odd because I was expecting to see staff images and that kind of thing and I got an About Us page essentially, so we might want to look at kind of rewording that or doing something so that it seems to make more sense and it looks as if there’s been some copying and pasting as gone on because there’s a lot throughout the whole site.
10:02 There are these areas here where you’ve got odd characters and these are ‘dot formatted’, character’s usually where something’s been copied and paste from word and it’s gone in and WordPress hasn’t quite understood the character and coding that’s gone through, so this all needs to be attended to. It should be fairly straightforward just to go through the text and make the changes so that we get rid of these odd characters. I noticed there was a lot of it on the job vacancies page as well. I’m down here. We’ve got kind of odd characters around here and here, here and various others here and I think on one of the pages right at the bottom where it was it. One of the pages contact us, one of the pages that have got a big banner at the bottom, which is kind of got your motto and that was messed up as well. So let me just see if I can quickly find that for you whilst we’re flicking through.
11:17 The other thing that we can do to the site is what’s called siloing, this is about building buckets of related content. The other thing is to do with silo in and that is where we create content stacks if you like, and where we start linking from our content to relevant content within our site. So we haven’t got any of that at all. So we’re not helping google to understand what the site is about. The other issues looking through my little list here is that we’re looking at targeting these local areas, which is absolutely fine, but there’s nothing on the site other than the keywords that have been put in which needs to be got rid of. That really indicates that you are a local site targeting these areas.
SEO Audit Checklist – Location pages
12:11 So really to do this properly and efficiently it will be a good idea to have a locations page tab here with the various locations and the services that you provide in those locations. And then build out content within each of those that let’s say for Wellingborough. So let’s say you want to provide these four services within Wellingborough where you recreate these pages within the Wellingborough location tab and you then put the content in there and you make the content relevant to, to Wellingborough. If you want to rank locally, you really need to look at doing more about optimising your site for local search intent because at the moment you’re not really taken advantage of that. Although the keywords seem to suggest that that’s what you want. So overall, there are quite a few things from an on-page point of view that need to be looked at.
SEO Audit Checklist – Google My Business Optimisation
13:17 Your Google my business page. That’s an important element because it kinda tells Google that about your business. And really that kind of ties everything together. And the one of the ways, the main ways that Google will tie that together is by using what’s known as the NAPW, which is your name, address, phone number and website, and these details need to be the same across all of your web properties and directory listings. So on your Twitter, on your Facebook, on your Google, My Business page, on your Yelp or Yell.com listings, or any of the free listings that you can get. These all need to be exactly the same and they need to be the same as what is on your Google My Business page, which at the moment is showing this address which is slightly different to what you’ve got is different to what you’ve got on your website and different to what you’ve got.
14:11 Because as we see down here, we’ve got your Registered Address. So it might be better if you put the registered address in your, say your terms and conditions page. And then you had your address down here, which would then match up with what was on the contact page. And the contact page addresses, again, slightly different to this. So that would need to be changed up so that it actually matched the address because it needs to be exact. Say they haven’t got that in the Google My Business listing and the postcode is, is formatted slightly as well. So there’s a little thing, it might not seem much, but in Google’s eyes, they’re as different as chalk and cheese. So you need to make sure that the address is laid out correctly and is the same and consistently the same. Otherwise, you won’t benefit from those mentions, what are known as citations from across the web.
Local Security Company SEO Audit – Call Us For You Own Audit
15:12 So I think we’ve got a good deal of things that we can target to improve your website on-page, you’ve got a lot of keywords here and you have got the opportunity to make some really good content written about this. So a content marketing campaign, creating interesting posts about all of these topics and then getting people to link back to those articles locally will really help you to start to boost the authority of this website and really help to improve your rankings, which will, of course, get you more calls, enquiries and generate more business. So I hope you found that useful I’ve got a separate report which I shall include with the email to you and I’ll send this all over with a link to this video so that you can watch it and if you need to, you can obviously watch it a couple times. So feel free to get in touch if you want some advice on how to get all of this done on the implementation.
The post Local Security Company SEO Audit appeared first on Kensington SEO.
0 notes
livefreeshop · 7 years ago
Link
If you have ever wanted to start a a blog or website that is monetized by the Amazon Associates program, then I have a few tips that may help you get started.
Or if you currently have a site where you are wondering how to use Amazon affiliate links most effectively or the process of inserting your links using WordPress, I have a few ideas that will make you more money.
I started my online journey with Google Adsense, and that is where I've made a lot of my money in order to quit my job. However, after conducting a few niche site projects, and starting a few other sites on my own, I've learned how to use Amazon affiliate links quite well over the years. In fact over the past couple of months, I've learned some things that I never knew before, and wanted to share.
Making money through affiliate marketing in general can be quite profitable.  Promoting Amazon products is perhaps one of the easiest affiliate programs to join and tends to have a great conversion rate because everyone is familiar with buying from Amazon.  This can result in higher affiliate commissions for you.
There is nothing more frustrating that having a problem and not being able to find an answer; so, hopefully this post can answer a few basic questions in regards to making money with the Amazon associate program as I teach you how to use amazon affiliate links.
How to Insert and Add Amazon Links
There are a couple of different ways that you can insert Amazon affiliate links on your WordPress or other affiliate sites. First, you can use different options provided directly by Amazon.  You can do this with any theme you've picked and some WordPress themes have more ready to use interfaces to allow direct linking from amazon more readily.
Here's a quick summary of the steps needed to get affiliate links directly from Amazon:
Login to your Amazon Associate Account.
Find the products you want to promote on Amazon and click the option you want to use in the Amazon Associates site stripe at the top of page.
Copy the code for the link from the Amazon popup window.
Paste this link in your blog post, on social media, or other location on your site where you want to promote products.
Here's a bit more in-depth description of how to get your Amazon affiliate links, with images to guide you of course.
If you are logged into your Amazon associates account, you can just visit ANY page on Amazon.com and click the most appropriate option for you in the Amazon Associates SiteStripe at the op of the page.  This will give you an affiliate link for that exact page. Here's what it looks like:
As you can see, you can click either Text, Image, Text + Image, or Custom Native Shopping Ads. Finally, you can also share directly on Facebook or Twitter by clicking the Facebook or Twitter icons. 
I typically will just select the “Text” option and then highlight just the link code itself (as shown in the image below).  Then I can use this affiliate link anywhere I want on my site (with an image, my own anchor text, on social media, or anywhere else I chose).  However, you can explore the various link options to determine what works best for you.
All you have to do is copy that link from Amazon, insert it into your website, and you'll start earning commissions whenever people buy products on Amazon through that link.
However, it's important to note that you have the correct Store ID and tracking ID selected.  Just be aware that whatever tracking id you select is where the commissions will show up on your earnings report from Amazon.
Another pro tip is to decide if you want to use a short link or the full link (as shown in the image above).  I would recommend using the full link if you EVER think you will sell your website.  I have purchased and sold a couple of Amazon affiliate websites, and it's MUCH easier to find and replace (using a WordPress plugin) the old Amazon tracking id and replace with the new one when the full link is used.  (The short link doesn't show your tracking id, so it's impossible to find).
Custom Options
You can also click the “Custom” link and get an embed code that includes the price, image, description, and buy button.  This makes your links more obvious, which can be a good or bad thing depending on your blog post or site that you are using it on.
You can also use several other options that are provided by Amazon directly for creating affiliate links such as inserting banners, product links, and much more.  For my own niche sites, I don't typically use any of these other options. See the image below for a few options:
However, you should probably explore these options in your Amazon associates account to determine which type of affiliate links are the best for you to use. 
Now that I've covered what Amazon has to offer, I want to share a couple of other tools that can assist in using Amazon affiliate links on your website.
Using the EasyAzon Plugin to Insert Links
Another option for how to use Amazon affiliate links on your site is to use a WordPress plugin (if using WordPress).  For many of my niche sites, I am using the EasyAzon Pro Plugin.
The EasyAzon plugin makes it very quick and simple to insert Amazon affiliate links without ever having to leave your WordPress dashboard.  So, rather than going over to Amazon.com to find your product and then copy and paste the link, you can have the plugin do it directly for you within WordPress post or page.
Here's an image of the EasyAzon plugin in action:
So, this is located directly below where you create a post in your WordPress text editor.  All you have to do is type in your search query (mine is “tom brown tracker knife” above), then hit search.  This will pull back all the Amazon results using the Amazon Product Advertising API, as you can see in the image. Using the product advertising API from Amazon ensures that you stay compliant when using images, prices, and other product details.
Then simply select whether you want a text link, image link, info block, or call to action.
I went ahead and selected a “Text Link”, and here is what I get:
In the link text box, you can change your anchor text to whatever you want.  You can see that I made it, “Click Here for Pricing, Reviews, and More…”.  Then simply clicking “Insert Shortcode” and your Amazon affiliate link is all set!
I like having a custom anchor text because it can increase clicks, which can then lead to more sales.
Other EasyAzon Settings
To first get started with EasyAzon, you will need to input your basic affiliate details.  Once you input your Amazon Associate affiliate tag, you can select whether to cloak all links, open links in a new window, make affiliate links “No Follow” and more.  Here are the options you can select:
How to More Clicks and Sales from Your International Traffic
You will notice at the bottom of the image above that you can, “Enable Link Localization”.  What this does is detect what country the user is from that clicked your affiliate link and direct them to the correct Amazon country page.  In order to get paid when a user from the UK purchases on Amazon.co.uk for example, you MUST be approved to the Amazon.co.uk program; which is different than the Amazon.com program.
In other words, you need to apply and be approved for each of the countries for this function to work.  Well, it sounded like a lot of time and effort to apply to multiple countries; so I just figured I'd stick with the US only when I first started creating niche sites.
However, I was contacted by one of my readers who told me that it only takes a few minutes to apply to each of these programs, and that it could increase my income by over 15%!  To be honest, the only reason I hadn't applied to the other country affiliate programs was because I thought it would be too time consuming.
I was definitely wrong about that!
I've now applied to Canada, UK, and others. I now use the EasyAzon plugin to automatically localize the Amazon results for each person that clicks my affiliate links and I can see that I was missing out on sales from this international traffic. 
I mention this in case there is anyone out there just get started with the Amazon Associates program.  This is a simple tactic that could definitely increase your overall earnings.
Watch a Full Demo of the EasyAzon Plugin Here
Genius Links
Another great tool to help you monetize traffic coming from all over the world is Geniuslink.  Genius is a SaaS based tool that can work with their WordPress plugin or any other type of website.
Genius also acts as a URL shortener, which is how they can track all of your link clicks, where visitors are coming from, and more.  Here's what the dashboard looks like in my account:
I use Genius links on a few of my niche sites and have never had any issues.  When I look at where my traffic is coming from, you can see that people from 165 countries have clicked on my Amazon affiliate links.  So, even though I've applied to the largest Amazon countries, I'm likely still missing out on a little bit of commission each month.
Amazon OneLink
Another option to localize your links is through a relatively new option directly through Amazon called, OneLink.  Amazon OneLink does the same thing as the EasyAzon Pro Plugin and GeniusLink; it takes international traffic clicking on your affiliate links and sends them to the appropriate Amazon country (i.e. Amazon.co.uk, amazon.ca, etc).
To set up Amazon OneLink, just follow the directions that can be found in your Amazon associates account as shown in the image below:
Where and How to Use Amazon Affiliate Links
Now that you know step by step how to get your Amazon affiliate links, you may still have some questions about exactly where or how to use Amazon affiliate links.  Here's some of my favorite places to use my Amazon product links:
In your blog posts as text links.  This might include your WordPress blog, but could also be Tumblr blog, Blogger, Medium Blog, Weebly Blog, or any other blogging platform.  The concept of inserting your Amazon text links is essentially the same on each platform.
In your in-depth “buying guides” that review Amazon products. You can see some great examples of effective use of Amazon links and in-depth buying guides at theWireCutter.com.
In your WordPress sidebar to highlight a special offer or favorite product.
Use Amazon native ads or banners strategically placed within your content.  Consider used the Ad Inserter WordPress plugin to have the same Amazon native ad show up at the end of each of your blog posts for example.
In product comparison tables.  I recently did an in-depth tutorial of how to create product comparison charts that you might find useful.  Or if you are looking for a great software tool that automatically creates great looking Amazon product comparison tables for you, consider the software I created TableLabs.com.
On Social Media; including Facebook posts, Instagram Posts, and Twitter posts.  As mentioned earlier, Amazon has no problem with you posting affiliate links on Facebook and Twitter.  In fact, they have the Facebook and Twitter linking tool built right into the Associate SiteStripe.  However, I've found that my own experiments with posting links on social media haven't worked that well.
YouTube.  If you are building a following and review products, it's a no brainer to add an affiliate link in your video description.  You could even mention a pretty link or other short link in your video that people could type into their browsers.
Store pages.  You can create a “store” page on your website and create your own product listings that are all just your affiliate links.  Fresh Store Builder is a tool that makes this SUPER easy and turns out great looking pages.
Pretty Links
If you want to create your own custom affiliate link you can use a free WordPress plugin called Pretty Link.  This plugin simply makes really long links short (it's a link shortener).  I use Pretty Links all the time.  For example, http://bit.ly/2CIErzq, is now my Amazon affiliate link. (Goes to the earmuffs page I was taking screenshots of earlier in this post).
In Conclusion
If you are getting started using the Amazon Assoicates program, hopefully some of these tips I've shared about how to use Amazon affiliate links will be useful to you.  Amazon provides lots of different options for inserting links into your site that can be quite helpful. 
However, you can also use tools like EasyAzon, GeniusLink, or even Table Labs to help you effectively add links to your site. These plugins and tools allow me to get things done a little bit quicker and provides some advanced options that I may not be able to accomplish otherwise.
Do you have any questions about using the Amazon affiliate program?  I'd love to hear your comments or questions below.
The post How to Effectively Use and Add Amazon Affiliate Links to Your WordPress Website appeared first on Niche Pursuits.
from Niche Pursuits http://bit.ly/2m0HvfR
0 notes
Text
The 9 Conversion Habits of the World’s Most Successful Bloggers
This is a guest contribution from John Stevens.
Just how do they do it?
From influencing millions to making millions, the world’s most successful bloggers manage to turn visitors into readers, readers into customers, and customers into fans without breaking a sweat.
But is it all accidental, or is there any science behind their success? Are there any habits successful bloggers follow? And if they do, what are they and why do they work?
In this post, I’ll give you answers to these questions, and more.
1. They use multiple opt-in boxes
According to research by ExactTarget:
“77% of consumers prefer to receive permission-based marketing communications through email”.
With email being such an effective method of conversion, top bloggers make sure they don’t leave any stone unturned in order to get visitors’ emails.
Using more than one opt-in box increases the chances of users signing up with you. But there is also a fine line before it gets annoying.
For example, Smartblogger keeps it very subtle. Jon Morrow asks for your email on the homepage and a popup when you’re about to leave the website.
This treads the fine line between “effective” and “annoying”. Since SmartBlogger is a writing-focused blog, the reduced visual clutter also fits its audience and brand image perfectly.
Neil Patel uses multiple opt-in boxes at QuickSprout – on the homepage, sidebar, as a popup and at the end of every blogpost. Some may argue he goes a little overboard but since Neil writes about marketing, his audience is likely forgiving of aggressive marketing tactics.
While you can debate merits and demerits of an aggressive opt-in box strategy, one thing is clear: they work.
Doing it too aggressively in a non-commercial niche might not be the best option, but at the very least, you should have 1-2 opt-in boxes throughout your site.
What you can learn from this:
Use more than one opt-in box on your site. Take advantage of pop-ups and above the fold area (see below) to maximize visibility for your opt-in boxes.
2. They make good use of “above the fold” area
“Above the fold” is the first half of a webpage that is visible without scrolling.
Whatever content you place above the fold is the first thing your visitors will see when they land on that page. If it is irrelevant, there is good chance they will leave the site before exploring further.
As Peep Laja of ConversionXL writes, “Content placed above the fold grabs our 80% of attention”.
Plenty of studies back this claim. According to an eye-tracking study by the Jakob Nielsen group, viewer attention drops dramatically beyond the fold.
Top bloggers understand this, which is why they use their above the fold area to introduce themselves to their audience, collect emails and put forth evidence of their success (such as reviews from other sites).
Tim Ferriss’ site Four-Hour-Workweek is a great example of this.
There’s lots of good stuff happening here.
Let’s drill down:
“About” the blog: This single statement – “If you could 10x your per hour output…” – tells readers everything they need to know about the blog.
Social proof/Proof from authority: By showing off quotes from authoritative publications, Tim leverages the principle of authority and social proof to show that his advice is valuable.
Opt-in box: Tim doesn’t just throw together an opt-in box; he shows readers exactly what they’ll get if they opt-in to this email list.
More proof from authority: Tim adds his NYT and WSJ bestseller tags for good measure to further attest to his expertise.
Also note how Tim uses his own face rather than a generic brand image.
Here’s another example from Noah Kagan, founder of OkDork:
Though not as busy as Tim’s homepage, it still follows the same principles:
Opt-in box: The opt-in box is easy enough to understand, but also note the headline: 85% of my best business hacks. Why not say “all of my hacks”? Because studies show that users fixate on numbers in headlines, not words.
“About” section: Noah uses the opt-in box section to quickly tell readers about himself and his past successes. Again, this is a form of persuasion through authority.
Social proof: “What others are saying” adds further social proof to Noah’s offer.
What you can learn from this:
Two things:
Use the above the fold area to tell readers about yourself and your blog while pushing a lead magnet.
Increase opt-in rates by using social proof and proof from authority via testimonials and quotes.
3. They make it easy to share content
Sharing might sound intuitive to us marketers and bloggers, but your average reader might never share your content unless you make it seamlessly easy to do so.
This is partly due to laziness – your readers don’t want to put in the effort to copy-paste URLs or think of tweets.
Partly, this is because your readers don’t even know how to share content.
In fact, a recent survey of computer users across 33 rich countries showed that only 5% of the population could do complex computer tasks, while 14% are “below level 1”.
Successful bloggers understand this very well. That is why they provide multiple easy options for readers to share content anytime they want.
For example, GrowthEverywhere uses multiple social sharing options on the side bar:
This allows readers to pick their favorite social media channel and share the article with one click.
Another tactic is to use plugins such as Click to tweet to get more shares from Twitter. This takes all the effort out of sharing on Twitter – readers can, well, click to tweet the highlighted text.
Here’s how Tim Soulo uses it on BloggerJet:
But simply flooding your posts with share buttons isn’t enough. Hick’s Law dictates that after a certain point, more choices simply confuses your users and discourages action.
To solve this problem, limit your sharing buttons to your top 2-4 networks. If you don’t have a lot of visual content, it doesn’t make sense to throw in Pinterest, Instagram and Tumblr sharing buttons.
For example, Neil Patel uses just two social networks – Facebook and Twitter – on Quicksprout.
What you can learn from this:
Give users multiple sharing options but don’t flood them with too many choices.
Use plugins such as “Click to Tweet” to make sharing easier.
4. They use overlays to capture additional emails
Email is the foundation of blogging success.
Which is why bloggers keep coming up with innovative ways to capture more and more emails.
One such technique is called ‘welcome mats’.
Welcome mat displays a full-screen call to action that shows when visitors land on your website.
For example, this is how the welcome mat looks like when you visit Zac Johnson’s site.
As you scroll down, the welcome mat goes up and you are presented with the landing page.
SumoMe takes this a step further and uses custom welcome mats for each blog posts. A post about writing better headlines, for instance, shows this welcome mat:
Another popular overlay is to use a Slide-in CTA. This CTA enters the screen below your sidebar content so it doesn’t cover your main content:
Here is how Hubspot uses it:
What you can learn from this
Strategic use of overlays can get you additional conversions. However, make sure that they don’t hinder your user-experience. If someone has already signed up for your email list, hide all overlays from them.
Try using post-specific overlays to push content upgrades and highly targeted lead magnets.
5. They use static home pages to funnel additional leads
If you went back in time and visited ProBlogger.net back in 2013, this is what you’d see:
In contrast, ProBlogger’s homepage today looks very different.
What changed?
For one, ProBlogger’s new homepage doesn’t just show the latest posts. Instead, it pushes PB’s latest content, directs users to relevant categories (“I need help with…”) and also includes a prominent email capture form.
This is a tactic a growing number of bloggers are adopting. Instead of directing users straight to the blog, they direct them to a homepage instead.
Here, they can introduce themselves to their readers, direct them to their best content and capture emails.
For example, here’s Videofruit:
This also gives bloggers an opportunity to do some personalization.
For example, on ProBlogger, returning users are greeted with a “Welcome Back!” message while first-time visitors get links to introductory content.
What you can learn from this
Create a homepage instead of directing users straight to your latest blog posts. This gives you an opportunity to do so much more than just make them read your latest content.
6. They use social proof to build trust and authority
As per wikipedia:
“Social proof is a psychological phenomenon where people assume the actions of others in an attempt to reflect correct behaviour for a given situation.”
In a nutshell, we look at other’s opinions and signals to evaluate our own potential action.
Consider that:
Over 70% of Americans say they look at product reviews before making a purchase.
Nearly 63% of consumers indicate they are more likely to purchase from a site if it has product ratings and reviews.
Top bloggers take advantage of social proof in a number of ways:
By showing testimonials
This is perhaps the most common use of social proof that most (if not all) bloggers use.
According to the research done by Nielsen, “92% people trust a recommendation from a peer and 70% people will trust the recommendation from someone they don’t even know”.
For example, Copy Blogger shows testimonials from real people on their homepage.
By showing authority endorsement
Brian Dean from Backlinko uses testimonials from the big names in the marketing industry.
This is an example of the principle of authority where you leverage the authority of successful people to make yourself appear more trustworthy.
By showing the number of subscribers
For example, on Problogger’s homepage you’ll see this:
300,000 bloggers can’t be wrong, right? By showing that so many people have joined the community, ProBlogger shows that it is trusted by your peers.
By showing media mentions
This is another example of the principle of authority in practice. By showing that you’ve been featured in authoritative publications, you increase your own perceived authority as an expert.
For example, consider Growtheverywhere’s media mentions:
What you can learn from this:
Social proof can be hard to use if you don’t already have it. Showing off your subscriber count when you have just 300 subscribers isn’t very comforting.
To get around this problem, try to get featured in prominent publications or get interviewed by other bloggers.
You can then use the logos from these publications or quotes from others about you as social proof.
7. They use a “Start Here” page.
SmartBlogger does it.
SmartPassiveIncome does it.
Even ProBlogger does it.
I’m talking about a “Start Here” page.
As you can imagine, this is the “start” page for your blog, a page that tells readers who you are, what you blog about, and what they should read.
ProBlogger’s start here page, for instance, tells Darren’s story and shares a list of resources with readers.
Readers will often turn to the “Start Here” page when they land on your site for the first time. While you might have a detailed homepage, it can’t tell your story quite as effectively as a compelling “start” page.
It’s also a fantastic opportunity to collect emails and increase conversions.
What you can learn from this
Easy: create a start page for your blog. This page should:
Tell the reader who you are
Tell them what your blog is about
Direct them to appropriate resources
Set the tone for the rest of your content.
Once you’ve created this page, make it the first link in your navigation menu.
8. They make better use of the footer area
The footer area is often overlooked when designing blogs for conversion. We’re so fixated on the above the fold area that we completely forget about users who scroll all the way to the bottom (who, ironically, are also among your most engaged users).
The truth is that the footer matters even more than your middle ‘body’ content.
I’ll refer back to Nielsen group’s scrolling behavior study:
Notice how attention spikes right at the end of the page?
Successful bloggers understand this, which is why they use their footers to increase engagement and conversions.
For example, ProBlogger directs its readers to different resources on its site:
On Hosting Facts, you’ll see a three-column layout (like above) highlighting:
Top-performing content (in terms of revenue/conversions)
“Helpful links” directing users to “best-of” content
Contact us page with email and address
“Social proof” in the form of an established brand (Pingdom’s) logo.
You can also use the footer area to show users all your content and product offerings.
On Entrepreneur On Fire, for instance, John Lee Dumas shows all of EOFire’s offerings (trainings, podcasts and communities) in the footer of his blog content:
Since anyone who has reached the footer is likely already familiar with your content, directing them to high converting pages is a smart move. This is where you can make some additional conversions.
What you can learn from this
Take a close look at your footer and ask yourself: are you making the best possible use of this screen real estate?
If the answer is no, think of the links you can add here. Your best content (in terms of engagement and/or revenue) should get prime space in the footer, as well as your lead-gen forms, earnings disclaimer, and contact details.
9. They use prominent CTAs
What color CTAs do you use?
I know this might sound like a minor design quibble, but your CTAs have a big impact on your conversion rates.
For example, in one case study, changing the color from green to red increased conversion rates by 21%.
This might not sound a lot, but if you get 100 customers each month for a $100 product, you’ll make an extra $2,100 – with no extra work.
In the above example, the red button worked because it contrasted against the green of the logo. The green button, on the other hand, seemed to merge with the text.
Most successful bloggers follow this practice and make their CTAs very prominent.
For example, on Chris Ducker’s site, you’ll see a green CTA standing out against the orange text.
It’s the same on James Clear’s homepage – you see a green button standing out against a grey-white background.
There is actually a scientific reason why contrasting colors work so well in CTAs – the Von Restorff effect.
Also called the “isolation effect”, this principle states that when confronted with multiple stimuli (in our case, CTAs), the stimuli that stand out the most wins our attention.
  What you can learn from this
Since your CTAs lead visitors to subscribe to your newsletter, download your eBooks or buy your courses, it makes sense to optimize it for higher CTR.
Try testing colors that stand out against your site background in your CTAs. The more prominent, the better.
Over to You
Building a high-converting blog isn’t a matter of chance; it is deliberately planned. While your content creation and distribution strategy will largely define your success, you can increase conversions dramatically by following the same tactics as the world’s best bloggers.
Start off with the 9 habits highlighted above. Once you’ve used them, share your results with me in the comments below!
John Stevens is the CEO of Hosting Facts, a startup that helps consumers make data-backed decisions when choosing web hosts. He is also a frequent contributor to WebsiteSetup where he helps businesses set up their website.
The post The 9 Conversion Habits of the World’s Most Successful Bloggers appeared first on ProBlogger.
       The 9 Conversion Habits of the World’s Most Successful Bloggers
0 notes
kristinejrosario · 8 years ago
Text
The 9 Conversion Habits of the World’s Most Successful Bloggers
This is a guest contribution from John Stevens.
Just how do they do it?
From influencing millions to making millions, the world’s most successful bloggers manage to turn visitors into readers, readers into customers, and customers into fans without breaking a sweat.
But is it all accidental, or is there any science behind their success? Are there any habits successful bloggers follow? And if they do, what are they and why do they work?
In this post, I’ll give you answers to these questions, and more.
1. They use multiple opt-in boxes
According to research by ExactTarget:
“77% of consumers prefer to receive permission-based marketing communications through email”.
With email being such an effective method of conversion, top bloggers make sure they don’t leave any stone unturned in order to get visitors’ emails.
Using more than one opt-in box increases the chances of users signing up with you. But there is also a fine line before it gets annoying.
For example, Smartblogger keeps it very subtle. Jon Morrow asks for your email on the homepage and a popup when you’re about to leave the website.
This treads the fine line between “effective” and “annoying”. Since SmartBlogger is a writing-focused blog, the reduced visual clutter also fits its audience and brand image perfectly.
Neil Patel uses multiple opt-in boxes at QuickSprout – on the homepage, sidebar, as a popup and at the end of every blogpost. Some may argue he goes a little overboard but since Neil writes about marketing, his audience is likely forgiving of aggressive marketing tactics.
While you can debate merits and demerits of an aggressive opt-in box strategy, one thing is clear: they work.
Doing it too aggressively in a non-commercial niche might not be the best option, but at the very least, you should have 1-2 opt-in boxes throughout your site.
What you can learn from this:
Use more than one opt-in box on your site. Take advantage of pop-ups and above the fold area (see below) to maximize visibility for your opt-in boxes.
2. They make good use of “above the fold” area
“Above the fold” is the first half of a webpage that is visible without scrolling.
Whatever content you place above the fold is the first thing your visitors will see when they land on that page. If it is irrelevant, there is good chance they will leave the site before exploring further.
As Peep Laja of ConversionXL writes, “Content placed above the fold grabs our 80% of attention”.
Plenty of studies back this claim. According to an eye-tracking study by the Jakob Nielsen group, viewer attention drops dramatically beyond the fold.
Top bloggers understand this, which is why they use their above the fold area to introduce themselves to their audience, collect emails and put forth evidence of their success (such as reviews from other sites).
Tim Ferriss’ site Four-Hour-Workweek is a great example of this.
There’s lots of good stuff happening here.
Let’s drill down:
“About” the blog: This single statement – “If you could 10x your per hour output…” – tells readers everything they need to know about the blog.
Social proof/Proof from authority: By showing off quotes from authoritative publications, Tim leverages the principle of authority and social proof to show that his advice is valuable.
Opt-in box: Tim doesn’t just throw together an opt-in box; he shows readers exactly what they’ll get if they opt-in to this email list.
More proof from authority: Tim adds his NYT and WSJ bestseller tags for good measure to further attest to his expertise.
Also note how Tim uses his own face rather than a generic brand image.
Here’s another example from Noah Kagan, founder of OkDork:
Though not as busy as Tim’s homepage, it still follows the same principles:
Opt-in box: The opt-in box is easy enough to understand, but also note the headline: 85% of my best business hacks. Why not say “all of my hacks”? Because studies show that users fixate on numbers in headlines, not words.
“About” section: Noah uses the opt-in box section to quickly tell readers about himself and his past successes. Again, this is a form of persuasion through authority.
Social proof: “What others are saying” adds further social proof to Noah’s offer.
What you can learn from this:
Two things:
Use the above the fold area to tell readers about yourself and your blog while pushing a lead magnet.
Increase opt-in rates by using social proof and proof from authority via testimonials and quotes.
3. They make it easy to share content
Sharing might sound intuitive to us marketers and bloggers, but your average reader might never share your content unless you make it seamlessly easy to do so.
This is partly due to laziness – your readers don’t want to put in the effort to copy-paste URLs or think of tweets.
Partly, this is because your readers don’t even know how to share content.
In fact, a recent survey of computer users across 33 rich countries showed that only 5% of the population could do complex computer tasks, while 14% are “below level 1”.
Successful bloggers understand this very well. That is why they provide multiple easy options for readers to share content anytime they want.
For example, GrowthEverywhere uses multiple social sharing options on the side bar:
This allows readers to pick their favorite social media channel and share the article with one click.
Another tactic is to use plugins such as Click to tweet to get more shares from Twitter. This takes all the effort out of sharing on Twitter – readers can, well, click to tweet the highlighted text.
Here’s how Tim Soulo uses it on BloggerJet:
But simply flooding your posts with share buttons isn’t enough. Hick’s Law dictates that after a certain point, more choices simply confuses your users and discourages action.
To solve this problem, limit your sharing buttons to your top 2-4 networks. If you don’t have a lot of visual content, it doesn’t make sense to throw in Pinterest, Instagram and Tumblr sharing buttons.
For example, Neil Patel uses just two social networks – Facebook and Twitter – on Quicksprout.
What you can learn from this:
Give users multiple sharing options but don’t flood them with too many choices.
Use plugins such as “Click to Tweet” to make sharing easier.
4. They use overlays to capture additional emails
Email is the foundation of blogging success.
Which is why bloggers keep coming up with innovative ways to capture more and more emails.
One such technique is called ‘welcome mats’.
Welcome mat displays a full-screen call to action that shows when visitors land on your website.
For example, this is how the welcome mat looks like when you visit Zac Johnson’s site.
As you scroll down, the welcome mat goes up and you are presented with the landing page.
SumoMe takes this a step further and uses custom welcome mats for each blog posts. A post about writing better headlines, for instance, shows this welcome mat:
Another popular overlay is to use a Slide-in CTA. This CTA enters the screen below your sidebar content so it doesn’t cover your main content:
Here is how Hubspot uses it:
What you can learn from this
Strategic use of overlays can get you additional conversions. However, make sure that they don’t hinder your user-experience. If someone has already signed up for your email list, hide all overlays from them.
Try using post-specific overlays to push content upgrades and highly targeted lead magnets.
5. They use static home pages to funnel additional leads
If you went back in time and visited ProBlogger.net back in 2013, this is what you’d see:
In contrast, ProBlogger’s homepage today looks very different.
What changed?
For one, ProBlogger’s new homepage doesn’t just show the latest posts. Instead, it pushes PB’s latest content, directs users to relevant categories (“I need help with…”) and also includes a prominent email capture form.
This is a tactic a growing number of bloggers are adopting. Instead of directing users straight to the blog, they direct them to a homepage instead.
Here, they can introduce themselves to their readers, direct them to their best content and capture emails.
For example, here’s Videofruit:
This also gives bloggers an opportunity to do some personalization.
For example, on ProBlogger, returning users are greeted with a “Welcome Back!” message while first-time visitors get links to introductory content.
What you can learn from this
Create a homepage instead of directing users straight to your latest blog posts. This gives you an opportunity to do so much more than just make them read your latest content.
6. They use social proof to build trust and authority
As per wikipedia:
“Social proof is a psychological phenomenon where people assume the actions of others in an attempt to reflect correct behaviour for a given situation.”
In a nutshell, we look at other’s opinions and signals to evaluate our own potential action.
Consider that:
Over 70% of Americans say they look at product reviews before making a purchase.
Nearly 63% of consumers indicate they are more likely to purchase from a site if it has product ratings and reviews.
Top bloggers take advantage of social proof in a number of ways:
By showing testimonials
This is perhaps the most common use of social proof that most (if not all) bloggers use.
According to the research done by Nielsen, “92% people trust a recommendation from a peer and 70% people will trust the recommendation from someone they don’t even know”.
For example, Copy Blogger shows testimonials from real people on their homepage.
By showing authority endorsement
Brian Dean from Backlinko uses testimonials from the big names in the marketing industry.
This is an example of the principle of authority where you leverage the authority of successful people to make yourself appear more trustworthy.
By showing the number of subscribers
For example, on Problogger’s homepage you’ll see this:
300,000 bloggers can’t be wrong, right? By showing that so many people have joined the community, ProBlogger shows that it is trusted by your peers.
By showing media mentions
This is another example of the principle of authority in practice. By showing that you’ve been featured in authoritative publications, you increase your own perceived authority as an expert.
For example, consider Growtheverywhere’s media mentions:
What you can learn from this:
Social proof can be hard to use if you don’t already have it. Showing off your subscriber count when you have just 300 subscribers isn’t very comforting.
To get around this problem, try to get featured in prominent publications or get interviewed by other bloggers.
You can then use the logos from these publications or quotes from others about you as social proof.
7. They use a “Start Here” page.
SmartBlogger does it.
SmartPassiveIncome does it.
Even ProBlogger does it.
I’m talking about a “Start Here” page.
As you can imagine, this is the “start” page for your blog, a page that tells readers who you are, what you blog about, and what they should read.
ProBlogger’s start here page, for instance, tells Darren’s story and shares a list of resources with readers.
Readers will often turn to the “Start Here” page when they land on your site for the first time. While you might have a detailed homepage, it can’t tell your story quite as effectively as a compelling “start” page.
It’s also a fantastic opportunity to collect emails and increase conversions.
What you can learn from this
Easy: create a start page for your blog. This page should:
Tell the reader who you are
Tell them what your blog is about
Direct them to appropriate resources
Set the tone for the rest of your content.
Once you’ve created this page, make it the first link in your navigation menu.
8. They make better use of the footer area
The footer area is often overlooked when designing blogs for conversion. We’re so fixated on the above the fold area that we completely forget about users who scroll all the way to the bottom (who, ironically, are also among your most engaged users).
The truth is that the footer matters even more than your middle ‘body’ content.
I’ll refer back to Nielsen group’s scrolling behavior study:
Notice how attention spikes right at the end of the page?
Successful bloggers understand this, which is why they use their footers to increase engagement and conversions.
For example, ProBlogger directs its readers to different resources on its site:
On Hosting Facts, you’ll see a three-column layout (like above) highlighting:
Top-performing content (in terms of revenue/conversions)
“Helpful links” directing users to “best-of” content
Contact us page with email and address
“Social proof” in the form of an established brand (Pingdom’s) logo.
You can also use the footer area to show users all your content and product offerings.
On Entrepreneur On Fire, for instance, John Lee Dumas shows all of EOFire’s offerings (trainings, podcasts and communities) in the footer of his blog content:
Since anyone who has reached the footer is likely already familiar with your content, directing them to high converting pages is a smart move. This is where you can make some additional conversions.
What you can learn from this
Take a close look at your footer and ask yourself: are you making the best possible use of this screen real estate?
If the answer is no, think of the links you can add here. Your best content (in terms of engagement and/or revenue) should get prime space in the footer, as well as your lead-gen forms, earnings disclaimer, and contact details.
9. They use prominent CTAs
What color CTAs do you use?
I know this might sound like a minor design quibble, but your CTAs have a big impact on your conversion rates.
For example, in one case study, changing the color from green to red increased conversion rates by 21%.
This might not sound a lot, but if you get 100 customers each month for a $100 product, you’ll make an extra $2,100 – with no extra work.
In the above example, the red button worked because it contrasted against the green of the logo. The green button, on the other hand, seemed to merge with the text.
Most successful bloggers follow this practice and make their CTAs very prominent.
For example, on Chris Ducker’s site, you’ll see a green CTA standing out against the orange text.
It’s the same on James Clear’s homepage – you see a green button standing out against a grey-white background.
There is actually a scientific reason why contrasting colors work so well in CTAs – the Von Restorff effect.
Also called the “isolation effect”, this principle states that when confronted with multiple stimuli (in our case, CTAs), the stimuli that stand out the most wins our attention.
  What you can learn from this
Since your CTAs lead visitors to subscribe to your newsletter, download your eBooks or buy your courses, it makes sense to optimize it for higher CTR.
Try testing colors that stand out against your site background in your CTAs. The more prominent, the better.
Over to You
Building a high-converting blog isn’t a matter of chance; it is deliberately planned. While your content creation and distribution strategy will largely define your success, you can increase conversions dramatically by following the same tactics as the world’s best bloggers.
Start off with the 9 habits highlighted above. Once you’ve used them, share your results with me in the comments below!
John Stevens is the CEO of Hosting Facts, a startup that helps consumers make data-backed decisions when choosing web hosts. He is also a frequent contributor to WebsiteSetup where he helps businesses set up their website.
The post The 9 Conversion Habits of the World’s Most Successful Bloggers appeared first on ProBlogger.
       from http://feedproxy.google.com/~r/ProbloggerHelpingBloggersEarnMoney/~3/5qZrCNHzMjM/
0 notes
webpostingpro-blog · 8 years ago
Text
New Post has been published on Webpostingpro
New Post has been published on https://webpostingpro.com/google-says-it-can-teach-its-computers-to-delete-offensive-content/
Google says it CAN teach its computers to delete offensive content
The tech large has long been condemned for its incapacity to manipulate what’s posted on its on-line platforms.
And after last month’s Westminster terror attack, the Everyday Mail highlighted how easy it became to use Google to discover terror handbooks encouraging jihadis to carry out comparable automobile and knife attacks.
But performing to bow to the stress to block greater offensive content material
The agency says it’s far constructing computers that may research context – supporting to perceive anything that needs to be eliminated.
Currently teams of humans are checking the systems to look if they are doing an amazing job, and in the end, the company hopes the machines will take over.
Google now desires the computers which screen content being uploaded via YouTube and different channels to recognize the nuances of what makes a video offensive.
The business enterprise is giving its systems human-vetted examples of secure and risky content as a reference point.
Google Search Engine Organic SEO Impacting Updates for 2017
Nearing the quit of 2016, Google started out letting site owners realize approximately imminent changes to their search engine ranking device that might have the effect on how sites might be considered in 2017. To keep to rank properly in 2017, websites will need to hit certain additional standards. In this text, I talk those key new adjustments that will impact your website’s natural Search engine optimization rankings within the Google search Engine.
The first object on their listing is that of ensuring that your website has a published SSL
Certificates in place. Now, as some distance as Google seeks scores cross, you will start to be penalized if you do now not have an SSL certificate in place on your web page.
One of the first moves in this regard already now in place is that if you do not have an SSL certificate on your website, the Google Chrome browser will insert and exclamation mark “!” on the URL line to let a capacity page viewer be conscious that the site has now not been secured. Clicking on the exclamation mark brings up the info of the security infraction. This new object is now already in an area at the browser with the January 2017 Chrome “56” browser replace.
SSL certificate is not a primary fee in recent times and you may get them installed region
For as low as about $26 in line with the year in case you are not going for walks an e-commerce site and approximately $70 or so if you are. Google is very interested in clients being protected as they go to websites directed with the aid of Google and they need to make certain that purchaser facts entered on these websites is encrypted and someone’s information is saved securely. in this regard, they may consequently be penalizing “natural seek-sensible” the ones websites that have not positioned SSL certificates in a region. So, if being discovered by way of Google organically is important to you, that is a step you may need to take together with your website online.
Subsequent on their schedule is popup provides on web pages,
in particular on cellular devices. Google customers locate adds that pop up on web pages they go to to be very evident and demanding and Google has been paying attention to their complaints. Google has discovered that pop up adds regularly can cool a whole display screen on a cell device and can also be difficult to do away with. So now as Googlebot crawls your web pages and especially, your mobile web pages, be aware that they may be looking on popup provides with disfavor and your web page might be penalized if popup provides are observed.
Google’s circulate right here is because they’re trying to supply first
cLass content to their search and “AdWords” customers on behalf of their advertisers. they’re on the hunt for satisfactory content pages to serve up – no longer “Fluff” pages whose primary cause is to pop up an upload to promote something. Advertising and marketing on the internet go to begin to trade because of this new seek engine ranking requirement so if you are wanting to be observed and you presently run popups to your pages, you will be looking to start doing a little rework on those pages. Do general Advertising via anchor textual content links and hyperlinked photographs on pages as an alternative – Google will praise you for it in preference to penalizing you.
Areas Of Misuse Of Computers And The Internet – Computer Misuse Act
You must already be familiar with data [data: information without context, for example, a list of students with serial numbers, is data. When these figures represent the placement in a 100-meter race, the data becomes an information] and computer misuse [the data stored electronically is easier to access]; with software program [software: a general term used to describe an application or program], which may not be reproduced without permission. The effects lead to software program piracy [piracy: the acquisition, benefit from the use or making changes to copyright material without prior permission]; and hacking, and might lead to facts corruption; accidental or deliberate.
Styles of laptop Misuses
Misuse of computer systems and conversation may be in distinct bureaucracy:
Hacking
Hacking is whilst an unauthorized man or woman uses a community [Network: A group of interconnected computers]and a web modem [modem: a piece of hardware that connects the computer to the Internet] to access safety passwords or other safety of records saved on some other laptop. Hackers every now and then use software hacking tools and regularly goal some sites on the Net. Their exploitation isn’t always handiest confined to non-public networks but additionally to authorities and corporate PC networks.
Misuse of statistics and unauthorized switch or replica
Copying and illegally transferring information fast and without problems online using computers and massive storage devices consisting of difficult disk drives [HDD: a device used to store large volumes of data, on a hard disk], memory sticks [memory stick: a thumb-sized portable storage device mainly used for transferring files between computers] and DVDs [Digital Versatile Disc- used to store data, for example, a film]. Personal information, employer research, and written paintings, along with novels and textbooks can not be reproduced without permission of the copyright holder.
Copying and distribution of copyright software, tune, and movie
This additionally applies to the copying of song and movies to flow into at the Internet without the copyrights [copyright: Indicates the creator of an original piece of work and controller of the publication, distribution, and adaptation] authorization holder. This is a huge misuse of both computers and the Net that overlooks the copyrights regulations and policies.
Pornography
A large part of indecent material and pornography is available via the Internet and can be saved in digital shape. There had been numerous instances of substances which can be categorized as unlawful, or that show illegal acts, discovered saved on computer systems, at risk of prosecution for possession of those substances.
Identity and financial misuses
This subject matter covers misuse of stolen credit card numbers to gain goods or offerings on the Internet and using computer systems in economic frauds. These can range from complex well thought deceptions to simple programs, consisting of printing of counterfeit forex using color printers.
Tired of Weak Offensive Line Play in Youth Football? 4 Quick Tips
Here are four quick recommendations to enhance your teenager’s soccer groups offensive line play:
Who” to block is as or more critical than “How” to block for most teenagers soccer groups.
Even the finest block on the incorrect player can result in football plays that go for losses.
Then again, often even a poorly completed block on the right player can impede the defender lengthy sufficient in your crew to get a decent benefit out of the play.
A few matters to do not forget:
1) So as for your team to efficaciously block the right player on each play, you ought to have an easy and sound blocking scheme and regulations. Our blocking off rule on maximum plays is GOD, internal gap, “on”, unconditional down. The participant appears to the inner hole first, if no person is there, they appearance to “on”. If no one is there, they pass to an unconditional down block.
2) You need to teach the scheme to the gamers in a style they can understand it and where it turns into 2nd nature to them. We do plenty of first two step and freeze drills. Additionally, assign our high-quality coach to the offensive line.
3) Your offense needs to make an effort at some stage in practice to make sure that every play is administered flawlessly.
make certain the best participant is being blocked each play and with proper first steps and head placement the use of strategies like “bird-dogging” and in shape and freezing. Those strategies include the offensive line taking steps on your matter 1-2-3-4 and “becoming” at the defender he’s to block. That is a gradual motion drill, not live scrimmaging.
4) The approach is critical too, but “Who” to the dam is often the most overlooked area with maximum young people soccer teams.
150 loose youth football education recommendations for you Here: adolescents football
0 notes
hydrus · 7 years ago
Text
Version 279
youtube
windows
zip
exe
os x
app
tar.gz
linux
tar.gz
source
tar.gz
I had a great week. The big downloader overhaul took a big step forward, and I somehow fit in a ton of other stuff as well.
hydrus network upgrade
The client now uses the new network engine to talk to hydrus services. This was the last holdout of the old network engine, and I am happy to have finally moved everything over.
Ideally, you will not notice any differences. The same basic protocol is happening, but now it will go queue up in the new system and follow its bandwidth rules and all that. You will see 'hydrus service' network contexts appear in the the bandwidth window (and wherever else) and be able to set service-specific rules there.
Also, the 'logging in' that hydrus clients need to do works on the new login engine. I am very pleased with this, but it is a first version. It took a lot of work to figure out a good pipeline for error states and the less common operations (like access key testing) and I suspect there are still some bugs for other unusual situations. Please let me know if you run into any trouble. If you do have a problem, a good solution to some problems is to go to the repository in services->review services and click 'refresh account'. Please let me know the details in any case. The error handling works but is not yet polished--I already have a job set up to improve specifics in the coming weeks.
Please note that if you run a server, you probably want to update it this week. Although <279 clients can talk to >=279 servers, the reverse is not true. New clients trying to talk to old servers will get safe-but-frustrating 'cannot login' errors whenever they try to do anything (this was due to a long-time bug in the hydrus session code that happened by chance not to affect old clients).
As everything now runs on the new network version, I can now tackle a number of catchup jobs that were on hold while I was bridging two systems. I expect several engine-wide things like error handling/logging and network use user presentation and old broken test code fixing, and maybe even proxy support, to come in the near future.
other highlights
Import folders can now be forced to 'check now' from the file menu! If you like, you can set up 'manual' import folders by pausing them in the manage dialog and then only running them when needed in this new submenu. I expect to add a subscription-like progress popup for import folders to make these workflows neater.
Queries that only include a positive ratings predicate ('rated' or a specific rating, not 'not rated') and perhaps only a couple of other system search terms--usually something like ('system:rating favs=like', 'system:limit=60')--now have an optimisation to run much faster. This matters for clients with large collections, where these searches could take up to five seconds the first time. Now they should only take a handful of milliseconds!
I have updated a number of the default boorus to now have https urls. I believe all the sites that now support valid https _should_ have it. Normally these changes would only affect new users, but I have also added a button to services->manage boorus to restore any of the default boorus! If you haven't messed with the boorus at all, you may just like to restore all your boorus through this button--you might get some new entries (danbooru or sankaku, for instance) that were broken when you originally installed.
Pages that you give a custom name shouldn't now be overwritten by the thread watcher. There is more to do here (I'd like to have custom names that can still do [DEAD], and dealing with tab icons), but let me know if you discover any combinations where the overwrite still happens.
Pages should now draw their thumbnails much more efficiently, using far less CPU to animate!
If you are in advanced mode, the number of currently open pages will be written in the 'pages' menu!
full list
moved the hydrus service object over to the new networking engine
hydrus services now appear in the bandwidth review panel
hydrus requests now obey larger network bandwidth rules (this mostly means 'global')
service bandwidth usage and rules are no longer managed from manage services--it is now under review bandwidth usage, like all other network contexts
updated some network engine stuff for misc hydrus states like 'server busy'
fixed a bug in the server code where the session key cookie had an invalid expiration timestamp--servers should update this week to make sure new clients can log in properly
hydrus network requests will force-set User-Agent as 'hydrus client/(network_version)' as the network version is used in the protocol to determine compatibility
fleshed out the hydrus specific network job, giving it the various bandwidth tracking and version checking responsibilities the service object used to have
moved session cookie decay (only matters for Hentai Foundry atm) to the new session manager (was previously hacked into the login manager)
moved some hydrus response parsing stuff around, added content type awareness to the new network job
updated several unusual hydrus 'static/test' requests used to test credentials and fetch access key and so on to the new system
added a special 'test service' service to better accomodate these requests
wrote a static login script for hydrus services
polished up login management system overall
import folders now support a 'check now' state, like subscriptions, that will cause them to check immediately
import folders can be 'check now'ed from the file menu under a new submenu! if you would like to have a 'manual' import folder, try pausing it and just running it from this menu!
added an optimisation to the file search algorithm to search ratings queries super fast when they lack tag or file system preds to otherwise speed them up
updated the booru presets that now support https to be https
added a 'restore defaults' button to the manage boorus dialog--you can restore specifics or all of them
optimised how fading thumbnails are blitted to screen, which may provide a huge performance boost for high-res/small-thumb clients
pages that have been renamed by the user will no longer be rename-overwritten by any auto-renaming system (currently just thread watchers, I think, but this will expand in future). unfortunately, this is not retroactive--only pages renamed from now on will be aware that they were user-renamed
in advanced mode, the pages menu now states how many pages are currently open
the 'page of images' downloader will now say '(x already in queue)' when it reports how many urls were found, if any were already in the queue. (this should clear up some confusion where it would previously say '0 new urls' even when it found some stuff)
the gallery downloader will do essentially the same, but on a per-page basis. the text is a little crushed, so I may revisit this
fixed an issue with the manage services dialog not being able to rename dupe-named services on edit subdialog ok
the manage services dialog now uses the new listctrl! the listed services are no longer a horrific unsorted mess!
fixed the file import status button not showing on raw url downloader or import folder edit dialog
improved how some directory tree merging code deals with read_only files in the source
maybe fixed some unusual selection behaviour with the booru selection popup dialog. it now has a real ok button, rather than a mickey-mouse hidden one
completely deleted the old networking engine!
cleaned out some unused imports from the networking code and related entries from running_from_source.html
changed up and fixed some odd bugs in how how repositories test some error/isfunctional stuff vs regular paused status
hydrus network contexts now have a prettier name
ip address-based network contexts will no longer spam the bandwidth tracker with their useless subdomains
network jobs that are unable to attempt validation or login will now error immediately rather than waiting indefinitely
fixed up a bunch of test code that was broken due to the mismatch of network engines
broke some other test code due to the network engine transfer!
the client is more resilient about broken 'twisted' installs, and _should_ be able to boot without it. this may or may not apply to the built release--more work can be done here
some network job refactoring
clientside service code cleanup
misc fix that I can't remember
misc cleanup
misc refactoring
next week
I couldn't get to EXIF image rotation this week, so that's top of my list. If I can get that done in reasonable time, I'll start on the user-editable login engine stuff, which will probably involve planning and halloween-appropriate skeleton-writing.
1 note · View note
hydrus · 3 years ago
Text
Version 443
youtube
windows
zip
exe
macOS
app
linux
tar.gz
I had a great week doing nice cleanup and quality of life work.
Hey, we had a problem getting the macOS release to build this week. The macOS link above goes to a build using a simpler and faster method. It should work fine, but please let me know if you have any trouble. As always, back up before you update!
highlights
Popup messages can now launch complex jobs from a button. The first I've added is when a subscription hits its 'periodic' file limit. The situation itself is now better explained, and a button on the popup will create a new downloader page with the specific query set up with an appropriate file limit to fill in the gap. The second is if you try to upload some content to a repository that your account does not have permission for (this is affecting sibling- and parent-uploading PTR users as the shared public account is changing), the popup message that talks about the issue now has a button that takes you straight to the manage services panel for the service and starts automatic account creation.
Subs should now be more careful about determining when they have 'caught up' to a previous sync. Small initial file limits are respected more, and the 'caught up' check is now more precise with sites that can give multiple files per URL or very large gallery pages.
I gave options->speed and memory a full pass. The layout is less crushed and has more explanation, the options all apply without needing a client restart, and the new, previously hardcoded cache/prefetch thresholds are now exposed and explained. There's a neat thing that gives an example resolution of what will be cached or prefetched, like 'about a 7,245x4,075 image', that changes as you fiddle with the controls.
The client has recently had worse UI lag. After working with some users, the biggest problems seemed to come in a session with lots of downloaders. I traced the cause of the lag and believe I have eliminated it. If you have had lag recently, a second or two every now and then, please let me know how things are now.
If you use the Client API a lot while the client is minimised, you can now have it explicitly prohibit 'idle mode' while it is working under options->maintenance and processing.
full list
quality of life:
when subscriptions hit their 'periodic file limit', which has always been an overly technical term, the popup message now explains the situation in better language. it also now provides a button to automatically fill in the gap via a new gallery downloader page called 'subscription gap downloaders' that gets the query with a file limit five times the size of the sub's periodic download limit
I rewrote the logic behind the 'small initial sync, larger periodic sync' detection in subscription sync, improving url counting and reliability through the third, fourth, fifth etc... sync, and then generalised the test to also work without fixed file limits and for large-gallery sites like pixiv, and any site that has URLs that often produce multiple files per URL. essentially, subs now have a nice test for appropriate times to stop url-adding part way through a page (typically, a sub will otherwise always add everything up to the end of a page, in order to catch late-tagged files that have appeared out of order, but if this is done too eagerly, some types of subs perform inefficiently)
this matters for PTR accounts: if your repository account does not have permissions to upload something you have pending, the popup message talking about this now hangs around for longer (120 seconds), explains the issue better, and has a button that will take you directly to the _manage services_ panel for the service and will hit up 'check for auto-account creation'
in _manage services_, whenever you change the credentials (host, port, or access key) on a restricted service, that service now resets its account to unknown and flags for a swift account re-fetch. this should solve some annoying 'sorry, please hit refresh account in _review services_ to fix that manually' problems
a new option in maintenance and processing allows you to disable idle mode if the client api has had a request in the past x minutes. it defaults disabled
an important improvement to the main JobScheduler object, which farms out a variety of small fast jobs, now massively reduces Add-Job latency when the queue is very busy. when you have a bunch of downloaders working in the background, the UI should have much less lag now
the _options->speed and memory_ page has a full pass. the thumbnail, image, and image tile caches now have their own sections, there is some more help text, and the new but previously hardcoded 10%/25% cache and prefetch limits are now settable and have dynamic guidance text that says 'about a 7,245x4,075 image' as image cache options change
all the cache options on this page now apply instantly on dialog ok. no more client restart required!
.
other stuff, mostly specific niche work:
last week's v441->442 update now has a pre-run check for free disk space. users with large sessions may need 10GB or more of free space to do the conversion, and this was not being checked. I will now try to integrate similar checks into all future large updates
fixed last week's yandere post parser link update--the post url class should move from legacy moebooru to the new yandere parser correctly
the big maintenance tasks of duplicate file potentials search and repository processing will now take longer breaks if the database is busy or their work is otherwise taking a long time. if the client is cluttered with work, they shouldn't accidentally lag out other areas of the program so much
label update on ipfs service management panel: the server now reports 'nocopy is available' rather than 'nocopy is enabled'
label update on shortcut: 'open a new page: search page' is now '...: choose a page'
fixed the little info message dialog when clicking on the page weight label menu item on the 'pages' menu
'database is complicated' menu label is updated to 'database is stored in multiple locations'
_options->gui pages->controls_ now has a little explanatory text about autocomplete dropdowns and some tooltips
migrate database dialog has some red warning text up top and a small layout and label text pass. the 'portable?' is now 'beneath db?'
the repositery hash_id and tag_id normalisation routines have two improvements: the error now shows specific service_ids that failed to lookup, and the mass-service_hash_id lookup now handles the situation where a hash_id is mapped by more than one service_id
repository definition reprocessing now corrects bad service_id rows, which will better heal clients that previously processed bad data
the client api and server in general should be better about giving 404s on certain sorts of missing files (it could dump out with 500 in some cases before)
it isn't perfect by any means, but the autocomplete dropdown should be a _little_ better about hiding itself in float mode if the parent text input box is scrolled off screen
reduced some lag in image neighbour precache when the client is very busy
.
boring code cleanup:
removed old job status 'begin' handling, as it was never really used. jobs now start at creation
job titles, tracebacks, and network jobs are now get/set in a nicer way
jobs can now store arbitrary labelled callable commands, which in a popup message becomes a labelled button
added some user callable button tests to the 'make some popups' debug job
file import queues now have the ability to discern 'master' Post URLs from those that were created in multi-file parsing
wrote the behind the scenes guts to create a new downloader page programmatically and start a subscription 'gap' query download
cleaned up how different timestamps are tracked in the main controller
next week
I am now on vacation for a week. I'm going to play vidya, shitpost the limited E3, listen to some long music, and sort out some IRL stuff.
v444 should therefore be on the 23rd. I'll do some more cleanup work and push on multiple local file services.
Thank you for your support!
0 notes
siliconwebx · 6 years ago
Text
Divi Plugin Highlight: Easy Slide-Ins
Easy Slide-Ins is a third-party plugin for Divi and Extra that allows you to create slide-ins (and popups) using the Divi builder. The slide-ins can display anything that can be built with the Divi Builder. Trigger the slide-ins with a scroll percentage, exit intent, a button with multiple locations, and with a CSS Class. It includes lifetime updates and demos.
In this article, we’ll look at Easy Slide-Ins and see what it can do and easy it is to use. We’ll also take a look at a few of the demos that are included with the plugin. The plugin is available from the developer’s website.
Installing Easy Slide-Ins
First, unzip the file. Inside the folder, you’ll find demos, a file with a link to the documentation, and the Easy Slide-Ins plugin.
Upload and activate the plugin as normal.
A new menu is added to the dashboard called Easy Slide-Ins. Click this menu and enter your license key.
Activating the license adds two menu items (All Items and Add New) where you can see your slide-ins and create new slide-ins.
Creating a New Slide-In
Clicking to add a new slide in opens an editor where you can use the Divi Builder to create the slide-in.
It also includes a lot of settings. They’re placed under the Divi Builder. Choose the position from left, right, top left, top right, bottom left, bottom right, top bar, bottom bar, left sidebar, or right sidebar. Set it to auto trigger on scroll and choose the scroll amount. You can also set it to open on exit intent. Set the background color, box shadow, and slide-in width.
Show the title and enter the text for it to show. Choose the title’s background and text colors, and the font family, size, and weight. Set the corner roundness, label height, and label width. Show the closing icon and choose the background and icon colors and the icon size.
The controls are intuitive to use and understand. There are enough adjustments to style the label to match your website and control how the slide-ins work.
Other features are added or removed depending on the options you choose. I selected Box Shadow and it now provides options for the horizontal and vertical position, blur and spread strength, and color.
The Advanced Tab lets you choose the pages the slide in can be displayed on. You can select all pages, individual pages, and all posts. You can hide the slide-in on certain devices.
The Custom Fields tab lets you add custom fields just like any page or post.
Easy Slide-Ins Examples
This is the contact page from the Risk Management layout. I’m using this to build the slide-in so the design will fit the layout. I’ve set to not show the sidebar or dot navigation. You can preview just like a standard page. Once you’ve designed the slide in, publish as normal.
I’ve enabled the label in the settings and set the background to black and the text to white. I kept the default text (Contact Us). I’ve set it to display in the upper right corner. This is using the default height, but it can be changed easily.
Clicking the label opens the slide in, which displays over the screen showing the contact form from the Risk Management layout pack. Clicking the Contact Us button again closes the slide-in. I have the slide-in width set to 500 pixels, the label height at 150, and the label width at 60.
The example shows the box shadow. I’ve changed the location to the right sidebar, which displays the close button. I’ve changed the colors of the label and close button and made the label’s corners more rounded. I’ve also set the slide-ins width to 600 pixels.
For this one, I moved the label to the top bar position. I used colors from the layout and changed the width to 122 pixels and the height to 40 pixels. As you can see in this image the label remains in place on scroll.
It opens in full screen and includes the close button.
For this one, I’ve added a new slide-in to the left sidebar. I’ve styled it to match the site and left the corners of the label squared. I’m using 50% label top margin, which places the top of the label in the center of my screen height.
It opens from the left. I gave it a pixel width of 1000, so it covers a lot of my screen. The Contact slide-in is still showing at the top even though the menu is covered by the newsletter slide-in.
The slide-ins give you a button trigger class. You can use this with buttons to open the slide-in.
Copy the class and paste it into the button’s CSS Class field.
Now, clicking the button opens the slide-in. There doesn’t need to be labels anywhere, but it will slide-in from the direction of where you’ve placed the slide-in. This one was placed on the left, so it comes from the left. I’ve set the width to 1000 pixels.
Easy Slide-Ins Demos
The download file includes 12 demos. These are pre-made layouts (JSON files) that you can upload into the Divi Library. Import them into the Divi library like regular layouts. They include styled modules but you’ll have to set up the design settings. Here’s a look at a few of them.
This is Collection Email with Exit Intent. It includes several text modules, a contact form, and an image module.
Here’s how it looks on screen. I’ve left everything at default here, so the button still shows the original text, location, and styling.
This one is Collection Email with Scroll Intent. It includes a background image, two text modules, and an email module.
Here’s how it looks on the page using the premade settings. This shows how responsive the slide-in is (which is exactly what we’d expect, since it’s showing a Divi layout). If you want to show more of the image just make the slide-in wider.
This one is Guide Your Visitors. It includes a code module (for Google Maps), several blurbs, text, and a contact form.
Here’s how it looks on the page using the default settings.
This one is Promotion with a label. It includes a text module, several pricing tables, and a button.
Here’s how it looks on screen. I’ve set it to 800 pixels so it would show the full width if the slide in. I removed the label and set it to display when the page scroll hits 60%.
Here’s the same layout when viewed with Extra. I’m glad to see that it works great with both Divi and Extra.
Easy Slide-Ins Price and Documentation
Easy Slide-Ins is available from the developer’s website. It has two purchase options:
Single site – $27
Unlimited sites – $97
Both licenses include the demos and lifetime updates.
Documentation is provided at the developer’s documentation and support page. The page includes a walkthrough of each of the points with images to demonstrate them. The page also includes a link to email support.
Ending Thoughts
Easy Slide-Ins makes it easy to create slide-ins and popups for Divi and Extra. I found it easy to use. I never needed the documentation, but it’s there if needed. It’s an interesting way to bring in hidden page elements. Since anything can be used in the slide-in you can show contact forms, newsletter signups, calls to action, videos, shop modules, etc. It can be a single module or a full page layout.
I like that it has multiple trigger options. Exit intent and auto trigger make it a good choice for creating email and CTA popups. Opening by clicking the label is a nice way to add them to multiple locations on your pages. I like that you can add multiple slide-ins on a single page and that you can determine which pages they display on. Adding the CSS Class to buttons is a great way to reveal information when the visitor chooses to see it.
You can build the slide-in from the front-end but I didn’t see how to access the settings. Without the settings, I couldn’t move the labels and see their location in real-time. I had to load a page to see them. It still wasn’t difficult to use, but there was a little bit of guesswork involved. This is so minor that I wouldn’t keep me from using or recommending it.
If you’re looking for a simple and intuitive way to create slide-ins using the Divi Builder, Easy Slide-Ins is worth a look.
We want to hear from you. Have you tried Easy Slide-Ins for Divi? Let us know what you think about it in the comments.
Featured Image via ByEmo / shutterstock.com
The post Divi Plugin Highlight: Easy Slide-Ins appeared first on Elegant Themes Blog.
😉SiliconWebX | 🌐ElegantThemes
0 notes
siliconwebx · 6 years ago
Text
How to Add Simple Stripe Payment Buttons to Your Pricing Tables in Divi
Stripe is an extremely flexible payment processing solution for online businesses, especially if you are a tech savvy developer. But, if you aren’t a developer, and still want to use Stripe to sell a few products online, there are simple ways to do just that. In fact, with a few snippets of code (or a simple plugin), you can add Stripe payment buttons to your website in a flash.
In this tutorial, I’m going to show you how to add Stripe payment buttons to your Divi website using Stripe Payments for WordPress Plugin. I’ll even show you how to style your buttons to match your Divi layout.
Let’s get started!
Sneak Peek
Here is a sneak peek of the Stripe payment buttons we will create in this tutorial.
Getting Started
For this use case tutorial, you will need the following:
The Divi Theme (installed and active)
A Stripe Account
The Stripe Payments for WordPress Plugin by WP Simply Pay (installed and active)
We will also be using a the Digital Products Pricing Page Layout available for FREE within the Divi Builder
About the Plugin
Stripe Payments for WordPress by WP Simply Pay is a plugin that allows you to start collecting credit card payment with Stripe using a simple shortcode embed. You can actually create checkout forms and payment buttons manually without the use of the plugin, but since this plugin makes things easy and offers a few convenient features (like payment confirmation and payment failure pages), I thought it was more helpful in the long run. I will be using the FREE Lite version of the plugin for this tutorial. The pro version of the plugin will give you more control over the style of your forms along with support for things like custom fields, custom amounts, and subscription features.
Setting up Stripe forms with the Plugin
Once you have the plugin installed and active, navigate to Simple Pay Lite > Settings. Then under the Stripe Keys tab, you will need to enter your Stripe account API keys. For the sake of this tutorial, I will be only using the test keys, but you will need to make sure and activate your Stripe account and generate some live api keys if you want to start collecting real money.
You can find your API keys by signing into your Stripe account and clicking Developers > API keys.
You will need to copy both the Publishable key and Secret key over to the plugin settings.
Now jump over to the general tab. There you will be able to designate a Payment Success Page and a Payment Failure Page. You will notice that the plugin has already created those pages for you. But since the page content is generated by a shortcode, you can actually add those shortcodes to any Divi module on any Divi layout to create custom versions of those pages. For now just keep those default pages in place and continue the setup.
Set the payment button style to “none (inherit from theme)”. All this does is take out the css used to style the default blue stripe button. This will make things a little bit cleaner for when we add our own custom CSS to style the button in Divi.
Then save changes.
Under the payment confirmation tab, you can use the available template tags to customize the message and information that is displayed by the shortcode in your payment confirmation page. But for this tutorial, I’m just going to leave the default message.
Creating Stripe Payment Forms
The payment forms are really Stripe payment buttons that generate a popup payment form that allows users to complete a purchase without ever leaving the page. Therefore you will need to create a new payment form for each product or service you are selling. In this use case, we are going to create three payment forms for three mock products.
To create a new payment form, go to the WordPress Dashboard and navigate to Simple Pay Lite > Add New.
Give the Payment Form a title (this title won’t be shown on the front end).
Then under the Payment Options tab, enter a One-Time Amount.
Next, click the On-Page Form Display tab and change the default Payment Button Text to “Buy Now” (or whatever you want). You can also choose the payment button processing text as well.
Under the Checkout Overlay Display tab, update the following:
Company Name Item Description Logo/Image URL Enable Remember Me: YES
These options determine what is shown in the checkout form popup for this particular product.
Once you are done, make sure and publish/update the payment form.
You will eventually need to copy the Payment Form Shortcode located at the top right of the Edit Payment Form page in order to paste it into your Divi page layout.
But for now, you can continue the same process to create two more payment forms each with their own item description, logo/image, and amount.
Once all your payment forms have been created, you can visit your payment forms by navigating to Simple Pay Lite > Payment Forms. There you will have easy access to the shortcodes.
Adding Stripe Payment Buttons to Your Divi Page Layout
With out stripe payment form shortcodes ready to go, now we need to get our Divi page layout up and running. To do this, create a new page, give your page a title, and click to use the Divi Builder.
Then select the option “Choose a Premade Layout”.
Open the Digital Product Layout pack and click to use the Digital Product Pricing page.
Once the layout is loaded to the page, publish the page and then click to build on the front end.
In a separate tab, go back to the payment forms page and grab the shortcode that you want to add to the pricing table.
Then go back to your pricing page layout and open the pricing table settings for one of the pricing tables in the layout.
Take out the button text (you don’t need it since the shortcode will serve as the button) and then paste the shortcode under the content in the content box.
You will see an unstyled button with the text “test mode” highlighted under the button. The button in unstyled because we selected the option to use the theme styles for the button instead of the default blue button. The test mode text is simply there to remind you that you are not using a live stripe payment form. The test mode text will obviously disappear once the live API keys are used.
Next, continue the same process of copying and pasting the other two payment form shortcodes in the remaining two pricing tables.
Test out one of the buttons to make sure the payment form overlay is working properly. It should look like this…
Unfortunately, this version of the plugin doesn’t allow you to customize the payment form overlay beyond the default style that you see. But the functionality is there and in many cases, you won’t need that extra styling. However, you can style those buttons!
Styling the Stripe Payment Buttons to Match the Layout
To style the Stripe payment buttons, we are going to add some custom CSS to our page settings. First, we need to figure out what selector we are going to use to style the button. You can find this by using your browser developer tools. Right click on the Stripe button and select “Inspect”. In the html code you can see that the button has a css class “simpay-payment-btn”.
This is the selector we need to target the style of the button.
If we want to match the style of our Stripe payment buttons with the buttons used on our premade layout, we can inspect one of the Divi buttons already styled on the page to get the CSS code we need.
Now open the page settings and add the following Custom CSS under the Advanced tab:
.simpay-payment-btn { color: #ffffff!important; border-color: rgba(0,0,0,0); border-radius: 100px; letter-spacing: 2px; font-size: 16px; font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important; font-weight: 600!important; background-color: #091c4f; padding-top: 16px!important; padding-right: 32px!important; padding-bottom: 16px!important; padding-left: 32px!important; }
That’s it! Let’s check out the final result.
Customizing Your Payment Confirmation and Payment Failed Pages
Don’t forget that since the plugin generates your payment confirmation and payment failed page content using a shortcode, you can add that shortcode to any Divi layout and then use Divi’s built in settings to style the text how you want.
This is helpful for matching the styles of these pages with you website without have to resort to custom CSS.
Final Thoughts
Stripe can be an extremely convenient solution for collecting online payments. And, with the Simple Payments for WordPress plugin, you can get the basic Stripe Checkout functionality up and running on your Divi site in minutes. Also, if you take advantage of Divi’s premade layouts, you can add and style your Stripe payment buttons to match your layout simply by copying and pasting CSS code already created for you. The result is a fully functional and secure payment processing tool that can collect payments from visitors without them ever having to leave the page.
Feel free to explore more ways to accept Stripe payments on your WordPress website.
I hope you find this tutorial helpful and I look forward to hearing from you in the comments.
Cheers!
The post How to Add Simple Stripe Payment Buttons to Your Pricing Tables in Divi appeared first on Elegant Themes Blog.
😉SiliconWebX | 🌐ElegantThemes
0 notes