Primero activo la feature SharePoint Server Publishing Infrastructure (_layouts/15/ManageFeatures.aspx?Scope=Site), y a continuación activo la feature SharePoint Server Publishing (_layouts/15/ManageFeatures.aspx)
Ingreso al Design Manager
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHoQzqQLCt33oZPBUlG0Xbxo2yG0LJ8UvSK5B93HKSUJQC-JtwHM8OdXA8vOu5amLWdsntjcIvPeusX4MrBgjQqay4pCDHIvN9FFZgCMO7gtuVyGdHL18-lv3ho5kJ77Sw0sQK7dign5gd/?imgmax=800)
Después ingreso a Edit Page Layouts
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ8D9nsVN2uLYK3hyzUm2vYF0dk9FgvViFblGbUjvsGxMdtxKtZ644fLmtJt7WVN6E4sOP9qFKhurrBqfX_R_Zj2H880ZBmrzoW4JTHCTZXl2yjj_iQd0oIsVtWSFNP-ipwwGlRipJGlR0/?imgmax=800)
Hago click en “Create a page layout”
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSEQhblRmfMAm2GVOgpIzI5Yg90_m-ViYMk09tokdB_PxErcbZu1Gk2WHB-Wd_kR77MJDzTbZCwjLcMslLh_VekXtsBOrr1QXhKy9srrhPF7vgrjINtQlsE47dJlpHmOnj3qr0pPaTP_kG/?imgmax=800)
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXkQEmWGtBDhNc__d470XafvdTaOngZM6beVgLp2NTgYQUrdCpN_H3xKXxty4adKBZ6VD_NVXnYzCGToA9BGTXCmhUgdHfGPNDh__cw2nNMWiERZx65uxp3Z5UGjapLhyphenhyphen57-P_NEOgBHHx/?imgmax=800)
Vuelvo a Design Manager , y mapeo la librería _catalogs/masterpage/
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ15nBZ3JmfEgyEfnj0TfelIT9pCWbw5TOTsb2nwUvLwgbtgDHrrHF2QJZHZrRNPFnsuG4JZ_MuADHyUbbgfJ_7urSR_pUtXKweAZcBXaifsUkNSN5XM6q3UaXV0SLs6ra1pkiKFspc0fE/?imgmax=800)
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX5fp44kbYyikapYzHONpmJOf9ZgK5D3jKymQp0wSjqZxdm1qwTE2MjwuoUn1llPJcesecoa6Fmq_LQfF5T4M9jxKY_uiCahsXunQ0w3jAjcgC0lDvKOGLyHdXXduwJsoS4dN_h1bfpcd_/?imgmax=800)
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQThAK945yDs4nRp-e8Eq9niPEaQvA1iTKFB_eIt6C9E8iY-whG39SRaQ72ErM9Vn_30OaObP6DRkZV9Ac4GIvnE8UGigAkQw8-BaCLDPvC2GSf0kDM6ZBU5iPB_ToY8-sw6WvAx4-hJWr/?imgmax=800)
Dentro de la unidad mapeada ya podemos ver el archivo html recién creado
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZqToBG9WNIGqB3n0O070VBJc8EZFaNPkK046TueQ-fm4wf7DmkwxoMD_pJ4KITffwT5E0cF6BJ431w6Jto9gV_cPnTXbwMmaRWUxtaJP40O_Yd2zYniTCAooiiwsPwHSw_MDGfZO-jTqx/?imgmax=800)
Ahora vuelvo de nuevo a Page Layouts dentro de Design Manager
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhbGzynRBK9gRW21q-4IkOejmOGzpMOdAZdzQCHFkG2fZHs3qdGWO7sAcd2T4UZSUNsqWrEnjYbawMbZTUwH2O_FlHkUMcX2aOcbM9B5ihHVxYE6s6TIi7sSkG_VPIgF9uAh0zRPGZG5RU/?imgmax=800)
Hago click en el archivo recién creado, y me aparece la página de preview
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOkTxsJsRjAsAIqTX8LRzKJU3rbkEprKuh98Xv3KzAOMlDIG5hKrS0ZNGy7eCgWXTRx0NLl4MmELU_ey82s0PdqHZ9ZmPKhC-DN6UdMINTLUgoMtc7zS76W5mZ4GbUCh7-nGQx6SGX_1FE/?imgmax=800)
Hago click en Snippets
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqFYNeaooyWKQeif0gEfwd2BpfC63wlAlRfy6OFzG_Ld1gZgPrhe4laaakCSXfNbUanEHfFW91Mx5qVSMSOB-j3uv9lt_y20AYGYBTQTfHdhEAnVOpFIDqb6dzzQ5Qi1_33eagr2naT92Q/?imgmax=800)
Hago click en web part zone
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoFHW8gts5m9P7ZoIMPDOHqN2mBx5RI8yUdWgDG25PJBWipOSoH9dT2BBnUZB7wYTZhot9HuJ8vfagyoKkxzPI9Rn7_FnNmR1yrA4u8l_0rVWkkW7aymP-oFMLxP7l6zQKM7LPaedqiq9k/?imgmax=800)
Configuro todas las propiedades del page layout, por ejemplo Back Color
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHPwvAw_cPN8i0tq0PJ3trRBfKXh6A4amj7DtdhpkeKd4nYf3SmfvGYCuxmCWMgmeh8PSqPIapEcQTEeq8MleTEKoYP5Cjfpsol43775pjRo9XlrKxsz2_r7xehS7-ojbzSAsqq9MlhpWX/?imgmax=800)
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTky-OFL_TZvMMUc61aeWIQTPSVokOdgIQVddw70CKJW-_r0b_zKWlEllSrLnX9LbfDBUTZLCv7CVrNjXCyqzo-8QOSQBcQguouy_us7y8pctsjHLuH46dWEFQ4bjVSg0a9cEv-30BpkUi/?imgmax=800)
Después copio el HTML Snippet
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlXV41ANOE4HtN4sh6l6tN3iN92ofyPFboUN4ecXAS4n6MTtnv0eELYk_d1y47cyHjWxM2JrFQ6Q4RbBe3YJQ6wggUhiAVBNc0Bdae4y_fiVS4RuJwck7SEMs1ZgjVrVsh-DIlidsqw_SG/?imgmax=800)
Hago click sobre el archivo de layout creado, y lo edito con la tool favorita que tengan para html
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVTn9L18qWfCrC1U10u3GJ4iuM1CQYMKAWiFsAZChklfDjTYphnG-_mEYjOYtwg2m9Ye4zsycjVeaH1DVxAKpdERvqmVfzP81LRYgmFfawXbMEZJwBJLddXYM7YDqV9uNj9xF-3DFfKgIa/?imgmax=800)
Dentro del código busco
<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">—>
y reemplazo su contenido con lo siguiente (voy a hacer un layout responsive de 3 columnas).
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMC68EE2adOYDP-1XVHsz9aM_g63ltg1FTYew1zetXnnCX1rYrhpAxiCb8tXX94TCz1WcVSTOOcSl56lvWaZ2PGXhOsaFlahMRB6AJdSLk_wnysTOBGe98pr3iGOTVulIT5H1fcuUZ5y9V/?imgmax=800)
Por ejemplo quedaría así.
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN2xKnE-N7e1u8iYmjI3VYskfsLpKnDGtphyCIvIhJj1sMSaVX5IdRu-m0NPYxl4eO2QDgWc2w8ykr7kfUv4wBo5YQtzvpcOXez1jN6jH3W4mchdN3N-d25UjkSEwg_oyyVH_JSQ2w_tUt/?imgmax=800)
De vuelta hago click en Web Part Zone (fijate que cambia el ID del snippet) y lo pego en la columna sideNav
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqn0MfFQM6WlS7ClAWVLylc9roitUjO5Ih9Nm7Loc9HQNO0j4DR-zk5B47QRU7xDJrrzs4DqMbJSYjM9WJwb3yKsIDIeEJgv-MxjUEOdEGAkI3v4Q4sytgp79j9KqqOiDom_KTbzgm32HE/?imgmax=800)
Hago lo mismo para la columna righColumn
Quedaría así, donde los web part zone están cerrados (gracias VS)
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWrVARYjPGDGWIiEFNe_jpJfFCWE8S0rULQGP5gN4WFJ0X37fqMgG2zDZIO8DmyO6L879inPfOfcUsc_lLMJ-RIHs2gESeKvUpb6Hu19lrCbfZWGY51NZhKGwu1995zGn3IQnwELnNwIxT/?imgmax=800)
Ahora quedaría agregar el css para que los divs sean responsive, subo el archivo .css a la libreria SiteAssets.
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt9Pv0LpN-9winp2z5JDegEmNEOBjXrFH_SOLofDWyWZVmuiY2VVoSQxvYYh3ZcndRYrS17rRL1FexC5ECCPPKyF76_5ZiSI86hnAGe5eJJWHeZCk1WVnzVZXzre7MUFT0VmSV6Iro9u5a/?imgmax=800)
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.columnsContainer, footer { position: relative; margin: .5em; }
.leftColumn, .rightColumn, .sideNav, footer { border: 1px solid #ccc; padding: 1.25em; }
.leftColumn, .sideNav { margin-bottom: .5em; }
@media screen and (min-width: 47.5em ) {
.leftColumn { margin-right: 19.5em; margin-left: 9.5em; }
.rightColumn { position: absolute; top: 0; right: 0; width: 18.75em; }
.sideNav { float: left; }
}
.ms-core-navigation { DISPLAY: none }
#contentBox { margin-left: 10px }
#contentRow
{
padding-top:0px;
}
Ahora agrego una referencia al css en el código html, para ello lo agregamos en la sección PlaceHolderAdditionalPageHead
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOCDTXFkUICWpZncpIr2ClV1m2P1AaecjampSMSJN_XqkE2XUF1P8XP-DURqKujX9EM4TzZXfeNyxH3quBHLAIuB2bsJQO5yHPRSN61VcU6OlG-mpDZ9FHkhAx2Go_5P2IW6PFpI08fUfw/?imgmax=800)
IMPORTANTE: deben usar el atributo ms-design-css-conversion="no", sino no funcionará esta parte.
En el caso que quieras agregar directamente el elemento styles dentro del código, deberás usarlo de la siguiente manera:
<!--MS:<style type="text/css">-->
ACA VA EL CODIGO CSS
<!--ME: </style>—>
Es muy importante usar MS (markup start) y ME (markup end) para abrir y cerrar el estilo.
Ahora es hora de publicar el page layout
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2QYrtppKgxcyXmOxRPmpUeWGgRK6vM0pIhyeZUvcVKtQANrKgG7ovKGKvtrGRmPPPSnwfe33hm441WphI_yu8BX9Afnxy0ox4m1CwmntRyr8_o5S281xXimNiOc0hv_vrvOx4qP81DEt2/?imgmax=800)
Una vez publicada vemos que se convirtió correctamente
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK125GSoQWAM41PRZ1rdZlo7u7HnXscnXTQePnPtY-3WfD11ep_zXIjeRHCC-cBU21oJcdJZnSvPnGxQV9mcLiosQmvQpUBtoL6e_0IPgqKqTzEAnukuuNPXzdnqIsTSVcsbols4Eip-3A/?imgmax=800)
Ahora creo una nueva página, y le cambio el layout
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRvi7IBCPA0cKHr6W9_NtIpEONb4W7CEw3uw5q7ByzwGasYUW2EDsFRGaShhB4-agdLAZzb9zYPqCiOpsrbk9-Q4bpMq46l2P10FR_3cqvYC1GMusGO4Gwhuf5OOsxXxp65YUGKmNci5DI/?imgmax=800)
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMunolNQIQz-BFaDyGYkpJS6ydCpfBV911Kpeldc1s5QiVnokov-qKVwcsuMUQFjPK-PkOgbGGoKgt8eun7cgtb9Tm-soZWJPjD1u9LA84X62a5aHugFcCAXOPlFPI133OA5xgnw3QstDI/?imgmax=800)
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie-e1GWAEKMHXv6wK1gAl1XICOax-nO570RH_a2g8RzuBZPNm2WNcWvlsQLVKG8c1oztBRFcGb0FnMjBMhbq8OkqwSYKrNafJNVfrk0LREGoX0-0DK4hpvNKbDFOHMueKIU9p2SXb1ZQVA/?imgmax=800)
Al publicarla, me queda así
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuws9ryF2Sh10NKzVMMJJFkW-mSmhKWOzda1otIL5Gfr7qaXVWO4kRm-6nCSg6FDsUMeetTEnGOhoc-hG3sR0waEWnRf8P2eb19BAlx2mJ5judODVSBm0djVvdqdGjNjcjRSmtNKOeIUul/?imgmax=800)
Que pasa si reduzco la página, aparece el diseño responsive.
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhm_-Z5LpqLW_jLa3u4GOKEZYCsRFlf04aeWV21la9PP4I_RX-Jzxf0eJKQewkeIvBFcJEpwXOcxz9ltV7of-Ra7euRMkG9yuptLu167RXoC4-Kw4rGhagJ17AKkM44wwsqhEt2toQOTVF/?imgmax=800)
Algunos tips más:
En el caso que al publicar el diseño te lance el siguiente error: SharePoint requires HTML files to be XML-compliant. Your file isn't XML-compliant, likely because of tag properties without quotes, missing closing tags, or invalid properties in tags.
Data at the root level is invalid. Line 15, position 75.
Run the file through an XML validator, fix any issues using your HTML editor, save the file, and refresh this preview.
Entra a la siguiente página y valida el xml generado (copia todo el html del archivo)
http://www.w3schools.com/xml/xml_validator.asp
Segundo tip, configura que la librería MasterPage (/_catalogs/masterpage/Forms/AllItems.aspx) tenga configurado correctamente el versionado, así no generas muchas versiones.