DAY 1  Activities

1

Change the button background color to blue. On hover, make the background white and the text blue.

Steps:

To edit a button in Duda, you can:

  1. Right-click the button and select Edit Design
  2. Use the Layout section to select a button shape from the Duda presets
  3. Use the Button Design section to adjust the button's width, height, background color, and border weight
  4. Use the Button Style to Button Text section to change the button text color, font, text size, format, alignment, and direction
  5. Use the More design options section to edit hover state options

Videos:

2

Make the website theme blue, black, and white. (blue variant: HEX#019cdf)

Steps:

To change the site theme in Duda, you can do the following:

  1. Click Theme in the side panel to open the Site Theme panel.
  2. Select a theme from the available options.
  3. Customize the theme by changing colors, fonts, images, and layouts.
  4. Upload your own content, such as images and text, to replace the placeholder content in the theme. 

Videos:

3

Change all section title fonts to "Poppins" (36 px).

Steps:

To edit text on your site:

  1. Click the text you want to edit to open editing mode.
  2. Select the text you want to edit by clicking and dragging over the text.
  3. Use the inline editing options in the bar above the text to edit text styles, sizes, fonts, alignment, add links, and more. For details on the text bar, see the section in this article Text Tool Bar.

Videos:

4

Change all paragraphs and button text to "Work Sans" (16 px)

Steps:

To edit text on your site:

  1. Click the text you want to edit to open editing mode.
  2. Select the text you want to edit by clicking and dragging over the text.
  3. Use the inline editing options in the bar above the text to edit text styles, sizes, fonts, alignment, add links, and more. For details on the text bar, see the section in this article Text Tool Bar.

Steps:

To edit a button in Duda, you can:

  1. Right-click the button and select Edit Design
  2. Use the Layout section to select a button shape from the Duda presets
  3. Use the Button Design section to adjust the button's width, height, background color, and border weight
  4. Use the Button Style to Button Text section to change the button text color, font, text size, format, alignment, and direction
  5. Use the More design options section to edit hover state options

Videos:

5

Change phone number to 888-888-8888.

Areas to Check:

  • Header and Footer (buttons, social widgets, etc.)


  • Site SEO


  • Page SEO


  • Mobile Phone Icon


  • FAQs


  • Business Info in Site Content


  • GS Video (Edit through WeVideo)


  • Collections


6

Change the business name to “Simple”.

Steps:

  • CTRL+F and search for business name (then change)


  • Change in CMS>Business Data>Business Info


  • Check in SEO Titles and Descriptions


  • Check Collections’ Content


7

Change email to “test@simple.biz” .

Areas to Check:

  • Header & Footer (buttons, social widgets, etc.)


  • SEO settings


  • Contact widgets


  • Formsite or Cognito form


  • Duda contact form


  • FAQs


  • Business Info in Site Content


8

Change business address to: 45 W 139th St, New York, New York(NY), 10037

Areas to Check:

  • Business Info


  • Maps


  • FAQ content


9

Change the business logo to this logo (download with transparent background):

Areas to Check:

  • Header & footer (don’t forget about the shrinking header if they have one)


  • Business Info


  • Favicon & Social Image


  • Check the top of any Formsite or Cognito forms (look on popup)


  • Mobile view logo image


  • GS Videos


10

Create a Contact Us section for the website. Anchor the “Contact Us” section to the header navigation links.

Steps:

To edit text on your site:

  1. Create a Contact Us Section.
  2. Anchor the Section:
  • Right-click on a widget or row
  • Select Set as an Anchor
  • Name the anchor
  • Select Add to Site Navigation to add the anchor to the site's navigation
  • Click Add

Videos:

11

Create a gallery section for the website. The gallery should display 4 columns and 2 rows. Use Canva for the images (choose the ones that match the keyword “HVAC services” and location “New York, New York”).

Steps:

  1. Add a new row. Right click on an existing row and add a row above or below it.
  2. Add a Photo Gallery Widget:

Videos:

12

Create individual sections for “Heating” and “Cooling” services, and a section featuring the client as an HVAC contractor.

Steps:

  1. Add a Text and Image Section in Duda. We suggest adding a “Designed” section.
  2. Let ChatGPT generate content for you. Use the prompt, “Create a concise section title and paragraph for a website, featuring [insert service] for [insert business name].”
  3. Generate Stock Photos from Canva. Use “Desktop Wallpaper” size, and use it to replace background photos for their corresponding sections.

Videos:

13

Create an FAQ section with 3 questions:

  1. Why is SB Company so popular?
  2. What services do we provide?
  3. How can I contact the SB Company?

Steps:

  • 1. Click on “Add Section” (You’ll see this when you hover your mouse in between sections/rows.). I suggest using a designed section, since those are already well-aligned.


  • 2. After selecting the “Designed” option, it will show the template options on the left side. Kindly follow these steps: (select FAQs, choose a template, then click on “Save Section”).


  • 3. Edit Content. Follow these steps: Click on the Accordion widget itself, select the question you want to edit (the content will show), then click on the actual title or description to edit text.


14

Anchor the FAQ section to the header navigation links as well. 

Steps:

  • 1. Hover your mouse on the row that contains the title of the section (FAQs), then right-click on the word “Row”.


  • 2. Click the “Set as Anchor” option.


  • 3. Type the name of the anchor, and click add.


  • 4. To arrange the anchor’s position on the navigation links/header, hover your mouse on the 3 dots before the anchor’s name, then drag to the position that you want it to appear on:


15

Use the same form from the “Contact Us” section, and add it to a popup.

Steps:

  • 1. Copy the “Contact Us” widget (right click on the contact form widget, and click o “Copy”)


  • 2. Add a popup (click on pages, click on popups, then select a template you want to use):


  • 3. Add a name of the popup and select “Add Popup”


  • 4. Delete the existing form on the popup (click on the red “X” icon):


  • 5. Right click on the column, then click “paste”.


  • 6. Design the contact form accordingly.


16

Create a floating click-to-call button.

  • 1. Add a button:


  • 2. Right click on the button and choose “Edit Design”.


  • 3. Toggle the “Floating” option on, and choose which part of the website you want it to float/show.


  • 4. Lastly, edit the button content according through the “Content” tab.


17

Recreate the homepage by deleting unnecessary sections and leaving the ones you created. The homepage should only have the following sections(in order):

  • banner
  • 1st section features the client as an HVAC contractor
  • 2nd section about “heating” service
  • 3rd section about “cooling” service
  • 4th section will show the gallery section
  • 5th section will show the FAQ section
  • 6th section will show the Contact Us section

Steps:

  • 1. Right-click on a section you want to edit (delete or rearrange).


  • 2. Either move the row up or down, or delete it if it’s unnecessary.


18

Recreate the homepage by deleting unnecessary sections and leaving the ones you creed. The homepage should only have the following sections(in order):

Home           About Us          Gallery           FAQ           Contact Us

1. To arrange the page’s/anchor’s position on the navigation links/header, hover your mouse on the 3 dots before the anchor’s name, then drag to the position that you want it to appear on: