• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Bnpositive's Blog

  • Home
  • Blog
  • About Me
  • Contact Me
  • FREE Local SEO Audit
You are here: Home / Archives for web design

web design

03/26/2021 By Jason Bean Leave a Comment

How to Create an Animated Slide In Effect on a Divi Column

Divi Row Column Slide-In Animation Effect

Since I just finished creating this little guide for a client, I thought I'd publish on my site as well as I'm sure it could probably help someone else in the future.

If you're a Divi theme user, then you know there's a load of features and power available within the interface, sometimes the challenge can just be where to go to do the things you want to do. In this case, I was working on recreating a theme that someone had built. In there process they had ripped out all the benefits of using WordPress and buried code and functionality deep into the template files where nothing was easily accessible or manageable. In their design, the site appeared to be a continually scrolling website but scrolling right-to-left, not top-to-bottom. To keep that same feel and experience for the visitor, I created an animation effect for the main content column in the layout to appear like it slides in from the right when each page loads.

Now, how and where did I go in Divi to do it? Here we go!

First I used the Divi Theme Builder controls to build me a layout that consisted of a simple sidebar on the left and a wide content module on the right. That was achieved by adding a single Divi row container into the layout with a simple 2 column layout inside of it.

Follow these simple steps to animate the entire right-hand column of the layout:

Step 1: Access the Divi Theme Builder and Row Settings Control

You can access the Divi Theme Builder from the Divi section available in the main left-hand menu within the standard WordPress Admin Dashboard. Hover over the green row container until it's control module displays and click on the little gear icon

Step 2: Access the Column Settings Controls

When you access the Row Settings controls a new modular window displays with the columns displayed, just click on the gear icon for the 2nd column displayed, which then opens another modular window.

Step 3: Navigate to the Design Tab of the Column

As you're aware, each module, container, row, section in Divi normally has three tabs across the top for managing all the settings available (Content, Design & Advanced). We want to access the "Design" tab, so click on it.

Step 4: Scroll Down to the Animation Section

At the bottom of the Design controls is a section labeled "Animation". Within this section are all the controls you need to make your slide-in effect happen. Once you get in there you'll see, as usual with Divi, you have a plethora of controls and modifiers to take advantage of in your design.

In my case, the client was very pleased. Was not familiar with Divi, but seemed to be very impressed with the organization and ease of which managing content and manipulating features and controls were within the theme. The other thing that I thought was interesting, and surprisingly quite a challenge with this project was the broad range of responsiveness that was needed within the design. It stretches the full width of any monitor and resolution to fill the available space, but also shrinks down and displays well for mobile phones and tablets.

Le tadalafil est commercialisé en France depuis novembre 2017, à la suite de l'expiration du brevet détenu par le laboratoire Lilly pour le Cialis®. Il faut savoir que pour qu'un médicament générique puisse obtenir une autorisation de mise sur le marché, il est étudié très sérieusement. Il faut prouver qu'au-delà de sa composition identique en ingrédient actif, il apporte le même bénéfice que le médicament d'origine, sans présenter plus d'effets secondaires. Le générique a ainsi dû prouver son efficacité en comparaison avec un médicament placebo. Il a donc été prouvé que le Cialis générique est aussi efficace que le Cialis Original.

Filed Under: Technology Tagged With: animation, Divi, howto, tutorial, web design, WordPress

10/31/2015 By Jason Bean Leave a Comment

Trying Out Some New Web Development Software

BuzzooleIt's been awhile since I've really used some web development software. With much of my time spent developing and supporting clients using WordPress, the need to have a 3rd party web development tool hasn't been a pressing need for me. When I do need some development software I've usually relied on on old version of Macromedia Dreamweaver. You caught that right, I said Macromedia. It's been years since Adobe purchased Macromedia and took over their products and I never really wanted to make the transition to Adobe so I kept using my old software, which continued to work just fine for what I needed. Even now that I'm paying for the Adobe Creative Cloud suite, I still find myself jumping back to my familiar territory with Dreamweaver 8.

WebsiteX5 Professional PackageBut now I've had the opportunity to try out a new piece of software called WebsiteX5 Professional (you can download a free fully-operational demo version of the product) through a Buzzoole campaign I'm participating.

The product is very reminiscent to me of the old Dreamweaver tools. Things are layed out differently, but from my perspective, it makes sense so that made it easy-to-use for me jumping back into the saddle a bit. One of the other features of Dreamweaver that I liked and that's available in WebsiteX5 is the ability to customize the layout and features to work how you want them to work.

You can jump right into developing the website using the drag-and-drop WYSIWYG editor. If you want to dig into the code itself and use some custom code you can do that as well with your HTML, CSS, and JavaScript.

