How do I change the header image in Weebly?
Today, I would like to briefly introduce how to change the header image in Weebly, which is very simple and easy, but easily confused.
I recently changed the header image as above. The fish image filled with hopes and wishes at the beginning of the year was changed to induce a calmer image. Now, with new hope, I want to start each day as energetically as a fish that bounces back.
To do this, first go to the Weebly editor.
Then click on the header image you want to change. You can see the button to edit the image only by clicking the header image.
If you click the orange squared button on the right of bottoms in header image, see below with some changing.
After changing the mode for edit, you have click the blue button, "change image".
And then you can find out below small window to upload your image.
Sometimes you will be disappointed with the screen you see when you upload an image. The size of the image to be uploaded and the header image do not match, so it is only partially visible. In this case, use the following method.
First, you click with right-click on your mouse. And then go to the Inspect mode.
If you can go to the inspect mode, see the coding area on the right side.
And the return to the header image, click it. You can get the size information from the image as follow as below.
If you can get the image size successfully, go to the editor such as Photoshop.
You can adjust the size to fit the actual header image size.
Adjust the style, proportions, and brightness to suit the case.
Below is the result to change the header image in Weebly.
The way for changing one page design of theme in Weebly
In the case of Weebly, the blog contents are not separately saved for backup purposes. Also, since there are no pagination functions and bulletin boards in the blog content, it isn't easy to count or display your own writing. I have been able to solve this inconvenience in my way. Therefore, it is still being used well, so it is up to you to get used to it. Instead, I'm posting this as a tip about what I've learned while adapting.
Today is one of them. If you look at Weebly or any other website builder, you can choose the design and layout of your site through themes.
However, there will be times when you need to modify the pages of one or more of those themes.
For instance, I had to alter the main site while running the Girin Instruments site. The site consists of five menus: Main, Service, About, Demo, and Contact. (For reference, it is recommended to have around seven menus.) I want to modify only the central part of these menus. However, from the conclusion, it is impossible to completely change one page's design in one theme.
If you want, you'd probably need to create a second site and link between that and the original location to have a single page use a different theme.
But creating a second site is very cumbersome. I hope this area will be resolved soon with the bulletin board in Weebly.
First of all, in my case, I would like to show you how I edited to change only one page of the thema.
First, click the page at the top of the editor of the Pages you want to change, and then change the header time to No Header.
Put the main image you want to put in the space that is created when the header disappears. And go to the Inspect with a mouse right click.
If you go to the inspect mode, it will appear in the program coding window on the right side of the window. Click on the image to see the image size information as shown below. (Knowing the image size in this way is helpful when creating banners or intro images.)
Adjust the image to size using Photoshop or other image editor.
Below is the finished page.
As you can see, the main intro screen has shrunk and the main program, Risk Weather, has risen to the top. This is to make the main program appear first when you click on the site.
It's a good option to turn a page into a completely different page, but it's also a good idea to use a little variation like this.
Using color block app on Weebly
As the content increases while operating the homepage, there may be times when it is necessary to show it by section. Or, sometimes it's good to show some text in a different color to emphasize its content. There are apps built to accommodate both of these needs. In my case, since I use a blog making site called Weebly, I would like to explain Weebly as an example.
Below is the related app, called " Color block".
Use the Color Block to highlight particular content by putting a solid block of color behind it. Inside the Color Block, you can insert *any* combination of content blocks - titles, text, images, etc., or even other Color Blocks.
In addition to specifying the color and transparency of the background of the Color Block, you can also round each of the corners individually and specify the padding for each of the four sides of the block (top, bottom, left and right) individually.
If you install the color block app as shown below, you can see that the app has been added to the Weebly editor. Drag and drop the added element to select the background you want to change.
As you can see below, the color block is designed to change the background color. If you write on the changed background color and the text is hard to see, use the transparent function to set the text to be visible and then adjust the size to apply it.
Below is to the result screen after applying.
How to make an event bar on your blog.
Whenever the exhibition schedule is constantly busy, I feel the need to briefly show the latest schedule in order. So I thought of using a widget called Elfsight.
Elfsight Apps is a cloud-based service that features apps to extend and diversify your website functionality (for instance, Instagram Feed, YouTube Gallery, Social Icons and others).
Below are various types of widgets provided by Elfsight.
Among them, click Event Calendar in the Tools category on the left.
In my case, I chose the simplest form of calendar.
Click the button at the bottom " continue with this template".
Now we will change the contents of the red rectangle below.
You have to manually enter it and change it as shown below.
Below is the finished image.
When you're done, click the green button below to put it on the website.
In my case, I joined with google.
It would be good to test other widgets on this site once in a while.
Before and after slider widget for weebly
In the last post, I introduced the before and after scene as follows.
When you need to express this before and after, using an image slide that can naturally show these images is more effective. If you visit the fortress website, you will see it often.
Below is a website that provides before and after image slides. You can use the service for free if you use simple functions. (If you want to move the site, please click the below screen)
How to use is as follows: After selecting your favorite slider style and then Click the button at the hot pink bottom(Continue with this templates) left of the screen.
Click on it and you will see the below screen, and then click the dog_2.jpg.
And then please upload your before image from your computer.
You have to upload the after image by using the same process like above.
Myungja Anna Koh