냐울당 햄버거 메뉴

목차

    반응형

    개인 웹 사이트를 무료로 만들 수 있는 사이트

    아임 웹에서 개인 웹 사이트 제작 방법을

    하나하나 쪼개서 설명드립니다.

     

    오늘은 텍스트 위젯에 이미지를 넣는 방법을 알아볼게요.

     

    imweb 텍스트 위젯 이미지


    1. 텍스트 위젯

    https://imweb.me/

     

    아임웹

    쇼핑몰, 홈페이지, 막막하죠? 홈페—EASY하게 아임웹으로 시작하세요. 쉬운 시작과 빠른 성장.

    imweb.me

    아임 웹 디자인 모드

    일단 개인 웹 사이드 디자인을 수정하기 위해서는 아임 웹에서 디자인 모드로 접속해주셔야 합니다.

    방법은 아래 포스팅을 참고해주세요.

     

    ▼ 디자인 모드 들어가기 및 메뉴 이름 바꾸는 방법

    [Design/web] - 아임웹 홈페이지 제작 - 메뉴 이름 바꾸기

     

    아임웹 홈페이지 제작 - 메뉴 이름 바꾸기

    비전문가도 아임웹 같은 사이트를 이용해 손쉽게 홈페이지를 만들 수 있습니다. 홈페이지 제작의 뼈대 메뉴를 만들어보겠습니다. 1. 디자인모드 https://imweb.me/ 아임웹 스스로 만드는 반응형웹,

    ssimplay.tistory.com

     

    -

     

    텍스트 위젯에 이미지를 넣은 템플릿 모습

    텍스트 위젯 이미지

    [BO- OK] 템플릿을 사용하고 있습니다.

    왼쪽 위에 개인 웹 사이트에서 프로필 이미지 부분을 보시면 텍스트 위젯에서 이미지를 넣은 것입니다.

    지우고 자신의 웹 사이트에 맞는 프로필 이미지를 넣어보겠습니다.

     


    2. 이미지 넣기

    텍스트 메뉴

    텍스트 위젯 메뉴

    아임 웹에서 텍스트 위젯을 수정할때는 더블클릭을 하시면 됩니다.

    더블클릭을 하면 보시는 것처럼 위쪽으로 텍스트 메뉴가 나옵니다.

    텍스트 위젯임을 알려드리기 위해 이미지 옆쪽으로 글을 적어보았습니다.

     

    수정을 위해 전부 지워주세요.

     

    -

     

    이미지 첨부

    이미지 첨부

    텍스트 위젯 메뉴 중 이미지 첨부를 클릭해

    개인 웹 사이트의 얼굴 프로필 이미지를 넣어줍니다.

    크기는 이미 템플릿에서 지정되어있기때문에 자동으로 맞춰집니다.

     


    3. 링크 넣기

    텍스트 위젯 옵션 열기

    옵션

    텍스트 위젯의 메뉴는 여백 아무곳이나 클릭하면 나올 수 있습니다.

    메뉴가 사라지면 텍스트 위젯에 마우스를 올렸을 때 오른쪽 위에 i라고 적혀있는 아이콘이 나타납니다.

    i 아이콘을 클릭해주세요.

     

    -

     

    텍스트 설정

    텍스트 설정

    i 아이콘을 클릭하면 메뉴가 나타나는데 [텍스트 설정] 메뉴를 클릭합니다.

    동일한 메뉴를 텍스트 위젯에서 오른쪽 클릭을 해도 열 수 있습니다.

     

    -

     

    링크

    링크

    텍스트 설정의 가장 아래부분에 링크 탭이 있습니다.링크를 넣는 칸을 클릭하면 만들어두었던 나의 개인 웹 사이트 메뉴들 중에서 고를 수 있게 됩니다.프로필 이미지를 누르면 보통 홈으로 돌아오죠. 홈 메뉴를 선택해주세요.

     

    -

     

    링크 HOME으로 설정

    링크 설정

    위의 이미지처럼 HOME으로 표시된다면 링크 설정이 완료된 것입니다.


    4. 위젯 복사하기

    다른 페이지의 프로필 이미지

    다른 페이지 확인

    그런데 문제가 있습니다. 로고가 아닌 텍스트 위젯이기 때문에 다른 페이지에서는 연동이 안됩니다.

    이럴 땐 하나씩 바꿔주는 방법밖에는 없습니다.

    혹시 한 번에 바꾸는 방법이 있다면 댓글로 알려주세요. ㅠ

     

    어떤 페이지인지 확인하려면 개인 웹 사이트 메뉴 중 다르게 표시되는 부분을 찾으시면 됩니다.

    여기서는 [WALLPAPER] 메뉴가 색이 다르죠?

     

    -

     

    위젯 복사

    위젯 복사하기

    다시 개인 웹 사이트의 프로필 이미지가 있는 페이지로 돌아와서

    이번에는 위젯 위에서 [오른쪽 클릭 > 위젯 복사] 메뉴를 선택해 위젯을 복사해주세요.

     

    -

     

    위젯 붙여넣기

    위젯 붙여 넣기

    프로필 이미지가 없는 메뉴로 와서 [오른쪽 클릭 > 위젯 붙여 넣기]를 선택합니다.

    위젯이 엉뚱한 곳에 생성되지 않게 위치를 잘 맞춰서 오른쪽 클릭을 해주세요.

     

    -

     

    위젯 이동

    위젯 이동

    위젯이 아래쪽에 복사가 되었을겁니다.

    이 프로필 이미지가 있는 텍스트 위젯을 드래그하여 가장 위로 올려주세요.

    원하는 위치에서 검은색 바가 보일 때 손을 놔주시면 됩니다.

     

    -

     

    위젯 삭제

    위젯 삭제

    필요 없는 위젯은 [오른쪽 클릭 > 삭제]를 눌러 지워주시면 됩니다.

     

    -

     

    다른 메뉴에서도 복사

    반복

    개인 웹 사이트의 다른 메뉴에서도 동일하게 작업해줍니다.

     


    이상으로 개인 웹 사이트를 아임 웹에서 만들 때 텍스트 위젯에서 이미지를 넣는 법을 알아보았습니다.

     

    도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

     

     

    [같이 보면 좋은 포스팅]

    [Design/web] - 무료 홈페이지 제작 아임웹

     

    무료 홈페이지 제작 아임웹

    아임웹에서 무료로 홈페이지 개설을 해보겠습니다. 1. 아임웹 사이트 개설 https://imweb.me/ 아임웹 스스로 만드는 반응형웹, 쇼핑몰 모바일까지 알아서 imweb.me 아임웹은 쇼핑몰, 개인 홈페이지, 예

    ssimplay.tistory.com

    [Design/web] - [아임웹] 제공 이미지 사용하기

     

    [아임웹] 제공 이미지 사용하기

    안녕하세요. 플입니다. 오늘은 아임웹에서 제공하는 이미지를 이용해 이미지 변경을 해보겠습니다.  1. 디자인 모드 내사이트 > 관리 를 순서대로 클릭해 관리 페이지를 열어줍니다. 관리 페이

    ssimplay.tistory.com

     

    그럼 이만.

    총총.

    반응형
    댓글
    위쪽 화살표
    도움이 되었다면 공감(하트)과 댓글을 부탁드려요.
    로딩바