zoom-agency

Duda Tip: Custom Button - Icon Hover Animation

Fri, 08 Mar 2024 20:04:52 GMT

Have you enjoyed the last two Duda tips but want a more subtle yet creative hover animation to use on your custom button? If so, you are at the right place. In this Duda tip, we will go through the steps of changing the hover action we had in our first Custom Button Duda Tip to one that is a subtle animation for our third and final way of creating a custom button. Follow along with the instructions below to implement this Duda tip on your site or check out this video to watch each step in real time.

If you already have your custom button our Duda tip: Adding your Own Icon , you can skip to Step 3. If not, feel free to start with Step 1.

Step 1. Add a Button Widget.

Add a button by dragging a button widget to your row.

Step 2. Add the classes to your button

Right-click the button and edit HTML/CSS.

Add the classes "white" and "red"

In this example, we've used 2 classes:

White: This class will be the content placeholder for the default icon.
Red: This class will be the icon once the button is hovered.

Step 3. Add the classes to the site's CSS.

Go to dev mode, and under site.css, paste the code snippet below. (shortcut: CTRL + ALT + C)

Then navigate to site.css and paste the code below. If you are working with the button from the beginning of the series, simply add the transition below and replace the code under the red class.

We have highlighted the difference in the code by making the font blue.

:is(.white,.red ) span.text:before{
content: '';
position: absolute;
left: unset;
top: 22px; /* change the value if necessary to achieve your desired icon position */
right: 35px; /* change the value if necessary to achieve your desired icon position */
width: 15px; /* change the value if necessary to achieve your desired size */
height: 15px; /* change the value if necessary to achieve your desired size */
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: 50% 50% !important;
z-index: 1;
transition: all ease 0.3s;
}

