Build

The Build tab is exactly what it sounds like – it has all the components you need to build your website. Clicking on Build will display all of the elements in the left sidebar, organized into categories.

Pages

The Pages tab houses all the pages you’ve added to your site and allows you to add, rearrange, copy, delete and edit them. Clicking on any page here will load that page on the right hand side of the screen so you can easily start editing.

Themes

The Themes tab has two important functions related to how your website looks:

• You can browse, preview, and choose a different theme You can pick different fonts for the various text-based elements on your site.
• From the Themes tab you can also access the code editor to modify the HTML and CSS for a theme, and you can toggle the guides on and off. What do the Guides do? They’re draggable vertical and horizontal bars that help you align things evenly on your pages while working in the editor. Give them a try next time you’re positioning elements on your pages!

Store

The Store tab is exactly what you might think – a place to set up and manage every aspect of an online store. What if you don’t have a store and don’t plan to start one? Not to worry – you don’t need to do anything with the Store tab unless you’re planning to sell from your site.

App Center

The Apps tab allows you to search, browse, install and manage apps from the Weebly App Center. What can you do with apps on your site? The sky is practically the limit – we have hundreds of apps that will add functionality and flair to your site.

Settings

Last but not least, the Settings tab is where you can configure a number of global attributes for your website, including the site address, password, and more.

Upload a single image – use the image element

Select the image element

From the Build tab, drag the image element to a page. Then click on the element to open the image selection dialog box.

Upload an image file

Here you can upload an image from your computer by dragging the file from a folder directly onto this window or by clicking the green upload button and locating the file on your computer.

Adjust size

The size of the picture as it appears on your website may be a bit different than you expected, but you can change the size easily. Mouse over the image and a small blue box in the lower right corner will appear. Click and drag on this to resize the image

Adjust image settings

Clicking on a photo will bring up the element settings.

In addition to the Edit and Replace image buttons, the following options are available:

• Link: This option allows you to add a link to the image. 
• Lightbox: Enabling the lightbox feature will display the full sized image in an overlay when someone clicks the image on the page. 
• Spacing: Click on this to adjust the amount of white space around the picture. 
• Caption: Click here to enter caption text that will display beneath the image. 
• Advanced: This menu includes options to choose a border style and color and enter Alt Text for the image.

The Edit Image button will open an image editor with several more options. From left to right in the above image:

• Crop: Crop or rotate the image 
• Filters: Add one of several filters, similar to what you may be familiar with from popular photo apps 
• Adjust: Make adjustments to the image brightness, saturation, and contrast 
• Text: Add text in a layer on top of the image 
• Focus: Add a linear or radial blur effect to the image

Use the undo button to remove any change you don’t like, and don’t forget to click save when you’re done editing.

Image aligned to text

You can also add an image directly to a text element and have the text wrap around the image. To do this, drag an image element into an existing text element.

Then upload an image as described above. You’ll likely want to adjust the size of larger images using the blue drag control in the corner of the image. You can access the same settings that are available for a standalone image element, like caption and spacing, and switch the alignment from left to right. Note that you can only place one image into a text element. If you want to create an magazine article style look, you can use multiple text elements and add a picture to each one.

To add multiple images – use Gallery or Slideshow

If you want to add multiple images to your site, there are two easy ways to do that: the gallery and slideshow elements. Which one should you use? It depends on how you want to display your images.

Slideshow: Displays a series of photos one at a time. You can set the slideshow to cycle through the images automatically, or allow visitors to click through the photos at their own pace. Each slide can have its own caption, link, and alt text.

Gallery: Displays a group of photos as thumbnails in a grid ranging from 2 to 6 columns wide. Clicking on a thumbnail opens the full image in “lightbox” display. You can add captions, alt text, and links to each thumbnail, though adding a link will remove the lightbox functionality from that image.

Add a Slideshow

To add a slideshow, drag the element to a page on your site. This will open a dialog box where there are several different navigation styles to choose from. Click on one of the styles to open the image upload window, but don’t worry, you can change the navigation style later! On the upload screen, click the button to locate and upload your images.

When your images finish uploading, you’ll be able to rearrange them and add text or links. To move an image, simply click and hold on the thumbnail, drag it to a new spot, and drop it into place. From left to right, the icons above each image allow you to:

Add a link to the slide Add a caption to the slide Add alt text to the image for accessibility Delete the photo from the slideshow

If you need to add more images, use the button at the upper right. When you’re done, click save to view your slideshow on the page and adjust the settings.

Click on the slideshow element to open the settings panel. The button at the top will take you back to the slideshow thumbnail screen where you can add and remove images and captions, alt text, or links.

The other options provide the following functions:

• Transition Style: Change the animation used when one image cycles to the next 
• Navigation: Pick a different style of navigation for the slideshow.
• Note: “None” is the “simple” layout depicted in the images above. 
• Speed: Decide how long each slide will display when using autoplay. 
• Spacing: Set the top and bottom margins for the slideshow element. 
• Caption Location: Switch the slide captions from top or bottom for all images. 
• Advanced: Change the aspect ratio and autoplay settings.

Try out different options to see what works best for your purposes, and don’t forget to publish when you’re done!

Note: The slideshow element will automatically expand to the width of the area in which you’ve placed it. If you want to make the slideshow narrower, you can put it into a column by dragging a Spacer element to either side of it. For more details, see the article on working with columns.

Add a Gallery

Drag the gallery element to a page and click to upload your images. You can select multiple images from your computer to add them all at once. When the images finish uploading, they’ll appear in the gallery on the page.

Click inside of the element to open the settings:

