뉴스레터 배너 제작
이번 글은 워드프레스 블로그 개설 과정 3 뉴스레터 배너 제작에 대해 작성하고자 한다. 아래의 이미지와 같은 배너를 글의 중간에 위치시키자 그리고 이를 클릭하면 뉴스레터 배너가 뜨고 여기에 이메일 주소를 적을 수 있도록 구성하자. 먼저 anywhere elementor를 이용하여 해당 배너를 생성한다.
메뉴의 왼쪽을 보면 AE Templates라는 메뉴가 있고 여기에서 Add New를 클릭한다.
임의의 제목을 작성하고 즉시 publish를 눌러준다.
publish를 하고 나면 아래와 같이 edit with elementor라는 버튼이 생성된다. 이 버튼을 눌러준다.
아래의 이미지는 보이는바와 같이 3개의 섹션으로 구분되어진다.
먼저 십자 표시를 눌러준다.
그리고 Flexbox를 선택한다.
3개의 섹션으로 구성된 항목을 클릭한다.
아래의 영역 중 맨 왼쪽의 영역에 일러스트레이터 이미지를 삽입해보자.
필요한 일러스트는 undraw사이트에서 찾아보자.
우측 상단의 search 버튼을 클릭하여 newsletter 또는 mail이라고 입력 후 검색해본다.
원하는 이미지를 클릭한 후 Download SVG for your projects를 클릭하여 저장한다.
저장된 파일을 아래의 작업을 통해 첫번째 섹션에 삽입한다.
저장된 이미지를 choose image를 클릭하여 불러와 삽입한다. 삽입이 정상적으로 진행되지 않는 경우 워드프레스 대시보드 media 메뉴의 Add New Media File을 클릭해서 먼저 upload 후 삽입한다. 그리고 배너 생성 작업을 하고 있던 elementor 화면의 우측 publish 버튼을 클릭한다. 다시 해당 화면을 새로고침 한 후 일러스트레이터 파일을 삽입한다. 파일 포맷이 SVG라서 발생할 수 있는 문제이다.
image resolution을 full로 설정한다.
image의 style 탭으로 가서 width로 이미지의 크기를 조절한다.
중간 섹션에 큰 텍스트 입력을 위해 heading을 항목을 선택, Drag하여 해당 영역에 Drop한다.
Content 탭의 Title 영역에 작성하고자 하는 텍스트를 입력하고 Style 탭에서 글자 크기 색상 디자인을 조절한다.
Heading 아래 sub text 입력을 위해 Text Editor을 선택 Drag하여 해당 영역에 정확하게 Drop한다. 그리고 Content 영역에서 원하는 텍스트를 입력하고 Style 탭에서 해당 텍스트의 크기 색상 디자인을 조절한다.
Subscribe 버튼을 생성하기 위해 Button을 검색 선택 후 Drag하여 해당 영역에 Drop한다.
Content 탭의 text 영역에 작성하고자 하는 텍스트를 입력하고 역시 Style탭에서 해당 버튼의 텍스트 크기 색상 디자인을 조정하고 역시 버튼의 크기 배경 색상 등을 조정한다.
전체 배너의 중앙 정렬을 위해 6개의 점으로 이뤄진 부분을 클릭 후 Align Items에서 중앙 정렬을 선택해준다. 그리고 Style탭에서 해당 배너 전체의 배경 색상을 선택한다.
스마트폰에서 잘 보이도록 일부 디자인을 수정한다.
태블릿에서 잘 보이도록 일부 디자인을 수정한다.
여기까지 완료한 후 우측 상단 publish 버튼을 클릭한다. 그리고 좌측 햄버거 버튼을 클릭 후 Exit to WordPress를 클릭하여 해당 화면에서 나온다.
Exit to WordPress를 클릭하여 나오기 전에 해당 배너를 템플릿으로 저장하자.
여섯개의 버튼이 있는 영역에 마우스를 올려놓은 후 오른쪽 버튼을 클릭하고 Save as Template를 선택한다.
저장할 템플릿명을 적어주고 Save 버튼을 누른다.
아래와 같이 해당 템플릿이 저장된 것을 확인할 수 있다.
여기까지 진행이 되었다면 다시 왼쪽 메뉴에서 Exit to WordPress를 클릭하고 빠져나온다.
화면에서 나오면 우측 상단에 Short Code라는 글자 아래 코드를 볼 수 있다. 이 코드가 현재까지 작성한 디자인을 대신하는 코드이다. 이 코드를 복사한다.
해당 배너를 삽입하고 싶은 글을 열고 해당 자리로 가서 +버튼을 클릭 후 short code로 검색해서 나온 아이콘을 클릭한다.
해당 영역에 아까 복사했던 코드를 붙여넣기한다.
이제 해당 글을 Publish 또는 save를 한 후 브라우저에서 열어보면 아래의 이미지와 같이 정상적으로 나타나는 것을 확인할 수 있다. 다만 Subscribe now 버튼을 클릭해도 연결되는 action이 없기에 아무 반응이 없다.
위에서 AE Template으로 저장 한 템플릿을 다시 사용하는 방법은 아래와 같다.
