Guides - Digital Marketing Journals Hong Kong - Search Engine Optimisation News

5Sep

By 1WD CrewNo Comments

Animation, building website, creating a website, CSS, google web designer, Guides, internet design, Learn, Typography, web design, web design company, web designer, web page design, website builder, website design

How to Animate Gradient Text Using CSS

Web design takes a captivating turn when CSS comes into play. It enables a world of transformations, such as taking static text elements and infusing them with life. Our focus today is one such engaging transformation – animate gradient text using CSS. So, let’s demonstrate how a seemingly complex effect can be achieved with a few lines of code. UNLIMITED DOWNLOADS: 400,000+ Fonts & Design Assets Starting at only $16.50 per month! DOWNLOAD NOW Setting Up the Text in the HTML We begin by defining our text element in HTML, which in this case is a simple heading: <h1 class="animated-gradient">1stWebDesigner</h1> Here, we create an <h1> element with a class called “animated-gradient”. This class becomes our anchor for creating the gradient animation in CSS...

29Aug

By 1WD CrewNo Comments

building website, creating a website, CSS, google web designer, Guides, internet design, Learn, UI Design, web design, web design company, web designer, web page design, website builder, website design

Ripple Button Effect Using Pure CSS

Google’s Material Design guidelines introduced the ripple effect, a subtle animation that indicates user action. The ripple effect rapidly gained popularity in web design as a sophisticated visual feedback form that refines user interaction, particularly on buttons. Today, we’ll show you how to create a ripple button effect using nothing but pure CSS. Your Web Designer ToolboxUnlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design AssetsDOWNLOAD NOW Building the Button The basic structure of our button is quite simple. It’s a single line of HTML: <button class="btn-ripple">CLICK ME</button> This is a standard button element with a class btn-ripple attached to it, which will be our reference when we define the ripple effect in CSS. Casting Ripples...

WordPress Dashboard: Removing Unwanted Widgets

22Aug

By 1WD CrewNo Comments

building website, creating a website, google web designer, Guides, internet design, Learn, web design, web design company, web designer, web page design, website builder, website design, WordPress, WordPress Tutorial

WordPress Dashboard: Removing Unwanted Widgets

Your website’s command center, the WordPress dashboard, arrives with several widgets that enhance functionality. However, not all of these may be beneficial for every user. As plugins introduce more widgets over time, your dashboard may start to feel crowded and less straightforward to navigate. WordPress offers the ability to remove these unnecessary widgets, either manually or programmatically. We’ll guide you through both of these methods, aiding in decluttering your dashboard and promoting better website management. Understanding Widgets Widgets are elements you can include in your WordPress site’s sidebars or other widget-ready areas. WordPress includes default widgets, and plugins may introduce more. All these widgets can be managed through the Appearance » Widgets screen in your Wo...

How to Optimize UX Design for Screen Readers

14Aug

By 1WD CrewNo Comments

building website, creating a website, google web designer, Guides, internet design, Learn, ux design, web design, web design company, web designer, web page design, website builder, website design

How to Optimize UX Design for Screen Readers

Achieving digital accessibility and optimizing your platform for screen readers, can be a strategic decision with multifaceted benefits. Not only does it reflect empathy and inclusivity for visually impaired users, but it also potentially expands your audience and the reach of your message. Let’s delve into the importance of UX design for screen readers, practical adaptation strategies, and the continuing commitment toward digital accessibility. The UX Designer Toolbox Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets Starting at only $16.50 per month! DOWNLOAD NOW Screen Readers: Essential Instruments for Digital Accessibility Screen readers act as interpreters between the digital content and the visually impaired users, transforming visual data int...

How to Limit Post Revisions in WordPress

5Aug

By 1WD CrewNo Comments

How to Limit Post Revisions in WordPress

Optimizing your WordPress workflow often involves tweaking a few settings and functions. One of these features is post revisions. This built-in functionality can be a lifesaver, especially when you want to revert changes or restore an earlier version of a post. However, having an excessive number of revisions can be overwhelming and may clutter your database. We’ll guide you through the steps to limit post revisions in WordPress, without turning to specific plugins. Understanding WordPress Post Revisions Post revisions, a core feature of WordPress, allows you to undo changes and revert to previous versions of your posts or pages. For every draft in progress, WordPress automatically generates a temporary revision (known as an auto-save) every 60 seconds. It supersedes older versions with t...

28Jul

By 1WD CrewNo Comments

Making an Underwater CSS Text Effect

