Desktop + Mobile Detailed Locker

I've had a few different people requesting this specific design, so I went ahead and made it very configurable. Let me know if you need any help. Enjoy

Desktop + Mobile Detailed Locker

How do I start using this Content Locker design?

• 1. Open the Visual Editor for Content Lockers
• 2. Click "Create New" to create a new Content Locker, give it a name, and then click "Done"
• 3. Click "Design Options > Import Design"
• 4. Copy this code
  Code: Select all

  eyJjc3MiOnsicGMiOnsiYm9keSI6eyJiYWNrZ3JvdW5kIjp7ImNvbG9yIjoiI2ZmZmZmZiIsImhvcml6b250YWwiOiJsZWZ0IiwiaW1hZ2UiOiIiLCJzaXplIjoiY292ZXIiLCJ2ZXJ0aWNhbCI6InRvcCJ9fSwiYm9keS1odW1hbi12ZXJpZmljYXRpb24iOnsiYmFja2dyb3VuZCI6eyJjb2xvciI6IiNmYmZiZmIiLCJob3Jpem9udGFsIjoibGVmdCIsImltYWdlIjoiIiwic2l6ZSI6ImNvdmVyIiwidmVydGljYWwiOiJ0b3AifSwiYmFja2dyb3VuZC1ob3ZlciI6eyJjb2xvciI6IiNiMWIxYjEiLCJob3Jpem9udGFsIjoibGVmdCIsImltYWdlIjoiIiwic2l6ZSI6ImNvdmVyIiwidmVydGljYWwiOiJ0b3AifSwiYm9yZGVyLXJhZGl1cyI6IjQiLCJib3JkZXItY29sb3IiOiIjYjliOWI5IiwiYm9yZGVyLWNvbG9yLWhvdmVyIjoiI2I5YjliOSIsImJvcmRlci13aWR0aCI6IjEiLCJmb250LWNvbG9yIjoiIzljOWM5YyIsImZvbnQtY29sb3ItaG92ZXIiOiIjNTY1NjU2IiwiZm9udC1zaXplIjoiMTQiLCJmb250LXdlaWdodCI6Im5vcm1hbCIsIm1hcmdpbi1ib3R0b20iOiI3OSIsIm1hcmdpbi10b3AiOiI4NCIsInBhZGRpbmctdG9wIjoiOCIsInBhZGRpbmctYm90dG9tIjoiOCJ9LCJib2R5LW9mZmVycyI6eyJ0ZXh0LWJvdHRvbS1hbGlnbiI6ImNlbnRlciIsInRleHQtYm90dG9tLWNvbG9yIjoiI2ZmZmZmZiIsInRleHQtYm90dG9tLXBhZGRpbmctYm90dG9tIjoiMTciLCJ0ZXh0LWJvdHRvbS1wYWRkaW5nLXRvcCI6IjEyIiwidGV4dC1ib3R0b20tc2hhZG93IjoidHJhbnNwYXJlbnQiLCJ0ZXh0LWJvdHRvbS1zaXplIjoiMTMiLCJ0ZXh0LWJvdHRvbS13ZWlnaHQiOiJub3JtYWwiLCJ0ZXh0LXRvcC1hbGlnbiI6ImNlbnRlciIsInRleHQtdG9wLWNvbG9yIjoiIzAwMDAwMCIsInRleHQtdG9wLXBhZGRpbmctYm90dG9tIjoiMjAiLCJ0ZXh0LXRvcC1wYWRkaW5nLXRvcCI6IjAiLCJ0ZXh0LXRvcC1zaGFkb3ciOiJ0cmFuc3BhcmVudCIsInRleHQtdG9wLXNpemUiOiIxNSIsInRleHQtdG9wLXdlaWdodCI6Im5vcm1hbCJ9LCJib2R5LW9mZmVycy1saXN0Ijp7ImFsaWduIjoiY2VudGVyIiwiYmFja2dyb3VuZCI6eyJjb2xvciI6IiNjOWM5YzkiLCJob3Jpem9udGFsIjoibGVmdCIsImltYWdlIjoiIiwic2l6ZSI6ImNvdmVyIiwidmVydGljYWwiOiJ0b3AifSwiYmFja2dyb3VuZC1ob3ZlciI6eyJjb2xvciI6IiNhYmFiYWIiLCJob3Jpem9udGFsIjoibGVmdCIsImltYWdlIjoiIiwic2l6ZSI6ImNvdmVyIiwidmVydGljYWwiOiJ0b3AifSwiYm9yZGVyLWNvbG9yIjoiIzgyODI4MiIsImJvcmRlci1yYWRpdXMiOiIwIiwiYm9yZGVyLXdpZHRoIjoiMCIsImZvbnQtY29sb3IiOiIjNDc0NzQ3IiwiZm9udC1jb2xvci1ob3ZlciI6IiM0NzQ3NDciLCJmb250LXNpemUiOiIxMyIsImZvbnQtd2VpZ2h0IjoiYm9sZCIsIm1hcmdpbi1ib3R0b20iOiI3IiwibWFyZ2luLXRvcCI6IjAiLCJwYWRkaW5nLWJvdHRvbSI6IjEzIiwicGFkZGluZy10b3AiOiIxNSIsInRleHQtYWxpZ24iOiJjZW50ZXIiLCJ3aWR0aCI6Ijk4In0sImhlYWRlciI6eyJiYWNrZ3JvdW5kIjp7ImNvbG9yIjoiI2ZmZmZmZiIsImhvcml6b250YWwiOiJsZWZ0IiwiaW1hZ2UiOiIiLCJzaXplIjoiY292ZXIiLCJ2ZXJ0aWNhbCI6InRvcCJ9LCJib3JkZXItY29sb3IiOiJ0cmFuc3BhcmVudCIsImJvcmRlci13aWR0aCI6IjAiLCJib3JkZXItYm94LXNoYWRvdyI6InRyYW5zcGFyZW50IiwiZGlzcGxheSI6ImJsb2NrIiwiZm9udC1hbGlnbiI6ImNlbnRlciIsImZvbnQtY29sb3IiOiIjMDAwMDAwIiwiZm9udC1zaXplIjoiMjAiLCJmb250LXdlaWdodCI6ImJvbGQiLCJwYWRkaW5nLWJvdHRvbSI6IjE3IiwicGFkZGluZy10b3AiOiIyNiJ9LCJmb290ZXIiOnsiYmFja2dyb3VuZCI6eyJjb2xvciI6IiNmZmZmZmYiLCJob3Jpem9udGFsIjoibGVmdCIsImltYWdlIjoiIiwic2l6ZSI6ImNvdmVyIiwidmVydGljYWwiOiJ0b3AifSwiYm9yZGVyLWNvbG9yIjoiI2ZmZmZmZiIsImJvcmRlci13aWR0aCI6IjAiLCJib3JkZXItYm94LXNoYWRvdyI6InRyYW5zcGFyZW50IiwiZGlzcGxheSI6ImJsb2NrIiwiZm9udC1hbGlnbiI6ImNlbnRlciIsImZvbnQtY29sb3IiOiIjMDAwMDAwIiwiZm9udC1zaXplIjoiMTMiLCJmb250LXdlaWdodCI6Im5vcm1hbCIsInBhZGRpbmctYm90dG9tIjoiMjIiLCJwYWRkaW5nLXRvcCI6IjUifSwibG9ja2VyIjp7ImJvcmRlci1yYWRpdXMiOiI5IiwiYm94LXNoYWRvdyI6IiNiZjM1M2EiLCJmb250IjoiTW9udHNlcnJhdCIsIndpZHRoIjoiNTgwIn0sInBhZ2UiOnsiYmFja2dyb3VuZCI6eyJjb2xvciI6IiMwMDAwMDAiLCJob3Jpem9udGFsIjoibGVmdCIsImltYWdlIjoiIiwic2l6ZSI6ImNvdmVyIiwidmVydGljYWwiOiJ0b3AifSwib3BhY2l0eSI6IjQwIn19LCJwaG9uZSI6eyJib2R5Ijp7fSwiYm9keS1odW1hbi12ZXJpZmljYXRpb24iOnsiYm9yZGVyLXJhZGl1cyI6IjQiLCJib3JkZXItd2lkdGgiOiIxIiwiZm9udC1zaXplIjoiMTEiLCJmb250LXdlaWdodCI6Im5vcm1hbCIsIm1hcmdpbi1ib3R0b20iOiI1NyIsIm1hcmdpbi10b3AiOiI2MCIsInBhZGRpbmctdG9wIjoiOCIsInBhZGRpbmctYm90dG9tIjoiOCJ9LCJib2R5LW9mZmVycyI6eyJ0ZXh0LWJvdHRvbS1wYWRkaW5nLWJvdHRvbSI6IjE1IiwidGV4dC1ib3R0b20tcGFkZGluZy10b3AiOiI5IiwidGV4dC1ib3R0b20tc2l6ZSI6IjEwIiwidGV4dC1ib3R0b20td2VpZ2h0Ijoibm9ybWFsIiwidGV4dC10b3AtcGFkZGluZy1ib3R0b20iOiIxNSIsInRleHQtdG9wLXBhZGRpbmctdG9wIjoiNyIsInRleHQtdG9wLXNpemUiOiIxMyIsInRleHQtdG9wLXdlaWdodCI6Im5vcm1hbCJ9LCJib2R5LW9mZmVycy1saXN0Ijp7ImJvcmRlci13aWR0aCI6IjAiLCJmb250LXNpemUiOiIxMiIsImZvbnQtd2VpZ2h0IjoiYm9sZCIsIm1hcmdpbi1ib3R0b20iOiI1IiwibWFyZ2luLXRvcCI6IjAiLCJwYWRkaW5nLWJvdHRvbSI6IjkiLCJwYWRkaW5nLXRvcCI6IjEyIiwid2lkdGgiOiIxMDAifSwiaGVhZGVyIjp7ImJvcmRlci13aWR0aCI6IjAiLCJmb250LXNpemUiOiIxMyIsImZvbnQtd2VpZ2h0IjoiYm9sZCIsInBhZGRpbmctYm90dG9tIjoiMTAiLCJwYWRkaW5nLXRvcCI6IjIyIn0sImZvb3RlciI6eyJib3JkZXItd2lkdGgiOiIwIiwiZm9udC1zaXplIjoiMTEiLCJmb250LXdlaWdodCI6Im5vcm1hbCIsInBhZGRpbmctYm90dG9tIjoiMTYiLCJwYWRkaW5nLXRvcCI6IjAifSwibG9ja2VyIjp7fSwicGFnZSI6e319fSwiY3NzLWN1c3RvbSI6IkBpbXBvcnQgdXJsKCdodHRwczovL2ZvbnRzLmdvb2dsZWFwaXMuY29tL2Nzcz9mYW1pbHk9U291cmNlK1NhbnMrUHJvJyk7XG5cbiNteS1sb2NrZXIge1xuICAgIGJvcmRlcjogMTBweCBzb2xpZCAjYmYzNTM5O1xuICAgIGJveC1zaGFkb3c6IDBweCAxcHggMjJweCByZ2JhKDQxLCA0MSwgNDEsIDAuNTYpICFpbXBvcnRhbnQ7XG4gICAgZm9udC1mYW1pbHk6ICdTb3VyY2UgU2FucyBQcm8nLCBzYW5zLXNlcmlmO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cblxuI215LWxvY2tlci10b3Agc3BhbiB7XG4gICAgZm9udC1zaXplOiAyMXB4ICFpbXBvcnRhbnQ7XG59XG5cbmJvZHkubW9iaWxlICNteS1sb2NrZXItdG9wIHNwYW4ge1xuICAgIGZvbnQtc2l6ZTogMjFweCAhaW1wb3J0YW50O1xufVxuXG4jbXktbG9ja2VyLXRvcCBpbWcge1xuICAgIGhlaWdodDogMTE1cHg7XG4gICAgbWFyZ2luLWJvdHRvbTogN3B4O1xufVxuXG5ib2R5Lm1vYmlsZSAjbXktbG9ja2VyLXRvcCBpbWcge1xuICAgIGhlaWdodDogMTEwcHg7XG4gICAgbWF4LXdpZHRoOiAzOTVweDtcbn1cblxuI215LWxvY2tlci10b3AgaHIge1xuICAgIGJhY2tncm91bmQ6ICNkZWRlZGU7XG4gICAgYm9yZGVyOiAwO1xuICAgIGhlaWdodDogMnB4O1xuICAgIG1hcmdpbjogMTdweCAwIDA7XG59XG5cbi5sb2FkaW5nLWJ1dHRvbiB7XG4gICAgYmFja2dyb3VuZDogI2JmMzUzOTtcbiAgICBjb2xvcjogI2Y3ZmRmODtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgZm9udC1zaXplOiAxNXB4O1xuICAgIGZvbnQtd2VpZ2h0OiBib2xkO1xuICAgIHBhZGRpbmc6IDE0cHggMDtcbn1cblxuLmxvYWRpbmctYm90dG9uIGkge1xuICAgIGNvbG9yOiAjZThkMDRhO1xufVxuXG5ib2R5Lm1vYmlsZSAubG9hZGluZy1idXR0b24ge1xuICAgIGZvbnQtc2l6ZTogMTJweDtcbn1cblxuI215LWxvY2tlci1ib2R5LW9mZmVycy1saXN0IGEge1xuICAgIGJvcmRlci1ib3R0b20td2lkdGg6IDNweCAhaW1wb3J0YW50O1xufVxuXG5cbi8qIERJRkZJQ1VMVElFUyAqL1xuXG4uZGlmZmljdWx0eSB7XG4gICAgYmFja2dyb3VuZDogcmVkO1xuICAgIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgICBjb2xvcjogI2ZmZjtcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgZm9udC1zaXplOiAxMnB4O1xuICAgIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG4gICAgcGFkZGluZzogMnB4IDVweCAycHg7XG4gICAgbWFyZ2luOiAwIDAgLTJweCAxMnB4O1xufVxuXG4uZGlmZmljdWx0eS5lYXN5IHtcbiAgICBiYWNrZ3JvdW5kOiAjNDFjMTAxO1xufVxuXG4uZGlmZmljdWx0eS5tZWRpdW0ge1xuICAgIGJhY2tncm91bmQ6ICNjZThjMTQ7XG59XG5cbi5kaWZmaWN1bHR5LmhhcmQge1xuICAgIGJhY2tncm91bmQ6ICNkNjAwMDA7XG59IiwiZ29vZ2xlIjp7ImFuYWx5dGljcy10cmFja2luZy1pZCI6IiIsImV2ZW50LXRyYWNraW5nIjoiZGlzYWJsZWQiLCJ0cmFuc2xhdGUiOiJlbmFibGVkIn0sImphdmFzY3JpcHQtY3VzdG9tIjoiLy8gWW91IGNhbiBlZGl0IGJlbG93IGhlcmVcbnZhciBoZWFkZXJJbWFnZSA9ICdodHRwczovL2J1Y2tldC5jcGFidWlsZC5jb20vdXBsb2Fkcy8xNTcwMzg5MDQzYmI5YzY3ZGFhNDhjMzM0YjE0NDU4ZmU4MDI2MmQxZmIuanBnJztcbnZhciBzaG93RGlmZmljdWx0aWVzID0gZmFsc2U7IC8vIEVpdGhlciB0cnVlIG9yIGZhbHNlXG5cbi8vIERvbid0IGVkaXQgYmVsb3cgaGVyZSFcbiQoZG9jdW1lbnQpLnJlYWR5KGZ1bmN0aW9uKCkge1xuICAgICQoJyNpbnNlcnRlZC1oZWFkZXInKS5yZW1vdmUoKTtcbiAgICAkKCcjbXktbG9ja2VyLXRvcCBzcGFuJylcbiAgICAgICAgLmh0bWwoJzxpbWcgc3JjPVwiJytoZWFkZXJJbWFnZSsnXCIgLz4nICsgXG4gICAgICAgICAgICAgICc8c3Bhbj4nK3VzZUxvY2tlclNldHRpbmdzWyd0ZXh0J11bJ2hlYWRlciddKyc8L3NwYW4+JyArXG4gICAgICAgICAgICAgICc8aHIgLz4nKTtcbiAgICAgICAgICAgICAgXG4gICAgJCgnLm15LWxvY2tlci1ib2R5LXRleHQtYm90dG9tJylcbiAgICAgICAgLmh0bWwoJzxkaXYgY2xhc3M9XCJsb2FkaW5nLWJ1dHRvblwiPicgK1xuICAgICAgICAgICAgICAgICc8aSBjbGFzcz1cImZhIGZhLXNwaW4gZmEtc3Bpbm5lclwiPjwvaT4nICtcbiAgICAgICAgICAgICAgICAnIC0gJyt1c2VMb2NrZXJTZXR0aW5nc1sndGV4dCddWydib2R5LWJvdHRvbSddICtcbiAgICAgICAgICAgICAgJzwvZGl2PicpO1xuICAgICAgICAgICAgICBcbiAgICB2YXIgbWFpbkNvbG9yID0gdXNlTG9ja2VyU2V0dGluZ3NbJ2NzcyddWydwYyddWydsb2NrZXInXVsnYm94LXNoYWRvdyddO1xuICAgICAgICAgICAgICBcbiAgICAkKCcjc3VwZXItY3VzdG9tLWNzcycpLnJlbW92ZSgpO1xuICAgICQoJ2JvZHknKVxuICAgICAgICAuYXBwZW5kKCc8c3R5bGUgaWQ9XCJzdXBlci1jdXN0b20tY3NzXCI+JyArXG4gICAgICAgICAgICAgICAgICAgICcjbXktbG9ja2VyIHtib3JkZXItY29sb3I6ICcrbWFpbkNvbG9yKycgIWltcG9ydGFudDt9JyArXG4gICAgICAgICAgICAgICAgICAgICcubG9hZGluZy1idXR0b24ge2JhY2tncm91bmQ6ICcrbWFpbkNvbG9yKycgIWltcG9ydGFudDsgY29sb3I6ICcrdXNlTG9ja2VyU2V0dGluZ3NbJ2NzcyddWydwYyddWydib2R5LW9mZmVycyddWyd0ZXh0LWJvdHRvbS1jb2xvciddKycgIWltcG9ydGFudDt9JyArXG4gICAgICAgICAgICAgICAgJzwvc3R5bGU+Jyk7XG4gICAgICAgICAgICAgICAgXG4gICAgJCgnLm51bWJlci1vZi1vZmZlcnMnKS50ZXh0KHVzZUxvY2tlclNldHRpbmdzWydvZmZlcnMnXVsnbWluLW9mZmVycyddKTtcbiAgICBcbiAgICB2YXIgZGlmZmljdWx0aWVzID0gWydFYXN5JywgJ0Vhc3knLCAnTWVkaXVtJywgJ0hhcmQnXTtcbiAgICB2YXIgZGlmZmljdWx0eUNvdW50ID0gMDtcblxuICAgICQoJyNteS1sb2NrZXItYm9keS1vZmZlcnMtbGlzdCBhJykuZWFjaChmdW5jdGlvbigpIHtcbiAgICAgICAgdmFyIGRpZmZpY3VsdHkgPSBkaWZmaWN1bHRpZXNbZGlmZmljdWx0eUNvdW50XSB8fCAnSGFyZCc7XG5cbiAgICAgICAgJCgnLmRpZmZpY3VsdHknLCB0aGlzKS5yZW1vdmUoKTtcbiAgICAgICAgXG4gICAgICAgIGlmIChzaG93RGlmZmljdWx0aWVzID09PSB0cnVlKSB7XG4gICAgICAgICAgICAkKCc+IHNwYW4nLCB0aGlzKS5hcHBlbmQoJzxkaXYgY2xhc3M9XCJkaWZmaWN1bHR5ICcrZGlmZmljdWx0eS50b0xvd2VyQ2FzZSgpKydcIj4nK2RpZmZpY3VsdHkrJzwvZGl2PicpO1xuICAgICAgICB9XG4gICAgICAgIFxuICAgICAgICBkaWZmaWN1bHR5Q291bnQrKztcbiAgICB9KTtcbn0pOyIsIm9mZmVycyI6eyJkaXNwbGF5IjoiNSIsIm1pbi1vZmZlcnMiOiIxIiwibWluLXBheW91dCI6IjEiLCJvbi1jb21wbGV0ZSI6InJlZGlyZWN0IiwicmVkaXJlY3QtdXJsIjoiaHR0cDovL2NwYWJ1aWxkLmNvbS9wdWJsaWMvcmVkaXJlY3QucGhwP2xlYWRfaWQ9JWxlYWRfaWQlIiwic2hvdy10b29sdGlwcyI6ImRpc2FibGVkIn0sIm90aGVyIjp7ImFsZXJ0LWJlZm9yZS1sZWF2aW5nIjoiZGlzYWJsZWQiLCJkaXNhYmxlLXJpZ2h0LWNsaWNrIjoiZW5hYmxlZCIsImVzYy1rZXktY2xvc2UiOiJkaXNhYmxlZCIsImh1bWFuLXZlcmlmaWNhdGlvbiI6ImRpc2FibGVkIn0sInRleHQiOnsiaGVhZGVyIjoiQ2xhaW0gWW91ciBSZXNvdXJjZXMgLSBMYXN0IFN0ZXAiLCJodW1hbi12ZXJpZmljYXRpb24iOiJWZXJpZnkgVGhyb3VnaCBTdXJ2ZXkiLCJib2R5LXRvcCI6IlRvIGF2b2lkIHJvYm90IGVudHJpZXMgeW91IDxzdHJvbmc+TVVTVDwvc3Ryb25nPiBjb21wbGV0ZSBhbiBvZmZlciBmcm9tIHRoZSBsaXN0IGJlbG93IHRvIGNsYWltIHlvdXIgcmVzb3VyY2VzLjxiciAvPjxiciAvPlRoaXMgcGFnZSB3aWxsIHRoZW4gYXV0b21hdGljYWxseSB1bmxvY2sgYW5kIHlvdXIgcmVzb3VyY2VzIHdpbGwgYmUgc2VudCB0byB5b3VyIHVzZXJuYW1lLiIsImJvZHktYm90dG9tIjoiT2ZmZXIgSW5jb21wbGV0ZSEiLCJmb290ZXIiOiJDb21wbGV0ZSA8c3Ryb25nIGNsYXNzPVwibnVtYmVyLW9mLW9mZmVyc1wiPjA8L3N0cm9uZz4gb2YgdGhlIG9mZmVycyB0byB1bmxvY2sgdGhlIGNvbnRlbnQuIn19