.white span.text:before {
background: url(https://irp.cdn-website.com/3239fcce/dms3rep/multi/arrow-white.svg);
}

.red:hover span.text:before {
right: 30px; /* change the value to achieve your desired icon position when Hovered*/
transition: all ease 0.3s;
}

Why those CSS changes? Instead of adding a background URL under the "red" class, we added a right 30px value. This simply means we are moving the arrow 30px from the right. We also added a transition to smoothen the animation effect. If you are wondering how to change the arrows to a different icon, check out how in our first tip of this series .

Step 4. Save and close.

Congratulations! You have reached the end of our custom button series. You can now take advantage of the three unique custom buttons that you have learned to create with this series. These buttons can be utilized on all of your websites, providing consistent and personalized experiences for your audience. Try them all and show us what you create!

Duda Tip: Custom Buttons - Elevated Hover Animation

Mon, 08 Jan 2024 19:05:29 GMT

Ready for part two? Now that we have a custom button, let's add a more creative custom hover animation! Learn how with the easy steps below, or check out this video to watch each step in real time. Let's get started!

Step 1. Styling the Background Button

Select your button, and make sure you have any layout selected except the one with the icon.

Remove the background color and add a 1px border. Make sure the "Border" and the "Hover border color" are the colors you'd like.

Step 2. Add the CSS code to the site.

Go to site.css under developer mode and paste the following code.

.offsetButton span.text {

background: #A50000; /* change the value to achieve your desired background color */

transition: all ease 0.3s !important;

height: 100%;

width: 100% !important;

vertical-align: middle;

display: flex !important;

flex-direction: column !important;

justify-content: center !important;

max-width: 100% !important;

transform: translate(0px, 0px);

padding: 0px 10px !important;

border-radius: inherit;

}

.offsetButton:hover span.text {

transform: translate(-10px, -10px); /* change the value to achieve your desired offset position */

transition: all ease 0.3s !important;

}

.offsetButton.dmWidget:after {

display: none !important;

}

Remember to change the color of your button or the type of offset while you are working in developer mode.

Change the background color to any desired color by changing the "background" color in the code.

background: #A50000 ;

Change the offset position to your desired offset position by changing the values under "transform".

Here's a reference for a better understanding of axis rotations.

transform: translate(-10px, -10px);

Step 3. Add the Class to Your Button.

Right-click your button and edit HTML/CSS. Add our "offsetButton" class, and hit update.

Step 4. Update the Button's Text if Needed.

There you have it- a fully custom button you can use throughout your site. Try it out and show us what you create!

Duda Tip: Custom Buttons - Adding Your Own Icon

Mon, 04 Dec 2023 18:52:31 GMT

Need your website to stand out with subtle custom touches? Custom buttons might be the answer! In this step-by-step tutorial, we will take you through the process of adding a custom icon to your buttons which is the beginning of your very own custom buttons. Learn how with the easy steps below, or check out this video to watch each step in real time. Let's get started!

Pre-requisite

We recommend you have an icon SVG ready to go in the two colors you want to use. You can download free icons at https://www.flaticon.com/ . Since these icons are images, the icon's colors are fixed. You'll need to change the color first on an image editing software like Photoshop/Illustrator or a free site like https://boxy-svg.com/ before uploading them to the media manager. Once you have them, upload them to the media manager. We will use them later in the tutorial.

Step 1. Add a Button Widget.

Add a button by dragging a button widget to your row.

Step 2. Add the classes to your button

Right-click the button and edit HTML/CSS.

Add the classes "white" and "red"

In this example, we've used 2 classes:

white : This class will be the content placeholder for the default icon.
red : This class will be the icon once the button is hovered.

Step 3. Add the classes to the site's CSS.

Go to dev mode, and under site.css, paste the code snippet below.

:is(.white,.red ) span.text:before{

content: '';

position: absolute;

left: unset;

top: 15px; /* change the value if necessary to achieve your desired icon position */

right: 25px; /* change the value if necessary to achieve your desired icon position */

width: 25px; /* change the value if necessary to achieve your desired size */

height: 25px; /* change the value if necessary to achieve your desired size */

background-size: contain !important;

background-repeat: no-repeat !important;

background-position: 50% 50% !important;

z-index: 1;

}

.white span.text:before {

background: url(https://irp.cdn-website.com/3239fcce/dms3rep/multi/arrow-white.svg);

}

.red:hover span.text:before {

background:url(https://irp.cdn-website.com/3239fcce/dms3rep/multi/arrow-red.svg);

}

NOTE: You will need to replace the URLs under white and red by getting the links of the icons you want to use. You can get the links by clicking "Get Image URL" on the top left and clicking the name of each selected icon you want to use. You can also change the values here to change the icon's size and positioning.

Step 4. Save and close.

Style as you wish! And there you have it, the beginning of your custom buttons. Don't miss our next Duda tip where we will take you through the process of adding an offset custom hover animation if you'd like to try a different hover animation!

Duda Tip: Add Visual Emphasis to Text

Fri, 03 Nov 2023 11:00:00 GMT

Welcome to another Duda Tip! Today we will show you a simple and easy trick to add visual interest to your website's text by adding a custom underline. This technique can help you emphasize important sections of copy and increase the overall visual interest of your site. We used this tip in the recent redesign of Taylor's Educational Enrichment Foundation and by following these step-by-step instructions or the video below, you will be able to as well, adding creative emphasis to headers or text on your website in no time. So, let's dive in and get started!

Step 1. Add a Text Widget.

Add text by dragging a text widget to your row.

Step 2. Upload your image.

On the media manager, upload the image you will use as the underline. Below is the scribble line we've used or you can find different line graphics here https://www.freepik.com/ using keywords like "Scribble line" or "Underline" etc.

Step 3. Get the URL of the image.

On the left side of the Media Manager Window, click the name of the image. It will open a New Tab.

On the New tab, you will see the image with the image's URL. Copy the image's URL.

Step 4. Add the "underline" class code snippet.

Head back to the builder and open Developers mode, which you can easily do with this shortcut: CTRL + ALT + C . Then navigate to site.css and paste the code below.

.underline span[style*="text-decoration: none"]{

position: relative;

}

.underline span[style*="text-decoration: none"]:after{

content:'';

background: url(' INSERT_URL_HERE ');

background-size: 95%;

position: absolute;

left: -5px;

top:100%;

width: 120%;

height:105%;

background-repeat: no-repeat;

}

Step 5. Replace the URL.

Remember the URL from Step 3? Use that URL to replace the INSERT_URL_HERE text in the code snippet. Click Save and Close.

Step 6. Enable the "underline" class in the desired text widget.

Now, let's make the text widget capable of showing the underline scribble. Right-click the text widget and click Edit HTML/CSS.

Navigate to the HTML tab and add the "underline" class to the first division container. Update and close.

Step 7. Add the "Underline" to the desired text.

Select the text widget and highlight the text you want to add the scribble to then click Underline twice .

You can remove or reset the widget by highlighting the text and selecting Clear Format.

Note that if you change the text to a heading or vice versa, the emphasis will disappear. Just repeat step 7 to add it again

And there you have it! An easy solution to create emphasis on a section of copy or header increasing the overall visual interest of the page. Repeat as needed!

Duda Tip: Adding a Hover Effect

Fri, 13 Oct 2023 14:40:13 GMT

In this Duda Tip, we will show you how to create a hover effect! If you want to add interactive flair to your website, a hover effect is a must-do. It can help you highlight crucial information or make your site more visually appealing by aiding user interaction. Check out how with the easy steps below, or check out this video to watch each step in real time.

Step 1: Add a Column

On an empty row, add a column.

Step 2: Add an inner row.

Right-click on one of the empty columns and add an inner row.

Step 3: Remove the second inner column.

Click the x on one of the inner columns to delete one.

Step 4: Make the inner row your own.

Add your content and style to the inner row. In our case, we added text, an icon, and a border. It should look something like this:

Step 5: Edit the inner row's HTML/CSS.

Next, to the fun part! Select the inner row, and edit its HTML/CSS to add the class we will use to create the hover effect.

Step 6: Add the class.

We will call this class "services", and add it right to the very start of the first block, and then update.

Step 7: Add the CSS magic!

Now, open Developer Mode, under Site HTML/CSS, go to site.css, and paste the code below. You can change the style of the hover effect to your liking by editing this CSS snippet.

.services{

overflow: hidden;

}

.services :is(.dmNewParagraph span, svg){

z-index: 2;

position:relative;

}

/*HOVER STATE*/

.services:before{

content: '';

width: 0%;

height: 110%;

background: #9F5EA2;

top: 0;

left: 0;

transition: all ease 0.3s;

position: absolute;

z-index: -1;

}

.services:hover:before{

width: 110% !important;

transition: all ease 0.3s;

}

/* target elements inside the class */

.services:hover :is(.dmNewParagraph span){

color: #fff !important;

}

.services:hover p{

color: #fff !important;

}

.services:hover .graphicWidget svg.svg{

color:#fff !important;

fill: #fff !important;

}

Check out these notes regarding the animation added using pseudo-elements for the hover state if you wish to customize your hover animation.

In .services:before we used "left:0" which means this will be the initial position of the hover animation. You could use "right:0" instead to start from the right side.

If you want to start at the top or bottom instead, you'll need to change some of the code.

To start at the top, just swap out the height and width values and use "top:0" where the animation should start.
To start at the bottom, just swap out the height and width values and use "bottom:0" where the animation should start.

You can also control the speed of the animation using the transition property. In transition, the higher the number or time, the slower it will finish, so just change the time to whatever seconds suit your needs. In our example, we use "transition: all ease 0.3s;" meaning the animation will finish at 0.3 seconds.

To learn more about the use of pseudo-elements to add or customize a hover animation, check out this resource .

.services:before{

content: '';

width: 110%;

height: 0%;

top: 0;

background: #9F5EA2;

left: 0;

transition: all ease 0.3s;

position: absolute;

z-index: 1;

}

.services:hover:before{

height: 110% !important;

transition: all ease 0.3s;

}

Please note that the target class may vary depending on the element inside the container. In our example, we have a heading, a paragraph, and an SVG for the button so those are the elements we targeted to make them change color on hover. If you add more elements on the front end, you'll also need to add those on dev mode for the hover effect to work.

Step 8: Save and close.

You now have a default state and a hover state.

Step 9: Duplicate your blocks.

Now you can duplicate the blocks for all of your services. Just right-click on the column (not the inner column), copy, and paste on the empty column next to the one you created.

Note that a maximum of 4 columns is allowed on a row in Duda. Feel free to delete the center blank column, if needed.

Step 10: Duplicate your row.

You can also duplicate the entire row if you need to add more by copying and pasting the whole row.

There you have it! An easy-to-do tip to increase interactivity on your site. Try it out and show us what you create!

Duda Tip: Adding Icons to Form Fields

Mon, 31 Jul 2023 13:51:41 GMT

Today, we are going to step up our game when it comes to forms. Check out the finished form at Rotary Control Lawn Services . There you will find a custom form that includes added icons in each form field to improve the overall user experience. This small but significant change makes it easier for users to understand and navigate the form fields.

Here’s how the customized form looks on their site after adding the icons:

This Duda Tip demonstrates an easy upgrade for businesses using forms as their call to action. By adding icons to each form field, potential customers can fill out forms more accurately with the aid of the icon to clearly label each form field. Want to do the same on your site? Let’s get started! You can follow the instructions below to implement this Duda tip on your site or check out this video to watch each step in real time.

Step 1: Add Fontawesome.

First, we will add Font Awesome's style sheet to our website in order to use their icons. Millions of designers, developers, and content creators use Font Awesome, the internet's icon library and toolkit. You can learn more about Font Awesome here . To add the style sheet, first copy the code snippet below.

Then head over to Developer mode, Site HTML/CSS, and paste it under head-section.html. Save and close developer mode.

Step 2: Add a form.

Add a contact form widget and style it for your website.

Step 3: Choose your first icon.

Now find the first icon you'd like to use on your form using the search function in Font Awesome .

For our Duda Tip, we chose the User icon. Select the icon.

Next, hover and click on the HTML tab and copy the code.

After copying the code, head back to Duda.

Step 4: Add your first icon.

Right-click on the form and select Edit HTML/CSS.

Paste the copied code just right after the input tag where you want to put the icon, in our case, it's the First Name field, and update.

Your form will look like this. No worries, let's get it fixed.

Step 5: Customize your icon position.

Open Developer Mode, under Site HTML/CSS, and select site.css.

There, paste the following code snippet.

.dmforminput i

{

position:absolute !important;

left:23px !important;

top:34px !important;

color:#ccc !important;

font-size:14px !important;

border:none !important;

}

The result may vary so adjustments on size and position are needed to get the result you need. Feel free to adjust the code as needed.

Since we are using placeholder text in our fields, let's adjust the form input padding.

Go back to Developer Mode, under Site HTML/CSS, select site.css, and paste this code snippet.

div.dmInner input[type="text"],div.dmInner input[type="email"],div.dmInner input[type="number"],div.dmInner input[type="tel"],div.dmInner input[type=password],div.dmInner select, div.dmforminput textarea

{

padding-left:30px !important;

}

Your form should look more like this, as we added padding to the left of the text.

Step 6: Find the rest of the icons.

Go back to Font Awesome and find the rest of the icons you'd like to use. Once you have them selected make sure to copy the HTML code for each one.

For the rest of our form, we are going to use the following:

Step 7: Add the rest of the icons to your form.

Right-click on the form and select Edit HTML/CSS. Paste each copied code just right after the input tag where you want to put each icon, in our case, we are adding one to Last Name, Email, Phone, and Service. Check those out below for your reference. Then hit update.

And there you have it! Your finished product should look something like the form below. A custom form with icons to help your users identify each form field and aid your form labels.

Duda Tip: Creating a Custom Shape Hero

Fri, 16 Jun 2023 11:30:01 GMT

Designing a well-structured and visually appealing hero is key to welcoming your website visitors. Located at the top of the visual hierarchy, the hero section of your website is the first visual element your visitors see, which is why we should make it as visually appealing as possible, and that is where this Duda tip comes in. We will walk you through a few simple steps to create a custom hero shape to visually enhances your hero section and perfectly complement your Duda site, just as we did for our client Assurecare Advisors . Their final result looked like this:

Want to do the same on your site? Let’s get started! You can follow the instructions below to implement this Duda tip on your site or check out this video to watch each step in real time.

Step 1: Ensure the default background color is set to none.

On your left side menu, navigate to Theme > Backgrounds > Default Background and set the Background color to none.

Step 2: Add a custom class to the HTML of the editor.

Right-click your hero row and “Edit HTML/CSS.” Add the following class to the second line of code under HTML.

header-border

Step 3: Add the class to CSS

Now go to the CSS tab > Device Specific CSS. There, paste the following code and update.

border-radius:0 0 50vh !important; /* radius of the container denotes 0 top left - 0 top right & bottom left - 50vh bottom right */

It should look like this:

Step 4: Head to Developer Mode

Now, open Developer Mode and find the section labeled “Site HTML/CSS.” In that menu select site.css.

Step 5: Add your custom border-radius

Under site.css, add the following code snippet. Feel free to check CSS border-radius property (w3schools.com) for additional information on border-radius.

body{

background-color: #fff !important;

}

.header-border{

position: relative;

}

.header-border::after{

border: 1px solid rgb(228 228 228 / 70%);

border-radius: 0 0 54vh 50vh; /* edge radius of the container denotes 0 top left - 0 top right - 54vh bottom right - 50vh bottom left */

height: 100%; /* border container height relative to parent */

width: 100%; /* border container width relative to parent */

position: absolute;

top: 50px; /* container position on top - change the value if adjustment is needed */

left: 50px; /* container position on left - change the value if adjustment is needed */

z-index: -1;

}

It should look like this:

Step 6: Save and enjoy

Click “Save” and you’re finished! A Custom Shape Hero, welcoming your website visitors with an enhanced experience on your site right from the start. Your finished product should look something like this:

Duda Tip: Creating An Overlapping Logo

Tue, 16 May 2023 20:27:45 GMT

You’ve worked hard to customize your business’s brand, so your logo should stand out on your website! If you’re looking for a way to make your logo pop, allow it to overlap the header behind it. It draws the attention of every website visitor — and with Duda, it’s simple to do!

We used this tip to design the Nate’s Hot Chicken website header. Want to do the same for your own site? All you’ll need is a proportional version of your logo (60x60, for example) and a static header. Let’s get started! You can follow the instructions below to implement this Duda tip on your site, or check out the video below to watch each step in real time.

Step 1: In the Duda editor, right-click your logo.

This will open your editing options.

Step 2: Select "Edit HTML/CSS".

This will be the second option from the bottom in your menu.

Step 3: Edit the general CSS.

Under the CSS tab, you’ll be able to see a box that allows you to edit "General CSS for all devices."

Find the img selector and paste the following code:

position: absolute;

left:0; /*moves the image to the left most of the container - change the value in px if adjustment is needed */

/* top:0; /* optional in adjusting the image vertically - change the value in px if adjustment is needed */

z-index: 2;

Don’t have an img section? Just add the code to the rightmost part of the selector, like this:

Step 4: Remove width properties.

Under the "Device Specific CSS" tab (located to the right of "General CSS for all devices”), remove all the width properties. We’ve highlighted them here so you know exactly where to look!

Step 5: Add the final code.

While you’re in “Device Specific CSS,” add the following code snippet to the bottom of the code. Feel free to adjust to your desired width. Since we’re working with a proportional logo, no need to adjust height!

width: 120px; /* assigned width of the image depends on your preference */

position: absolute;

It’ll look like this:

Step 6: Update your site.

Click “Update” and you’re finished! Just as we promised, this tip is super simple to execute and provides eye-catching results. Your finished product should look something like this:

Or you can check out Nate’s Hot Chicken for some logo overlap inspiration!

Duda Tip: Adding a Journey Element

Mon, 17 Apr 2023 10:45:04 GMT

Want to walk your website viewers through a step-by-step process? Adding a journey element to your site with DudaFlex can make your instructions seamless and simple — and the process will look good, too! This design element is a great way to highlight your services at a high level and help new clients know what to expect when they work with you. Our client True North Restoration used this Duda Tip to walk potential customers through their company process. Their final result looked like this:

Want to do the same on your site? Let’s get started! You can follow the instructions below to implement this Duda tip on your site, or check out this video to watch each step in real time.

Step 1: Add a new section to your site.

Once your graphic assets are prepared and ready, it’s time to build the journey! To add a section to your site, just hover over an existing section and you’ll see the “add section” button pop right up.

Step 2: Add your first Flex section.

Once you’ve opened up your new section for editing, select “Flex Sections.”

Since you’ll already have graphics ready to go, you can choose the first option. It’ll look like this:

Step 3: Open the Flex section editor.

Right-click on the flexbox container and select "edit design" – it should be the second option on your list.

Step 4: Set up your spacing.

On the right-side panel labeled “Flex section Design”, set the "spacing between columns" value to 0%.

Step 5: Delete the unnecessary extra column.

Since we’ll be building a custom journey here, we’ll be creating each Flex element separately! You won’t need the premade second column, so you can select and delete it.

Step 6: Add a widget.

Now that you’re left with only one column, you can right-click to add a widget to it.

Step 7: Add a vertical flexbox.

Inside your flex column, search for and add the vertical flexbox widget. Note: we added a vertical flexbox inside the column because we want the elements we add (graphics and text) to stack on top of each other. If you want your design to look similar to our finished result, do the same!

Step 8: Duplicate the column.

Now that we’ve set up our flexbox settings, we want to duplicate the column to hold each of our graphic assets. In this True North example, there will be 5 sections, so we’ll duplicate the column 4 times. To do this, we’ll hover and click on the flex column.

When the floating toolbar appears, we’ll click duplicate — and we’ll repeat this process 3 more times until we have 5 total columns.

Note that the column will be duplicated horizontally!

Step 9: Confirm that you have the right number of columns.

In this example, we’ve got all 5!

Step 10: Add an image element.

Add an image element to the first flexbox.

Step 11: Set the image width.

Since we’ll be copying these settings to all 5 flexboxes, we’re setting the image width now for continuity!

Step 12: Copy and paste the image element.

Copy your element and paste it to all 5 columns.

Once completed, it should look like this:

Step 13: Add your graphics.

Drop in your custom graphics or images.

Step 14: Add text.

Select the first flexbox, add a new text element, and customize your text.

It should look like this:

But if your text stacks horizontally instead, like this:

Don’t worry! It’s an easy fix. Just select and right-click the flexbox container and edit the design.

Open your flexbox design panel and select vertical instead of horizontal.

Step 15: Add text to your remaining columns.

In this example, we only needed to add text to 3 of the 5 columns, since the other 2 are just arrow graphics. In any case, once you’ve finished adding your custom text, you’re ready to publish! This journey or process section has countless uses, and it adds visual interest and important customer info at once.

Duda Tip: Adding Custom Image Shadows to Your Site

Thu, 16 Mar 2023 12:15:00 GMT

Want to add character to your website design? Add visual interest by making visual elements pop off the page! When Asher House wanted to highlight a few images on their home page, we knew a custom image shadow would do the trick.

Custom image shadows draw attention to certain elements by creating an elevated look. Elevation creates visual hierarchy, drawing the eye to specific sections of a page first. How can you use “elevation” to your advantage on a flat screen? Well – elevation is defined as the relative distance between two surfaces on a z-axis. When we layer two images on top of one another, the distance between them appears to be zero. But when we add shadowing, we gain the illusion of dimension – proving once again that good design is like magic.

In our case study today, the surfaces we’d like to create elevation between are:

The background
The shape element (shadow)
The image itself

By adding a shadow to the image, the photo looks like it's floating above the background, making it stand out. Want to try this tip in your own design? Follow these steps or check out this video to watch each step in real time, and you, too, can create some magic.

Step 1: Create your shadow.

The great thing about custom shadows is that you can build them to your liking until you have the perfect look! We like to create our shadows with this tool . As you start to design, think about your image. Where would you like your shadow to appear? How big should it be? How intense of a color variation do you want to implement?

In our Asher House example, there is a shadow to the left of the first images, and to the right of the second one – check them out for some inspiration! Once you’ve created the shadow, copy the code and open your Duda site. Here’s the code we landed on for that first image on the Asher House homepage.

Step 2: Select the image on your Duda site.

Navigate to the page your image is already on and select it. Once it’s selected, you can right-click to select "Edit HTML/CSS."

Step 3: Paste your shadow code.

Once you’ve opened the CSS tab, you can paste the copied code from the custom shadow generator. It should look like this:

Step 4: Update and enjoy!

That simple three-step process adds definition, elevation, and visual interest to any webpage. Here’s our finished product!

With Duda, it’s easier than ever to create websites with that “wow” factor without endless hours of coding or frustration. Hope this helped! We’ll see you again soon for another tip.

Duda Tip: Showing Page Scroll Progress

Thu, 16 Feb 2023 13:00:25 GMT

If you have a website page that’s on the longer side, it can be helpful to show viewers where they are in their scroll! The simplest way to do this: display a progress bar. It adds visual interest to your site, and it gives readers an important reference point as they move below the fold. With Duda, this is an easy addition — the Dear America Foundation created one that highlights their brand colors. Today, we’re here to show you how to show page scroll progress on your site. Follow the instructions below to implement this Duda tip on your site, or check out this video to watch each step in real time!

Step 1: Cre ate a sticky header.

On your Duda website, select your header and click “Set as sticky header.” This setting must be turned on for your progress bar to show up!

Step 2: Select your header and edit the design.

After you’ve created a sticky header, select "Edit Design.” This will open a menu box.

Step 3: Change your default padding.

In the design menu, navigate to “Spacing” on the far right. From here, change your default padding to zero for both top and bottom.

Step 4: Head to Developer Mode.

After your padding settings have been saved, open Developer Mode and find the section labeled “Header/Footer.” In that menu select header.html .

Step 5: Paste the first part of the progress bar code.

In the header.html menu, paste the custom code below right after the first line of code:

</div>

It should look like this:

Step 6: Go to the Site HTML/CSS menu.

While still in Developer Mode, revisit the main menu and find Site HTML/CSS. It’s just below the Header/Footer options. From there, select site.css.

Step 7: Paste the second part of the progress bar code.

It’s time to add the second part of the progress bar code to the bottom of your editor. Paste the following custom code into your site:

.progress-container {

width: 100%;

height: 8px;

background: #bf0b30; /* color of the container - #bf0b30 is red */

}

.progress-bar {

height: 8px;

background: #002768; /* color of the progress bar - #002768 is blue */

width: 0%; /* width is set to zero as the initial state and will be overridden by javascript */

}

.prog{

left:0 !important;

top:0 !important ;

transition: all ease 0.3s;

}

It should look like this:

Step 8: Choose your colors.

To change the color of your progress bar, you'll need to edit the hex color code under the background property above for both the progress container and the progress bar itself. You can use an external tool, like HTML Color Codes , to pick a color you like if you don't already have branded hex color codes in mind. Once your colors are selected, save the code and go back to the HTML/CSS menu.

Step 9: Go back to the Site HTML/CSS menu.

In the HTML/CSS menu, select body-end.html – it’s located right above site.css.

Step 10: Paste the third part of the progress bar code.

It’s the final coding step! Paste the following custom code into your site:

window.onscroll = function() {myFunction()};

function myFunction() {

var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

var scrolled = (winScroll / height) * 100;

document.getElementById("myBar").style.width = scrolled + "%";

}

</script>

It should look like this:

Step 11: Save and enjoy.

There you have it! A progress bar with custom colors, there to show visitors how far along they are on your page. Here’s the final result from our Dear America Foundation project:

Duda Tip: Element Overlap

Fri, 16 Dec 2022 17:12:08 GMT

Want to enhance the functionality and design of your website without complicated coding? With Duda, you can. Today, we’re showing you how to upgrade images by layering design elements, adding visual interest to any page. Here’s the finished product in our example image:

By overlapping this abstract element behind the image itself, we can create a layered look that matches brand colors and keeps a site from looking bland or boring. Want to try this on your site? Here’s how to put this Duda Tip to work.

Step 1: Add the widget.

Head to the image you’d like to overlap. Add the image widget below it.

Step 2: Choose your design element.

Choose a design for your overlapping element. You can download this exact shape right here , or search for one that fits your design aesthetic. We like to source elements here and here , but you can use any element with a transparent background!

Step 3: Position your design element.

Align your design with the left or right side of the image. This step must be completed in order for the following steps to work!

Step 4: Set the overlap.

Under image design in your editor, click on spacing and set a negative value that aligns the design element over the image. Margin moves the content away from its original position, so you can customize the location of your overlap as needed. In this example, we added negative value on the top and left to place this design over the bottom left corner of our image. Learn more about margin values here .

Step 5: Open the code editor.

By default, the overlapped design is on the top of the image – but we can use Z-index code to layer them correctly. Select Edit HTML/CSS on the image to do this.

Step 6: Move the image in front of the element.

To move the image to the right spot, we’ll use the z-index property , which specifies the stack order of design elements. We want to stack the image on top of the design in this case! An element with greater stack order is always in front of an element with a lower stack order — which means the element with the higher number of z-index will be on the front. Once you’re in the CSS tab, add “z-index: 2” just below all the code inside, to move the image in front of the design. We added "z-index: 2" to the image so it will bring the image in front of the shape. We didn't add z-index to the shape element because by default all elements are positioned to z-index: 0. Once you’ve finished, click update.

There you have it: the finished product! Your new and improved photo design is live on your website. And yes, it works with mobile functionality too – no additional code needed!

Duda Tip: Seamless Row Divider

Fri, 28 Oct 2022 11:24:35 GMT

Did you know that Duda can help you bring outside design elements into your website quickly — no complex coding rewrites required? Today’s tip teaches you how to bring in customized shapes from Photoshop or Illustrator to create fun and interesting dividers between site sections.

A straight line transition between rows can get boring when it's used over and over, so adding an element in between row transitions is a great way to add uniqueness to designs and keep your website from looking bland. Follow these steps learn how to create a divider like this with any design you love:

Step 1: Create the design.

Create a shape design to use as a divider. You can do this through Photoshop, Illustrator or any equivalent software. For an alternative shape generator, try the Shape Divider App! Whatever shape you choose, make sure to pick an element with a transparent background.

In this example, we’re creating a shape with a 1920px width and a height of 90px. This element works perfectly because of the transparent background. It allows for a nice fluid transition between the image and the overlaid element. Once you’ve finalized your design, save and export it. It’s time to head to Duda.

Step 2: Create two sections.

In the Duda editor, create two separate sections on your webpage.

Step 3: Add a row between them.

Next, add an empty row between your two sections.

Step 4: Upload your divider.

In the empty row, upload the created design you’d like to use as a divider. Use it as a background image, and make sure to select the full image as your background size.

Step 5: Adjust the height.

Next, add a spacer and set the height value used on the image canvas. In this case, our height has already been set to 90px.

Step 6: Adjust the spacing.

Finally, select the row section you’ve just created and navigate to the spacing. Set the top margin as the height value of the canvas – but with a negative value. In our example, the margin should be -90px.

That’s it! In 6 simple steps, your website has customized design overlap. No boring dividers around here! Repeat as needed with various design elements to diversify your site visuals.

Duda Tip: No Code Element Highlight Using Personalization

Mon, 29 Aug 2022 10:34:35 GMT

With Duda, extending the functionality of your website through custom coding and design doesn’t have to be complicated. In this use case, Westminster Vision wanted to offer potential patients a simple way to see when they should stop in for an appointment. This meant creating a schedule that showed website visitors when they were open on the day of the week those visitors were actually checking their site .

By highlighting “today’s” hours, potential and existing patients have an easy and accessible way to find updated hours right on Westminster Vision’s home page. Here’s how the customized schedule looks on their site after being implemented:

This Duda Tip, built on Duda Personalization functionality , is an easy upgrade for any business with standard operating hours. By clearly highlighting hours on any given day, you’ll allow potential customers to see exactly what time they should stop by today instead of scrolling to an easily-missed footer menu. Want to put this schedule highlight to work for you? Here’s how to recreate it on your own site.

Step 1: Navigate to personalization, and create a blank row.

For this example, we’ll use Monday to create a rule. Go ahead and set the date to the next upcoming Monday, and make sure to check the “all day” box.

Step 2: Customize the rule.

Set the rule to say, “If this user comes to the site every week on Monday, display a new row.” After the rule is in place, make sure it’s set to recur each week, triggered by time.

Step 4: Choose your layout.

For this example, we’re making sure this schedule element shows up right on the homepage.

Step 5: Create a design.

Fill in your template with the operating hours for each day and save. In this case, we’re creating two rows of four columns to cover all seven days plus a call to action. This will help as we duplicate later on.

Step 6: Attach the rule to the corresponding day.

Since this is our Monday rule, we’ll highlight the Monday block in our new design. Choose a color from your brand to give the calendar a cohesive look on the site. Once this is done, you can exit the personalization editor.

Step 7: Position the section.

Note that your personalizations won’t show in the main editor menu, but as long as you’ve saved them, they’re still there and good to go!

Step 8: Activate the rule and duplicate the process for each day.

Adjust the settings as needed for Tuesday, Wednesday, and so on.

Step 9: Check your trigger conditions.

It never hurts to double check, making sure that each rule is linked to the right day in your design.

Step 10: Use the personalization editor to highlight the correct day.

This highlight and color selection will need to be repeated in the personalization editor for each day of the week.

Step 11: Preview your work.

To make sure your new tool is functioning correctly, enter preview mode and test the rule.

If everything is done correctly, you’ll see the corresponding day highlighted.

Congratulations – your site has a schedule that’s easily accessible and easy to read, giving your clients a great experience every time they check to see when they should stop by your business. Stay tuned for more tips that will transform your Duda site!

zoom-agency

Duda Tip: Custom Button - Icon Hover Animation

Duda Tip: Custom Buttons - Elevated Hover Animation

Duda Tip: Custom Buttons - Adding Your Own Icon

Duda Tip: Add Visual Emphasis to Text

Duda Tip: Adding a Hover Effect

Duda Tip: Adding Icons to Form Fields

Step 1: Add Fontawesome.

Step 2: Add a form.

Step 3: Choose your first icon.

Step 4: Add your first icon.

Step 5: Customize your icon position.

Step 6: Find the rest of the icons.

Step 7: Add the rest of the icons to your form.

Duda Tip: Creating a Custom Shape Hero

Duda Tip: Creating An Overlapping Logo

Duda Tip: Adding a Journey Element

Duda Tip: Adding Custom Image Shadows to Your Site

Step 1: Create your shadow.

Step 2: Select the image on your Duda site.

Step 3: Paste your shadow code.

Step 4: Update and enjoy!

Duda Tip: Showing Page Scroll Progress

Step 1: Cre ate a sticky header.

Step 2: Select your header and edit the design.

Step 3: Change your default padding.

Step 4: Head to Developer Mode.

Step 5: Paste the first part of the progress bar code.

Step 6: Go to the Site HTML/CSS menu.

Step 7: Paste the second part of the progress bar code.

Step 8: Choose your colors.

Step 9: Go back to the Site HTML/CSS menu.

Step 10: Paste the third part of the progress bar code.

Step 11: Save and enjoy.

Duda Tip: Element Overlap

Step 1: Add the widget.

Step 2: Choose your design element.

Step 3: Position your design element.

Step 4: Set the overlap.

Step 5: Open the code editor.

Step 6: Move the image in front of the element.

Duda Tip: Seamless Row Divider

Step 1: Create the design.

Step 2: Create two sections.

Step 3: Add a row between them.

Step 4: Upload your divider.

Step 5: Adjust the height.

Step 6: Adjust the spacing.

Duda Tip: No Code Element Highlight Using Personalization

Step 1: Navigate to personalization, and create a blank row.

﻿

Step 2: Customize the rule.

﻿

Step 4: Choose your layout.

Step 5: Create a design.

﻿

Step 6: Attach the rule to the corresponding day.

﻿

Step 7: Position the section.

﻿

Step 8: Activate the rule and duplicate the process for each day.

Step 9: Check your trigger conditions.

Step 10: Use the personalization editor to highlight the correct day.

﻿

Step 11: Preview your work.

﻿