Whether your wanting to publish a simple site for you to share information with friends and family, or a fully functional database driven e-commerce site, WebsiteX5 has the tools included to accomplish that task.

Don't think you've got to get started with a blank slate either, although you can as an option, WebsiteX5 includes 100's of pre-designed templates as well as access to 400,000 royalty free images to include in your design as well. The software even includes a fairly powerful image editing program with plenty of custom masks and edits available to you.

Another nice feature that's very important these days is building websites that are mobile friendly and responsive. WebsiteX5 helps you manage this task by handling lots of the coding required and help you see how the layout is going to change visually as you develop.

 

WebsiteX5 Professional Interface - 3
Click to Enlarge
WebsiteX5 Professional Interface - 2
Click to Enlarge
WebsiteX5 Professional Interface - 1
Click to Enlarge

Here's a video you can watch to see many of the functions in action and just how easy it is to get started developing a great website with WebsiteX5.

Here's a quick summary of the features:

  • Easy to use
  • 400,000 royalty-free images included
  • Highly customizable
  • Professional tools (email form, reserved area, integration with db, e-commerce, etc)
  • Add your custom html/css/js code
  • Responsive websites
  • 12 months of included web-hosting
  • Dedicated language support

For even more information on WebsiteX5 Professional, you can visit the WebsiteX5 website or connect with them on their Facebook page.

Filed Under: Technology Tagged With: Buzzoole, coding, HTML, software applications, web design, web development, web software, WebsiteX5 Professional

06/23/2011 By Jason Bean Leave a Comment

Sprint Web User-Interface Fail

Sprint has an option on their website that you can schedule an appointment at one of their service locations. In theory this should allow you to show-up at your scheduled time and get your business taken care of without having to “take a number” and wait for an unexpected amount of time. Honestly, I’ve still had to wait at least 15 minutes every time I’ve used it, but I still think it’s a good option.

I need to take my phone into have them look at it tomorrow and I was completing their online reservation form. It’s a fairly simple form, and the last question is a large text box where you can enter the details of the problem you’re experiencing.

Sprint Tech Support Appointment Request

As you can see, there’s no specification of how much information you can enter into the box. If it were me on the receiving end, I’d want as much detail as someone is willing to tell me about their issue and why they’re coming into the store. Apparently there’s a limit! 250 characters I believe if I remember correctly. So what I originally wrote:

I brought my Samsung Moment to the south side store because of issues going into airplane mode, losing network connectivity and other lock-ups. They said they couldn’t fix it, I paid for a replacement phone and now the new phone is doing the same thing. Now the new phone is also completely powering down and locking up. the only way to rthe battery, replace it, and do a complete poweset is to pull er-up/boot again.

got reduced down to:

previous phone jacked up. sprint couldn’t fix it. paid for replacement. replacement phone now jacked up the same way and more. getting old.

Folks, it’s not that hard to add a label to the instructions that would tell you how much space you’ve got. Or one of those cool little dynamic counters that tells you how much space you left. Or, you could even limit the form field to only accept 250 characters, then I wouldn’t have wasted the time typing all the rest of that explanation out that I had to delete.

Filed Under: Business & Career, Technology Tagged With: complaints, customer satisfaction, Sprint, user interface, web design

Primary Sidebar

Looking for something?

Recent Posts

Young Boy Resting Chin on Cushion

The Importance of Child Support: Why It’s Critical for Your Children’s Future

Undergoing a divorce can be complicated for the spouses involved and the entire family. One crucial … [Read More...] about The Importance of Child Support: Why It’s Critical for Your Children’s Future

Hot Water Heater

Helpful Questions Related to the Pilot Light on a Water Heater

Even though electric water heaters are pretty popular in homes worldwide, gas water heaters have … [Read More...] about Helpful Questions Related to the Pilot Light on a Water Heater

Hand Holding Keys to New House

Top Factors to Consider When Hiring a Realtor

Photo by Maria Ziegler on Unsplash Scottsdale had an average appreciation rate of 56.21 percent, … [Read More...] about Top Factors to Consider When Hiring a Realtor

RSS Positively Indy

  • Video Multimedia Salute to Veterans on Indianapolis Monument Circle
  • Money Tasks to Remember for the Summer

RSS Mission Notes | Faith & Culture

  • What’s With the Fork?
  • You Were Created to Hear God’s Voice

RSS Homeschool Daddy

  • Help Your Kids With…
  • Cow’s Don’t Give Milk

Premium WordPress Themes from InkThemes.com
The Bouqs - Premium Farm Direct Flowers

Footer

  • Clients
  • Archives
  • Advertising Disclosure
  • Domain For Sale
  • Comment Policy

Copyright © 2022 · Bnpositive Communication · Log in
Website Management by Bnpositive Communication | Optimized and Secure WordPress Site Hosting by Flywheel