Web design can serve as a playful exploration ground for learning new techniques. In today’s guide, we’ll dive into the creation of an underwater CSS text effect, not just for the visual outcome, but to deepen our understanding of how different CSS properties harmonize to create dynamic text effects. Your Web Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets Starting at only $16.50/month! DOWNLOAD NOW Setting up the Structure Our journey into the deep sea starts with a simple HTML structure: a div element with the class underwater, wrapping around an h1 tag. <div class="underwater"> <h1>1stWebDesigner</h1> </div> Achieving the Underwater Effect For our underwater CSS text effect, we introduce...

Conducting UX Surveys: A Practical Guide

19Jul

By 1WD CrewNo Comments

building website, creating a website, google web designer, Guides, internet design, Learn, ux design, web design, web design company, web designer, web page design, website builder, website design

Conducting UX Surveys: A Practical Guide

UX surveys can be pivotal tools for designers seeking to understand user preferences, opinions, and behaviors. They foster alignment between design strategies and user expectations and can improve product or service usability. Our overview unravels the process of conducting UX surveys, highlighting how both quantitative and qualitative approaches can yield essential user insights. The UX Designer Toolbox Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets Starting at only $16.50 per month! DOWNLOAD NOW Conducting UX Surveys: Their Role and Execution UX surveys serve as channels to collect insights directly from users about a product or service. They come in various forms, from online questionnaires to in-person discussions. These surveys aim to acquire...

Retro CSS Text Effect: A Step-by-Step Tutorial

12Jul

By 1WD CrewNo Comments

building website, creating a website, CSS, google web designer, Guides, internet design, Learn, responsive web design, web design, web design company, web designer, web page design, website builder, website design

Retro CSS Text Effect: A Step-by-Step Tutorial

CSS offers an array of tools that, when used correctly, can improve the visual experience on your website. In this tutorial, we’ll explore a straightforward way to design a retro text effect with pure CSS. The approach, while not overly complex, yields a visually appealing result and serves as a foundation for further customization. Your Web Designer ToolboxUnlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design AssetsDOWNLOAD NOW The HTML Setup We’ll begin with our markup, containing the text we’ll be styling – “1stWebDesigner“. <div class="retro-text"> 1stWebDesigner</div> The div class .retro-text will be the hook for our CSS styling. Designing the Retro Style with CSS Next, let’s move on to our CSS file to create the retro text effect. ...

23Jun

By 1WD CrewNo Comments

building website, creating a website, CSS, google web designer, Guides, internet design, Learn, UI Design, ux design, web design, web design company, web designer, web page design, website builder, website design

How to Create a CSS-Only Toggle Button

With the growing eco-system of CSS, designers, and developers are continually seeking ways to leverage its power for interactive UI elements. One such element is the toggle button, an essential interactive component. While more complex features might require JavaScript or additional libraries, this guide focuses on how to create a CSS-only toggle button, providing you with the fundamental understanding that serves as the stepping stone to more advanced concepts. Your Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets DOWNLOAD NOW Setting the HTML Structure for Our Toggle Button The first step towards creating a CSS-only toggle button is setting up a suitable HTML structure. We’ll use the following code: <label class="toggle-switch...

How to Toggle Between Classes with JavaScript

17Jun

By 1WD CrewNo Comments

building website, creating a website, CSS, google web designer, Guides, internet design, JavaScript, Learn, web design, web design company, web designer, web page design, website builder, website design

How to Toggle Between Classes with JavaScript

Today, we’re exploring a simple yet effective technique for toggling CSS classes on an HTML element using JavaScript. We’ll demonstrate this on a button element, and highlight the control of the visual appearance and state with just a few lines of code. Your Web Designer ToolboxUnlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design AssetsDOWNLOAD NOW Creating the HTML Button <button id="button" class="red">STOP</button> We initiate our demo with a button element identified by the id “button” and carrying an initial class of red. Styling the Button with CSS body { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: grey; } button { padd...

22 Amazing Gifts For Designers – 2020 Edition

26Dec

By Editorial TeamNo Comments

building website, creating a website, Gifts, google web designer, Guides, internet design, Tools, web design, web design company, web designer, web page design, website builder, website design

22 Amazing Gifts For Designers – 2020 Edition

We have collected 22 fantastic Christmas gifts for all your creative web designer and graphic designer friends out there. While not exhaustive, these are some of the best gifts for designers available right now, just in time for your holiday shopping. Ready? Let’s get started with our 2019 gift guide! The Rocketbook notebook provides a classic pen and paper experience, yet is built for the digital age. Although it feels like a traditional notebook, the Rocketbook is endlessly reusable and connected to all of your favorite designer’s relevant cloud services. When your designer friend writes using any pen from the Pilot Frixion line, their writing sticks to Rocketbook pages like regular paper. But add a drop of water… and the notebook erases like magic. Designed for those who want an endle...