Instructions on how to layout custom pop-ups
This instruction will help you to layout a pop-up, which CSS styles will not distort or conflict with the styles of your site. You will be able to manage pop-up settings in the service interface in the “Pop-ups” section.
Three types of pop-ups are available in the service:
- fullscreen - in the centre of the screen;
- line - a bar at the bottom or top of the screen;
- small - small corner window.
And 2 categories:
- collecting - collecting
- informing - informing
collecting
Designed to collect user information: email, phone number, name, etc.
By leaving an email address (and other user data) in the field of the pop-up window, the user subscribes to the newsletter. After subscribing, he/she sees a “thank you page” with a confirmation of successful subscription.
Class .enpop_thanks-window
which should be added to the parent block with id #enpop
class is responsible for the mechanics of showing the “thank you page”. Adding one class changes the behaviour of the other elements.
Informing
Designed to inform the user about a particular service/promotion, etc. “Thank-you pages” are not used for such a popup.
Templates for downloading
Pop-up service pop-up templates have the correct structure and classes, which can be modified and supplemented if necessary. Therefore, we recommend using them for layout.
Example of pop-up window structure
<div id="enpop" class="container--enpop enpop_color_1 enpop_position_bottom-right"> <form class="popup--enpop" data-role="body"> <input class="popup__close-button--enpop" type="button" data-role="close" /> <div class="popup__title--enpop enpop_title">Новости недели</div> <div class="popup__text--enpop enpop_text">Оставьте емейл и мы вам напишем</div> <div class="popup__inputs-container--enpop"> <input class="inputs-container__input--enpop" name="firstName" type="text" placeholder="имя"> <input class="inputs-container__input--enpop" name="email" type="email" placeholder="емейл"> <input class="inputs-container__input--enpop" name="phone" type="tel" placeholder="телефон"> <input class="inputs-container__submit--enpop enpop_submit" type="submit" value="Подписаться"> </div> <div class="popup__accept-container--enpop"> <p class="accept-container__text--enpop">Нажимая на кнопку, вы соглашаетесь <a class="accept-container__link--enpop enpop_accept">с ссылкой</a></p> </div> </form> </div>
Layout requirements
Mandatory:
- Presence of a thank you page (for the collecting window only!)
- Presence of a cross to close the window
- On all styles put
!important
- At the beginning of the CSS file, zero out any styles that may leak:
#enpop * {all: initial !important}
- Put a modifier on all classes
–enpop
to make the styles unique. - First container class for all popups
.container–enpop
. All themes with colour, positioning, etc. should be applied to it - Class
.container–enpop
put id#enpop
and write all styles through it. - Don't forget the difference between
#enpop.container–enpop
и#enpop .container–enpop
- Roles must be added for the popup to work properly:
data-role='overlay'
- background block (if any)data-role='body'
- popup bodydata-role='close'
- button to close the pop-up windowname='firstName' type='text'
- input with namename='lastName' type='text'
- surname inputname='email' type='email'
- email inputname='phone' type='tel'
- phone inputtype='submit'
- form submit button
- Add modification classes to the modifiable values at the popup for the identity of the configuration file:
enpop_title
- title textenpop_text
- body textenpop_submit
- subscribe buttonenpop_accept
- link to the agreement on processing of personal dataenpop_accept_container
- if there is a checkbox, wrap the container with the PD and the checkbox.
- Style the link to the PDN by referring to
.enpop_accept a
(or another class of the PDN container), i.e. without creating a class for it - When laying out the PDN container, take into account that it will be hidden
display:none
so the top indents should not be set, so that the layout will not break when it is hidden - Standard positioning themes for popup previews in the platform:
enpop_position_bottom
- for line popupsenpop_position_bottom-right
- for small pop-ups
Desirable:
- For naming classes, use БЭМ
- When creating the layout, you need to take into account the fact that not all elements will be able to be rearranged when adapting, accordingly, they will be hidden on mobiles
- Consider the effect of hovering :hover for buttons on a pop-up window
- Border marking of text blocks will allow you to control the transfer of text. The minimum volume is 2 lines. Such volume will allow to keep line spacing
- The fields for email, phone number and name should be provided for the collecting pop-up cone. Any of these fields can be disabled when setting up the pop-up window
What else is important:
- You can't use paid or custom fonts, we can only take free fonts from the Google Fonts
- When creating a layout keep in mind that most modern screens have Full HD 1920×1080 resolution.
- If animation is planned, it is better to discuss the possibility of its connection with your personal manager.
- Stylisation themes are the same for all pop-ups and are listed below
- Images for pop-ups should be pre-loaded to the image repository and use links to them in the layout
Stylisation Themes
Stylisation Themes:
enpop_position_top-left
enpop_position_top-right
enpop_position_bottom-left
enpop_position_bottom-right
enpop_position_top
enpop_position_bottom
enpop_position_left
enpop_position_right
Pages before/after:
enpop_offer-window
enpop_thanks-window
Colour themes:
enpop_color_1
enpop_color_2
enpop_color_3
…
Special Effects:
enpop_special-effect_1
enpop_special-effect_2
enpop_special-effect_3
…
Formatting of configuration JSON file
Configuration file is needed to describe the popup parameters that can be changed, as well as for its proper operation when loaded into enKod. Only part of the config file needs to be filled in, we will do the rest ourselves.
Examples of configuration files can be found in the download templates.
type
- popup type (fullscreen
/line
/small
)
category
- pop-up category (collecting
/informing
)
scriptSettings
- settings that are passed to the script. If you don't add these settings, you won't be able to choose to display a thank you page in the editorthanksPageClass
- thanksPage classcontainerSelector
- container to which you want to add a class
settings
- general settingspersonalData
- PD settingsshow
- whether to show by default (true
/false
)selector
- selector for the container with the AP text (by defaultenpop_accept
)text
- default AP texthref
- default PD linkcontainerSelector
- If the AP link contains not only text but also other elements like a checkbox, you can specify their common container to be hidden to avoid cases where the text is hidden but the checkbox remains. Field optional
custom
- popup settingsname
- description of the field that will be displayed in the interface when customising the pop-up windowselector
- selector for the container (by default'enpop_title
/enpop_text
/enpop_submit
)param
- changeable property (textContent
/value
/innerHTML
/style.width
)value
- default field valuetype
- type (text
)
themes
- design themesvalue
- default colour scheme (enpop_color_1
)selector
- selector (container–enpop
)enum
colour
- theme colour for previewclass
- colour scheme class (enpop_color_X
)
fields
- Configuring dynamically added form fields
Warning. If you specify a field inputContainerSelector
field, its contents will be automatically cleared and only those fields specified in the settings will be rendered.
fieldClass
- class with which the input field is addedinputContainerSelector
- selector of the container to which fields will be addedenum
name
- field name (email
/phone
/firstName
/lastName
)placeholder
- name of the field the user will seerequired
- whether the field is required (true
/false
)
positions
- design themesvalue
- default positionselector
- selector (ontainer–enpop
)enum
aligment
- position (top-left
/top-right
/bottom-left
/bottom-right
)class
- position class
thanksPage
- text settings for thanks pagename
- description of the field that will be displayed in the interface when setting up the pop-up windowselector
- selector for the container (by defaultenpop_title
/enpop_text
/enpop_submit
)param
- modifiable property (textContent
/value
/innerHTML
/style.width
)value
- default field valuetype
- type (text
)