As we always gone HTML to WordPress so this time a bit of qeuries needs to be discussed because it is not for a client so envato needs proper things done and here are my qeries.
1: As we are making header/footer from elementor now so where will it’s code go ? Will we just make those templates in elementor and save ? Or we will keep those inside code files ?
Header/footer should be created using Elementor, please check section under Appearance -> Codeless header/footer/blocks. no need to add inside code. just saving as templates. At the end, we will create a simple header for the default installable version of the theme, with just logo and menu.
2: How will we be showing our desired header/footer ? Like there are two header types and we are making with elementor will we can those tempaltes as per selection or what ? Because we were always doing like get_header(‘dark’); or get_header(); for default header etc … so in this case I am bit confused what is proper way envato suggests with page builder.
All these things are managed by our plugin (cowidgets). Please check header/footer section under Appearance, there are a lot of options for header/footer showing rules.
3: Where to put code ? In style.css right ? Then will we be targetting with elementor classes like .elementor-wrapper etc … so confirm this one as well
As described on documentation on codex.codeless.co and figma, some elements style should go under css/components/ css files (sass) and compile with npm. Other styling under plugin cowidgets css files. There are only small things that you can put under style.css, something global or linked with the default version of the theme.
4: Same question for footer …
same here, please refer to codex.codeless.co too
5: All settings will go in customizer so we are using codeless_get_mod() function to get those settings and can use as we want. that is clear
yes, first param is option_name, second one is default_value. we use Kirki plugin to manage theme options on customiser, their documentation can help too.
6: For styling like default styling about theme color or font etc .. will we put those options as default in customizer ? Or will we put that in our style.css and upon user selection we will embed in page css by getting our settings ?
We should put some default styling on theme options. After we use Elementor so these stylings can be overwritten by the builder stylings, but a default skin should be set, colours, font family for body and headings, font-sizes etc.
The mapping of CSS selectors with options are made in different ways:
- directly on options file.
Kirki::add_field('cl_remake', array(
'type' => 'select',
'settings' => 'body_bg_pos',
'label' => esc_html__('Background Position','remake'),
'default' => 'left top',
'choices' => array(
'left top' => 'left top',
'left center' => 'left center',
'left bottom' => 'left bottom',
'right top' => 'right top',
'right center' => 'right center',
'right bottom' => 'right bottom',
'center top' => 'center top',
'center center' => 'center center',
'center bottom' => 'center bottom',
) ,
'inline_control' => true,
'section' => 'cl_styling_body',
'output' => array(
array(
'element' => 'body',
'property' => 'background-position'
)
) ,
'transport' => 'auto'
));2. Using this function codeless_dynamic_css_register_tags on functions.php to map dynamic styling options with CSS selectors.
3. Using includes/register/register-styles.php for some more difficult css selectors or cases.
7: I am seeing some styling like
.page-id-3390{
background:#FFF;
}
[data-elementor-id=”3413″] .ce-menu-item{
mix-blend-mode: difference;
}
Is it correct to go this way ? Because we usually not style with page id so I am cruious to know ?
No, this is not recommended, we can do it for some difficult cases when we go online and to make things looks better without going to edit everything again.