• 5. Paste the code in the Import text box.
• 6. Click the "Import" button
• 7. Click "Save" to save your design

How to customize this Content Locker?

How to customize this Content Locker?

With this Content Locker you're able to change the number of Offers to display, as well as almost all of the text that you can see, and even the default Offer image.

To change the amount of Offers that are displayed: Click on "Offers", and adjust the "Number of Offers" value.
To change the Header image: Click on "Custom CSS & JavaScript", choose "JavaScript", and change the URL in the headerImage variable.
To change the "Claim Your Resources - Last Step" text: Click on "Design Your Content Locker", choose "Header", and change the text in the "Text" input.
To change the "To avoid robot entries ..." text: Click on "Design Your Content Locker", choose "Body > Offers", and change the text in the "Top Text" input.
To change the "Offer Incomplete!" text: Click on "Design Your Content Locker", choose "Body > Offers", and change the text in the "Bottom Text" input.
To change the "Complete 1 of the offers to unlock ..." text: Click on "Design Your Content Locker", choose "Footer", and change the text in the "Bottom Text" input.
To change the border color and "Offer Incomplete!" background color: Click on "Design Your Content Locker", choose "Content Locker", and change the value in the "Border Shadow Color" input.
To enable or disable Difficulties: Click on "Custom CSS & JavaScript", choose "JavaScript", and change the showDifficulties variable to either true (show) or false (hide).

How do I use this Content Locker on my Landing Page?

If you're using CPABuild's Templates as your Landing Pages, visit the Global Links page, and click the "Edit" button next to each Template you want to use your new Content Locker on. Once you've pressed "Edit", just choose your new Mobile Locker and then press "Save".

If you're using custom Landing Pages, visit the Content Locker Code page, choose the Content Locker(s) you want to use, and then click "Generate Code". Follow the instructions depending on how you want to implement your Content Locker into your Landing Page.