• Add Images: Upload more images to the gallery. 
• Columns: Change the number of columns the gallery displays. 
• Spacing: Adjust the top and bottom margins for the element. 
• Caption: Choose a display style for captions (show only on the lightbox, show at the bottom of the thumbnail images, or show on top of the thumbnails in a translucent overlay) and turn on the option to display thumbnail captions only on hover. 
• Advanced: Set the spacing between each image in the gallery and choose a border style.

Click on any image to add a link, caption, or alt text for accessibility. To rearrange images, click on a thumbnail and drag it to a new position. If you’re displaying a lot of images, you may want to try using a larger number of columns – this will make the thumbnails smaller so more can fit into a row.

Note: Adding a link to a gallery thumbnail will prevent the lightbox from opening.

1. Select the Audio player element

You’ll find the element in the Media section of the Build tab. Drag it onto a page to get started.

2. Upload the audio file

Click anywhere on the element to open the settings panel, then click Upload File to choose an MP3 file from your computer.

The upload may take a few minutes to complete depending on the file size and your connection speed, but you can close the upload window and monitor the status via the upload progress bar.

3. Adjust audio settings

Once the upload is complete, the player will expand to display the artist and track info if this information is embedded in the file. Click again on the element to open the settings panel and adjust the position and color of the player (light or dark). You can also enter the Artist and Track info here if it’s missing from your file.

The audio player currently only allows for a single MP3 file. If you’re looking to add a full playlist, you may want to search the Weebly App Center – there are several different audio apps that have playlist functionality.

Choose icons

There are a few icons enabled by default, but you can turn any of the available icons on or off by clicking on the element and then on Manage Icons.

Show or hide icons

You’ll see a list of the active and inactive icons – click on any one of them to show or hide it and enter the address to your profile.

Choose order and save

Once you’ve selected the icons you want and entered your information, you can change the order they’re displayed in. Click on the element to bring up the settings and then click Reorder. Drag the icons into the order you prefer and click done to save the changes. You can also adjust the alignment and spacing for the element from within the settings.

Note: Don’t forget to put in the links to your profiles – the icons won’t show up on your published site if they don’t have a link entered.

1. Open the Weebly Site Dashboard – Log in to your customer account and open My services. Choose your domain and press Go to Weebly site builder (or Go to Sitebuilder if you have already started building in Weebly).
2. Click on Edit site
3. Although you already have the app installed click on Download in App Store / Download in the Google Play store. This will connect you via Svenska Domäner and let you access your site.

Choose a theme that has the color palettes option

When browsing themes in the gallery, you can click on a thumbnail to view a list of features and other information. You can also preview the theme and apply it to your site from here.

Enter the hex code or choose a swatch

Click on the Themes tab to see the color palette choices for the theme you’re using. Choose one of the built-in pairings or add your own – you can enter the hex code for a color, or use the swatches and slider to create virtually any color.

The primary and accent colors will apply to various aspects of your site, depending on the theme. In the theme shown above (Dusk), the accent color is used for the button and social icons. Experiment with different themes and colors to give your site a new look!

Select the video element

The HD Video element is in the Media section of the Build tab. Drag it over to your page to get started.

Upload your file

Click on the element to open the options and start an upload. Most standard video file formats are supported (MP4, MPG, MOV, WMV), and you can upload videos up to 1GB in size.

Wait for loading to complete

Depending on the size of your video and your internet connection, it may take some time for the upload to complete. You’ll see a status bar showing the upload progress, and you can go ahead and work on other parts of your site while you wait.

When your video is uploaded, we’ll automatically encode it for optimal playback. This can also take some time to complete, but you can keep working on the rest of your site while you wait. Once the encoding completes, you’re all set!

Adjust viewing options

You can also adjust the alignment, display size, and spacing for your video, or allow visitors to download a copy of the file if you wish.

You may have noticed that there’s no save button in the Weebly editor, and there’s a very good reason why. That’s because everything is saved for you automatically while you work, so you don’t need to publish or do anything special to save. When you’re ready to take a break from working on your site, you can just close the editor – you’ll be able to pick up right where you left off when you’re ready to come back.

What about blog posts?

If you guessed that you do have to save a post if you need to come back to it later, you’re exactly right.

Select the element: Section

Drag the Section element from the Build tab onto your page. The section will fill the full width of the page where you place it, so choose a spot above or below other elements on the page. If you’re using a Splash page type, you won’t be able to add a section as this style of page is designed to display a limited amount of content with a single background image.

Fill the section with content

Next, you’ll want to add content to your section. We’ve put together some pre-made, customizable layouts to help you quickly start building great-looking sections.

Preview and save

Click on any one of the layout styles to see a preview of how it will appear on your page. If you like what you see, go ahead and save. You can then rearrange, add or remove any of the elements in the layout and customize them with your own content.

Tailor the layout

Don’t see anything you like in the section layouts? No problem – you can add elements manually, too! Just click outside of the layout panel to cancel and start dragging in the elements you want.

Format the background 

Each section on a page can have its own unique background color or image, and if you’re a Pro subscriber you can even add a video background. Click on the section and then on Edit Background.

Choose background color

Background colors can be selected using the Hue slider or by entering the specific hex code for the color you want.

Choose image or video as background for the section

For image and video backgrounds, you can upload your own or choose one from our built-in galleries.

Change the size

Want to make a section taller or shorter? Click on it and drag the blue bar at the bottom up or down to adjust the height, which will be displayed in pixels as you move the bar. If the tool tip says “Auto”, that means the section can’t be made any shorter, so you’ll need to remove some elements first.

Change placement

You can also change the vertical alignment of all elements in a section by clicking on Edit Background, and then Advanced. Elements can be aligned to the top, middle, or bottom of a section.

Move and copy sections

Need to move or copy a section to another page? Click on the section and then on Move. You can move a section up or down in position on the same page, move it from one page to another, or copy it to a different page or to the same page.